:root{
    --ink-navy:#1B2A4A;
    --off-white:#F7F5F0;
    --amber:#D9A441;
    --confirm-green:#2F7A4D;
    --alert-red:#B3261E;
    --rule: rgba(27,42,74,0.2); /* Ink Navy tint, borders only, never text */
    --font-serif: 'Source Serif 4','Iowan Old Style','Sitka Text',Georgia,serif;
    --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-mono: 'JetBrains Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
    --max-text: 40rem; /* about 70-75 characters of body text */
    --max-wide: 62rem;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--off-white);
    color:var(--ink-navy);
    font-family:var(--font-sans);
    font-size:1rem;
    line-height:1.6;
    overflow-x:hidden;
  }
  img,svg{max-width:100%;}
  a{color:var(--ink-navy);}
  a:not(.btn){text-underline-offset:0.15em;}
  h1,h2,h3,h4{
    font-family:var(--font-serif);
    font-weight:600;
    line-height:1.2;
    color:var(--ink-navy);
    margin:0 0 0.6em 0;
  }
  h1{font-size:clamp(1.9rem,4.4vw + 1rem,2.9rem);}
  h2{font-size:clamp(1.5rem,2.4vw + 1rem,2rem);}
  h3{font-size:1.25rem;}
  h4{font-size:1.05rem;font-family:var(--font-sans);font-weight:700;}
  p{margin:0 0 1em 0;}
  .wrap{max-width:var(--max-wide);margin:0 auto;padding:0 1.25rem;}
  .prose{max-width:var(--max-text);}
  /* keep every section on the same left edge as the wide sections */
  .wrap.prose{max-width:var(--max-wide);}
  .wrap.prose > *{max-width:var(--max-text);}
  section{padding:3.25rem 0;border-top:1px solid var(--rule);}
  section:first-of-type{border-top:none;}
  .skip-link{
    position:absolute;left:-999px;top:0;background:var(--ink-navy);color:var(--off-white);
    padding:0.75em 1.25em;z-index:100;border-radius:0 0 6px 0;
  }
  .skip-link:focus{left:0;}
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  input:focus-visible{
    outline:3px solid var(--ink-navy);
    outline-offset:2px;
  }
  .visually-hidden{
    position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* header */
  header.site-header{
    padding:1.1rem 0;
    border-bottom:1px solid var(--rule);
  }
  .header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
  .logo-mark{height:2.25rem;width:auto;display:block;}
  .logo-link{display:inline-flex;align-items:center;text-decoration:none;}
  nav.site-nav ul{list-style:none;display:flex;gap:1.25rem;margin:0;padding:0;flex-wrap:wrap;}
  nav.site-nav a{font-size:0.95rem;text-decoration:none;border-bottom:1px solid transparent;}
  nav.site-nav a:hover{border-bottom-color:var(--ink-navy);}
  .header-cta{display:flex;gap:0.6rem;flex-wrap:wrap;}

  .btn{
    display:inline-block;
    font-family:var(--font-sans);
    font-weight:600;
    font-size:0.95rem;
    padding:0.7em 1.2em;
    border-radius:4px;
    text-decoration:none;
    border:1.5px solid var(--ink-navy);
    cursor:pointer;
  }
  .btn-primary{background:var(--ink-navy);color:var(--off-white);}
  .btn-secondary{background:transparent;color:var(--ink-navy);}
  @media (prefers-reduced-motion:no-preference){
    .btn{transition:opacity 0.15s ease;}
  }
  .btn:hover{opacity:0.85;}

  /* hero */
  .hero{padding-top:3.5rem;}
  .hero p.lede{font-size:1.15rem;}
  .cta-row{display:flex;gap:0.9rem;flex-wrap:wrap;margin:1.6rem 0 1rem 0;}
  .hero .stage-note{font-size:0.92rem;color:var(--ink-navy);border-left:3px solid var(--amber);padding-left:0.8em;max-width:var(--max-text);}

  ul.plain{padding-left:1.2em;margin:0 0 1em 0;}
  ul.plain li{margin-bottom:0.6em;}
  ul.no-bullet{list-style:none;padding:0;margin:0;}

  /* tables */
  .table-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:6px;}
  table{border-collapse:collapse;width:100%;min-width:640px;font-size:0.95rem;}
  table caption{text-align:left;padding:0.9rem 1rem 0 1rem;font-weight:600;font-family:var(--font-sans);}
  th,td{text-align:left;padding:0.7em 0.9em;border-bottom:1px solid var(--rule);vertical-align:top;}
  thead th{background:var(--off-white);border-bottom:2px solid var(--ink-navy);font-family:var(--font-sans);}
  tbody th{font-weight:600;}
  .table-note{font-size:0.88rem;margin-top:0.7rem;color:var(--ink-navy);}
  .scroll-hint{display:none;}
  .compare-scroll table{min-width:54rem;}
  @media (max-width:720px){.scroll-hint{display:block;}}
  .table-scroll:focus-visible{outline:3px solid var(--ink-navy);outline-offset:2px;}

  .status{font-weight:700;font-size:0.88rem;}
  .status-verified{color:var(--confirm-green);}
  .status-draft{color:var(--ink-navy);font-style:italic;}

  /* walkthrough tabs */
  .walkthrough{border:1px solid var(--rule);border-radius:8px;padding:0 0 1.4rem 0;margin-top:1.2rem;overflow:hidden;}
  .wt-tablist{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--rule);background:var(--off-white);}
  .wt-radio{
    position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;
  }
  .wt-tablist label{
    display:block;padding:0.9em 1.1em;font-weight:600;font-size:0.95rem;cursor:pointer;
    border-bottom:3px solid transparent;color:var(--ink-navy);
  }
  #wt1:focus-visible ~ .wt-tablist label[for="wt1"],
  #wt2:focus-visible ~ .wt-tablist label[for="wt2"],
  #wt3:focus-visible ~ .wt-tablist label[for="wt3"]{outline:3px solid var(--amber);outline-offset:-5px;}
  /* selected step: navy fill with off-white text (checked pair), not an amber line alone */
  #wt1:checked ~ .wt-tablist label[for="wt1"],
  #wt2:checked ~ .wt-tablist label[for="wt2"],
  #wt3:checked ~ .wt-tablist label[for="wt3"]{
    background:var(--ink-navy);color:var(--off-white);border-bottom-color:var(--ink-navy);
  }

  .wt-panel{display:none;padding:1.4rem 1.4rem 0 1.4rem;}
  .wt-panel p,.wt-panel .check-list{max-width:var(--max-text);}
  .wt-panel .table-scroll{margin-bottom:1rem;}
  #wt1:checked ~ .wt-panels #panel1,
  #wt2:checked ~ .wt-panels #panel2,
  #wt3:checked ~ .wt-panels #panel3{display:block;}

  .doc-excerpt{list-style:decimal;padding-left:2.6em;font-family:var(--font-mono);font-size:0.85rem;background:var(--off-white);border:1px solid var(--rule);border-radius:6px;padding-top:1em;padding-bottom:1em;padding-right:1em;}
  .doc-excerpt li{margin-bottom:1em;}
  .doc-excerpt li::marker{font-family:var(--font-sans);font-weight:700;font-size:0.78rem;}
  .doc-source{display:block;font-family:var(--font-sans);font-weight:700;font-size:0.78rem;color:var(--ink-navy);margin-bottom:0.25em;}

  .check-list{padding-left:1.2em;}
  .check-list li{margin-bottom:0.85em;}

  .callout{
    border-left:3px solid var(--amber);
    background:var(--off-white);
    padding:1em 1.2em;
    border-radius:0 6px 6px 0;
    font-size:0.95rem;
  }
  .callout strong{display:block;margin-bottom:0.3em;}

  .disclaimer{
    border:1px solid var(--rule);
    border-radius:6px;
    padding:1em 1.2em;
    font-size:0.9rem;
    margin-top:1.6rem;
  }

  .disclaimer strong{display:block;margin-bottom:0.3em;}
  code, .cite{font-family:var(--font-mono);font-size:0.85em;}

  .footnotes{font-size:0.85rem;margin-top:1rem;padding-left:1.2em;}
  .footnotes li{margin-bottom:0.4em;}

  dl.faq dt{font-family:var(--font-serif);font-weight:600;font-size:1.05rem;margin-top:1.4em;}
  dl.faq dd{margin:0.4em 0 0 0;max-width:var(--max-text);}

  .roadmap-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1.2rem;}
  .roadmap-col h3{margin-bottom:0.5em;}
  @media (max-width:720px){
    .roadmap-cols{grid-template-columns:1fr;}
  }

  /* interactive preview */
  .pv-fields{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
    gap:0.9rem 1.2rem;margin:1rem 0 1.2rem 0;max-width:var(--max-wide);
  }
  .pv-fields label{display:block;font-weight:600;font-size:0.88rem;}
  .pv-fields input{
    display:block;width:100%;margin-top:0.35em;font-family:var(--font-sans);
    font-size:0.95rem;padding:0.5em 0.6em;border:1.5px solid var(--ink-navy);
    border-radius:4px;background:var(--off-white);color:var(--ink-navy);
  }
  .pv-progress{font-style:italic;margin:0.8rem 0 0 0;}
  @media (prefers-reduced-motion:no-preference){
    .pv-progress::after{content:"";display:inline-block;width:0.6em;}
  }
  .pv-result{margin-top:1.2rem;}
  .pv-result .table-scroll{margin-bottom:0.6rem;}
  .pv-note{font-size:0.88rem;}
  .status-passed{color:var(--alert-red);font-weight:700;}
  .status-urgent{background:var(--ink-navy);color:var(--off-white);padding:0.15em 0.5em;border-radius:3px;font-weight:700;display:inline-block;}
  .status-open{color:var(--confirm-green);font-weight:700;}
  .reminders{font-size:0.85rem;display:block;margin-top:0.2em;}
  .credit-meter{margin-top:1.4rem;}
  @media (max-width:600px){
    .pv-fields{grid-template-columns:1fr;}
  }

  footer.site-footer{
    padding:2.5rem 0 3rem 0;
    border-top:1px solid var(--rule);
    font-size:0.9rem;
  }
  footer .logo-mark{height:1.5rem;margin-bottom:1rem;}
  footer p{max-width:var(--max-text);}

  @media (max-width:600px){
    section{padding:2.25rem 0;}
    /* the sample portfolio and pricing tables restack so every column stays visible without sideways scrolling */
    .stack-sm table{min-width:0;}
    .stack-sm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
    .stack-sm tr{display:block;border-bottom:1px solid var(--rule);padding:0.6rem 0;}
    .stack-sm th,.stack-sm td{display:block;border:none;padding:0.15em 1rem;}
    .stack-sm td::before{content:attr(data-label) ": ";font-weight:600;}
    .header-row{flex-direction:column;align-items:flex-start;}
    nav.site-nav ul{gap:0.9rem;}
  }

/* spacing and text helpers that replace the inline style attributes the page used to carry */
.mt-xs{margin-top:1.1rem;}
.mt-sm{margin-top:1.2rem;}
.mt-md{margin-top:1.3rem;}
.mt-lg{margin-top:1.6rem;}
.walkthrough.mt-md{margin-top:1.3rem;}
.credit-meter .cta-row{margin-top:1.1rem;}
.sample-intro{font-size:0.9rem;}
.pv-today-label{display:block;font-weight:600;margin-bottom:0.35em;}
.pv-today-hint{font-weight:400;}
.h3-note{font-weight:400;font-family:var(--font-sans);font-size:0.75em;}

/* Web shell (app-core/web): brand tokens for the sign-in button and the Your work panel.
   This file must load after /assets/app/app-shell.css so these win over the shell defaults.
   :root also carries them because the sign-in button lives in the header, outside #app-shell.
   Ink Navy is the accent: off-white text on it passes AA, and Amber is decorative only. */
:root{
  --app-ink:var(--ink-navy);
  --app-accent:var(--ink-navy);
  --app-bg:var(--off-white);
  --app-font:var(--font-sans);
}
#app-shell{
  --app-ink:var(--ink-navy);
  --app-accent:var(--ink-navy);
  --app-bg:var(--off-white);
  --app-font:var(--font-sans);
  border:1px solid var(--rule);
  border-radius:6px;
  margin-top:1.2rem;
}
/* The page has one light theme; the shell's own dark override has the same specificity, so repeat the tokens. */
@media (prefers-color-scheme:dark){
  #app-shell:not([data-theme="light"]){
    --app-ink:var(--ink-navy);
    --app-accent:var(--ink-navy);
    --app-bg:var(--off-white);
    --app-font:var(--font-sans);
  }
}
.section-intro{max-width:var(--max-text);}
nav.site-nav ul{align-items:center;}
nav.site-nav .nav-auth{margin:0;}