/* =========================================================================
   EU AI Act Transparency Evidence Pack
   Design system: serious, document-forward B2B compliance tool.
   ========================================================================= */

:root{
  /* Brand */
  --navy-900:#0a1730;
  --navy-800:#0f2148;
  --navy-700:#122c66;
  --navy-600:#1a3b85;
  --blue-500:#2b5cf0;
  --blue-400:#5b8cff;
  --blue-100:#e6edff;
  --blue-050:#f2f6ff;

  /* Neutrals */
  --ink:#0d1424;
  --ink-2:#26324a;
  --ink-3:#4b5872;
  --ink-4:#6f7c96;
  --line:#e2e6ef;
  --line-2:#eef1f6;
  --canvas:#f5f7fb;
  --paper:#ffffff;

  /* Signal */
  --ok-700:#0d6b52;
  --ok-500:#12886a;
  --ok-050:#e8f6f1;
  --warn-700:#8a5a00;
  --warn-500:#b8790a;
  --warn-050:#fdf3e2;
  --crit-700:#a12525;
  --crit-500:#c93232;
  --crit-050:#fdeded;

  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(13,20,36,.06), 0 1px 3px rgba(13,20,36,.05);
  --shadow-md:0 4px 12px rgba(13,20,36,.07), 0 1px 3px rgba(13,20,36,.05);
  --shadow-lg:0 18px 48px rgba(10,23,48,.14), 0 4px 12px rgba(10,23,48,.07);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --topbar-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink);line-height:1.22;margin:0 0 .5em;letter-spacing:-.018em}
h1{font-size:clamp(2.1rem,4.4vw,3.35rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,2.7vw,2.2rem);letter-spacing:-.024em}
h3{font-size:1.075rem}
p{margin:0 0 1em}
a{color:var(--blue-500);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.4em}
strong{color:var(--ink);font-weight:650}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
:focus-visible{outline:2.5px solid var(--blue-500);outline-offset:2px;border-radius:4px}
/* Headings only take focus so a route change lands there for keyboard and
   screen-reader users. They aren't interactive, so no focus ring. */
[tabindex="-1"]:focus{outline:none}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy-700);color:#fff;
  border:0;padding:.7rem 1.1rem;border-radius:0 0 8px 0;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
}
.skip-link:focus{left:0;text-decoration:none}
#landing:focus,#app:focus{outline:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

.container{max-width:1140px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:780px}
.center{text-align:center}
.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-500);margin:0 0 .85rem;
}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------------------------------- Buttons ---------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:600;font-size:.925rem;line-height:1;
  padding:.72rem 1.15rem;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .05s;
  white-space:nowrap;text-decoration:none;
}
.btn:active{transform:translateY(.5px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--navy-700);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--navy-600);text-decoration:none}
.btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{border-color:#c9d1e0;background:#fbfcfe;text-decoration:none}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:transparent}
.btn-ghost:hover{background:var(--canvas);color:var(--ink);text-decoration:none}
.btn-ghost-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.32)}
.btn-ghost-light:hover{background:rgba(255,255,255,.16);text-decoration:none}
.btn-lg{padding:.92rem 1.5rem;font-size:1rem}
.btn-sm{padding:.48rem .78rem;font-size:.83rem}
.btn-block{width:100%}
.btn-danger{background:var(--paper);color:var(--crit-700);border-color:#f0cdcd}
.btn-danger:hover{background:var(--crit-050)}

/* ---------------------------------- Top bar ---------------------------------- */
.topbar{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1240px;margin:0 auto;padding:0 24px;height:var(--topbar-h);
  display:flex;align-items:center;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);text-decoration:none;flex:none}
.brand:hover{text-decoration:none}
.brand-mark{display:flex}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:.9rem;font-weight:700;letter-spacing:-.012em}
.brand-text em{font-size:.72rem;font-style:normal;color:var(--ink-4);letter-spacing:.01em}
.topnav{display:flex;gap:1.5rem;margin-left:auto;font-size:.885rem}
.topnav a{color:var(--ink-3);font-weight:500}
.topnav a:hover{color:var(--ink);text-decoration:none}
.topbar-actions{display:flex;gap:.5rem;align-items:center;margin-left:auto}
.topnav + .topbar-actions{margin-left:0}
.topbar-progress{height:3px;background:var(--line-2)}
.topbar-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--navy-700),var(--blue-500));transition:width .35s ease}

/* ---------------------------------- Hero ---------------------------------- */
.hero{
  padding:76px 0 88px;
  background:
    radial-gradient(900px 420px at 12% -10%, var(--blue-050) 0%, rgba(242,246,255,0) 62%),
    linear-gradient(180deg,#fff 0%,var(--canvas) 100%);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center}
.hero-copy h1{margin-bottom:.55em;text-wrap:balance}
.lede{font-size:1.135rem;color:var(--ink-3);max-width:33em;line-height:1.62}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.9rem 0 1.6rem}
.hero-cta.center{justify-content:center}
.hero-meta{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.hero-meta li{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--ink-3);margin:0}
.hero-meta .ico{color:var(--ok-500);width:1.05em;height:1.05em}

/* Hero document art */
.hero-art{position:relative}
/* The stack takes its height from the front card, which stays in flow; the two
   cards behind it are positioned against that height so they peek bottom-right. */
.doc-stack{position:relative}
.doc{border-radius:12px;background:#fff;border:1px solid var(--line)}
.doc-3,.doc-2{position:absolute;z-index:1;box-shadow:var(--shadow-sm)}
.doc-3{top:40px;left:52px;right:-26px;bottom:-30px;background:#f2f5fa}
.doc-2{top:22px;left:28px;right:-13px;bottom:-15px;background:#fafbfe}
.doc-1{
  position:relative;z-index:2;box-shadow:var(--shadow-lg);padding:26px 26px 20px;
  display:flex;flex-direction:column;
}
.doc-head{border-bottom:1px solid var(--line-2);padding-bottom:16px;margin-bottom:14px}
.doc-badge{
  display:inline-block;font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy-700);background:var(--blue-100);padding:.28rem .55rem;border-radius:4px;margin-bottom:.6rem;
}
.doc-title{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--ink);line-height:1.2}
.doc-sub{display:block;font-size:.775rem;color:var(--ink-4);margin-top:.25rem}
.doc-rows{display:flex;flex-direction:column;gap:0}
.doc-row{display:flex;align-items:center;justify-content:space-between;padding:.46rem 0;border-bottom:1px dashed var(--line-2)}
.doc-row .lbl{font-size:.83rem;color:var(--ink-2)}
.pill{font-size:.66rem;font-weight:700;letter-spacing:.03em;padding:.2rem .5rem;border-radius:20px;white-space:nowrap}
.pill.ok{background:var(--ok-050);color:var(--ok-700)}
.pill.warn{background:var(--warn-050);color:var(--warn-700)}
.pill.crit{background:var(--crit-050);color:var(--crit-700)}
.doc-foot{display:flex;align-items:center;gap:.85rem;padding-top:16px;margin-top:6px;border-top:1px solid var(--line-2)}
.score-ring{
  width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--ok-500) 0 86%, var(--line) 86% 100%);
  position:relative;
}
.score-ring::after{content:"";position:absolute;inset:5px;background:#fff;border-radius:50%}
.score-ring span{position:relative;z-index:1;font-weight:700;font-size:1rem;color:var(--ink)}
.score-text{display:flex;flex-direction:column;line-height:1.3}
.score-text strong{font-size:.87rem}
.score-text em{font-style:normal;font-size:.775rem;color:var(--ink-4)}

/* ---------------------------------- Sections ---------------------------------- */
.section{padding:88px 0}
.section-alt{background:var(--canvas);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-title{max-width:20ch;margin-inline:auto;text-wrap:balance}
.section-title:not(.center){max-width:none;margin-inline:0}
.section-lede{max-width:60ch;margin:1rem auto 0;color:var(--ink-3);font-size:1.045rem}

.band{padding:56px 0;background:var(--navy-900);color:#c9d4e8}
.band-quiet{background:var(--navy-900)}
.band-title{color:#fff;text-align:center;font-size:1.35rem;margin-bottom:2rem}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote-grid blockquote{
  margin:0;padding:22px 24px;background:rgba(255,255,255,.045);border-left:2px solid var(--blue-400);
  border-radius:0 8px 8px 0;font-size:.97rem;color:#dbe4f4;line-height:1.55;
}
.quote-grid cite{display:block;margin-top:.85rem;font-style:normal;font-size:.79rem;color:#8a9bbb}
.band-note{
  max-width:64ch;margin:2.2rem auto 0;text-align:center;font-size:1.02rem;color:#a8b8d4;
}
.band-note strong{color:#fff}

/* Feature grid */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:3rem}
.feature{background:var(--paper);padding:28px 30px}
.feature .num{
  display:block;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  color:var(--blue-500);margin-bottom:.75rem;
}
.feature h3{margin-bottom:.4em;font-size:1.02rem}
.feature p{margin:0;font-size:.92rem;color:var(--ink-3);line-height:1.58}

/* Extras band under the feature grid */
.extras{margin-top:2.4rem;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 32px;background:var(--paper)}
.extras > h3{font-size:1.02rem;margin-bottom:1.4rem;text-align:center}
.extras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.extras-grid h4{font-size:.9rem;margin-bottom:.45rem;color:var(--navy-700)}
.extras-grid p{font-size:.885rem;color:var(--ink-3);line-height:1.58;margin:0}

/* Steps */
.steps{list-style:none;padding:0;margin:3rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.steps li{
  margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px 22px;position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.step-n{
  width:30px;height:30px;border-radius:8px;background:var(--navy-700);color:#fff;
  display:grid;place-items:center;font-size:.87rem;font-weight:700;margin-bottom:1rem;
}
.steps h3{font-size:1rem;margin-bottom:.45em}
.steps p{font-size:.895rem;color:var(--ink-3);line-height:1.56;margin-bottom:1rem;flex:1}
.step-time{
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);
  border-top:1px solid var(--line-2);padding-top:.75rem;
}

/* Personas */
.persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:3rem}
.persona{border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;background:var(--paper)}
.persona h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--blue-500);margin-bottom:1rem}
.persona-line{font-family:var(--serif);font-size:1.28rem;color:var(--ink);line-height:1.35;margin-bottom:.85rem}
.persona p:last-child{margin:0;font-size:.92rem;color:var(--ink-3);line-height:1.58}

/* Scope (dark) */
.section-dark{background:var(--navy-900);color:#c2cee5}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark .eyebrow{color:var(--blue-400)}
.scope-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:3rem}
.scope-col{border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-lg);padding:30px 32px;background:rgba(255,255,255,.035)}
.scope-col h3{display:flex;align-items:center;gap:.6rem;font-size:1.02rem;margin-bottom:1.1rem}
.scope-is h3 .ico{color:#4ad4a8}
.scope-isnt h3 .ico{color:#ff8f8f}
.scope-col ul{list-style:none;padding:0;margin:0}
.scope-col li{
  padding:.62rem 0 .62rem 1.15rem;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.94rem;line-height:1.55;position:relative;margin:0;
}
.scope-col li:last-child{border-bottom:0}
.scope-col li::before{content:"";position:absolute;left:0;top:1.05em;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3)}
.scope-kicker{
  text-align:center;margin:2.4rem auto 0;max-width:52ch;font-family:var(--serif);
  font-size:1.28rem;color:#fff;line-height:1.45;
}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:3rem;align-items:start}
.price{border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;background:var(--paper);position:relative;display:flex;flex-direction:column}
.price-featured{border-color:var(--navy-700);box-shadow:var(--shadow-lg);padding-top:38px}
.price-flag{
  position:absolute;top:-11px;left:28px;background:var(--navy-700);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.32rem .68rem;border-radius:5px;
}
.price h3{font-size:.98rem;margin-bottom:.6rem}
.price-amount{font-size:2.5rem;font-weight:700;color:var(--ink);letter-spacing:-.03em;margin:0 0 .35rem;line-height:1}
.price-amount span{font-size:.8rem;font-weight:500;color:var(--ink-4);letter-spacing:0;margin-left:.45rem}
.price-line{font-size:.9rem;color:var(--ink-3);margin-bottom:1.4rem;min-height:2.6em}
.price ul{list-style:none;padding:0;margin:0 0 1.7rem;flex:1}
.price li{
  font-size:.885rem;color:var(--ink-2);padding:.48rem 0 .48rem 1.5rem;position:relative;margin:0;
  border-bottom:1px solid var(--line-2);
}
.price li:last-child{border-bottom:0}
.price li::before{
  content:"";position:absolute;left:.15rem;top:.92em;width:9px;height:5px;
  border-left:2px solid var(--ok-500);border-bottom:2px solid var(--ok-500);transform:rotate(-45deg);
}
.price-buy{text-align:center;margin:.7rem 0 0;font-size:.83rem}
.price-buy a{color:var(--ink-4);font-weight:500}
.price-buy a:hover{color:var(--blue-500)}
.price-foot{text-align:center;margin-top:1.6rem;font-size:.85rem;color:var(--ink-4);max-width:70ch;margin-inline:auto;line-height:1.6}

/* FAQ */
.faq{margin-top:2.6rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;font-weight:620;color:var(--ink);
  font-size:1.005rem;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.55rem;width:9px;height:9px;
  border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 3rem 1.35rem 0;margin:0;color:var(--ink-3);font-size:.955rem;line-height:1.65}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--navy-800),var(--navy-700) 55%,var(--navy-600));color:#fff;padding:76px 0;text-align:center}
.cta-band h2{color:#fff;max-width:22ch;margin:0 auto .7rem;text-wrap:balance}
.cta-band p{color:#c3d1ea;max-width:52ch;margin:0 auto;font-size:1.04rem}

/* Footer */
.site-footer{background:var(--navy-900);color:#8fa0be;padding:48px 0 56px}
.footer-inner{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start}
.footer-brand strong{color:#fff;display:block;font-size:.95rem;margin-bottom:.35rem}
.footer-brand p{font-size:.85rem;margin:0;color:#7f90ad}
.footer-legal{font-size:.8rem;line-height:1.65;margin:0;color:#7f90ad;max-width:78ch}

/* =========================================================================
   APP SHELL
   ========================================================================= */
.app-wrap{min-height:calc(100vh - var(--topbar-h));background:var(--canvas)}

/* ------- Setup / intro screen ------- */
.setup{max-width:760px;margin:0 auto;padding:56px 24px 80px}
.setup-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:40px 44px}
.setup h1{font-size:2rem;margin-bottom:.4em}
.setup .lede{font-size:1.03rem;margin-bottom:2rem}
.setup-list{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.9rem}
.setup-list li{display:flex;gap:.85rem;align-items:flex-start;margin:0;font-size:.945rem;color:var(--ink-3)}
.setup-list .ico{color:var(--ok-500);margin-top:.28em;width:1.1em;height:1.1em}
.setup-note{
  background:var(--blue-050);border:1px solid #d7e2ff;border-radius:var(--radius);
  padding:16px 18px;font-size:.88rem;color:var(--ink-3);margin-bottom:2rem;
}
.setup-note strong{color:var(--navy-700)}

/* ------- Questionnaire layout ------- */
.q-layout{display:grid;grid-template-columns:296px minmax(0,1fr);gap:0;align-items:start;max-width:1240px;margin:0 auto}
.q-side{
  position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;
  background:var(--paper);border-right:1px solid var(--line);padding:26px 20px 40px;
}
.q-side-head{padding:0 8px 18px;border-bottom:1px solid var(--line-2);margin-bottom:14px}
.q-side-head h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4);margin-bottom:.85rem}
.q-progress{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.5rem}
.q-progress strong{font-size:1.65rem;color:var(--ink);letter-spacing:-.02em;line-height:1}
.q-progress span{font-size:.82rem;color:var(--ink-4)}
.q-bar{height:6px;background:var(--line-2);border-radius:4px;overflow:hidden}
.q-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--navy-700),var(--blue-500));transition:width .3s}
.q-autosave{font-size:.74rem;color:var(--ink-4);margin-top:.7rem;display:flex;align-items:center;gap:.4rem}
.q-autosave .dot{width:6px;height:6px;border-radius:50%;background:var(--ok-500)}

.sec-nav{list-style:none;padding:0;margin:0}
.sec-nav li{margin:0}
.sec-nav button{
  width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer;
  padding:.62rem .7rem;border-radius:8px;display:flex;align-items:center;gap:.65rem;
  color:var(--ink-3);font-size:.88rem;line-height:1.35;transition:background .13s,color .13s;
}
.sec-nav button:hover{background:var(--canvas);color:var(--ink)}
.sec-nav button.active{background:var(--blue-050);color:var(--navy-700);font-weight:620}
.sec-nav .tick{
  width:19px;height:19px;border-radius:50%;border:1.8px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:.62rem;color:var(--ink-4);background:#fff;
}
.sec-nav .tick.done{background:var(--ok-500);border-color:var(--ok-500);color:#fff}
.sec-nav .tick.partial{border-color:var(--blue-400);color:var(--blue-500);font-weight:700}
.sec-nav .tick svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sec-nav .sec-label{flex:1;min-width:0}
.sec-nav .sec-count{font-size:.72rem;color:var(--ink-4);font-variant-numeric:tabular-nums}
.side-tools{margin-top:22px;padding:0 8px;border-top:1px solid var(--line-2);padding-top:16px;display:grid;gap:.45rem}
.side-tools button{
  background:none;border:0;font:inherit;font-size:.83rem;color:var(--ink-3);cursor:pointer;
  text-align:left;padding:.35rem 0;
}
.side-tools button:hover{color:var(--blue-500)}

/* ------- Question column ------- */
.q-main{padding:38px 40px 96px;max-width:800px}
.q-head{margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.q-kicker{display:flex;align-items:center;gap:.7rem;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-500);margin-bottom:.85rem}
.q-kicker .est{color:var(--ink-4);font-weight:600;letter-spacing:.04em}
.q-head h1{font-size:1.85rem;margin-bottom:.35em}
.q-head p{color:var(--ink-3);font-size:1.02rem;margin:0;max-width:60ch}

.field{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 26px;margin-bottom:16px;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s;
}
.field:focus-within{border-color:#c3d0ea;box-shadow:0 0 0 3px var(--blue-050),var(--shadow-sm)}
.field.flagged{border-left:3px solid var(--warn-500)}
.field.is-na{background:var(--canvas);border-style:dashed;box-shadow:none}
.field.is-na .q-label{color:var(--ink-4)}
.na-tag{
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);background:#e7eaf1;padding:.2rem .45rem;border-radius:4px;flex:none;margin-top:.15rem;
}
.field-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.35rem}
.field label.q-label{font-weight:620;color:var(--ink);font-size:1.005rem;line-height:1.4;display:block;cursor:default}
.req-tag{
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--crit-700);background:var(--crit-050);padding:.2rem .45rem;border-radius:4px;flex:none;margin-top:.15rem;
}
.opt-tag{
  font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);background:var(--canvas);padding:.2rem .45rem;border-radius:4px;flex:none;margin-top:.15rem;
}
.q-help{font-size:.875rem;color:var(--ink-3);margin:.35rem 0 1rem;line-height:1.55}
.q-help b{color:var(--ink-2);font-weight:620}

input[type=text],input[type=email],input[type=date],textarea,select{
  width:100%;font:inherit;font-size:.945rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:.66rem .78rem;transition:border-color .15s;
}
input[type=text]:hover,textarea:hover,select:hover{border-color:#ccd5e6}
input[type=text]:focus,input[type=email]:focus,input[type=date]:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-050);
}
textarea{min-height:104px;resize:vertical;line-height:1.55}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f7c96' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem;cursor:pointer}
::placeholder{color:#a7b1c6}

/* choice controls */
.choices{display:grid;gap:.5rem}
.choices.cols-2{grid-template-columns:repeat(2,1fr)}
.choice{
  display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .85rem;border:1px solid var(--line);
  border-radius:9px;cursor:pointer;transition:border-color .13s,background .13s;background:#fff;
}
.choice:hover{border-color:#c3d0ea;background:#fcfdff}
.choice input{margin:.22rem 0 0;accent-color:var(--navy-700);width:16px;height:16px;flex:none;cursor:pointer}
.choice.checked{border-color:var(--navy-700);background:var(--blue-050)}
.choice-body{min-width:0}
.choice-body b{display:block;font-weight:560;color:var(--ink);font-size:.93rem;line-height:1.4}
.choice-body small{display:block;color:var(--ink-4);font-size:.815rem;line-height:1.45;margin-top:.15rem}

.yesno{display:flex;gap:.5rem}
.yesno .choice{flex:1;justify-content:center;align-items:center;text-align:center;padding:.7rem 1rem}
.yesno .choice-body b{font-size:.93rem}

/* helper row under fields */
.field-tools{display:flex;align-items:center;gap:1rem;margin-top:.7rem;flex-wrap:wrap}
.link-btn{
  background:none;border:0;padding:0;font:inherit;font-size:.82rem;font-weight:600;color:var(--blue-500);
  cursor:pointer;display:inline-flex;align-items:center;gap:.32rem;
}
.link-btn:hover{text-decoration:underline}
.link-btn.muted{color:var(--ink-4);font-weight:500}
.link-btn.muted:hover{color:var(--ink-2)}
.link-btn.flag-on{color:var(--warn-700)}
.char-hint{font-size:.78rem;color:var(--ink-4);margin-left:auto;font-variant-numeric:tabular-nums}

.example-box{
  margin-top:.7rem;background:var(--canvas);border:1px dashed var(--line);border-radius:8px;
  padding:14px 16px;font-size:.865rem;color:var(--ink-3);line-height:1.55;
}
.example-box h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);margin:0 0 .5rem}
.example-box p{margin:0 0 .7rem;font-style:italic}

.q-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}

/* ------- Gap review ------- */
.review{max-width:940px;margin:0 auto;padding:42px 24px 96px}
.review-hero{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:34px 38px;display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;margin-bottom:28px;
}
.big-ring{width:132px;height:132px;border-radius:50%;position:relative;display:grid;place-items:center;flex:none}
.big-ring::after{content:"";position:absolute;inset:11px;background:#fff;border-radius:50%}
.big-ring .val{position:relative;z-index:1;text-align:center}
.big-ring .val b{display:block;font-size:2.4rem;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1}
.big-ring .val small{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4)}
.review-hero h1{font-size:1.6rem;margin-bottom:.3em}
.review-hero .band-label{font-size:.95rem;font-weight:650;margin-bottom:.55rem}
.review-hero p{color:var(--ink-3);font-size:.955rem;margin:0}
.review-hero .cov-note{margin-top:.7rem;font-size:.875rem;color:var(--warn-700);background:var(--warn-050);
  border:1px solid #f0dcb4;border-radius:8px;padding:.6rem .8rem}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.stat b{display:block;font-size:1.85rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.stat span{font-size:.8rem;color:var(--ink-4)}
.stat.crit b{color:var(--crit-500)} .stat.warn b{color:var(--warn-500)} .stat.ok b{color:var(--ok-500)}

.gap-group{margin-bottom:32px}
.gap-group > h2{font-size:1.08rem;display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}
.gap-group > p{font-size:.9rem;color:var(--ink-3);margin-bottom:1rem;max-width:70ch}
.gap-item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;
}
.gap-item.sev-critical{border-left:3px solid var(--crit-500)}
.gap-item.sev-important{border-left:3px solid var(--warn-500)}
.gap-item.sev-recommended{border-left:3px solid var(--blue-400)}
.gap-item h3{font-size:.96rem;margin-bottom:.3em}
.gap-item .gap-sec{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4);margin-bottom:.4rem}
.gap-item .gap-action{font-size:.885rem;color:var(--ink-3);margin:0;line-height:1.55}
.gap-item .gap-action b{color:var(--ink-2)}
.empty-state{
  background:var(--ok-050);border:1px solid #bfe5d8;border-radius:var(--radius);padding:22px 24px;
  font-size:.94rem;color:var(--ok-700);
}
.empty-state strong{color:var(--ok-700)}

/* Test-mode marker — deliberately loud, and above everything. */
.mode-banner{
  position:sticky;top:0;z-index:120;background:#3a2a00;color:#ffd98a;
  font-size:.82rem;text-align:center;padding:.5rem 16px;line-height:1.45;
}
.mode-banner strong{color:#ffc24d}
.mode-banner code{
  background:rgba(255,255,255,.12);border:0;color:#ffe6b0;
  font-size:.95em;padding:.05em .35em;border-radius:3px;
}
body.has-mode-banner .topbar{top:0}

/* ------- License ------- */
.license-chip{
  font:inherit;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.34rem .6rem;border-radius:20px;cursor:pointer;white-space:nowrap;
  background:var(--warn-050);color:var(--warn-700);border:1px solid #f0dcb4;
}
.license-chip:hover{background:#fbe9cc}
.license-chip.is-on{background:var(--ok-050);color:var(--ok-700);border-color:#bfe5d8}
.license-chip.is-on:hover{background:#ddf1ea}
.license-msg{
  margin:.85rem 0 0;font-size:.88rem;color:var(--crit-700);background:var(--crit-050);
  border:1px solid #f0cdcd;border-radius:8px;padding:.65rem .8rem;line-height:1.5;
}
.price a.btn-block{text-decoration:none}
.price a.btn-block:hover{text-decoration:none}

/* ------- Workspace ------- */
.packs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:28px}
.packs-head .btn{flex:none}
.pack-list{display:grid;gap:12px}
.pack-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s;
}
.pack-card:hover{border-color:#c9d1e0;box-shadow:var(--shadow-md)}
.pack-card.is-active{border-color:var(--navy-700);box-shadow:0 0 0 1px var(--navy-700),var(--shadow-sm)}
.pc-title{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.15rem}
.pc-title h2{font-size:1.08rem;margin:0}
.pc-tag{
  font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--blue-100);color:var(--navy-700);padding:.2rem .45rem;border-radius:4px;
}
.pc-tag.sample{background:var(--warn-050);color:var(--warn-700)}
.pc-sub{font-size:.855rem;color:var(--ink-3);margin:0 0 .85rem}
.pc-sub.pc-empty{color:var(--ink-4);font-style:italic}
.pc-bar{height:5px;background:var(--line-2);border-radius:4px;overflow:hidden;margin-bottom:.6rem;max-width:420px}
.pc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--navy-700),var(--blue-500))}
.pc-stats{display:flex;gap:1.15rem;flex-wrap:wrap;font-size:.82rem;color:var(--ink-4);margin:0}
.pc-stats b{color:var(--ink);font-weight:650}
.pc-when{margin-left:auto}
.pc-actions{display:flex;flex-direction:column;gap:.45rem;align-items:stretch;flex:none;min-width:120px}
.pc-actions .link-btn{justify-content:center;padding:.25rem 0}

/* ------- Start here (priority actions) ------- */
.start-here{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:26px 28px 22px;margin-bottom:32px;
}
.sh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;margin-bottom:1.2rem}
.sh-head h2{font-size:1.12rem;margin-bottom:.3rem}
.sh-head p{font-size:.9rem;color:var(--ink-3);margin:0;max-width:62ch}
.sh-lift{
  flex:none;text-align:center;background:var(--ok-050);border:1px solid #bfe5d8;
  border-radius:10px;padding:.6rem 1rem;line-height:1.1;
}
.sh-lift b{display:block;font-size:1.5rem;color:var(--ok-700);letter-spacing:-.02em}
.sh-lift span{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ok-700)}
.sh-list{list-style:none;padding:0;margin:0;counter-reset:sh}
.sh-list li{
  counter-increment:sh;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:.95rem 0 .95rem 2.4rem;border-top:1px solid var(--line-2);position:relative;margin:0;
}
.sh-list li::before{
  content:counter(sh);position:absolute;left:0;top:1.05rem;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:.76rem;font-weight:700;background:var(--canvas);color:var(--ink-3);
}
.sh-list li.sev-critical::before{background:var(--crit-050);color:var(--crit-700)}
.sh-list li.sev-important::before{background:var(--warn-050);color:var(--warn-700)}
.sh-sev{
  display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:.25rem;
}
.sh-list li.sev-critical .sh-sev{color:var(--crit-700)}
.sh-list li.sev-important .sh-sev{color:var(--warn-700)}
.sh-body h3{font-size:.95rem;margin-bottom:.25rem}
.sh-body p{font-size:.87rem;color:var(--ink-3);margin:0;line-height:1.5}

/* ------- Notice drafts ------- */
.notice-actions{display:flex;gap:.6rem;margin:0 0 22px;flex-wrap:wrap}
.draft{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 26px;margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.draft-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.draft-head h2{font-size:1.05rem;margin-bottom:.4rem}
.draft-meta{font-size:.82rem;color:var(--ink-4);margin:0;line-height:1.6}
.draft-meta b{color:var(--ink-3);font-weight:620}
.draft-body{
  font-family:var(--serif);font-size:.97rem;line-height:1.62;color:var(--ink);
  background:var(--canvas);border:1px solid var(--line-2);border-left:3px solid var(--blue-400);
  border-radius:0 8px 8px 0;padding:18px 20px;margin:0 0 1rem;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.draft-note{font-size:.865rem;color:var(--ink-3);margin:0 0 1rem;line-height:1.55}
.draft-checks{border-top:1px solid var(--line-2);padding-top:.9rem}
.draft-checks .checks-label{
  font-size:.68rem;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-4);margin:0 0 .5rem;
}
.draft-checks ul{list-style:none;padding:0;margin:0}
.draft-checks li{
  font-size:.845rem;color:var(--ink-3);padding:.22rem 0 .22rem 1.35rem;position:relative;margin:0;
}
.draft-checks li::before{
  content:"";position:absolute;left:.15rem;top:.72em;width:8px;height:5px;
  border-left:2px solid var(--ok-500);border-bottom:2px solid var(--ok-500);transform:rotate(-45deg);
}
code{
  font-family:var(--mono);font-size:.88em;background:var(--canvas);
  border:1px solid var(--line-2);border-radius:4px;padding:.08em .32em;
}

/* ------- Pack view ------- */
.pack-toolbar{
  position:sticky;top:var(--topbar-h);z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.pack-toolbar-inner{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pack-toolbar .tb-title{font-size:.87rem;color:var(--ink-3);margin-right:auto}
.pack-toolbar .tb-title strong{color:var(--ink)}
.pack-scroll{padding:34px 24px 90px;background:var(--canvas)}
.doc-sheet{
  max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:6px;box-shadow:var(--shadow-lg);padding:64px 72px 72px;
  font-family:var(--serif);color:#1a2438;font-size:16px;line-height:1.65;
}

/* Document typography */
.doc-sheet h1,.doc-sheet h2,.doc-sheet h3,.doc-sheet h4{font-family:var(--serif);color:#0b1220}
.doc-cover{border-bottom:2px solid #0b1220;padding-bottom:36px;margin-bottom:14px}
.doc-cover .cover-eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-700);margin-bottom:1.6rem;
}
.doc-cover h1{font-size:2.55rem;line-height:1.15;letter-spacing:-.02em;margin-bottom:.35rem}
.doc-cover .cover-sub{font-size:1.15rem;color:#48566f;margin-bottom:2.2rem;font-style:italic}
.cover-meta{
  font-family:var(--sans);display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid #dfe4ee;
}
.cover-meta div{padding:.7rem 0;border-bottom:1px solid #eef1f6;display:flex;gap:.75rem;font-size:.875rem}
.cover-meta div:nth-child(odd){padding-right:1.5rem}
.cover-meta dt{color:#6f7c96;min-width:9.5rem;flex:none}
.cover-meta dd{margin:0;color:#1a2438;font-weight:560}
.doc-disclaimer{
  font-family:var(--sans);background:#f7f9fc;border:1px solid #e2e6ef;border-left:3px solid var(--navy-700);
  border-radius:0 6px 6px 0;padding:18px 22px;margin:30px 0 0;font-size:.845rem;line-height:1.6;color:#4b5872;
}
.doc-disclaimer strong{color:#0b1220;display:block;margin-bottom:.35rem;font-size:.9rem}

.doc-toc{font-family:var(--sans);margin:42px 0 0;padding:26px 0 0;border-top:1px solid #dfe4ee}
.doc-toc h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#6f7c96;margin-bottom:1rem}
.doc-toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.doc-toc li{
  counter-increment:toc;display:flex;align-items:baseline;gap:.6rem;padding:.4rem 0;
  border-bottom:1px dotted #dfe4ee;font-size:.9rem;margin:0;
}
.doc-toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:.75rem;color:var(--blue-500);flex:none}
.doc-toc .toc-name{color:#1a2438}
.doc-toc .toc-state{margin-left:auto;font-size:.72rem;flex:none}

.doc-section{margin-top:52px;padding-top:0}
.doc-section > h2{
  font-size:1.5rem;letter-spacing:-.015em;padding-bottom:.5rem;border-bottom:1px solid #dfe4ee;margin-bottom:1.3rem;
  display:flex;align-items:baseline;gap:.7rem;
}
.doc-section > h2 .sec-num{font-family:var(--mono);font-size:.85rem;color:var(--blue-500);flex:none}
.doc-section h3{font-family:var(--sans);font-size:.95rem;letter-spacing:-.005em;margin:1.9rem 0 .5rem;color:#0b1220}
.doc-section p{margin:0 0 .95rem}
.doc-section ul{margin:0 0 1rem;padding-left:1.25rem}
.doc-section li{margin-bottom:.35rem}
.doc-lead{font-size:1.03rem;color:#33405a}

.kv{font-family:var(--sans);border:1px solid #e2e6ef;border-radius:6px;overflow:hidden;margin:0 0 1.2rem}
.kv div{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid #eef1f6}
.kv div:last-child{border-bottom:0}
.kv div:nth-child(even){background:#fafbfd}
.kv dt{padding:.68rem .9rem;color:#4b5872;font-size:.845rem;font-weight:600;border-right:1px solid #eef1f6}
.kv dd{padding:.68rem .9rem;margin:0;font-size:.885rem;color:#1a2438}

/* Wide tables scroll inside their own container — the page never does. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.3rem;max-width:100%}
table.doc-table{
  font-family:var(--sans);width:100%;border-collapse:collapse;font-size:.83rem;margin:0;
  border:1px solid #e2e6ef;min-width:520px;
}
table.doc-table th{
  text-align:left;background:#f4f6fa;color:#33405a;font-weight:650;font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase;padding:.62rem .8rem;border-bottom:1px solid #e2e6ef;
}
table.doc-table td{padding:.65rem .8rem;border-bottom:1px solid #eef1f6;vertical-align:top;color:#26324a;line-height:1.5}
table.doc-table tr:last-child td{border-bottom:0}
table.doc-table tbody tr:nth-child(even){background:#fafbfd}
.st{font-family:var(--sans);font-size:.68rem;font-weight:700;padding:.16rem .44rem;border-radius:4px;white-space:nowrap;display:inline-block}
.st-ok{background:var(--ok-050);color:var(--ok-700)}
.st-part{background:var(--warn-050);color:var(--warn-700)}
.st-miss{background:var(--crit-050);color:var(--crit-700)}
.st-na{background:#eef1f6;color:#6f7c96}

.gap-inline{
  font-family:var(--sans);display:inline-block;background:var(--warn-050);color:var(--warn-700);
  border:1px dashed #e3c58a;border-radius:4px;padding:.05rem .4rem;font-size:.8rem;font-weight:600;
}
.notice-card{
  font-family:var(--sans);background:#f7f9fc;border:1px solid #e2e6ef;border-radius:6px;padding:20px 22px;margin:0 0 1.2rem;
}
.notice-card .nc-label{font-family:var(--sans);font-size:.7rem;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:#6f7c96;margin:0 0 .7rem}
.notice-card blockquote{
  margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.6;color:#1a2438;
  border-left:3px solid var(--blue-400);padding-left:1rem;
}
.notice-card .notice-where{font-size:.82rem;color:#6f7c96;margin:.85rem 0 0}
.doc-end{
  font-family:var(--sans);margin-top:56px;padding-top:22px;border-top:2px solid #0b1220;
  font-size:.8rem;color:#6f7c96;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}

/* ------- Export view ------- */
.export{max-width:940px;margin:0 auto;padding:48px 24px 96px}
.export-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:2rem 0}
.export-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
}
.export-card .ec-ico{
  width:38px;height:38px;border-radius:9px;background:var(--blue-050);color:var(--navy-700);
  display:grid;place-items:center;margin-bottom:1rem;
}
.export-card .ec-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.export-card h2{font-size:1rem;margin-bottom:.35em}
.export-card p{font-size:.885rem;color:var(--ink-3);flex:1;margin-bottom:1.2rem;line-height:1.55}
.share-box{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;margin-top:1.5rem;
}
.share-box h2{font-size:1.05rem}
.share-row{display:flex;gap:.6rem;margin-top:1rem}
.share-row input{font-family:var(--mono);font-size:.8rem;color:var(--ink-3);background:var(--canvas)}

/* ------- Misc ------- */
.callout{
  background:var(--blue-050);border:1px solid #d7e2ff;border-radius:var(--radius);
  padding:18px 20px;font-size:.9rem;color:var(--ink-3);line-height:1.6;
}
.callout strong{color:var(--navy-700)}
.callout.warn{background:var(--warn-050);border-color:#f0dcb4;color:#6d4a06}
.callout.warn strong{color:var(--warn-700)}
.sample-banner{
  background:var(--warn-050);border-bottom:1px solid #f0dcb4;color:#6d4a06;
  font-size:.855rem;padding:.7rem 24px;text-align:center;
}
.sample-banner strong{color:var(--warn-700)}
.sample-banner.storage-warn{background:var(--crit-050);border-bottom-color:#f0cdcd;color:#7a2020}
.sample-banner.storage-warn strong{color:var(--crit-700)}

/* Customer summary reads as a letter, not a report: no section numbering,
   tighter rhythm, and it must fit on one page when printed. */
.doc-summary{padding:56px 64px 48px}
.doc-summary .summary-cover{border-bottom-width:1px;padding-bottom:24px;margin-bottom:0}
.doc-summary .summary-cover h1{font-size:2.1rem}
.doc-summary .doc-section{margin-top:30px}
.doc-summary .doc-section > h2{font-size:1.12rem;border-bottom:0;padding-bottom:0;margin-bottom:.6rem}
.doc-summary .kv div{grid-template-columns:210px 1fr}
.doc-summary .doc-disclaimer{margin-top:26px}
.sample-banner button{margin-left:.6rem}

.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:#fff;padding:.8rem 1.2rem;border-radius:9px;font-size:.885rem;
  box-shadow:var(--shadow-lg);z-index:200;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ------- Responsive ------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .hero-art{max-width:520px}
  .doc-2{right:-6px} .doc-3{right:-12px}
  .feature-grid,.scope-grid{grid-template-columns:1fr}
  .steps,.price-grid,.persona-grid,.quote-grid,.extras-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .q-layout{grid-template-columns:minmax(0,1fr)}
  .q-side,.q-main{min-width:0;max-width:100%}
  .q-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .q-main{padding:28px 24px 80px}
  .q-nav{flex-wrap:wrap}
  .q-nav .btn{white-space:normal;text-align:center}
  .footer-inner{grid-template-columns:1fr;gap:24px}
  .doc-sheet{padding:40px 32px 48px}
  .cover-meta{grid-template-columns:1fr}
  .kv div{grid-template-columns:1fr}
  .kv dt{border-right:0;border-bottom:1px solid #f4f6fa;padding-bottom:.2rem}
  .export-grid{grid-template-columns:1fr}
  .review-hero{grid-template-columns:1fr;gap:20px;text-align:center;justify-items:center}
}
@media (max-width:760px){
  .topnav{display:none}
  .topbar-inner{padding:0 16px;gap:.6rem}
  .brand{min-width:0}
  .brand-text em{display:none}
  .brand-text strong{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-actions{min-width:0;gap:.35rem}
  .topbar-actions .btn-ghost,
  .topbar-actions .btn-secondary,
  .topbar-actions .char-hint,
  .topbar-actions .license-chip{display:none}
  .topbar-actions .btn{padding:.6rem .8rem;font-size:.85rem}
  .section{padding:60px 0}
  .choices.cols-2{grid-template-columns:1fr}
  .setup-card{padding:28px 24px}
  .pack-toolbar-inner{padding:10px 16px}
  .pack-toolbar .tb-title{flex:1 0 100%;margin:0 0 .2rem}
  .doc-sheet{padding:32px 22px 40px;font-size:15px}
  .doc-cover h1{font-size:1.9rem}
  .cover-meta div{flex-direction:column;gap:.15rem;padding-right:0}
  .cover-meta dt{min-width:0}
  .cover-meta dd,.kv dd,.doc-section p,.notice-card blockquote{overflow-wrap:anywhere}
  table.doc-table{font-size:.78rem}
  .gap-item{grid-template-columns:1fr}
  .share-row{flex-wrap:wrap}
  .review{padding:28px 16px 80px}
  .export{padding:32px 16px 80px}
  .packs-head{flex-direction:column;gap:1rem}
  .pack-card{grid-template-columns:1fr;gap:1rem}
  .pc-actions{flex-direction:row;flex-wrap:wrap;min-width:0}
  .pc-when{margin-left:0;flex-basis:100%}
  .sh-head{flex-direction:column;gap:1rem}
  .sh-list li{grid-template-columns:1fr;gap:.7rem}
  .draft-head{flex-direction:column}
}