/* Every value the hero uses lives here. Pages and atoms reference these by name. */

/* Almarai 400 for the hero line, captain's choice. */
@font-face {
  font-family: "Almarai";
  src: url("../fonts/almarai-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist for everything else, one variable file. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Greys: hue 180 at very low saturation, so they sit with the mint without reading as tinted. */
  --g-0: #ffffff;
  --g-25: #fbfcfc;       /* page ground, chroma close to 0 like the reference's rgb 253 253 253 */
  --g-50: #f3f6f5;       /* right-hand slab side, one step of light */
  --g-100: #e7eceb;      /* slab grid lines */
  --g-200: #d3dbd9;      /* inset borders, quiet button hairline */
  --g-300: #b6c1bf;      /* dashed routes that were not chosen */
  --g-400: #8d9997;      /* orbits and ghost outlines, decorative only */
  --g-500: #5f6b69;      /* tertiary text, 5.3:1 on ground */
  --g-600: #4a5553;      /* secondary text, 7.4:1 on ground */
  --g-700: #333c3a;      /* slab edges */
  --g-900: #141a19;      /* ink, 17.6:1 on ground */

  /* Mint: rebuilt around the two brand values in zineps.com's stylesheet. */
  --m-50: #eefaf7;
  --m-100: #dcf3ee;
  --m-200: #b9e6dd;
  --m-400: #70cab9;      /* brand mint, fills only */
  --m-600: #1c9483;      /* strokes and dots on white, 3.4:1 as a graphic */
  --m-700: #0f7f75;      /* brand dark teal, primary button, 4.9:1 with white */
  --m-800: #0b635b;      /* primary hover */
  --m-900: #084540;      /* primary press */

  /* Spacing scale, base 16. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-11: 160px;   /* the step above 128, so sections can breathe further apart */

  /* Three type sizes for the whole page, all on the 4px grid (captain: "not more than 3 font sizes on entire page").
     Desktop 60 / 20 / 16; phones swap the 60 for 40, so any one rendering still has three. */
  --t-display-lg: 60px;   /* captain's spec for the hero line, and every section heading */
  --t-display-sm: 40px;
  --t-lede: 20px;
  --t-ui: 16px;

  --lh-display: 1;       /* 60 on 60, captain's spec; 40 on 40 on phones */
  --lh-lede: 1.4;        /* 20 on 28 */
  --lh-ui: 1.5;          /* 16 on 24; with 12 padding a button lands on 48 */
  --lh-figure: 1.2;      /* 20 on 24, single-line proof figures */
  --lh-meta: 1.5;        /* 16 on 24 where it wraps */

  --tracking-display: 0;   /* normal; Almarai's word spaces close up under negative tracking */
  --tracking-lede: -0.005em;
  --tracking-ui: 0;

  --w-regular: 400;

  --radius: 8px;
  --radius-pill: 999px;  /* fully round: the coverage legend */
  --radius-inner: 4px;   /* items inside an 8px surface with 4px padding stay concentric */
  --hairline: 1px;
  --focus-ring: 2px;
  --focus-gap: 2px;

  /* Buttons, built the way the captain's reference builds them: a face lit from
     above. The fill falls 6 lightness points from top to bottom, the border sits
     one step under the gradient's bottom, a white highlight catches the top
     edge, a 1px hard edge under it is the button's own thickness, and a soft
     shadow puts it on the page. Pressing drops the edge and the shadow and moves
     the face down 1px, so the light model does the behaving.
     Our ramp already carries the reference's own deltas: --m-700 to --m-800 is
     6.2 points against its 6, and --g-0 to --g-100 is 8.4 against its 8. */
  --btn-edge: #c4cecc;                                 /* 80% L, 4 under --g-200, the gap the reference keeps */
  --btn-hi: rgba(255, 255, 255, 0.22);                 /* its #ffffff38, on a dark face */
  --btn-hi-light: rgba(255, 255, 255, 0.9);            /* its #ffffffe6, on a light one */
  --btn-hi-press: rgba(255, 255, 255, 0.15);           /* its #ffffff26, all that survives a press */
  --btn-hi-hover: rgba(255, 255, 255, 0.3);            /* the highlight brightening under the pointer */
  --btn-press-light: inset 0 1px 0 rgba(20, 26, 25, 0.06);   /* what a light face keeps when pressed */
  --btn-contact: 0 2px 4px rgba(20, 26, 25, 0.08);     /* its 0 2px 4px #14131214 */
  --btn-contact-hover: 0 3px 8px rgba(20, 26, 25, 0.12);
  --btn-press: translateY(1px);
  --dur-press: 120ms;                                  /* its .12s */
  --ease-press: cubic-bezier(0.2, 0.7, 0.2, 1);        /* its cubic-bezier(.2, .7, .2, 1) */

  --shadow-press: inset 0 1px 0 rgba(20, 26, 25, 0.16);

  --measure-display: 480px;   /* holds the hero line to two lines at 60 */
  --measure-lede: 520px;   /* about 50 characters a line at 20px */

  --skip-hide: translateY(-200%);   /* parks the skip link above the viewport until it takes focus */
  --figure-col: 64px;               /* widest proof figure, "1000+" at 18px, plus room */

  --control-h: 48px;
  --header-h: 64px;
  --logo-h: 24px;
  --icon-btn: 32px;
  --icon-glyph: 16px;
  --content-max: 1440px;   /* one width for every section, 1312 of content inside 64 gutters */
  --art-max-lg: 600px;   /* 600 wide is 738 tall, which still keeps the stack inside a 900 high window */
  --art-max-sm: 480px;
  --art-ratio: 520 / 640;

  /* Illustration strokes, in screen pixels because every stroke is non-scaling. */
  --stroke-glyph: 1.5px;
  --dash-orbit: 3 4;
  --dash-ghost: 4 4;

  /* Split sign-up button, measured off the captain's reference (84 high): side padding 30 (0.36 of height),
     chevron segment 69 wide (0.82 of height), chevron 20 by 11, bottom edge darker than the top. */
  --split-toggle-w: 40px;
  --split-edge: inset 0 1px 0 var(--btn-hi-light), 0 0 0 var(--hairline) var(--g-200), 0 var(--hairline) 0 var(--hairline) var(--btn-edge), var(--btn-contact);
  --menu-min-w: 224px;
  --menu-item-h: 40px;
  --shadow-menu: 0 0 0 var(--hairline) var(--g-200), 0 4px 8px rgba(20, 26, 25, 0.1);
  --menu-enter: translateY(-4px);
  --turn-half: rotate(180deg);

  /* Dashboard tour. Pointers sit beside the real dashboard, each on the row of what it points at. */
  --lh-title: 1.6;        /* 20 on 32, the same height as the icon, so title and icon share a centre */
  --s-10: 128px;
  --pointer-w: 264px;
  --tour-gap: 32px;
  --pointer-space: 8px;   /* least room between two pointers in a column before the layout stacks */
  --dash-min: 560px;      /* below this the rows of the + button and the rules icon sit too close for two pointers */
  --dash-stacked: 880px;  /* when pointers stack, the dashboard stays near the hero illustration's size */
  --dash-max: 760px;
  --pointer-icon: 32px;
  --pointer-mid: 16px;
  --pointer-lift: translateY(-16px);
  --beacon: 12px;
  --beacon-ring: 0 0 0 4px var(--g-0), 0 1px 4px 4px rgba(20, 26, 25, 0.12);
  --beacon-pulse-from: 0 0 0 4px var(--g-0), 0 0 0 4px rgba(28, 148, 131, 0.4);
  --beacon-pulse-to: 0 0 0 4px var(--g-0), 0 0 0 16px rgba(28, 148, 131, 0);
  --shadow-icon: 0 0 0 var(--hairline) var(--g-200), 0 1px 2px rgba(20, 26, 25, 0.06);
  --measure-tour: 560px;
  --dim: 0.45;
  --stagger: 90ms;
  --dur-draw: 560ms;
  --dur-pulse: 1600ms;
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rise: 0 8px;
  --shot-ratio: 1429 / 982;
  --crop-ratio: 6 / 5;
  --crop-box: inset(0 41% 28.5% 0);   /* phones show the dashboard's left 59% and top 71.5%, where its text is */

  /* Ways to ship: one lead card for partner rates, two cards for shops and businesses. */
  --measure-card: 560px;          /* about 70 characters a line at 16px; the lead card is wider than that */
  --measure-ways: 720px;          /* holds the section heading to two lines at 60 */
  --art-lead: 320px;              /* least height of the lead card's drawing; it grows with the card */
  --art-card: 240px;
  --ui-w: 400px;
  --ui-w-sm: 320px;
  --rate-bar-w: 96px;
  --rate-bar-w-sm: 56px;
  --bar-h: 8px;
  --step-dot: 16px;
  --label-w: 96px;
  --label-tilt: rotate(6deg);
  --chip-h: 32px;
  --wire-w: 32px;
  --branch-w: 48px;
  --branch-h: 104px;          /* three 32px chips with 4px between; the branch ends meet their centres */
  --pallet-w: 120px;
  --pop-from: scale(0.6);
  --step-pulse-from: inset 0 0 0 2px var(--m-600), 0 0 0 0 rgba(28, 148, 131, 0.4);
  --step-pulse-to: inset 0 0 0 2px var(--m-600), 0 0 0 8px rgba(28, 148, 131, 0);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);


  /* Why Zineps bento. Twelve columns, one fixed row height, four cell ranks.
     The gutter is 24 against 32 of cell padding (1 : 1.33). The references band
     is 1 : 0.8 to 1 : 1.1 (raycast 30/24, vercel 20/20, bindplane 32/32), but
     32 of cell padding is already locked by .card in the section above, and a
     32 gutter here would make the bento looser than the grid over it. */
  --bento-gap: 24px;
  --bento-row: 440px;            /* the grid sets the height; content never stretches a cell */
  --measure-intro: 260px;        /* the lead cell's copy column beside the drawing */
  --iso-w: 520px;                /* the platform drawing's column inside the lead cell */
  --globe-w: 320px;
  --tile-h: 76px;                /* logo tile: a 40 mark inside 16 padding, plus room for the lamp */
  --tile-mark: 40px;             /* the tallest a brand mark is drawn in a wall tile */
  --wall-min: 480px;             /* the logo wall's least height once the tall cell stops spanning */
  --chart-h: 128px;              /* 32 rows of 4 */
  --target-h: 0.58;              /* where the 750 line crosses the bars */

  /* CTA and FAQ. The subscribe control is one object under one keyline, the way
     the header's sign-up button is built; its button takes 128 of 480, 27%,
     against the 25% the newsletter reference measures. The FAQ row is 64 with a
     16 gap, 25%, against the reference's 9 on a 40 row, 22%. */
  --measure-cta: 480px;          /* the lead column's copy and the subscribe control */
  --measure-value: 320px;        /* one reason's body in the 2 by 2 */
  --measure-faq-head: 320px;
  --measure-qa: 640px;           /* about 80 characters a line at 16px */
  --field-go: 128px;
  --qa-row: 64px;                /* 20 on a 32 line inside 16 padding */
  --c-bad: #b3261e;              /* the one error ink, 5.9:1 on the page ground */

  /* The footer label. One type size throughout, which 4 of the 6 measured
     product footers do, and which keeps the page at its three sizes. */
  --from-col: 320px;             /* the FROM block, wider because an address sets longer lines than a link */
  --barcode-h: 40px;

  --z-art-control: 1;
  --z-menu: 10;
}