/* Fonts are served from our own origin (OFL-1.1, via @fontsource): a font
   CDN would see every visitor before they answer the cookie question. */
@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;font-weight:100 900;src:url(/app/site/fonts/fraunces-latin-full-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-display:swap;font-weight:100 900;src:url(/app/site/fonts/fraunces-latin-full-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(/app/site/fonts/inter-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;font-weight:300 700;src:url(/app/site/fonts/space-grotesk-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url(/app/site/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2")}

  /* Redesign 2026-09-27: a quiet, corporate canvas. White and one warm grey,
     hairline rules instead of cards and shadows, one accent (brand blue) used
     only where something is live. The motion lives in three D3 figures that
     show what the product actually does, not decoration. */
  :root{
    --bg:#FFFFFF; --alt:#F6F6F4; --ink:#111318; --body:#2E323A; --muted:#5C616B;
    --faint:#8B909A; --line:#E4E4E0; --blue:#2A3FE8; --blue-soft:#EEF0FE; --grey-dot:#C4C8CF;
    --max:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    background:var(--bg); color:var(--body);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
  h1,h2,h3{color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.15}
  .eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .num{font-variant-numeric:tabular-nums}

  .btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--ink);color:#fff;font:inherit;font-weight:600;font-size:.95rem;
    padding:12px 20px;border-radius:8px;border:1px solid var(--ink);
    text-decoration:none;cursor:pointer;transition:background .15s ease,border-color .15s ease;
  }
  .btn:hover{background:#2A2D35;border-color:#2A2D35}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn.ghost:hover{border-color:var(--ink);background:transparent}
  .link{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
  .link:hover{border-color:var(--ink)}

  /* ---------- nav ---------- */
  .nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
       backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);
       border-bottom:1px solid var(--line)}
  .nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
  .brand img{width:26px;height:26px;border-radius:7px}
  .brand span{font-weight:700;letter-spacing:.14em;font-size:.95rem;color:var(--ink)}
  .nav .links{display:flex;gap:26px;margin-left:12px}
  .nav .links a{text-decoration:none;font-size:.92rem;color:var(--muted)}
  .nav .links a:hover{color:var(--ink)}
  .nav .btn{padding:9px 16px;font-size:.88rem}

  /* ---------- hero ---------- */
  .hero{padding:88px 0 40px}
  .hero__top{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:end}
  .hero h1{font-size:clamp(2.3rem,5vw,3.6rem);letter-spacing:-.03em;margin-top:18px;max-width:13em}
  .hero .lede{font-size:1.1rem;color:var(--muted);max-width:30em}
  .hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
  .hero .meta{margin-top:18px;font-size:.85rem;color:var(--faint)}

  /* the flow figure */
  .flow{margin-top:64px;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
  .flow__head{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}
  .tabs{display:flex;gap:4px;background:var(--alt);padding:3px;border-radius:8px}
  .tabs button{font:inherit;font-size:.85rem;font-weight:600;color:var(--muted);background:transparent;border:0;
               padding:6px 14px;border-radius:6px;cursor:pointer}
  .tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(17,19,24,.08)}
  .flow__brief{font-size:.92rem;color:var(--ink);flex:1 1 260px;min-width:0}
  .flow__brief .eyebrow{margin-right:10px}
  .flow__stats{display:flex;gap:28px}
  .flow__stats div{display:flex;align-items:baseline;gap:6px}
  .flow__stats b{font-size:1.35rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right}
  .flow__stats b.fit{color:var(--blue)}
  .flow__stats span{font-size:.8rem;color:var(--muted)}
  .flow__svg{position:relative;width:100%}
  .flow__svg svg{display:block}
  .flow__foot{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;padding:12px 20px;border-top:1px solid var(--line);
              background:var(--alt);font-size:.84rem;color:var(--muted)}
  .flow__foot [data-reasons]{display:flex;gap:18px;flex-wrap:wrap}
  .flow__foot .r b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
  .flow__foot .note{margin-left:auto;color:var(--faint);font-size:.78rem}

  /* ---------- logos / verticals strip ---------- */
  .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:72px}
  .strip .wrap{display:flex;gap:40px;flex-wrap:wrap;align-items:center;padding-top:22px;padding-bottom:22px}
  .strip span{font-size:.92rem;color:var(--muted)}
  .strip .eyebrow{margin-right:8px}

  /* ---------- generic sections ---------- */
  section{padding:104px 0}
  section.alt{background:var(--alt)}
  .split{display:grid;grid-template-columns:1fr 1.6fr;gap:64px}
  .split h2{font-size:clamp(1.6rem,3vw,2.2rem)}
  .prose p{font-size:1.05rem;color:var(--body)}
  .prose p+p{margin-top:16px}
  .sec-head{max-width:40em}
  .sec-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-top:14px}
  .sec-head p{margin-top:14px;color:var(--muted);font-size:1.05rem}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:48px}
  .step{padding:28px 32px 0 0}
  .step+.step{padding-left:32px;border-left:1px solid var(--line)}
  .step .n{font-size:.8rem;color:var(--faint);font-variant-numeric:tabular-nums}
  .step h3{font-size:1.1rem;margin-top:10px}
  .step p{margin-top:8px;color:var(--muted);font-size:.97rem}

  /* figure frame for the two in-section charts */
  .figure{margin-top:56px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:24px 24px 18px}
  .figure__head{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;justify-content:space-between}
  .figure__title{font-weight:600;color:var(--ink);font-size:.98rem}
  .figure__sub{color:var(--muted);font-size:.86rem;margin-top:2px}
  .legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
  .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0}
  .legend .k-new{background:var(--blue)}
  .legend .k-drop{border:1.6px solid var(--blue)}
  .legend .k-gone{background:var(--grey-dot)}
  .legend b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
  .figure__svg svg{display:block}
  .figure__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px;font-size:.78rem;color:var(--faint)}
  .txtbtn{font:inherit;font-size:.82rem;font-weight:600;color:var(--muted);background:none;border:0;cursor:pointer;padding:4px 0}
  .txtbtn:hover{color:var(--ink)}

  /* fit section */
  .fit-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:center}
  .fit-grid .figure{margin-top:0}
  .fit-list{margin-top:28px;border-top:1px solid var(--line)}
  .fit-list li{list-style:none;padding:14px 0;border-bottom:1px solid var(--line);font-size:.97rem;color:var(--body)}
  .seg{display:inline-flex;gap:4px;background:var(--alt);padding:3px;border-radius:8px}
  .seg button{font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);background:transparent;border:0;padding:5px 12px;border-radius:6px;cursor:pointer}
  .seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(17,19,24,.08)}

  /* areas */
  .areas{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .area{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
  .area .eyebrow{color:var(--blue)}
  .area h3{font-size:1.08rem;margin-top:10px}
  .area p{margin-top:8px;color:var(--muted);font-size:.95rem}

  /* principles */
  .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:48px}
  .principle{border-top:2px solid var(--ink);padding-top:20px}
  .principle h3{font-size:1.08rem}
  .principle p{margin-top:10px;color:var(--muted);font-size:.97rem}


  /* closing band */
  .closing{padding:96px 0;border-top:1px solid var(--line)}
  .closing .wrap{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
  .closing h2{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:16em}

  /* footer */
  footer{border-top:1px solid var(--line);padding:56px 0 48px;font-size:.9rem}
  .foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
  .foot h4{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .foot ul{margin-top:14px}
  .foot li{list-style:none;margin:8px 0}
  .foot a{color:var(--muted);text-decoration:none}
  .foot a:hover{color:var(--ink)}
  .fine{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:.8rem;color:var(--faint);max-width:60em}

  /* cookie banner */
  .consent{
    position:fixed;left:16px;right:16px;bottom:16px;z-index:50;
    display:none;gap:20px;align-items:center;flex-wrap:wrap;
    max-width:var(--max);margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 16px 40px rgba(17,19,24,.10);padding:18px 20px;
  }
  .consent.show{display:flex}
  .consent p{font-size:.92rem;flex:1 1 320px;color:var(--body)}
  .consent p a{color:var(--blue)}
  .consent .acts{display:flex;gap:10px;flex-wrap:wrap}
  .consent .btn{padding:10px 18px}

  /* country picker */
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .country{margin-left:auto}
  .country + .btn{margin-left:0}
  .country select{font:inherit;font-size:.88rem;color:var(--ink);background:transparent;border:1px solid var(--line);
    border-radius:8px;padding:8px 30px 8px 12px;cursor:pointer;-webkit-appearance:none;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat}
  .country select:hover{border-color:var(--ink)}

  /* svg text */
  .viz text{font-family:inherit}
  .viz svg{max-width:100%;height:auto}
  .flow__svg,.figure__svg{overflow:hidden}

  @media (max-width:900px){
    .wrap{padding:0 20px}
    .nav .links{display:none}
    .nav .btn{display:none}
    .hero{padding-top:56px}
    .hero__top,.split,.fit-grid{grid-template-columns:1fr;gap:28px}
    .steps,.principles,.areas{grid-template-columns:1fr}
    .step,.step+.step{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}
    .principles{gap:32px}
    section{padding:72px 0}
    .foot{grid-template-columns:1fr 1fr}
    .foot > div:first-child{grid-column:1 / -1}
    .flow__head{padding:12px 14px;gap:14px}
    .flow__foot{padding:12px 14px}
    .flow__foot .note{margin-left:0}
    .figure{padding:18px 14px 14px}
    .consent .acts{width:100%}
    .consent .btn{flex:1 1 auto;justify-content:center}
  }

  /* ---------- 2026-09-27 v2: concise, no pricing, live data ---------- */
  .hero{padding:72px 0 32px}
  .hero__top{align-items:end}
  .hero .lede{font-size:1.08rem}
  .flow{margin-top:48px}
  section{padding:88px 0}
  .sec-head h2{font-size:clamp(1.6rem,3vw,2.2rem)}
  .sec-head p{font-size:1rem}
  .row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .row-head .link{font-size:.92rem}

  /* live band */
  .live{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--alt)}
  .live .wrap{padding-top:40px;padding-bottom:40px}
  .live__top{display:flex;align-items:center;gap:10px}
  .pulse{width:8px;height:8px;border-radius:50%;background:var(--blue);position:relative}
  .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--blue);opacity:0;animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.6);opacity:0}}
  @media (prefers-reduced-motion: reduce){.pulse::after{animation:none}}
  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:20px;border-top:1px solid var(--line)}
  .tile{padding:20px 20px 4px 0}
  .tile+.tile{padding-left:20px;border-left:1px solid var(--line)}
  .tile b{display:block;font-size:1.9rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
  .tile span{font-size:.86rem;color:var(--muted)}
  .tile a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;align-items:center}
  .chips .eyebrow{margin-right:6px}
  .chip{font-size:.85rem;color:var(--ink);text-decoration:none;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px}
  .chip:hover{border-color:var(--ink)}

  /* journeys */
  .journeys{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .journey{display:block;padding:24px 24px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;background:var(--bg);transition:background .15s}
  .journey:hover{background:var(--alt)}
  .journey h3{font-size:1.02rem;display:flex;justify-content:space-between;gap:12px}
  .journey h3::after{content:"\2192";color:var(--faint);font-weight:400;transition:transform .15s}
  .journey:hover h3::after{transform:translateX(3px);color:var(--ink)}
  .journey p{margin-top:6px;color:var(--muted);font-size:.93rem}

  /* two figures side by side */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
  .duo .figure{margin-top:0}

  /* automations */
  .autos{display:grid;grid-template-columns:1fr 1.35fr;gap:56px;align-items:start;margin-top:40px}
  .auto-list li{list-style:none;padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:baseline}
  .auto-list li:first-child{border-top:1px solid var(--line)}
  .auto-list .eyebrow{color:var(--blue)}
  .auto-list q{quotes:none;color:var(--ink);font-size:.97rem}
  .auto-list small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}

  /* trust strip */
  .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}
  .trust div{border-top:2px solid var(--ink);padding-top:16px}
  .trust h3{font-size:1rem}
  .trust p{margin-top:6px;color:var(--muted);font-size:.93rem}

  /* guides */
  .guides{margin-top:32px;border-top:1px solid var(--line)}
  .guides a{display:flex;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
  .guides a span{color:var(--faint);font-size:.85rem;white-space:nowrap}
  .guides a:hover{color:var(--blue)}

  /* jobs page */
  .crumbs{font-size:.84rem;color:var(--faint)}
  .crumbs a{color:var(--muted);text-decoration:none}
  .crumbs a:hover{color:var(--ink)}
  .tools{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:32px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .tool{padding:26px;text-decoration:none;display:block}
  .tool+.tool{border-left:1px solid var(--line)}
  .tool:hover{background:var(--alt)}
  .tool h3{font-size:1.02rem}
  .tool p{color:var(--muted);font-size:.93rem;margin-top:6px}
  .tool .eyebrow{color:var(--blue)}
  .faq details{border-bottom:1px solid var(--line);padding:18px 0}
  .faq details:first-child{border-top:1px solid var(--line)}
  .faq summary{cursor:pointer;color:var(--ink);font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
  .faq summary::after{content:"+";color:var(--faint);font-weight:400}
  .faq details[open] summary::after{content:"\2212"}
  .faq p{margin-top:10px;color:var(--muted);max-width:46em}
  .foot-countries{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
  .foot-countries a[aria-current="page"]{color:var(--ink);font-weight:600}

  @media (max-width:900px){
    .tiles{grid-template-columns:1fr 1fr}
    .tile:nth-child(3){padding-left:0;border-left:0}
    .tile{border-top:1px solid var(--line)}
    .journeys,.duo,.autos,.trust,.tools{grid-template-columns:1fr}
    .tool+.tool{border-left:0;border-top:1px solid var(--line)}
    .autos{gap:28px}
  }
  .latest a{align-items:center}
  .latest b{display:block;font-weight:600;font-size:.95rem}
  .latest small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}

  /* ---------- v3: the company story ---------- */
  .hero--vision{padding:96px 0 40px}
  .display{font-size:clamp(2.6rem,6.2vw,4.8rem);letter-spacing:-.035em;line-height:1.02;max-width:12em;margin-top:18px}
  .hero__sub{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;margin-top:28px}
  .hero__sub .lede{font-size:1.15rem;max-width:34em}
  .hero__sub .cta{margin-top:0;justify-content:flex-end}
  .thesis .figure{margin-top:48px}
  section.dark{background:#0D0F14;color:#C7CADA}
  section.dark h2{color:#fff}
  section.dark .sec-head p{color:#9AA0B4}
  section.dark .eyebrow{color:#7C83A6}
  .dark-fig{background:#fff;margin-top:40px}
  .numbers{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:1px solid #262A38}
  .numbers div{padding:24px 24px 0 0}
  .numbers div+div{padding-left:24px;border-left:1px solid #262A38}
  .numbers b{display:block;font-size:2.6rem;font-weight:600;color:#fff;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
  .numbers span{font-size:.88rem;color:#9AA0B4}
  section.dark .mocknote{color:#6B7185}
  .markets-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:32px;margin-top:40px;align-items:center}
  .market-list a{display:block;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
  .market-list a:first-child{border-top:1px solid var(--line)}
  .market-list b{display:block;color:var(--ink);font-weight:600}
  .market-list span{font-size:.88rem;color:var(--muted)}
  .market-list a[aria-current]{padding-left:12px;border-left:3px solid var(--blue)}
  .market-list a:hover b{color:var(--blue)}
  .principles4,.platform{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:40px}
  .principles4 > div,.platform > div{border-top:2px solid var(--ink);padding-top:16px}
  .principles4 .n,.platform .n{font-size:.8rem;color:var(--faint);font-variant-numeric:tabular-nums}
  .principles4 h3,.platform h3{font-size:1.02rem;margin-top:8px}
  .principles4 p,.platform p{margin-top:6px;color:var(--muted);font-size:.93rem}
  .doors{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
  .doors > *{display:block;padding:28px;text-decoration:none}
  .doors > * + *{border-left:1px solid var(--line)}
  .doors a:hover{background:var(--alt)}
  .doors .eyebrow{color:var(--blue)}
  .doors h3{font-size:1.05rem;margin-top:8px}
  .doors p{margin-top:6px;color:var(--muted);font-size:.93rem}
  .doors--long p{margin-bottom:18px}
  @media (max-width:900px){
    .hero--vision{padding-top:56px}
    .hero__sub,.markets-grid{grid-template-columns:1fr;gap:20px}
    .hero__sub .cta{justify-content:flex-start}
    .numbers,.principles4,.platform{grid-template-columns:1fr 1fr}
    .numbers div:nth-child(3){padding-left:0;border-left:0}
    .numbers div{padding-bottom:20px}
    .doors{grid-template-columns:1fr}
    .doors > * + *{border-left:0;border-top:1px solid var(--line)}
  }

  /* ---------- v4: one door for business ---------- */
  .wwu{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:end}
  .wwu h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:14px}
  .wwu p:not(.eyebrow){margin-top:12px;color:var(--muted);max-width:36em}
  .wwu__acts{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
  @media (max-width:900px){ .wwu{grid-template-columns:1fr;gap:24px} }

/* Theme options for the TUNAI site, 2026-09-27. One token layer, three looks.
 * Each theme is rooted in something TUNAI already owns, so none of them is a
 * template:
 *   quiet       the current mockup (baseline)
 *   letterhead  the lifecycle emails: "a personal note from the twin", serif, logo as letterhead
 *   night       the product's promise: it works overnight ("While you sleep, life moves."), the app's dark twin teal
 * Figures read the --fig-* and --eng-* tokens (site.js), so animations recolour too.
 */

/* ---------- shared hooks every theme can use ---------- */
:root{
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-body);
  --font-label:var(--font-body);
  --font-fig:var(--font-body);
  --radius:12px; --radius-btn:8px;
}
body{font-family:var(--font-body)}
h1,h2,h3,.display{font-family:var(--font-display)}
.eyebrow,.crumbs,.mocknote,.figure__foot,.tile span,.legend{font-family:var(--font-label)}
.viz text{font-family:var(--font-fig)}
.flow,.figure,.doors,.tools{border-radius:var(--radius)}
.btn{border-radius:var(--radius-btn)}
h1 em,h2 em,.display em{font-style:normal}

/* =====================================================================
   LETTERHEAD: warm paper, a serif that sounds like a person, coral ink
   ===================================================================== */
[data-theme="letterhead"]{
  --bg:#F6F1E9; --alt:#EEE7DC; --ink:#1D1A16; --body:#3B352E; --muted:#6D6458; --faint:#978C7D;
  --line:#DDD3C3; --blue:#C8412E; --blue-soft:#F6E1DA; --grey-dot:#CFC5B6;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,"Segoe UI",sans-serif;
  --font-label:"Inter",-apple-system,"Segoe UI",sans-serif;
  --radius:4px; --radius-btn:999px;
  --fig-accent:#C8412E; --fig-hit:#0F6E66; --fig-on-accent:#FFF8F0;
  --fig-ink:#1D1A16; --fig-muted:#6D6458; --fig-faint:#978C7D; --fig-line:#E3DACB;
  --fig-grey:#CFC5B6; --fig-grey2:#DCD3C5; --fig-grey3:#ECE5DA; --fig-soft:#F8E6DF; --fig-soft-line:#EFCBBF;
  --fig-bar2:#E9B4A7; --fig-card:#FFFCF6; --fig-land:#D6CCBB;
  --eng-bg:#1D1A16; --eng-layer:#2B2621; --eng-stroke:#3B342C; --eng-text:#E3DACB; --eng-label:#B3A590;
  --eng-active:#C8412E; --eng-active-text:#FFF8F0;
}
[data-theme="letterhead"] body{background:var(--bg)}
[data-theme="letterhead"] .nav{background:rgba(246,241,233,.9)}
[data-theme="letterhead"] h1,[data-theme="letterhead"] h2,[data-theme="letterhead"] .display{font-weight:400;letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" 50}
[data-theme="letterhead"] h3{font-family:var(--font-body);font-weight:600}
[data-theme="letterhead"] .display{font-size:clamp(2.8rem,6.6vw,5.4rem);line-height:1}
[data-theme="letterhead"] .display em,[data-theme="letterhead"] h2 em{font-style:italic;color:var(--blue)}
[data-theme="letterhead"] .eyebrow{font-family:var(--font-display);font-style:italic;text-transform:none;letter-spacing:0;font-size:1rem;color:var(--blue);font-weight:400}
[data-theme="letterhead"] .eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}
[data-theme="letterhead"] .btn{background:var(--ink);border-color:var(--ink);color:#FFF8F0;padding:12px 22px}
[data-theme="letterhead"] .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
[data-theme="letterhead"] .figure,[data-theme="letterhead"] .flow,[data-theme="letterhead"] .doors,[data-theme="letterhead"] .tools{background:#FFFCF6;border-color:#E3DACB;box-shadow:0 1px 0 #E3DACB,0 12px 30px -18px rgba(60,40,20,.25)}
[data-theme="letterhead"] section.alt,[data-theme="letterhead"] .live,[data-theme="letterhead"] .flow__foot{background:var(--alt)}
[data-theme="letterhead"] section.dark{background:#1D1A16}
[data-theme="letterhead"] section.dark h2{color:#F6F1E9}
[data-theme="letterhead"] section.dark .eyebrow{color:#E08A77}
[data-theme="letterhead"] .numbers b{font-family:var(--font-display);font-weight:400;font-size:3.2rem;color:#F6F1E9}
[data-theme="letterhead"] .numbers{border-color:#3B342C}
[data-theme="letterhead"] .numbers div+div{border-color:#3B342C}
[data-theme="letterhead"] .tile b{font-family:var(--font-display);font-weight:400}
[data-theme="letterhead"] .principles4 > div,[data-theme="letterhead"] .platform > div{border-top:1px solid var(--ink)}
[data-theme="letterhead"] .principles4 .n,[data-theme="letterhead"] .platform .n{font-family:var(--font-display);font-style:italic;font-size:1.6rem;color:var(--blue)}
[data-theme="letterhead"] .journey h3,[data-theme="letterhead"] .area h3{font-family:var(--font-display);font-weight:500;font-size:1.2rem}
[data-theme="letterhead"] .wwu .signoff{display:block}
[data-theme="letterhead"] .closing h2{font-style:italic}
[data-theme="letterhead"] .chip{border-radius:999px;background:#FFFCF6}
[data-theme="letterhead"] .journeys,[data-theme="letterhead"] .journey{border-color:#DDD3C3}
[data-theme="letterhead"] .journey{background:transparent}
[data-theme="letterhead"] .journey:hover{background:#FFFCF6}

/* =====================================================================
   NIGHT SHIFT: dark, instrument-panel precision, teal for the twin,
   amber for "did something" (the app's own dark-theme pair)
   ===================================================================== */
[data-theme="night"]{
  --bg:#0A0D12; --alt:#0E1219; --ink:#EEF1F5; --body:#C3CAD5; --muted:#8C95A4; --faint:#5F697A;
  --line:#1E2530; --blue:#2AD0C3; --blue-soft:rgba(42,208,195,.10); --grey-dot:#3A4352;
  --font-display:"Space Grotesk",-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,"Segoe UI",sans-serif;
  --font-label:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --font-fig:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --radius:10px; --radius-btn:6px;
  --fig-accent:#2AD0C3; --fig-hit:#E5A34A; --fig-on-accent:#04201D;
  --fig-ink:#E6EAF0; --fig-muted:#8C95A4; --fig-faint:#5F697A; --fig-line:#222A36;
  --fig-grey:#3A4352; --fig-grey2:#2A323E; --fig-grey3:#1B212A; --fig-soft:#0F2B2A; --fig-soft-line:#1D4A47;
  --fig-bar2:#1B5652; --fig-card:#10151D; --fig-land:#263141;
  --eng-bg:#05070A; --eng-layer:#10161F; --eng-stroke:#1F2833; --eng-text:#8FA2B6; --eng-label:#2AD0C3;
  --eng-active:#2AD0C3; --eng-active-text:#04201D;
  color-scheme:dark;
}
[data-theme="night"] body{background:var(--bg);color:var(--body)}
[data-theme="night"] .nav{background:rgba(10,13,18,.85);border-color:var(--line)}
[data-theme="night"] .nav .links a:hover,[data-theme="night"] .brand span{color:var(--ink)}
[data-theme="night"] .country select{color:var(--ink);border-color:var(--line)}
[data-theme="night"] h1,[data-theme="night"] h2,[data-theme="night"] .display{font-weight:500;letter-spacing:-.035em}
[data-theme="night"] .display em,[data-theme="night"] h2 em{color:var(--blue)}
[data-theme="night"] .hero--vision{background:
  radial-gradient(ellipse 60% 55% at 78% 0%,rgba(42,208,195,.14),transparent 70%),
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/56px 56px,
  linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:none}
[data-theme="night"] .hero--vision::after{content:"";display:block;height:1px;background:var(--line);margin-top:40px}
[data-theme="night"] .eyebrow{color:var(--blue);letter-spacing:.06em;font-size:.74rem}
[data-theme="night"] .eyebrow::before{content:"// ";color:var(--faint)}
[data-theme="night"] .btn{background:var(--blue);border-color:var(--blue);color:#04201D;font-weight:600}
[data-theme="night"] .btn:hover{background:#5FE0D6;border-color:#5FE0D6}
[data-theme="night"] .btn.ghost{background:transparent;color:var(--ink);border-color:#2E3746}
[data-theme="night"] .btn.ghost:hover{border-color:var(--ink)}
[data-theme="night"] .link{color:var(--ink);border-color:#2E3746}
[data-theme="night"] section.alt,[data-theme="night"] .live{background:var(--alt)}
[data-theme="night"] section.dark{background:#06080B;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
[data-theme="night"] .dark-fig{background:#0B0F15}
[data-theme="night"] .figure,[data-theme="night"] .flow,[data-theme="night"] .doors,[data-theme="night"] .tools,[data-theme="night"] .dark-fig{background:#0E131A;border-color:var(--line)}
[data-theme="night"] .flow__head,[data-theme="night"] .flow__foot{border-color:var(--line)}
[data-theme="night"] .flow__foot{background:#0B0F15}
[data-theme="night"] .tabs,[data-theme="night"] .seg{background:#141A23}
[data-theme="night"] .tabs button[aria-selected="true"],[data-theme="night"] .seg button[aria-pressed="true"]{background:#222B37;color:var(--ink);box-shadow:none}
[data-theme="night"] .tile b,[data-theme="night"] .numbers b,[data-theme="night"] .flow__stats b{font-family:var(--font-label);font-weight:500;letter-spacing:-.04em}
[data-theme="night"] .numbers b{color:var(--blue)}
[data-theme="night"] .numbers,[data-theme="night"] .numbers div+div{border-color:var(--line)}
[data-theme="night"] .pulse{background:#E5A34A}
[data-theme="night"] .pulse::after{border-color:#E5A34A}
[data-theme="night"] .chip{background:#10151D;border-color:var(--line);color:var(--ink);font-family:var(--font-label);font-size:.78rem}
[data-theme="night"] .journeys,[data-theme="night"] .journey,[data-theme="night"] .guides a,[data-theme="night"] .market-list a,[data-theme="night"] .auto-list li,[data-theme="night"] .faq details{border-color:var(--line)}
[data-theme="night"] .journey{background:transparent}
[data-theme="night"] .journey:hover,[data-theme="night"] .doors a:hover,[data-theme="night"] .tool:hover{background:#10151D}
[data-theme="night"] .principles4 > div,[data-theme="night"] .platform > div,[data-theme="night"] .trust div{border-top:1px solid var(--blue)}
[data-theme="night"] .principles4 .n,[data-theme="night"] .platform .n{font-family:var(--font-label);color:var(--blue)}
[data-theme="night"] .market-list b,[data-theme="night"] .guides a{color:var(--ink)}
[data-theme="night"] .consent{background:#10151D;border-color:var(--line)}
[data-theme="night"] .consent p{color:var(--body)}
[data-theme="night"] footer,[data-theme="night"] .fine,[data-theme="night"] .closing{border-color:var(--line)}
[data-theme="night"] .country select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)}
[data-theme="night"] .mocknote{color:var(--faint)}
[data-theme="night"] .figure__title,[data-theme="night"] .flow__brief,[data-theme="night"] .legend b{color:var(--ink)}

/* ---------- the founder's sign-off: shown by themes that want a person ---------- */
.wwu .signoff{display:none;margin-top:18px;font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--ink)}


/* ---------- production additions ---------- */
.journey--app{cursor:default}
.journey--app h3::after{content:"In the app";font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-family:var(--font-label)}
.journey--app:hover{background:inherit}
[data-theme="letterhead"] .journey--app:hover{background:transparent}
[data-theme="night"] .journey--app:hover{background:transparent}
.purpose-note{margin-top:28px;font-size:.92rem;color:var(--muted);max-width:52em}
.tiles--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .tiles--3{grid-template-columns:1fr 1fr} }
[hidden]{display:none!important}

/* ---------- every page type (2026-09-27, design/mockups/site/pages.css) ---------- */

[hidden]{display:none!important}
.nav .links a[aria-current="page"]{color:var(--ink);font-weight:600}
.sec-lede{margin-top:14px;color:var(--muted);font-size:1.05rem;max-width:40em}
.stack{margin-top:40px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--fig-card,#fff);color:var(--ink)}
.pill select{font:inherit;border:0;background:transparent;color:var(--ink);font-weight:600;cursor:pointer}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:.95rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0;color:var(--ink);font-weight:500}

/* ---------- document pages (privacy, terms) ---------- */
.doc{display:grid;grid-template-columns:240px 1fr;gap:64px;padding:56px 0 96px}
.doc__toc{position:sticky;top:88px;align-self:start;font-size:.9rem}
.doc__toc ol{list-style:none;margin-top:14px;border-left:1px solid var(--line)}
.doc__toc li a{display:block;padding:6px 0 6px 14px;color:var(--muted);text-decoration:none;margin-left:-1px;border-left:2px solid transparent}
.doc__toc li a:hover,.doc__toc li a.on{color:var(--ink);border-left-color:var(--blue)}
.doc__body{max-width:44em}
.doc__body h1{font-size:clamp(2.2rem,4.4vw,3.2rem)}
.doc__body .updated{margin-top:10px;color:var(--faint);font-size:.9rem}
.doc__short{margin-top:28px;padding:22px 24px;background:var(--fig-card,#fff);border:1px solid var(--line);border-radius:var(--radius)}
.doc__short b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.15rem;color:var(--ink);margin-bottom:6px}
.doc__body h2{font-size:1.45rem;margin-top:44px;scroll-margin-top:90px}
.doc__body p,.doc__body li{margin-top:12px;font-size:1.02rem;line-height:1.7;color:var(--body)}
.doc__body ul{margin-top:8px;padding-left:20px}
.doc__switch{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.doc__switch a{font-size:.82rem;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--muted)}
.doc__switch a[aria-current]{background:var(--ink);border-color:var(--ink);color:#FFF8F0}

/* ---------- a calm single form ---------- */
.formpage{max-width:560px;margin:0 auto;padding:72px 0 96px}
.formpage h1{font-size:clamp(2rem,4vw,2.8rem)}
.field{margin-top:22px}
.field label{display:block;font-weight:600;color:var(--ink);font-size:.95rem}
.field small{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}
.field input,.field textarea{width:100%;margin-top:8px;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--fig-card,#fff);color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.steps-inline{margin-top:28px;border-top:1px solid var(--line)}
.steps-inline li{list-style:none;display:grid;grid-template-columns:28px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--body)}
.steps-inline li span{font-family:var(--font-display);font-style:italic;color:var(--blue)}

/* ---------- jobs home: countries ---------- */
.countries{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:32px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.country-card{display:block;padding:22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}
.country-card:hover{background:var(--fig-card,#fff)}
.country-card b{display:block;font-family:var(--font-display);font-weight:400;font-size:2rem;color:var(--ink);letter-spacing:-.02em}
.country-card span{color:var(--muted);font-size:.9rem}
.country-card h3{font-size:1rem;margin-top:10px}
.country-card[aria-current="true"]{background:var(--fig-card,#fff);box-shadow:inset 3px 0 0 var(--blue)}

/* ---------- the CV check ---------- */
.tool{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start;margin-top:36px}
.drop{border:1.5px dashed #C9BCA8;border-radius:16px;background:var(--fig-card,#fff);padding:40px 28px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover{border-color:var(--blue)}
.drop b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.35rem;color:var(--ink)}
.drop span{display:block;margin-top:6px;color:var(--muted);font-size:.92rem}
.drop .btn{margin-top:18px}
.tool__opt{margin-top:16px}
.tool__opt summary{cursor:pointer;color:var(--ink);font-weight:600;font-size:.95rem;list-style:none}
.tool__opt summary::before{content:"+ ";color:var(--blue)}
.tool__opt[open] summary::before{content:"\2212 "}
.tool__opt textarea{width:100%;margin-top:10px;min-height:120px;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--fig-card,#fff)}
.tool__row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rules{background:var(--fig-card,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.rules h3{font-family:var(--font-display);font-weight:500;font-size:1.2rem}
.rules ul{margin-top:12px}
.rules li{list-style:none;padding:10px 0 10px 26px;position:relative;border-top:1px solid var(--line);font-size:.94rem;color:var(--body)}
.rules li:first-child{border-top:0}
.rules li::before{content:"";position:absolute;left:4px;top:18px;width:10px;height:1.5px;background:var(--blue)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:28px;border-top:1px solid var(--line)}
.three > div{padding:18px 20px 4px 0}
.three > div + div{padding-left:20px;border-left:1px solid var(--line)}
.three .n{font-family:var(--font-display);font-style:italic;color:var(--blue);font-size:1.4rem}
.three h3{font-size:1rem;margin-top:4px}
.three p{color:var(--muted);font-size:.92rem;margin-top:4px}

.result{display:grid;grid-template-columns:300px 1fr;gap:40px;margin-top:36px;align-items:start}
.result__score{background:var(--fig-card,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center}
.result__score .figure__svg{display:flex;justify-content:center}
.result__score p{margin-top:10px;color:var(--muted);font-size:.9rem}
.checks li{list-style:none;display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.checks li:first-child{border-top:1px solid var(--line)}
.checks .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;margin-top:2px}
.checks .ok .ic{background:#E3EFE9;color:#0F6E66}
.checks .no .ic{background:#F8E4DD;color:#C8412E}
.checks b{color:var(--ink);font-weight:600;font-size:.97rem}
.checks p{color:var(--muted);font-size:.9rem;margin-top:2px}
.checks .tag{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.matches a{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.matches a:first-child{border-top:1px solid var(--line)}
.matches .fitn{font-family:var(--font-display);font-size:1.5rem;color:var(--blue)}
.matches small{display:block;color:var(--muted);font-size:.86rem}
.matches .go{color:var(--faint);font-size:.85rem}
.gap-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.gap-chips span{font-size:.84rem;border-radius:999px;padding:5px 12px;background:#F8E4DD;color:#8F2E20}
.gap-chips span.have{background:#E3EFE9;color:#0F5A53}

/* ---------- hub ---------- */
.hubhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hub-switch{display:flex;gap:6px;flex-wrap:wrap}
.hub-switch a{font-size:.84rem;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--muted)}
.hub-switch a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#FFF8F0}
.cities{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}
.cities a{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;background:var(--fig-card,#fff)}
.cities a:hover{border-color:var(--ink)}
.cities b{color:var(--ink);font-weight:600}
.cities span{color:var(--muted);font-size:.86rem;font-variant-numeric:tabular-nums}

/* ---------- role in a city, job ---------- */
.latest a{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.latest a:first-child{border-top:1px solid var(--line)}
.latest b{display:block;font-weight:600}
.latest small{color:var(--muted);font-size:.86rem}
.latest .when{color:var(--faint);font-size:.84rem;white-space:nowrap}
.jobgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:36px;align-items:start}
.excerpt{font-size:1.05rem;line-height:1.75;color:var(--body);border-left:2px solid var(--line);padding-left:20px}
.side-card{background:var(--fig-card,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.side-card + .side-card{margin-top:16px}
.side-card h3{font-family:var(--font-display);font-weight:500;font-size:1.15rem}
.side-card p{color:var(--muted);font-size:.92rem;margin-top:6px}
.side-card .btn{margin-top:16px;width:100%;justify-content:center}

/* ---------- shared shortlist ---------- */
.shortlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:28px}
.listing{background:var(--fig-card,#fff);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.listing .ph{height:120px;background:linear-gradient(135deg,#EDE3D3,#E2D5C0);display:grid;place-items:center;color:#A6977F;font-size:.8rem}
.listing .bd{padding:14px 16px}
.listing b{display:block;color:var(--ink)}
.listing small{color:var(--muted);font-size:.86rem}
.listing .why{margin-top:8px;font-size:.84rem;color:#0F5A53}
.funnel{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid var(--line)}
.funnel div{padding:20px 20px 0 0}
.funnel div+div{padding-left:20px;border-left:1px solid var(--line)}
.funnel b{display:block;font-family:var(--font-display);font-weight:400;font-size:3rem;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.funnel div:last-child b{color:var(--blue)}
.funnel span{color:var(--muted);font-size:.9rem}

/* ---------- insights ---------- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
.fact{background:var(--fig-card,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.fact .eyebrow{font-size:.9rem}
.fact h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;margin-top:6px}
.fact p{color:var(--muted);font-size:.92rem;margin-top:6px}
.fact .figure__svg{margin-top:14px}
.fact .src{margin-top:10px;font-size:.78rem;color:var(--faint)}
.fact--wide{grid-column:1 / -1}

@media (max-width:900px){
  .doc{grid-template-columns:1fr;gap:24px;padding-top:32px}
  .doc__toc{position:static}
  .countries,.cities{grid-template-columns:1fr 1fr}
  .tool,.result,.jobgrid,.facts{grid-template-columns:1fr}
  .three,.funnel{grid-template-columns:1fr}
  .three > div + div,.funnel div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}

/* ---------- review fixes ---------- */
.btn{display:inline-block;text-align:center;gap:0}
.side-card .figure,.fact .figure,.result__score .figure{box-shadow:none!important;background:transparent!important;border:0!important;padding:0!important;margin:0!important}
.shortlist{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.shortlist{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
.journeys{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.journeys{grid-template-columns:1fr}}

/* ---------- legal and account documents: the classes their text already uses ---------- */
.doc__body .sub{margin-top:12px;font-size:1.1rem;color:var(--muted)}
.doc__body .date{margin-top:6px;color:var(--faint);font-size:.9rem}
.doc__body .card{margin-top:22px;padding:20px 22px;background:var(--fig-card,#fff);border:1px solid var(--line);border-radius:var(--radius)}
.doc__body .card.key{border-left:3px solid var(--blue)}
.doc__body .card.flag{border-left:3px solid #B5321F;background:#FBF1EC}
.doc__body .card p:first-child,.doc__body .card li:first-child{margin-top:0}
.doc__body h3{font-size:1.1rem;margin-top:28px;font-family:var(--font-body);font-weight:600}
.doc__body a{color:var(--blue)}
.doc__body .scroll{overflow-x:auto;margin-top:16px}
.doc__body table{border-collapse:collapse;width:100%;font-size:.93rem}
.doc__body th,.doc__body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc__body th{color:var(--ink);font-weight:600;background:var(--alt)}
.doc__body .legal-switch{margin-top:16px!important;font-size:.9rem!important;color:var(--muted)!important}
.doc__body .legal-switch a,.doc__body .legal-switch strong{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 12px;margin:2px 2px;text-decoration:none;color:var(--muted);font-weight:500}
.doc__body .legal-switch strong{background:var(--ink);border-color:var(--ink);color:#FFF8F0}
.doc__body form label{display:block;font-weight:600;color:var(--ink);margin-top:18px}
.doc__body form input,.doc__body form textarea{width:100%;margin-top:8px;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--fig-card,#fff);color:var(--ink)}
.doc__body form textarea{min-height:110px}
.doc__body form .btn{margin-top:20px}
.doc--single{grid-template-columns:1fr}
.doc--single .doc__body{margin:0 auto}

/* ---------- the jobs pages' own server-rendered parts, in the Letterhead look ----------
   Scoped by page so their class names (.facts, .latest, .chip) never meet the
   site's own. The markup is the renderers', unchanged (2026-09-27). */
[data-page="role"] h1,[data-page="job"] h1,[data-page="hub"] h1,[data-page="browse"] h1,[data-page="insights"] h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-top:14px}
[data-page] .hero .sub,[data-page="insights"] .sub{margin-top:12px;color:var(--muted);font-size:1.08rem;max-width:44em}
.related-line{margin-top:14px;color:var(--muted)}
.related-line a{color:var(--blue)}
.fine-print{margin-top:14px;font-size:.84rem;color:var(--faint)}

[data-page="role"] .stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid var(--line)}
[data-page="role"] .stat{padding:20px 20px 4px 0}
[data-page="role"] .stat + .stat{padding-left:20px;border-left:1px solid var(--line)}
[data-page="role"] .stat .n{font-family:var(--font-display);font-size:2rem;color:var(--ink);line-height:1.2}
[data-page="role"] .stat .l{font-size:.86rem;color:var(--muted)}
[data-page="role"] #payrange{margin-top:28px}

[data-page="role"] .latest h2{font-size:1.5rem}
[data-page="role"] .latest .lede{color:var(--muted);margin-top:6px}
[data-page="role"] .latest ul{list-style:none;margin-top:16px;border-top:1px solid var(--line)}
[data-page="role"] .latest li{border-bottom:1px solid var(--line)}
[data-page="role"] a.job{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;text-decoration:none;color:var(--ink)}
[data-page="role"] a.job:hover .jt{color:var(--blue)}
[data-page="role"] .jt{font-weight:600;grid-column:1}
[data-page="role"] .jm{color:var(--muted);font-size:.88rem;grid-column:1}
[data-page="role"] .jc{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px}
[data-page="role"] .jc .chip{font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue);border:0}
[data-page="role"] .jc .chip.pay{background:#E3EFE9;color:#0F5A53}
[data-page="role"] .when{font-size:.78rem;color:var(--faint);white-space:nowrap}
[data-page="role"] .latest .more{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;font-size:.9rem;color:var(--muted)}
[data-page="role"] .latest .more a{color:var(--blue);font-weight:600;text-decoration:none}
[data-page="role"] .latest .pager{display:flex;gap:18px}

[data-page="role"] .skills h2,[data-page="job"] .skills h2,[data-page="job"] .excerpt-block h2,[data-page="role"] .faq h2{font-size:1.4rem}
[data-page="role"] .skills ol{margin-top:14px;padding-left:22px;color:var(--body)}
[data-page="role"] .skills li{margin:6px 0}
[data-page="job"] ul.skills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
[data-page="job"] ul.skills li{font-size:.88rem;border:1px solid var(--line);background:var(--fig-card,#fff);border-radius:999px;padding:6px 12px;color:var(--ink)}
[data-page="job"] .facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
[data-page="job"] .fact{padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
[data-page="job"] .fact .l{font-size:.8rem;color:var(--faint)}
[data-page="job"] .fact .v{color:var(--ink);font-weight:500;margin-top:2px}
[data-page="job"] .excerpt{margin-top:14px}
[data-page="job"] .apply{margin-top:20px}
[data-page="job"] .fine{margin-top:10px;font-size:.84rem;color:var(--faint)}

[data-page="role"] .faq details{border-bottom:1px solid var(--line);padding:16px 0}
[data-page="role"] .faq details:first-of-type{border-top:1px solid var(--line);margin-top:16px}
[data-page="role"] .related{display:flex;gap:32px;flex-wrap:wrap}
[data-page="role"] .related > div{flex:1 1 220px}
[data-page="role"] .related h3{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
[data-page="role"] .related a{display:block;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line)}
[data-page="role"] .related a:hover{color:var(--blue)}

.hubs{display:flex;gap:6px;flex-wrap:wrap}
.hubs a{font-size:.84rem;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--muted);background:var(--fig-card,#fff)}
.hubs a:hover{border-color:var(--ink);color:var(--ink)}
[data-page="hub"] .role-group,[data-page="browse"] .role-group{padding:18px 0;border-bottom:1px solid var(--line)}
[data-page="hub"] .role-group h2,[data-page="browse"] .role-group h2{font-size:1.15rem}
[data-page="hub"] .role-group .city-links,[data-page="browse"] .role-group .city-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px}
[data-page="hub"] .role-group .city-links a,[data-page="browse"] .role-group .city-links a{color:var(--body);text-decoration:none;font-size:.93rem}
[data-page="hub"] .role-group .city-links a:hover,[data-page="browse"] .role-group .city-links a:hover{color:var(--blue)}
[data-page="hub"] .role-group .city-links span,[data-page="browse"] .role-group .city-links span{color:var(--faint);font-size:.82rem;margin-left:4px;font-variant-numeric:tabular-nums}

/* insights: the fact engine's own markup */
[data-page="insights"] .ins{padding:56px 0 24px}
[data-page="insights"] .crumb{font-size:.84rem;color:var(--faint)}
[data-page="insights"] .crumb a{color:var(--muted);text-decoration:none}
[data-page="insights"] .fresh{display:inline-flex;gap:8px;align-items:center;font-size:.8rem;font-weight:600;color:#0F5A53;background:#E3EFE9;border-radius:999px;padding:3px 11px;margin-top:14px}
[data-page="insights"] .fresh i{width:7px;height:7px;border-radius:50%;background:#0F6E66;display:inline-block}
[data-page="insights"] h2{font-size:1.4rem;margin-top:8px}
[data-page="insights"] .panel{background:var(--fig-card,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:24px 0}
[data-page="insights"] section.f{scroll-margin-top:90px}
[data-page="insights"] .facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0}
[data-page="insights"] .fact{background:var(--fig-card,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:flex;flex-direction:column;text-decoration:none;color:inherit}
[data-page="insights"] .fact:hover{border-color:var(--ink)}
[data-page="insights"] .topic{font-family:var(--font-display);font-style:italic;color:var(--blue);font-size:.95rem}
[data-page="insights"] .big{font-family:var(--font-display);font-size:2.6rem;letter-spacing:-.02em;line-height:1.1;margin:6px 0 4px;color:var(--ink)}
[data-page="insights"] .fact p{font-size:.95rem;color:var(--body)}
[data-page="insights"] .meta{font-size:.78rem;color:var(--faint);margin-top:auto;padding-top:12px}
[data-page="insights"] .go{font-size:.86rem;font-weight:600;color:var(--blue);margin-top:6px}
[data-page="insights"] .topics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
[data-page="insights"] .topics a{display:block;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;background:var(--fig-card,#fff)}
[data-page="insights"] .topics b{display:block;color:var(--ink)}
[data-page="insights"] .topics span{font-size:.84rem;color:var(--muted)}
[data-page="insights"] .empty{border:1px dashed var(--line);border-radius:12px;padding:16px;color:var(--muted);font-size:.9rem}
[data-page="insights"] .row{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
[data-page="insights"] .row .big{font-size:3.2rem}
[data-page="insights"] .row p{font-size:1.05rem;flex:1 1 280px}
[data-page="insights"] .caveat{font-size:.86rem;color:var(--muted);margin-top:8px}
[data-page="insights"] .prev{font-size:.88rem;margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--alt)}
[data-page="insights"] .share{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
[data-page="insights"] .share a{font-size:.8rem;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:4px 12px;text-decoration:none;color:var(--muted)}
[data-page="insights"] .data{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:.9rem;color:var(--muted);margin:10px 0}
[data-page="insights"] .data a{color:var(--blue);font-weight:600;text-decoration:none}
[data-page="insights"] table.t{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:12px}
[data-page="insights"] table.t th{text-align:left;color:var(--faint);font-weight:600;font-size:.8rem;border-bottom:1px solid var(--line);padding:8px 4px}
[data-page="insights"] table.t td{border-bottom:1px solid var(--line);padding:8px 4px}
[data-page="insights"] table.t td.n{text-align:right;font-variant-numeric:tabular-nums}
[data-page="insights"] svg text{font-family:var(--font-body)}

@media (max-width:900px){
  [data-page="role"] .stats{grid-template-columns:1fr}
  [data-page="role"] .stat + .stat{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  [data-page="role"] a.job{grid-template-columns:1fr}
  [data-page="role"] .jc{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}
  [data-page="job"] .facts,[data-page="insights"] .facts,[data-page="insights"] .topics{grid-template-columns:1fr}
}

/* ---------- the CV check and hub city list ---------- */
.cities .city{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--fig-card,#fff)}
.cities .city b{color:var(--ink);font-weight:600}
.cities .city span{color:var(--muted);font-size:.86rem;font-variant-numeric:tabular-nums}
.tool .select,.tool .input{width:100%;margin-top:8px;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--fig-card,#fff);color:var(--ink)}
.tool .input{margin-bottom:8px}
.form-error{margin-top:14px;color:#8F2E20;background:#FBF1EC;border-radius:10px;padding:10px 14px;font-size:.93rem}
#loading li[data-state="run"]{color:var(--ink);font-weight:600}
#loading li[data-state="done"]{color:var(--hit,#0F6E66)}
#loading li[data-state="skip"]{display:none}
.big-n{font-family:var(--font-display);font-weight:400;font-size:2.4rem;color:var(--ink)}
.big-n span{font-family:var(--font-body);font-size:1rem;color:var(--muted)}
.tool-h1,.jobs-h1{font-size:clamp(2.3rem,4.8vw,3.6rem);margin-top:14px}
.hub-h1{font-size:clamp(2.1rem,4.4vw,3.2rem)}
.matches .fitn{font-size:.9rem;font-family:var(--font-display);font-style:italic}
.matches a{grid-template-columns:110px 1fr auto}
@media (max-width:900px){.matches a{grid-template-columns:1fr}}
.doc > *{min-width:0}
.doc__body{max-width:min(44em,100%)}

[data-page="job"] .fact{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 16px 14px 0;box-shadow:none}
[data-page="job"] .skills h2 + ul + h2{margin-top:24px}
[data-page="job"] .skills > h2:not(:first-child){margin-top:24px}
.drop{display:block}
.drop b span{display:inline}
.drop span.btn{display:inline-block;margin-top:18px}
.tool__row{margin-bottom:14px}