/* Arpan pSEO — shared stylesheet. Served at /guides/pseo.css, one request,
   cached hard across every guide. Hand-authored (no Tailwind build step) and
   ported from pseo/Arpan_pSEO_v5/dossier.css, which is already ~1:1 with the
   product @theme (packages/web/src/styles/index.css).

   Deltas from the dossier source:
   · Type — Georgia default, NO webfont (Carlos, 2026-08-14). See --serif below;
     the Playfair switch is the one commented line there + the <link> block in
     head.ts. Both must flip together.
   · Footer — the dossier had none; added minimal .foot styles.
   · FAQ question is an <h3> here (heading outline + FAQPage byte-match), so a
     margin reset was added.
   · body background — folded in (the dossier used an inline <style>).

   Every colour resolves to a product token VALUE, verbatim from
   packages/web/src/styles/index.css. */
:root{
  /* ── brand palette (1:1 with the product @theme block) ── */
  --ink:#1A1A2E;
  --saffron:#E8852A;
  --saffron-d:#CE7320;          /* --color-saffron-deep */
  --warm-sepia:#F5F0E8;
  --deep-sepia:#EDE8DF;
  --slate:#6B7280;              /* --color-slate-brand */
  --slate-l:#8A8F99;            /* --color-slate-light */
  --moss:#2D6A4F;
  --border:#DAD3C6;             /* --color-hairline */

  /* rewrite-block family — the before/after pattern, verbatim */
  --rw-before-bg:#FFF8F0;
  --rw-before-border:#FDDCB5;
  --rw-before-text:#7C4A1A;
  --rw-after-bg:#F0F7F4;
  --rw-after-border:#B7DBC9;
  --rw-after-text:#1A4A33;

  /* page-local derivations (no new hues) */
  --ink-soft:#2C2C44;
  --paper:#FBF8F3;
  --border-soft:#E4DFD5;

  /* Headline face. Default: Georgia, NO webfont — matches the app, zero
     render-blocking font requests (protects Chrome-Android LCP), no Google
     Fonts call. To adopt Playfair instead, swap this one line for the
     Playfair-first stack AND uncomment the PLAYFAIR block in head.ts:
       --serif:'Playfair Display',Georgia,serif; */
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--warm-sepia)}
.doc{container-type:inline-size;background:var(--warm-sepia);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.doc a{color:inherit;text-decoration:none}
.doc a:hover{color:var(--saffron-d)}

/* brand bar — canonical wordmark + tapered swash (saffron mark 1 of 2) */
.brandbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.logo{font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink);position:relative;display:inline-block}
.logo svg{position:absolute;left:-2%;bottom:-.42em;width:104%;height:.28em;overflow:visible}
.logo svg path{fill:none;stroke:var(--saffron);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.brandbar .ptype{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);border:1px solid var(--border);padding:3px 7px;border-radius:4px}

/* breadcrumb — the visible counterpart to the BreadcrumbList in <head>, the
   orientation for cold search traffic, and the page's only link home.
   The crumb text stays byte-identical to the JSON-LD `name` values. */
.crumbs{background:var(--deep-sepia);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:0 22px;display:flex;align-items:stretch;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--slate);min-height:44px}
/* the link stretches to the full bar height so the tap target clears 44px
   without the bar growing — padding alone left it at 34px */
.doc .crumbs a{color:var(--slate);display:flex;align-items:center;flex-shrink:0}
.doc .crumbs a:hover{color:var(--ink)}
/* the separator may be a flex box; `.here` must NOT be — `text-overflow`
   applies only to block containers, so making it a flex item killed the
   ellipsis and hard-cut the title at the viewport edge. */
.crumbs .sep{color:var(--slate-l);flex-shrink:0;display:flex;align-items:center}
/* min-width:0 is load-bearing — a flex item defaults to min-width:auto and
   refuses to shrink below its content, so the ellipsis never appears and the
   title is hard-cut at the viewport edge instead. */
.crumbs .here{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0;display:block;align-self:center}

.kicker{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}

/* hero */
.hero{padding:34px 22px 30px}
.hero h1{font-family:var(--serif);font-weight:700;font-size:34px;line-height:1.08;letter-spacing:-.025em;margin:16px 0 0;text-wrap:balance}
.hero .sub{font-size:15.5px;line-height:1.55;color:var(--slate);margin:18px 0 0;max-width:62ch;text-wrap:pretty}

.toc{display:none}

/* sections */
.sec{padding:26px 22px;border-top:1px solid var(--border)}
.sechead{display:flex;gap:14px;align-items:baseline;margin-bottom:16px}
.sechead .n{font-family:var(--mono);font-size:12px;color:var(--slate-l);font-weight:500;flex-shrink:0;padding-top:2px}
.sechead .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.sechead h2{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.18;letter-spacing:-.02em;margin:0}
.secbody{padding-left:26px}
.secbody p{font-size:15px;line-height:1.6;margin:0;text-wrap:pretty}
.secbody p+p{margin-top:14px}
.secbody .note{font-size:13.5px;line-height:1.55;color:var(--slate);margin-top:16px;text-wrap:pretty}
.secbody strong{font-weight:700;color:var(--ink)}

/* diff — the rewrite pattern, using the product's shipped before/after tokens */
.diff{border:1px solid var(--border);border-radius:8px;overflow:hidden;display:grid;grid-template-columns:1fr}
.diff .line{padding:13px 14px}
.diff .row2{display:flex;gap:11px}
.diff .weak{background:var(--rw-before-bg);border-bottom:1px solid var(--rw-before-border)}
.diff .strong{background:var(--rw-after-bg)}
.diff .g{font-family:var(--mono);font-size:15px;line-height:1.45;flex-shrink:0}
.diff .weak .g{color:var(--rw-before-text)}
.diff .strong .g{color:var(--rw-after-text);font-weight:700}
.diff .t{font-size:14px;line-height:1.5}
.diff .weak .t{color:var(--rw-before-text)}
.diff .strong .t{color:var(--ink);font-weight:500}
.difflabel{display:none}

/* six dimensions */
.dims-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:16px}
.dims-grid .d{font-family:var(--mono);font-size:11.5px;padding:11px 12px;display:flex;align-items:center;gap:8px;background:var(--paper);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.dims-grid .d .dot{width:5px;height:5px;border-radius:999px;background:var(--ink);flex-shrink:0}
.dims-grid .d:nth-child(2n){border-right:none}
.dims-grid .d:nth-child(n+5){border-bottom:none}

/* Cultural Readiness Score™ bands — canonical four.
   Ranges are the shipped floors: NEEDS_WORK_FLOOR 52 / GOOD_FLOOR 70 /
   EXCELLENT_FLOOR 87 (packages/shared/src/constants/rubric.ts), derived here
   via PUBLIC_BANDS. The ramp runs before-family → light slate → dark slate →
   moss. No saffron: the CTA button owns the page's only solid accent. */
.bandblock{margin-top:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.bandblock .bh{background:var(--deep-sepia);border-bottom:1px solid var(--border);padding:9px 14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.bandrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border-soft);background:var(--paper)}
.bandrow:last-child{border-bottom:none}
.bandrow .rg{font-family:var(--mono);font-size:10.5px;font-weight:500;padding:3px 8px;border-radius:3px;flex:0 0 62px;text-align:center}
.bandrow .nm{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.bandrow .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--moss);margin-left:auto;flex-shrink:0}
.b-needs .rg{background:rgba(124,74,26,.12);color:var(--rw-before-text)}
.b-dev .rg{background:rgba(107,114,128,.14);color:var(--slate)}
.b-good .rg{background:rgba(107,114,128,.22);color:var(--ink-soft)}
.b-exc .rg{background:rgba(45,106,79,.15);color:var(--moss)}
.b-exc{background:rgba(45,106,79,.045)}

/* FAQ */
.faqs{display:grid;gap:18px}
.faq .q{display:flex;gap:9px;margin-bottom:7px}
.faq .m{font-family:var(--mono);font-size:12px;flex-shrink:0}
.faq .q .m{color:var(--ink)}
/* the question is an <h3> — reset the UA heading margins; type comes from .qt */
.faq .q .qt{font-family:var(--sans);font-weight:700;font-size:14.5px;line-height:1.35;margin:0}
.faq .a{display:flex;gap:9px}
.faq .a .m{color:var(--slate-l)}
.faq .a .at{font-size:13.5px;color:var(--slate);line-height:1.55;text-wrap:pretty}

/* CTA + related — the saffron button is mark 2 of 2 */
.cta-card{border:1.5px solid var(--ink);border-radius:10px;padding:26px 22px;background:var(--deep-sepia)}
.cta-card h3{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.14;letter-spacing:-.02em;margin:12px 0}
.cta-card p{font-size:13.5px;line-height:1.55;color:var(--slate);margin:0 0 22px;text-wrap:pretty}
/* The CTA is an <a>, so these need to outrank `.doc a{color:inherit}`
   (specificity 0,1,1) — a bare `.btn-saffron` (0,1,0) loses to it and the
   button renders ink-on-saffron instead of the spec'd white. */
.doc a.btn-saffron,.btn-saffron{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-size:15px;font-weight:700;color:#fff;background:var(--saffron);border:0;border-radius:9px;padding:0 24px;min-height:46px;cursor:pointer;line-height:1;width:100%;text-decoration:none}
.doc a.btn-saffron:hover,.btn-saffron:hover{background:var(--saffron-d);color:#fff}
.ctafoot{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-top:14px;text-align:center}
.related{margin-top:26px}
.related .rk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.related a{display:flex;gap:10px;padding:11px 0;border-top:1px solid var(--border);align-items:baseline}
.related a .arr{font-family:var(--mono);font-size:11px;color:var(--slate-l);flex-shrink:0}
.related a:hover .arr{color:var(--saffron-d)}
.related a .rt{font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.35}

/* footer — copyright + legal links (added; the dossier had none) */
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px;border-top:1px solid var(--border)}
.foot .copy{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--slate)}
.foot .footlinks{display:flex;gap:18px}
.doc .foot a{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--slate)}
.doc .foot a:hover{color:var(--ink)}

/* ───────────── desktop ───────────── */
@container (min-width:880px){
  .brandbar{height:68px;padding:0 48px}
  .logo{font-size:21px}
  /* vertical padding stays 0 so the link keeps stretching to the full bar
     height — reintroducing it here shrank the desktop click zone to 18px. */
  .crumbs{padding:0 48px;font-size:11.5px;min-height:48px}
  .hero{padding:84px 48px 64px;max-width:1180px;margin:0 auto}
  .hero .inner{max-width:900px}
  .hero h1{font-size:60px;line-height:1.02;margin-top:22px;max-width:18ch}
  .hero .sub{font-size:20px;line-height:1.5;margin-top:28px;max-width:60ch}
  .body{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:248px minmax(0,1fr);gap:72px;padding:0 48px 40px;align-items:start}
  .toc{display:block;position:sticky;top:40px;padding-top:46px}
  .toc .tk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:16px}
  .toc ol{list-style:none;margin:0 0 28px;padding:0}
  .toc li a{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--border);font-size:14px;color:var(--ink-soft)}
  .toc li a:hover{color:var(--ink)}
  .toc li a .tn{font-family:var(--mono);font-size:11px;color:var(--slate-l);flex-shrink:0}
  .toc .miniclock{font-family:var(--mono);font-size:10.5px;color:var(--slate);letter-spacing:.02em;border:1px solid var(--border);border-radius:8px;padding:14px 16px;line-height:1.5}
  .toc .miniclock b{display:block;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px;letter-spacing:0}
  .content{border-left:1px solid var(--border)}
  .sec{padding:40px 0 40px 56px;border-top:none}
  .sec:first-child{padding-top:46px}
  .sec+.sec{border-top:1px solid var(--border)}
  .sechead{margin-bottom:22px}
  .sechead h2{font-size:30px}
  .secbody{padding-left:38px;max-width:660px}
  .secbody p{font-size:17px;line-height:1.62}
  .secbody .note{font-size:15px}
  .diff{grid-template-columns:1fr 1fr;max-width:760px}
  .diff .weak{border-bottom:none;border-right:1px solid var(--rw-before-border)}
  .diff .line{padding:18px}
  .difflabel{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
  .diff .weak .difflabel{color:var(--rw-before-text)}
  .diff .strong .difflabel{color:var(--rw-after-text)}
  .diff .t{font-size:14.5px}
  .dims-grid{grid-template-columns:1fr 1fr 1fr;max-width:660px}
  .dims-grid .d{font-size:12.5px;padding:14px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
  .dims-grid .d:nth-child(2n){border-right:1px solid var(--border)}
  .dims-grid .d:nth-child(3n){border-right:none}
  .dims-grid .d:nth-child(n+4){border-bottom:none}
  .bandblock{max-width:660px}
  .faqs{max-width:720px}
  .faq .q .qt{font-size:16px}
  .faq .a .at{font-size:15px}
  .cta-card{max-width:680px;padding:34px 32px}
  .cta-card h3{font-size:30px}
  .cta-card p{font-size:15px}
  .doc a.btn-saffron,.btn-saffron{width:auto;padding:0 30px;font-size:16px;min-height:52px}
  .ctafoot{text-align:left}
  .related{max-width:680px}
  .foot{max-width:1180px;margin:0 auto;padding:28px 48px}
}
