/* ==========================================================================
   tokens.css — fonts, colour tokens and type styles
   --------------------------------------------------------------------------
   Owner: designer. Rebuilt from the Framer reference (ref/index.html).
   1. @font-face        — local copies, same family names as Framer
   2. Font stacks        — the exact stacks Framer uses (incl. "… Placeholder")
   3. Colour tokens      — every Framer --token-* (readable name + alias)
                           + the SAIS custom-code palette
   4. Base               — font smoothing + text selection colours
   5. Type styles        — one class per Framer text preset, with the
                           Tablet (810–1199) and Phone (<810) overrides
   Breakpoints (Framer): Desktop >= 1200 · Tablet 810–1199.98 · Phone < 810
   Full mapping table: docs/design.md
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. @font-face
   -------------------------------------------------------------------------- */

/* thmanyah serif display — custom fonts uploaded to Framer (one file each,
   no unicode-range, same as the reference). */
@font-face {
  font-family: "thmanyah serif display Regular";
  src: url("../fonts/D3FJuefFkwujlhv7motelcxXP4.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "thmanyah serif display Bold";
  src: url("../fonts/rr1nqTnEDEZ0JxjHNdnRm6q0jdY.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}
/* Black: only referenced as the <strong> face of the display preset
   (.t-display strong). Not rendered on the current home page; the browser
   only downloads it if a <strong> appears in a .t-display element. */
@font-face {
  font-family: "thmanyah serif display Black";
  src: url("../fonts/nnypLYbKUZkzxb2fSq2xv8ipY.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
}

/* thmanyah sans */
@font-face {
  font-family: "thmanyah sans Regular";
  src: url("../fonts/zvtIX3lfoEatRXmuaEhn4EhOESo.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "thmanyah sans Medium";
  src: url("../fonts/WrV7fIGa1u2iMigz3mcvfnsyM.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "thmanyah sans Bold";
  src: url("../fonts/0SzM07uZ5RKGQlPCh6YyxMpGsaM.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

/* Google Sans Flex (variable). Used for the "[ ]" glyphs around nav/footer
   links and the phone footer copyright, always with
   font-variation-settings "opsz" 18, "wdth" 100, "wght" 425 … */
@font-face {
  font-family: "Google Sans Flex Variable";
  font-style: oblique 0deg 10deg;
  font-weight: 1 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("../fonts/google-sans-flex-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Google Sans Flex Variable";
  font-style: oblique 0deg 10deg;
  font-weight: 1 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("../fonts/google-sans-flex-subset-latin.woff2") format("woff2"); /* v3: subset (ASCII + © · quotes), opsz 18 / wdth 100 pinned, wght 400–625 kept — 22 KB instead of 1.37 MB */
  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;
}

/* Fragment Mono — the Interactive ASCII font. The unicode-range is kept
   verbatim on purpose: the block glyphs █▓▒░ (U+2588–2593) are NOT in these
   subsets, so — exactly like the reference — they fall back to the system
   monospace font. Only "W" (aspect measurement) and the "detailed" ASCII set
   are drawn with Fragment Mono itself. No font-display (same as Google CSS). */
@font-face {
  font-family: "Fragment Mono";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fragment-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fragment Mono";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fragment-mono-400-latin.woff2") format("woff2");
  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;
}

/* Inter — only the language chip ("EN") renders in Inter (400, 14px). */
@font-face {
  font-family: "Inter";
  src: url("../fonts/JeYwfuaPfZHQhEG8U5gtPDZ7WQ.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks (Framer's "… Placeholder" faces). They keep line
   boxes the same size while the real fonts load (font-display: swap). */
@font-face {
  font-family: "thmanyah serif display Regular Placeholder";
  src: local("Times New Roman");
  ascent-override: 80.56%; descent-override: 20.14%; line-gap-override: 0.00%; size-adjust: 124.13%;
}
@font-face {
  font-family: "thmanyah serif display Bold Placeholder";
  src: local("Times New Roman");
  ascent-override: 80.26%; descent-override: 20.06%; line-gap-override: 0.00%; size-adjust: 124.60%;
}
@font-face {
  font-family: "thmanyah sans Regular Placeholder";
  src: local("Arial");
  ascent-override: 96.94%; descent-override: 24.23%; line-gap-override: 0.00%; size-adjust: 103.16%;
}
@font-face {
  font-family: "thmanyah sans Medium Placeholder";
  src: local("Arial");
  ascent-override: 94.48%; descent-override: 23.62%; line-gap-override: 0.00%; size-adjust: 105.85%;
}
@font-face {
  font-family: "thmanyah sans Bold Placeholder";
  src: local("Arial");
  ascent-override: 92.66%; descent-override: 23.17%; line-gap-override: 0.00%; size-adjust: 107.92%;
}
@font-face {
  font-family: "Google Sans Flex Variable Placeholder";
  src: local("Arial");
  ascent-override: 94.61%; descent-override: 28.01%; line-gap-override: 0.00%; size-adjust: 102.10%;
}
@font-face {
  font-family: "Inter Placeholder";
  src: local("Arial");
  ascent-override: 89.79%; descent-override: 22.36%; line-gap-override: 0.00%; size-adjust: 107.89%;
}


/* --------------------------------------------------------------------------
   2. Font stacks (verbatim from Framer)
   -------------------------------------------------------------------------- */
:root {
  --font-serif-regular: "thmanyah serif display Regular", "thmanyah serif display Regular Placeholder", serif;
  --font-serif-bold:    "thmanyah serif display Bold", "thmanyah serif display Bold Placeholder", serif;
  --font-serif-black:   "thmanyah serif display Black", "thmanyah serif display Black Placeholder", serif;
  --font-sans-regular:  "thmanyah sans Regular", "thmanyah sans Regular Placeholder", sans-serif;
  --font-sans-medium:   "thmanyah sans Medium", "thmanyah sans Medium Placeholder", sans-serif;
  --font-sans-bold:     "thmanyah sans Bold", "thmanyah sans Bold Placeholder", sans-serif;
  --font-flex:          "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  --font-mono:          "Fragment Mono", "Fragment Mono Placeholder", monospace; /* ASCII component */
  --font-inter:         "Inter", "Inter Placeholder", sans-serif;

  /* Google Sans Flex axis presets used by Framer (wght differs per preset) */
  --flex-axes-425: "opsz" 18, "wdth" 100, "wght" 425, "GRAD" 0, "ROND" 0, "slnt" 0;
  --flex-axes-475: "opsz" 18, "wdth" 100, "wght" 475, "GRAD" 0, "ROND" 0, "slnt" 0;
  --flex-axes-525: "opsz" 18, "wdth" 100, "wght" 525, "GRAD" 0, "ROND" 0, "slnt" 0;
  --flex-axes-575: "opsz" 18, "wdth" 100, "wght" 575, "GRAD" 0, "ROND" 0, "slnt" 0;
  --flex-axes-625: "opsz" 18, "wdth" 100, "wght" 625, "GRAD" 0, "ROND" 0, "slnt" 0;
}


/* --------------------------------------------------------------------------
   3. Colour tokens
   -------------------------------------------------------------------------- */
:root {
  /* 3a. Framer colour tokens — readable name, original id in the comment.
         Values are the ones Framer actually declares on <body> (they win over
         the rgb() fallbacks written inline in the markup). */
  --c-white:            #fff;        /* token-358f9ea8-35a8-474d-aea3-3d32a4090f35 — text on green/black buttons */
  --c-black:            #000;        /* token-285ef153-d569-42f5-b925-84d6d4b8fa63 — black fills (button bg, blur bar, active ladder chip) */
  --c-black-5:          #0000000d;   /* token-fe732e94-f30f-4945-91af-015cdcf1f937 — 5% black fill (menu button, chips) */
  --c-black-10:         #0000001a;   /* token-c501e0d1-c10e-4ef2-baa7-db83ded46808 — 10% black hairline (menu button border) */
  --c-text-secondary:   #545454;     /* token-66b6d7ff-ba33-4d69-8906-b2633b6d4a86 — body copy grey (SAIS ink-swap repaints it #6f7268) */
  --c-text-primary:     #000;        /* token-6e6e337d-28cc-44d1-a0da-bb7b5b6c59e1 — preset text colour (SAIS ink-swap repaints it #141512) */
  --c-border:           #dedede;     /* token-7e7d9213-6afe-4309-afa8-7dccf478cb0d — hairline borders (cards, dividers) */
  --c-page-bg:          #fbf8f8;     /* token-6c8d10ba-463b-4990-b64f-32918ca2d4f2 — page / template background */
  --c-icon:             #000;        /* token-d8ccb723-1f35-4e56-aba6-0694e1de791e — SVG icon fill (--62mhw / --1wtrary) */
  --c-icon-muted:       #6b6e64;     /* token-ee24881a-d59f-4831-81c5-31b2a73efdd2 — +/× accordion icon, arrows. v2: was #787878, warmed + darkened (4.3:1+ on every band) */
  --c-text-tertiary:    #6b6e64;     /* token-184dcff3-e572-4075-ade0-8c6d8e309c5e — grey text inside nav/footer component. v2: was #787878 (4.2:1, failed AA) */
  --c-icon-light:       #a1a1a1;     /* token-67254f3c-b607-431f-8193-1d669a2bdcca — accordion icon, alternate variant */
  --c-black-alt-1:      #000;        /* token-0375e251-61b8-4925-a799-386df3afe9b8 — declared, unused on home */
  --c-diagram:          #333;        /* token-8a48a509-d30c-45be-ab76-ca7d93a6ff7a — integration diagram lines + nodes (CSS repaints nodes #12130f) */
  --c-black-10-hover:   #0000001a;   /* token-71d4309d-2a6d-4aaa-bb59-7fc6ce2d6262 — secondary button hover fill */
  --c-text-label:       #333;        /* token-70c2ae7b-a5e6-4414-a82e-94a47fd10245 — .t-label preset colour */
  --c-black-3:          #00000008;   /* token-1f4a9512-b90d-4ca4-bb0a-8c8034c20bcc — declared, unused on home */
  --c-border-strong:    #bdbdbd;     /* token-95a8f7e0-de26-4a21-abd8-7324f048c094 — button + feature-card borders */
  --c-icon-on-dark:     #fff;        /* token-72a59867-6fb7-4e45-af48-7fdda01d52cf — icon fill on dark buttons */
  --c-cal-brand:        #fff;        /* token-18b15b83-4ec0-475b-b37c-540277e0faa8 — Cal.com embed brand colour (light + dark theme) */
  --c-nav-link:         #636363;     /* token-813ec4a8-3f64-40f4-ae75-c758ceafa922 — nav/footer link text + "[ ]" glyphs */
  --c-green:            #16a34a;     /* token-19bed0b5-c586-49d3-b40e-9867aec7f20a — accent green; ::selection text colour */
  --c-selection-bg:     #5b9cfc33;   /* token-4a1e7493-0681-4389-9ee4-885b715421ed — ::selection background */
  --c-green-deep:       #14532d;     /* token-2035a202-617c-4af0-aa75-ad99be73f16c — "AI-native." accent text, green CTA ("Tint") */
  --c-surface:          #f7f7f7;     /* token-88de8be5-fdc6-43ad-98d5-dc2e7d77e5cc — card faces ("Secondary") */
  --c-black-alt-2:      #000;        /* token-60c35037-d3eb-4419-8c24-e6ccda86fba2 — declared, unused on home */
  --c-green-deeper:     #0f3d22;     /* token-74f0a186-517f-42e6-9594-419eaad265e0 — green CTA hover fill */
  --c-surface-2:        #ededed;     /* token-487debdd-9588-4cf5-b389-1f7017cbcedd — stage card face */
  --c-line:             #000;        /* token-50035390-3908-4921-abeb-233ceaab1b03 — dashed timeline/ladder border colour */
  --c-red:              #f24;        /* token-0492d6f2-d22d-49e2-88a7-a7e4b06bd484 — declared, unused on home */
  --c-red-15:           #ff224426;   /* token-b06755cf-e72e-4b54-b92e-df84e1441a16 — declared, unused on home */
  --c-gray:             gray;        /* token-4e110321-98f8-47ee-937e-751736baa2db — declared, unused on home */
  --c-transparent:      #0000;       /* token-6d5ee4b8-b586-4209-ba49-2bd9ee06fba3 — declared, unused on home */
  --c-black-alt-3:      #000;        /* token-f3a0c9ff-8414-4b74-ab31-ac24b461709f — declared, unused on home */
  --c-black-alt-4:      #000;        /* token-8d93de31-742e-4952-a5e4-180cad41a568 — declared, unused on home */

  /* 3b. Aliases with the original Framer names, so markup or values copied
         from Framer (var(--token-…, fallback)) keep resolving. */
  --token-358f9ea8-35a8-474d-aea3-3d32a4090f35: var(--c-white);
  --token-285ef153-d569-42f5-b925-84d6d4b8fa63: var(--c-black);
  --token-fe732e94-f30f-4945-91af-015cdcf1f937: var(--c-black-5);
  --token-c501e0d1-c10e-4ef2-baa7-db83ded46808: var(--c-black-10);
  --token-66b6d7ff-ba33-4d69-8906-b2633b6d4a86: var(--c-text-secondary);
  --token-6e6e337d-28cc-44d1-a0da-bb7b5b6c59e1: var(--c-text-primary);
  --token-7e7d9213-6afe-4309-afa8-7dccf478cb0d: var(--c-border);
  --token-6c8d10ba-463b-4990-b64f-32918ca2d4f2: var(--c-page-bg);
  --token-d8ccb723-1f35-4e56-aba6-0694e1de791e: var(--c-icon);
  --token-ee24881a-d59f-4831-81c5-31b2a73efdd2: var(--c-icon-muted);
  --token-184dcff3-e572-4075-ade0-8c6d8e309c5e: var(--c-text-tertiary);
  --token-67254f3c-b607-431f-8193-1d669a2bdcca: var(--c-icon-light);
  --token-0375e251-61b8-4925-a799-386df3afe9b8: var(--c-black-alt-1);
  --token-8a48a509-d30c-45be-ab76-ca7d93a6ff7a: var(--c-diagram);
  --token-71d4309d-2a6d-4aaa-bb59-7fc6ce2d6262: var(--c-black-10-hover);
  --token-70c2ae7b-a5e6-4414-a82e-94a47fd10245: var(--c-text-label);
  --token-1f4a9512-b90d-4ca4-bb0a-8c8034c20bcc: var(--c-black-3);
  --token-95a8f7e0-de26-4a21-abd8-7324f048c094: var(--c-border-strong);
  --token-72a59867-6fb7-4e45-af48-7fdda01d52cf: var(--c-icon-on-dark);
  --token-18b15b83-4ec0-475b-b37c-540277e0faa8: var(--c-cal-brand);
  --token-813ec4a8-3f64-40f4-ae75-c758ceafa922: var(--c-nav-link);
  --token-19bed0b5-c586-49d3-b40e-9867aec7f20a: var(--c-green);
  --token-4a1e7493-0681-4389-9ee4-885b715421ed: var(--c-selection-bg);
  --token-2035a202-617c-4af0-aa75-ad99be73f16c: var(--c-green-deep);
  --token-88de8be5-fdc6-43ad-98d5-dc2e7d77e5cc: var(--c-surface);
  --token-60c35037-d3eb-4419-8c24-e6ccda86fba2: var(--c-black-alt-2);
  --token-74f0a186-517f-42e6-9594-419eaad265e0: var(--c-green-deeper);
  --token-487debdd-9588-4cf5-b389-1f7017cbcedd: var(--c-surface-2);
  --token-50035390-3908-4921-abeb-233ceaab1b03: var(--c-line);
  --token-0492d6f2-d22d-49e2-88a7-a7e4b06bd484: var(--c-red);
  --token-b06755cf-e72e-4b54-b92e-df84e1441a16: var(--c-red-15);
  --token-4e110321-98f8-47ee-937e-751736baa2db: var(--c-gray);
  --token-6d5ee4b8-b586-4209-ba49-2bd9ee06fba3: var(--c-transparent);
  --token-f3a0c9ff-8414-4b74-ab31-ac24b461709f: var(--c-black-alt-3);
  --token-8d93de31-742e-4952-a5e4-180cad41a568: var(--c-black-alt-4);

  /* 3c. SAIS custom-code palette. The live site layers the owner's custom
         CSS + "SAIS runtime" script (ref/index.html <style> #4 and <script> #2)
         on top of Framer; these are the colours that actually render. */
  --sdia-ink:            #141512;   /* every #000 text outside dark bands (JS ink-swap) */
  --sdia-ink-muted:      #5d6057;   /* body grey. v2: was #6f7268 (4.4:1 on sand/mint, failed AA) -> 5.3:1 on the darkest paper, 6.1:1 on --paper */
  --sdia-band:           #12130f;   /* dark first viewport (Hero + Customers), footer, dark nav, integration nodes */
  --sdia-paper:          #fafaf9;   /* page colour below the dark band; text on dark; light nav (at 0.97 alpha) */
  --sdia-on-dark:        #e7e5df;   /* footer text, "Trusted by people at"; also the light card hairline */
  --sdia-on-dark-dim:    #b9b7b0;   /* Customers text (superseded by --sdia-on-dark on the home page) */
  --sdia-green-bright:   #22c55e;   /* "we are here." label */
  --sdia-green-tint:     #f0f7f1;   /* Active ladder stage, "Our Assumptions" band */
  --sdia-dashed:         #d9d5cd;   /* 1px dashed card borders (Prose, Proof cards, Stage pads), Secondary chip border */
  --sdia-sand:           #f4f2ec;   /* about/contact bands (not on the home page) */
  --sdia-cta-black:      #111111;   /* "Get in Touch" pill on the light nav */
  --sdia-nav-light-bg:   rgba(250, 250, 249, 0.97);
  --sdia-hero-glow:      rgba(22, 163, 74, 0.14); /* radial glow behind hero copy (to 0.05 at 45%, transparent 70%) */
}


/* --------------------------------------------------------------------------
   3d. v2 PAPER PALETTE — one warm paper family for every light surface.
       The original alternated unrelated off-whites (#fafaf9 page, #f4f2ec
       yellow sand, #f0f7f1 mint, #fbf8f8 pinkish page token, #f7f7f7 cool grey
       cards, #ededed chips, #dedede / #bdbdbd neutral rules). v2 keeps the page
       colour and puts everything else on the same warm axis:

         --paper        #fafaf9  page (Solution, Ladder, Integrations, Testimonials, FAQ, Sources)
         --paper-stone  #f3f2ee  alternate band (Two Ways In, How We Work, Book A Call)
         --paper-mint   #eef5ef  the "capabilities & beliefs" band (Features, Our Assumptions)
                                 + the active ladder stage — kept on purpose: it is the only
                                 tinted band and it echoes the brand green
         --paper-card   #ffffff  raised cards (white sheets on paper)
         --paper-inset  #f5f4ef  recessed faces inside cards (points, accordion rows, info cards)
         --paper-chip   #ebe9e3  grey chips
         --rule         #dfdcd4  hairlines / dashed outlines (was #dedede)
         --rule-strong  #c2bdb2  stronger dashed outlines (was #bdbdbd)
         --rule-band    #e8e5dd  1px seam where two bands meet (effects.css)

       Stone and mint sit at the same lightness (L* ~96) so every band change
       is the same visual step; paper is one step lighter.
   -------------------------------------------------------------------------- */
:root {
  --paper:        #fafaf9;
  --paper-stone:  #f3f2ee;
  --paper-mint:   #eef5ef;
  --paper-card:   #ffffff;
  --paper-inset:  #f5f4ef;
  --paper-chip:   #ebe9e3;
  --rule:         #dfdcd4;
  --rule-strong:  #c2bdb2;
  --rule-band:    #e8e5dd;
  --icon-ink:     #6b6e64;   /* grey icons + small grey labels (4.3:1+ on every paper) */

  /* focus ring (effects.css): brand green, darker on light paper so it keeps
     >= 3:1 against every surface, brighter on the dark band */
  --focus-ring:        #15803d;   /* 4.1:1 – 5.0:1 on the papers */
  --focus-ring-dark:   #22c55e;   /* 8.2:1 on #12130f */

  --sdia-green-tint:   var(--paper-mint);
  --sdia-sand:         var(--paper-stone);
  --c-page-bg:         var(--paper);
  --c-surface:         var(--paper-inset);
  --c-surface-2:       var(--paper-chip);
  --c-border:          var(--rule);
  --c-border-strong:   var(--rule-strong);
}

/* Bridge: style.css declares its own local palette in :root (it loads after
   this file). These !important declarations point those names at the paper
   palette above, so the palette lives in ONE place. Layout may replace the
   hex values in style.css with var(--paper-*) and then delete this block. */
:root {
  --band-sand:    var(--paper-stone) !important;
  --band-mint:    var(--paper-mint) !important;
  --page-bg:      var(--paper) !important;
  --surface-card: var(--paper-inset) !important;
  --surface-chip: var(--paper-chip) !important;
  --line-hair:    var(--rule) !important;
  --line-strong:  var(--rule-strong) !important;
  --icon-grey:    var(--icon-ink) !important;
}


/* --------------------------------------------------------------------------
   4. Base (type rendering only — layout lives in style.css)
   -------------------------------------------------------------------------- */
:root {
  -webkit-font-smoothing: antialiased;   /* Framer :root */
  -moz-osx-font-smoothing: grayscale;
}
/* Framer page root: [data-selection=true] * ::selection */
::selection {
  color: var(--c-green);
  background-color: var(--c-selection-bg);
}


/* --------------------------------------------------------------------------
   5. Type styles (Framer text presets)
   --------------------------------------------------------------------------
   Each class = one framer-styles-preset-*. Properties are the resolved
   --framer-* variables. NOT set here (on purpose):
     - text-align: Framer presets carry a default alignment, but almost every
       element overrides it inline; layout sets alignment (see docs/design.md).
     - paragraph spacing: exposed as --t-para-spacing; wrap multi-paragraph
       text in .rich to get Framer's margin between paragraphs.
   Colour = the preset token as it renders after the SAIS ink-swap
   (#000 → --sdia-ink). Per-element colour overrides are listed in design.md.
   <strong> inside a preset uses the preset's "bold" face, as in Framer.
   -------------------------------------------------------------------------- */

/* Multi-paragraph container (Framer: p:not(:first-child) margin-top) */
.rich > :not(:first-child) { margin-top: var(--t-para-spacing, 0); }

/* Shared reset for text elements that carry a type class */
.t-display, .t-heading, .t-card-heading, .t-title, .t-title-tight, .t-body,
.t-button, .t-caption, .t-small, .t-label, .t-micro, .t-footnote, .t-locale {
  margin: 0;
  padding: 0;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
  font-feature-settings: normal;
}

/* 1xgagrl — .t-display — hero H1 "We help Saudi companies become AI-native."
   Desktop 56/1.35 · Tablet 56 · Phone 46 (preset). Default align: center. */
.t-display {
  font-family: var(--font-serif-bold);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.35em;
  letter-spacing: 0em;
  color: var(--sdia-ink);
  font-variation-settings: normal;
  --t-para-spacing: 0px;
}
.t-display strong { font-family: var(--font-serif-black); font-weight: 900; }

/* Phone-only hero H1: on phones Framer swaps in a separate H1 that has NO
   preset, inline: thmanyah serif display Bold 40px / 1.35em, weight 700.
   Use as `.t-display.t-hero` on the hero H1 (the 40px rule is in the
   Phone block at the end of this file). */

/* or66bk — .t-heading — section headings (rendered as <h3>):
   "Engineered Core Capabilities.", "What we connect", "How We Work"…
   Desktop 46/1.2 · Tablet 40 · Phone 34. Default align: center. */
.t-heading {
  font-family: var(--font-serif-regular);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.2em;
  letter-spacing: 0em;
  color: var(--sdia-ink);
  font-variation-settings: normal;
  --t-para-spacing: 40px;
}
.t-heading strong { font-family: var(--font-flex); font-weight: 400; font-variation-settings: var(--flex-axes-525); }
/* SAIS custom CSS: the headings of The Solution, Two Ways In and Adoption
   Ladder are forced to "thmanyah serif display Bold" 700 (their green accent
   span keeps the Regular face — give the span .t-heading-accent). */
.t-heading--bold { font-family: "thmanyah serif display Bold", "thmanyah serif display Regular", serif; font-weight: 700; }
.t-heading-accent { font-family: var(--font-serif-regular); font-weight: 400; color: var(--c-green-deep); }

/* c7r8r4 — .t-card-heading — stage / offer card titles:
   "Foundation", "Audit & Build", "Partnership", "AI Leadership Workshop".
   26/1.6, +0.01em, all breakpoints. Default align: left. */
.t-card-heading {
  font-family: var(--font-serif-bold);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.6em;
  letter-spacing: 0.01em;
  color: var(--sdia-ink);
  font-variation-settings: normal;
  --t-para-spacing: 40px;
}
.t-card-heading strong { font-family: var(--font-serif-bold); font-weight: 700; }

/* 79bu04 — .t-title — feature titles, assumption + FAQ questions,
   integration node labels: "Governance Automation", "What do you actually deliver?"
   thmanyah sans Medium 18/1.6, +0.01em, all breakpoints. Default align: left. */
.t-title {
  font-family: var(--font-sans-medium);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6em;
  letter-spacing: 0.01em;
  color: var(--sdia-ink);
  font-variation-settings: normal;
  --t-para-spacing: 20px;
}
.t-title strong { font-family: var(--font-flex); font-weight: 400; font-variation-settings: var(--flex-axes-525); }

/* ccv9s9 — .t-title-tight — card heads + list items:
   "Enable - for companies starting from zero", "01 - Scattered",
   "Hands-on AI training for every department", footer "SAIS".
   thmanyah sans Medium 18/1.4, +0.01em, all breakpoints. Default align: center. */
.t-title-tight {
  font-family: var(--font-sans-medium);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4em;
  letter-spacing: 0.01em;
  color: var(--sdia-ink);
  font-variation-settings: normal;
  --t-para-spacing: 20px;
}
.t-title-tight strong { font-family: var(--font-sans-bold); font-weight: 700; }

/* 1i4fe7d — .t-body — body copy + nav links:
   "SAIS works alongside leadership teams…", "About", "How we work".
   thmanyah sans Regular 18/1.6, +0.01em, all breakpoints. Default align: center.
   Usually muted (--sdia-ink-muted) — see design.md. */
.t-body {
  font-family: var(--font-sans-regular);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6em;
  letter-spacing: 0.01em;
  color: var(--sdia-ink);
  font-variation-settings: normal;
  --t-para-spacing: 20px;
}
.t-body strong { font-family: var(--font-sans-bold); font-weight: 700; }
/* SAIS custom CSS ([data-framer-name="Milestone Card"] p:first-child): every
   paragraph in the "Partner Timeline" milestone cards — title
   ("Strategic advisor to leadership") AND description — renders thmanyah sans Bold 700. */
.t-body--bold { font-family: "thmanyah sans Bold", sans-serif; font-weight: 700; }

/* 1ro81ui — .t-button — CTA labels + symptom titles:
   "Book a 30-minute scoping call", "Book a call", "Leadership pulling in…", "✕".
   thmanyah sans Bold 16/1.4, -0.02em, all breakpoints. Default align: center. */
.t-button {
  font-family: var(--font-sans-bold);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4em;
  letter-spacing: -0.02em;
  color: var(--sdia-ink);
  font-variation-settings: normal;
  --t-para-spacing: 20px;
}
.t-button strong { font-family: var(--font-flex); font-weight: 400; font-variation-settings: var(--flex-axes-625); }

/* 11ql9k5 — .t-caption — "Trusted by people at" (Customers ticker label).
   thmanyah sans Medium 16/1.6, +0.01em, all breakpoints. Default align: center. */
.t-caption {
  font-family: var(--font-sans-medium);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6em;
  letter-spacing: 0.01em;
  color: var(--sdia-ink);
  font-variation-settings: normal;
  --t-para-spacing: 20px;
}
.t-caption strong { font-family: var(--font-flex); font-weight: 400; font-variation-settings: var(--flex-axes-475); }

/* kmsqt2 — .t-small — eyebrow chips, ladder chips, footer text + links:
   "Enable · Govern", "The Adoption", "You are here", "Features", "Stage 1" chip,
   footer "Saudi Digital Intelligence and Automation…".
   thmanyah sans Regular 15/1.6, +0.01em, all breakpoints. Default align: left. */
.t-small {
  font-family: var(--font-sans-regular);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6em;
  letter-spacing: 0.01em;
  color: var(--sdia-ink);
  font-variation-settings: normal;
  --t-para-spacing: 20px;
}
.t-small strong { font-family: var(--font-flex); font-weight: 400; font-variation-settings: var(--flex-axes-425); }

/* Sources footnotes: kmsqt2 + SAIS custom CSS
   (section[data-framer-name="Sources"] p { font-size:10px; line-height:1.5 }).
   Use `.t-small.t-footnote`. Renders 10px / 15px, letter-spacing 0.1px. */
.t-footnote { font-size: 10px; line-height: 1.5; }

/* 13o8gvd — .t-label — small bold labels:
   "we are here.", "Stage 1"…, "MOST START HERE", "CUSTOM BUILD",
   footer column heads "Pages" / "Support".
   thmanyah sans Bold 15/1.6, +0.01em, colour #333, all breakpoints. Default align: left. */
.t-label {
  font-family: var(--font-sans-bold);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6em;
  letter-spacing: 0.01em;
  color: var(--c-text-label);
  font-variation-settings: normal;
  --t-para-spacing: 20px;
}
.t-label strong { font-family: var(--font-flex); font-weight: 400; font-variation-settings: var(--flex-axes-575); }

/* (no preset) — .t-micro — the "[" "]" glyphs around nav + footer links and
   the phone footer "©️ SAIS. All rights reserved.". Inline in Framer:
   Google Sans Flex Variable 13px / 1.6em, +0.01em, axes wght 425.
   Default colour token 813ec4a8 (#636363); repainted by the nav state. */
.t-micro {
  font-family: var(--font-flex);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6em;
  letter-spacing: 0.01em;
  font-variation-settings: var(--flex-axes-425);
  color: var(--c-nav-link);
}

/* (no preset) — .t-locale — language chip "EN" in the nav (Framer locale
   selector, an Inter <div class="input">): Inter 400 14px / 21px, #545454. */
.t-locale {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--c-text-secondary);
}

/* (no preset) — .t-menu-link — phone menu page links ("Home", "About" …).
   Inline in the Framer phone menu: thmanyah serif display Bold 34px / 1.6em,
   +0.01em, ink. */
.t-menu-link {
  font-family: var(--font-serif-bold);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.6em;
  letter-spacing: 0.01em;
  color: var(--sdia-ink, #141512);
}

/* Tablet 810–1199.98 */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .t-display { font-size: 56px; }
  .t-heading { font-size: 40px; }
}

/* Phone < 810 */
@media (max-width: 809.98px) {
  .t-display { font-size: 46px; }
  .t-display.t-hero { font-size: 40px; }   /* phone-only hero H1, 40px / 1.35em */
  .t-heading { font-size: 34px; }
}