/* ==========================================================================
   ReportPoppy design system.

   The palette is sampled from the approved brand art, not chosen: the navy,
   the gold and the two grounds are the exact values in the supplied logo,
   header and OfficePoppy footer. The structural grammar (numbered rule
   eyebrows, content width, section rhythm, restraint) follows ShowPoppy, the
   suite's public-page golden master, so the two pages read as two rooms of
   one house.

   Used by the landing page and by every document page, so a change to the
   type scale or the footer reaches all of them at once.
   ========================================================================== */
:root{
  /* Sampled from the approved art. */
  --navy:#01163B;          /* logo bird, "Poppy" in the wordmark */
  --navy-2:#142F5C;        /* footer body ink */
  --navy-3:#2A4066;
  --gold:#FBB110;          /* logo wing and "Report" */
  --gold-cta:#FDA707;      /* the header's Create a Report button */
  --gold-deep:#E39400;
  --gold-soft:#FFF6E4;
  --gold-line:#F6DCA6;
  --ground:#F6F7F8;        /* the ground the header floats on */
  --warm:#F8F8F6;          /* the footer ground */
  --white:#FFFFFF;
  --slate:#5D7085;
  --slate-soft:#758AA5;
  --line:#E4E8ED;
  --line-soft:#EFF2F5;

  --font-display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --fs-display:clamp(38px,4.2vw,60px);
  --fs-h2:clamp(28px,2.9vw,42px);
  --fs-h3:clamp(18px,1.3vw,21px);
  --fs-lead:clamp(17px,1.15vw,20px);
  --fs-body:clamp(16px,1.02vw,17px);
  --fs-sm:15px;
  --fs-label:13px;

  --section-y:clamp(72px,7vw,116px);
  --gutter:clamp(20px,3vw,32px);
  --maxw:1180px;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

  --e-1:0 1px 2px rgba(1,22,59,.05);
  --e-2:0 1px 2px rgba(1,22,59,.04), 0 10px 26px -16px rgba(1,22,59,.3);
  --e-3:0 2px 6px rgba(1,22,59,.05), 0 30px 60px -28px rgba(1,22,59,.34);
  --e-gold:0 1px 2px rgba(160,100,0,.28), 0 12px 22px -10px rgba(251,177,16,.5);
  --e-gold-hi:0 1px 2px rgba(160,100,0,.3), 0 18px 30px -12px rgba(251,177,16,.58);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{
  font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.62;
  color:var(--navy);background:var(--ground);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:840px}
/* Six suite cards need more room than the 1180px reading measure. The section
   gets its own container so a card is never narrower than a long product name
   plus its bird. */
.wrap--suite{max-width:1460px}
.tm{font-size:.55em;vertical-align:.62em;font-weight:600}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--navy);color:#fff;padding:9px 15px;border-radius:8px;z-index:99}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);
  border-radius:var(--r-pill);padding:12px 24px;white-space:nowrap;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.btn--gold{color:#3A2600;background:linear-gradient(180deg,var(--gold-cta) 0%,var(--gold-deep) 100%);
  box-shadow:var(--e-gold), inset 0 1px 0 rgba(255,255,255,.35)}
.btn--gold:hover{transform:translateY(-1px);box-shadow:var(--e-gold-hi), inset 0 1px 0 rgba(255,255,255,.35)}
.btn--quiet{color:var(--navy);background:var(--white);border:1px solid var(--line);box-shadow:var(--e-1)}
.btn--quiet:hover{transform:translateY(-1px);box-shadow:var(--e-2);border-color:var(--gold-line)}
.btn--ghost{color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.34)}
.btn--ghost:hover{border-color:#fff}
.btn--lg{padding:15px 30px;font-size:16px}
.btn--block{display:flex;width:100%;margin-top:auto}

/* --- LOCKED HEADER -------------------------------------------------------
   A premium white elevated container floating on the page ground, with the
   approved lockup at the left, navy navigation, a vertical separator before
   the account area, and the gold Create a Report call to action. */
.hdr{position:sticky;top:0;z-index:60;background:var(--ground);padding:14px 0 10px}
.hdr__shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.hdr__bar{
  display:flex;align-items:center;gap:26px;
  background:var(--white);border-radius:var(--r-xl);
  padding:12px 14px 12px 22px;box-shadow:0 1px 2px rgba(1,22,59,.05), 0 12px 30px -18px rgba(1,22,59,.35);
}
/* The PoppyBar switcher is a fixed 38px button 10px in from the top right of
   every page in the suite. The header's own call to action sits in exactly that
   corner, so the whole header shifts left to make room rather than letting the
   two overlap. Same rule the app's topbar and the deck's letterhead already
   follow (UI_RULES 16 and 18a). */
.hdr__shell{padding-right:calc(var(--gutter) + 58px)}
@media (max-width:560px){ .hdr__shell{padding-right:calc(var(--gutter) + 46px)} }
.hdr__logo img{width:196px;height:auto}
.hdr__nav{display:flex;gap:26px;margin-left:12px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--navy)}
.hdr__nav a{padding:6px 0;border-bottom:2px solid transparent}
.hdr__nav a:hover{border-bottom-color:var(--gold)}
.hdr__act{display:flex;align-items:center;gap:18px;margin-left:auto}
.hdr__rule{width:1px;height:26px;background:var(--line)}
.hdr__signin{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--navy)}
.hdr__signin:hover{color:var(--gold-deep)}
.hdr__menu{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.hdr__menu span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px}
.hdr__menu span+span{margin-top:5px}
.hdr__mobile{display:none}
@media (max-width:1000px){
  .hdr__nav{display:none}
  .hdr__menu{display:block}
  .hdr__act{margin-left:0}
  .hdr__rule{display:none}
  .hdr__mobile{display:block;background:var(--white);border-radius:var(--r-lg);margin-top:8px;padding:8px 20px 14px;box-shadow:var(--e-2)}
  .hdr__mobile a{display:block;padding:11px 0;font-family:var(--font-display);font-weight:600;border-bottom:1px solid var(--line-soft)}
  .hdr__mobile a:last-child{border-bottom:0}
}
@media (max-width:560px){
  .hdr__bar{padding:10px 10px 10px 14px;gap:10px}
  .hdr__logo img{width:150px}
  .hdr__signin{display:none}
  .btn{padding:11px 16px;font-size:14px}
}

/* --- SUITE-STANDARD HEADER (.hdr--suite) ---------------------------------
   The header standard shared by all seven Poppy landing pages, locked
   2026-09-07: canonical bird + typeset wordmark + descriptor at the left,
   How It Works / Pricing / FAQ, a divider, the Poppy Suite switcher, another
   divider, Sign In, and the gold Create a Report button.

   EVERY rule below is scoped to .hdr--suite. The fifteen document pages
   (terms, privacy, support and the rest) still carry the earlier .hdr markup
   and still load poppybar.js, so nothing above this comment changes for them.

   Colour law: the product gold appears on exactly three things - the bird's
   wing (inside the SVG), the word "Report", and the call to action. "Poppy",
   the trademark and the REPORTS + CMAS descriptor are the family ink.

   FAMILY VALUES, HEADER SCOPED. The suite's ink is #0E1B2A and ReportPoppy's
   gold is #E8A020 / #F2CB84 - the exact values baked into the canonical bird.
   The tokens at the top of this file (--navy #01163B, --gold #FBB110,
   --gold-cta #FDA707) are ReportPoppy's own palette, re-sampled from the
   raster lockup in "The master build", and they are what made this the odd
   site out of the seven. They are NOT touched: the whole page body still
   paints from them, and re-palettting the body is Chip's call, not this
   header's. Instead the family values live as new tokens declared here and
   are read only by the rules in this block.                               */
.hdr--suite{
  --ink-family:#0E1B2A;      /* suite ink: "Poppy", the trademark, descriptor */
  --gold-family:#E8A020;     /* ReportPoppy accent, the bird's wing primary   */
  --gold-family-lt:#F2CB84;  /* the wing's light tone                         */
}

/* The landing page no longer loads the fixed top-right PoppyBar button, so it
   reclaims that reserved gutter and lines up with the page container again.
   The reservation above still stands for every page that does load it. */
.hdr--suite .hdr__shell{padding-right:var(--gutter)}
.hdr--suite .hdr__bar{gap:22px;padding:12px 16px 12px 20px}

/* Product lockup: canonical bird + wordmark + descriptor */
.hdr--suite .hdr__logo{display:flex;align-items:center;gap:12px;flex:none}
.hdr--suite .hdr__bird{width:64px;height:auto;aspect-ratio:1944/1340;flex:none}
.hdr--suite .hdr__lockup{display:block;line-height:1}
.hdr--suite .hdr__word{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:25px;letter-spacing:-.015em;color:var(--ink-family);white-space:nowrap;
}
.hdr--suite .hdr__word-1{color:var(--gold-family)}
.hdr--suite .hdr__desc{
  display:block;margin-top:6px;font-family:var(--font-display);font-weight:700;
  font-size:10.5px;letter-spacing:.185em;text-transform:uppercase;
  color:var(--ink-family);white-space:nowrap;
}
/* Everything in the header that is not the accent is the family ink. */
.hdr--suite .hdr__nav,
.hdr--suite .hdr__nav a,
.hdr--suite .hdr__signin,
.hdr--suite .psw__btn{color:var(--ink-family)}
.hdr--suite .hdr__nav a:hover{border-bottom-color:var(--gold-family)}
.hdr--suite .hdr__signin:hover{color:var(--gold-family)}
.hdr--suite .hdr__menu span{background:var(--ink-family)}

/* The call to action is the accent, flat. The page's gradient gold button is
   left exactly as it is for the hero, pricing and every other page. */
.hdr--suite .hdr__cta{
  background:var(--gold-family);
  box-shadow:0 1px 2px rgba(120,78,10,.24), 0 10px 20px -12px rgba(232,160,32,.62);
}
.hdr--suite .hdr__cta:hover{
  background:var(--gold-family);filter:brightness(.96);
  box-shadow:0 1px 2px rgba(120,78,10,.28), 0 16px 26px -14px rgba(232,160,32,.7);
}
.hdr--suite .hdr__nav{margin-left:6px}
.hdr--suite .hdr__act{gap:14px}
.hdr--suite .hdr__cta-short{display:none}
/* A wrapped desktop nav is the one thing this header may never do. */
.hdr--suite .hdr__nav a,
.hdr--suite .hdr__signin,
.hdr--suite .hdr__cta{white-space:nowrap}

/* Laptop and tablet landscape: the same desktop header, just tighter, so the
   nav still sits on one line at 1024px. */
@media (max-width:1180px){
  .hdr--suite .hdr__bar{gap:16px;padding:12px 14px 12px 18px}
  .hdr--suite .hdr__nav{gap:20px;margin-left:0}
  .hdr--suite .hdr__act{gap:11px}
  .hdr--suite .hdr__logo{gap:10px}
  .hdr--suite .hdr__bird{width:56px}
  .hdr--suite .hdr__word{font-size:22px}
  .hdr--suite .hdr__desc{margin-top:5px;font-size:9.5px;letter-spacing:.16em}
}

/* --- The Poppy Suite switcher -------------------------------------------
   A product-family navigator, not an app launcher: OfficePoppy the parent at
   the top, then the same six products in the same order on every site. Each
   miniature is the real canonical bird file for that product, with its
   two-tone wing already baked in - nothing is tinted, traced or recoloured.
   Only the first word takes the product accent, from an --accent set on the
   row; "Poppy", the trademark and the supporting line stay family ink.    */
.psw{position:relative}
.psw__btn{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 11px;
  background:none;border:0;cursor:pointer;border-radius:var(--r-sm);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--navy);
  white-space:nowrap;transition:background .16s var(--ease);
}
.psw__btn:hover,.psw__btn[aria-expanded="true"]{background:var(--line-soft)}
.psw__grid{fill:var(--slate-soft);flex:none;transition:fill .16s var(--ease)}
.psw__btn:hover .psw__grid,.psw__btn[aria-expanded="true"] .psw__grid{fill:var(--navy)}
.psw__chev{flex:none;color:var(--slate-soft);transition:transform .16s var(--ease)}
.psw__btn[aria-expanded="true"] .psw__chev{transform:rotate(180deg)}

/* No display property here: the [hidden] attribute must keep working. */
.psw__menu{
  position:absolute;top:calc(100% + 12px);right:-6px;z-index:70;width:336px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--e-3);padding:10px;
}
@media (prefers-reduced-motion:no-preference){
  .psw__menu{animation:psw-in .16s var(--ease) both}
}
@keyframes psw-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.psw__parent,.psw__item{
  display:flex;align-items:center;gap:11px;min-height:44px;
  padding:8px 10px;border-radius:var(--r-sm);
  transition:background .14s var(--ease);
}
.psw__parent{background:var(--warm)}
a.psw__parent:hover,a.psw__item:hover{background:var(--line-soft)}
.psw__mark{width:26px;height:26px;border-radius:7px;flex:none}
.psw__bird{width:34px;height:auto;aspect-ratio:1944/1340;flex:none}
.psw__txt{display:block;flex:1 1 auto;min-width:0}
.psw__name{
  display:block;font-family:var(--font-display);font-weight:800;font-size:14.5px;
  letter-spacing:-.012em;line-height:1.25;color:var(--ink-family);white-space:nowrap;
}
.psw__word-1{color:var(--accent,var(--gold-family))}
.psw__desc{display:block;font-size:12.5px;line-height:1.35;color:var(--slate)}
.psw__sep{display:block;height:1px;background:var(--line);margin:9px 6px}
.psw__here{
  flex:none;font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:.05em;color:var(--slate-soft);white-space:nowrap;
}
.psw__item.is-here{cursor:default}
.psw__more{
  display:block;margin-top:6px;padding:9px 10px;border-radius:var(--r-sm);
  font-family:var(--font-display);font-weight:600;font-size:12.5px;
  color:var(--slate);transition:background .14s var(--ease),color .14s var(--ease);
}
.psw__more:hover{background:var(--line-soft);color:var(--navy)}

/* --- Below 1000px: a deliberate mobile header, not a squeezed desktop one -
   [logo] [Create a Report] [menu], with the whole suite inside the panel. */
@media (max-width:1000px){
  .hdr--suite .psw{display:none}
  .hdr--suite .hdr__bar{gap:14px}
  .hdr--suite .hdr__act{margin-left:auto;gap:12px}
  .hdr--suite .hdr__menu{margin-left:0;padding:14px 11px}

  /* The block rule above sets display on .hdr__mobile, and an author display
     beats the browser's own [hidden] rule, so the panel would sit permanently
     open. Restoring the attribute is additive: nothing above is changed, and
     the rule is scoped to this header so the document pages keep behaving
     exactly as they do today. (Their copy of the panel has the same issue -
     flagged for Chip, not silently altered here.) */
  .hdr--suite .hdr__mobile[hidden]{display:none}
  .hdr--suite .hdr__mobile{padding:6px 16px 16px}
  .hdr--suite .msuite{padding-top:12px}
  .hdr--suite .msuite__h{
    font-family:var(--font-display);font-weight:700;font-size:var(--fs-label);
    letter-spacing:.14em;text-transform:uppercase;color:var(--slate-soft);margin-bottom:9px;
  }
  .hdr--suite .msuite__parent{
    display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 10px;
    border:1px solid var(--line);border-radius:var(--r-md);border-bottom:1px solid var(--line);
  }
  .hdr--suite .msuite__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:8px}
  .hdr--suite .msuite__item{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
    column-gap:8px;min-height:44px;padding:8px 6px;border-radius:var(--r-sm);border-bottom:0;
  }
  .hdr--suite .msuite__item .psw__bird{width:28px;grid-row:1/-1}
  .hdr--suite .msuite__item .psw__name{font-size:13.5px}
  .hdr--suite .msuite__item .psw__here{grid-column:2;font-size:10.5px;line-height:1.3}
  .hdr--suite .msuite__item.is-here{background:var(--warm)}
  .hdr--suite .msuite .psw__more{border-bottom:0;padding:10px 0 0}
  .hdr--suite .msuite .psw__more:hover{background:none}
}

/* --- Below 560px: smaller lockup, short but semantically identical CTA --- */
@media (max-width:560px){
  .hdr--suite .hdr__bar{padding:10px 12px 10px 14px;gap:10px}
  .hdr--suite .hdr__logo{gap:9px}
  .hdr--suite .hdr__bird{width:46px}
  .hdr--suite .hdr__word{font-size:19px}
  .hdr--suite .hdr__desc{margin-top:4px;font-size:8.5px;letter-spacing:.15em}
  .hdr--suite .hdr__act{gap:8px}
  .hdr--suite .hdr__cta-full{display:none}
  .hdr--suite .hdr__cta-short{display:inline}
  .hdr--suite .msuite__grid{grid-template-columns:1fr}
}

/* --- Below 480px: the button drops to its own full-width row. The full
       label survives, every target stays at 44px, and nothing overflows the
       320px narrow-mobile viewport. ------------------------------------- */
@media (max-width:480px){
  .hdr--suite .hdr__bar{flex-wrap:wrap;row-gap:10px}
  .hdr--suite .hdr__logo{order:1}
  .hdr--suite .hdr__menu{order:2;margin-left:auto}
  .hdr--suite .hdr__act{order:3;width:100%;margin-left:0}
  .hdr--suite .hdr__cta{width:100%}
  .hdr--suite .hdr__cta-full{display:inline}
  .hdr--suite .hdr__cta-short{display:none}
}

/* --- Numbered rule eyebrow, the suite's structural signature -------------- */
.rule{
  display:flex;align-items:center;gap:11px;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-label);
  letter-spacing:.15em;text-transform:uppercase;color:var(--slate);margin-bottom:16px;
}
.rule::after{content:"";flex:0 0 40px;height:1px;background:var(--line)}
.rule__n{color:var(--gold-deep);font-weight:800}
.rule--onnavy{color:#9FB3CC}
.rule--onnavy::after{background:rgba(255,255,255,.2)}
.rule--onnavy .rule__n{color:var(--gold)}

/* --- Hero ---------------------------------------------------------------- */
.hero{padding:clamp(40px,5vw,76px) 0 var(--section-y)}
.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4vw,58px);align-items:start}
.hero__h1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-display);
  line-height:1.06;letter-spacing:-.028em;margin-bottom:16px}
.hero__sub{font-size:var(--fs-lead);color:var(--slate);max-width:52ch;margin-bottom:20px}
.strip{display:inline-flex;flex-wrap:wrap;gap:8px 18px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 20px;font-size:var(--fs-sm);margin-bottom:26px;box-shadow:var(--e-1)}
.strip strong{font-family:var(--font-display);font-weight:700}
.strip strong+strong::before{content:"";display:inline-block}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hero__terms{font-size:var(--fs-sm);color:var(--slate-soft)}

/* Product proof: the workflow on the left, what the client opens on the right. */
.proof{display:grid;gap:16px}
.proof__card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--e-3)}
.proof__head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot--gold{background:var(--gold)}
.proof__title{font-family:var(--font-display);font-weight:700;font-size:15px}
.proof__steps{list-style:none;display:grid;gap:11px;font-size:var(--fs-sm)}
.proof__steps li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.proof__steps b{font-family:var(--font-display);font-weight:700}
.proof__steps em{display:block;font-style:normal;font-weight:400;color:var(--slate-soft);font-size:13.5px}
.tick{width:16px;height:16px;border-radius:50%;margin-top:3px;display:inline-block}
.tick--done{background:#E8F4EC;box-shadow:inset 0 0 0 2px #2E9E63}
.tick--review{background:var(--gold-soft);box-shadow:inset 0 0 0 2px var(--gold)}
.proof__foot{margin-top:15px;padding-top:13px;border-top:1px solid var(--line-soft)}
.pill{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:12.5px;
  letter-spacing:.04em;padding:5px 12px;border-radius:var(--r-pill)}
.pill--ready{background:var(--gold-soft);color:#7A5200;border:1px solid var(--gold-line)}
.proof__client{background:var(--navy);border-color:var(--navy);color:#fff}
.proof__eyebrow{font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8FA5C0;margin-bottom:14px}
.proof__kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8FA5C0;margin-bottom:6px}
.proof__range{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em}
.proof__range span{font-size:.6em;font-weight:600;color:#8FA5C0;padding:0 4px}
.proof__meta{font-size:13.5px;color:#A9BCD2;margin-top:10px}
.proof__bars{display:flex;align-items:flex-end;gap:8px;height:56px;margin-top:18px}
.proof__bars span{flex:1;height:var(--h);background:linear-gradient(180deg,var(--gold) 0%,rgba(251,177,16,.35) 100%);border-radius:4px 4px 0 0}
@media (max-width:900px){ .hero__grid{grid-template-columns:1fr} }

/* --- Sections ------------------------------------------------------------ */
.sec{padding:var(--section-y) 0;scroll-margin-top:104px}
#suite,#faq,#pricing,#how,#reports,#evidence{scroll-margin-top:104px}
.sec--white{background:var(--white);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.sec--navy{background:var(--navy);color:#fff}
.sec--navy .sec__lead{color:#A9BCD2}
.sec__head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.sec__head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec__head--center .rule{justify-content:center}
.sec__head--center .rule::after{display:none}
.sec__h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);letter-spacing:-.024em;line-height:1.12;margin-bottom:14px}
.sec__lead{font-size:var(--fs-lead);color:var(--slate)}

/* --- 02 steps ------------------------------------------------------------ */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.steps li{background:var(--warm);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 18px}
.steps__n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:800;font-size:13px;margin-bottom:12px}
.steps h3{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:6px}
.steps p{font-size:var(--fs-sm);color:var(--slate)}
@media (max-width:980px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* --- 03 report cards ----------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* The seventh report card spans the last row. Seven cards in a three-column
   grid otherwise leaves one stranded on its own, which reads as a mistake
   rather than as emphasis. The paragraph keeps a readable measure at full
   width instead of running the length of the page. ADDITIVE: a modifier only,
   so every other card is untouched. */
.card--wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 2fr;grid-template-rows:auto 1fr;gap:0 28px}
.card--wide .card__q{grid-area:1/1;margin-bottom:10px}
.card--wide h3{grid-area:2/1;align-self:start;margin-bottom:0}
.card--wide p:not(.card__q){grid-area:1/2/3/3;align-self:start}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--e-1)}
.card__q{font-family:var(--font-display);font-style:italic;font-weight:600;color:var(--gold-deep);font-size:var(--fs-sm);margin-bottom:10px}
.card h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:800;letter-spacing:-.012em;margin-bottom:9px}
.card p{font-size:var(--fs-sm);color:var(--slate)}
.tag{display:inline-block;vertical-align:2px;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#7A5200;background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:var(--r-pill);padding:2px 8px;margin-left:6px}
@media (max-width:980px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .card--wide{grid-column:auto;grid-template-columns:1fr;grid-template-rows:auto} .card--wide .card__q,.card--wide h3,.card--wide p:not(.card__q){grid-area:auto} .card--wide h3{margin-bottom:9px} }
@media (max-width:640px){ .cards{grid-template-columns:1fr} }

/* --- 04 tiles on navy ---------------------------------------------------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:22px 20px}
.tile h3{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:8px;color:var(--gold)}
.tile p{font-size:var(--fs-sm);color:#B9C9DC}
@media (max-width:980px){ .grid4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .grid4{grid-template-columns:1fr} }

/* --- 05 / 06 two column -------------------------------------------------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.two--flip .freeze{order:-1}
@media (max-width:900px){ .two{grid-template-columns:1fr} .two--flip .freeze{order:0} }
.checks{list-style:none;display:grid;gap:14px}
.checks li{position:relative;padding-left:30px;font-size:var(--fs-sm);color:var(--slate)}
.checks li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--gold-soft);box-shadow:inset 0 0 0 2px var(--gold)}
.checks strong{color:var(--navy);font-family:var(--font-display);font-weight:700}
.plain{list-style:none;display:grid;gap:11px;margin-top:16px}
.plain li{position:relative;padding-left:18px;font-size:var(--fs-sm);color:var(--slate)}
.plain li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.freeze{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--e-3)}
.freeze__label{font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8FA5C0;margin-bottom:10px}
.freeze__url{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.5vw,19px);word-break:break-word;color:var(--gold)}
.freeze__lock{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;color:#B9C9DC}
.freeze__note{margin-top:12px;font-size:var(--fs-sm);font-weight:600}

/* --- 07 client flow ------------------------------------------------------ */
.flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.flow li{border-left:2px solid var(--gold);padding:4px 0 4px 18px}
.flow span{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.1em;color:var(--gold-deep)}
.flow h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin:6px 0 5px}
.flow p{font-size:var(--fs-sm);color:var(--slate)}
@media (max-width:860px){ .flow{grid-template-columns:1fr} }

/* --- 08 comparison ------------------------------------------------------- */
.compare{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.compare__row{display:grid;grid-template-columns:240px 1fr;gap:24px;background:var(--white);padding:22px 26px;align-items:baseline}
.compare__row h3{font-family:var(--font-display);font-size:16px;font-weight:700}
.compare__row p{font-size:var(--fs-sm);color:var(--slate)}
.compare__row--us{background:var(--navy);color:#fff}
.compare__row--us h3{color:var(--gold);font-size:19px}
.compare__row--us p{color:#C7D5E5}
@media (max-width:760px){ .compare__row{grid-template-columns:1fr;gap:8px} }

/* --- 09 old way / new way ------------------------------------------------ */
.swap{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.swap__col{border-radius:var(--r-lg);padding:26px 24px;border:1px solid var(--line)}
.swap__col--old{background:var(--warm)}
.swap__col--new{background:var(--navy);color:#fff;border-color:var(--navy)}
.swap__label{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;color:var(--slate)}
.swap__col--new .swap__label{color:var(--gold)}
.swap ol{margin-left:20px;display:grid;gap:7px;font-size:var(--fs-sm)}
.swap__col--old li{color:var(--slate)}
@media (max-width:760px){ .swap{grid-template-columns:1fr} }

/* --- 10 pricing ---------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--e-1)}
.plan--feature{border:2px solid var(--gold);box-shadow:var(--e-3);position:relative}
.plan__flag{position:absolute;top:-13px;left:26px;background:var(--gold);color:#3A2600;font-family:var(--font-display);
  font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill)}
.plan h3{font-family:var(--font-display);font-size:22px;font-weight:800;margin-bottom:6px}
.plan__who{font-size:var(--fs-sm);color:var(--slate);min-height:44px;margin-bottom:14px}
.plan__price{font-family:var(--font-display);font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1}
.plan__price span{font-size:15px;font-weight:600;color:var(--slate);letter-spacing:0}
.plan__annual{font-size:var(--fs-sm);color:var(--slate-soft);margin:6px 0 18px}
.plan ul{list-style:none;display:grid;gap:10px;margin-bottom:24px;font-size:var(--fs-sm)}
.plan li{position:relative;padding-left:24px;color:var(--slate)}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--gold-soft);box-shadow:inset 0 0 0 2px var(--gold)}
@media (max-width:980px){ .plans{grid-template-columns:1fr;max-width:520px;margin:0 auto} .plan__who{min-height:0} }

.risk{margin-top:clamp(28px,4vw,44px);background:var(--white);border:1px solid var(--gold-line);
  border-radius:var(--r-lg);padding:28px 30px;box-shadow:var(--e-1)}
.risk h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:800;margin-bottom:8px}
.risk p{font-size:var(--fs-sm);color:var(--slate);max-width:78ch}
.risk__terms{margin-top:12px;padding-top:14px;border-top:1px solid var(--line-soft)}
.risk__terms strong{color:var(--navy)}

/* --- 11 FAQ -------------------------------------------------------------- */
.faq{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.faq details{background:var(--white)}
.faq summary{font-family:var(--font-display);font-weight:700;font-size:16px;padding:18px 22px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-deep);font-weight:800;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding:0 22px 20px;font-size:var(--fs-sm);color:var(--slate);max-width:74ch}

/* --- Final CTA ----------------------------------------------------------- */
.final{background:var(--navy);color:#fff;padding:clamp(64px,7vw,104px) 0;text-align:center}
.final h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);letter-spacing:-.024em;margin-bottom:14px}
.final p{color:#A9BCD2;font-size:var(--fs-lead);max-width:62ch;margin:0 auto 26px}
.final__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.final__terms{font-size:var(--fs-sm);color:#8FA5C0;margin-top:18px}

/* --- Poppy Suite ----------------------------------------------------------
   The suite's own card treatment, the same one the other Poppys carry: a rule
   eyebrow, the promise, six cards each wearing the authoritative Poppy bird in
   its own wing colours, and the way through to OfficePoppy. The bird geometry
   is drawn once as a <symbol> and referenced six times; only the two wing tones
   change, which is exactly what the master SVG's own comment says is allowed. */
.poppybird-def{position:absolute;width:0;height:0;overflow:hidden}

.suite__head{text-align:center;max-width:760px;margin:0 auto clamp(30px,4vw,48px)}
.suite__eyebrow{display:flex;align-items:center;gap:18px;justify-content:center;margin-bottom:18px}
.suite__eyebrow::before,.suite__eyebrow::after{content:"";height:1px;background:var(--line);flex:1 1 auto;max-width:180px}
.suite__eyebrow span{font-family:var(--font-display);font-weight:700;font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate-soft);white-space:nowrap}
.suite__h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);
  letter-spacing:-.026em;line-height:1.1;margin-bottom:14px}
.suite__sub{font-size:var(--fs-lead);color:var(--slate)}

.pcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;align-items:stretch}
.pcard{
  display:flex;flex-direction:column;gap:10px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 18px 18px;box-shadow:var(--e-1);overflow:hidden;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
a.pcard:hover{transform:translateY(-3px);box-shadow:var(--e-2);border-color:var(--gold-line)}
.pcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pcard__name{font-family:var(--font-display);font-weight:800;font-size:15px;
  letter-spacing:-.016em;line-height:1.2;min-width:0;white-space:nowrap}
/* The symbol carries the geometry; the box has to carry the viewBox, or the
   bird renders at its intrinsic 1944x1340 and the tail crosses into the next
   card. The width tracks the viewport so a long name like PicturePoppy never
   squeezes the bird into the card's border. */
.pcard__bird{width:46px;height:auto;aspect-ratio:1944/1340;flex:none;margin-top:-1px}
.pcard__desc{font-size:14px;color:var(--slate);flex:1 1 auto}
.pcard__visit{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--gold-deep)}
a.pcard:hover .pcard__visit{text-decoration:underline}
.pcard__here{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate-soft)}
.pcard.is-here{background:var(--gold-soft);border-color:var(--gold-line)}

.suite__cta{text-align:center;margin-top:clamp(28px,4vw,44px)}
.btn--outline{color:var(--gold-deep);background:transparent;border:1.5px solid var(--gold-line)}
.btn--outline:hover{border-color:var(--gold-cta);background:var(--gold-soft);transform:translateY(-1px)}

/* Six across needs the width the reference has. Below that the cards get too
   narrow for a long name and its bird on one line, and the tail ends up clipped
   at the border, so the grid drops to three rather than squeezing. */
@media (max-width:1400px){ .pcards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .pcards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .pcards{grid-template-columns:1fr} }

/* --- LOCKED OFFICEPOPPY FOOTER ------------------------------------------- */
.foot{background:var(--warm);border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0 34px;color:var(--navy-2)}
.foot__grid{display:grid;grid-template-columns:1.2fr 1.5fr .82fr .92fr .86fr;gap:clamp(20px,2.4vw,38px)}
.foot__brand img{width:200px}
.foot__tag{margin:18px 0 22px;font-size:var(--fs-sm);color:var(--slate);max-width:24ch}
.foot__h{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate-soft);margin-bottom:16px}
.foot__links{list-style:none;display:grid;gap:11px;font-size:var(--fs-sm)}
.foot__links a:hover{color:var(--gold-deep)}
.foot__suite{list-style:none;display:grid;gap:11px;font-size:var(--fs-sm)}
.foot__suite li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.foot__suite a{font-weight:600;white-space:nowrap}
.foot__suite a:hover{color:var(--gold-deep)}
.foot__suite li > span{color:var(--slate-soft);white-space:nowrap}
@media (max-width:1080px){ .foot__suite li > span{white-space:normal} }
.foot__hr{border:0;border-top:1px solid var(--line);margin:22px 0 18px}
.foot__slogan{font-family:var(--font-display);font-weight:700;font-size:16px}
.foot__slogan-sub{font-size:var(--fs-sm);color:var(--slate-soft);margin-top:4px}
.foot__base{margin-top:clamp(30px,4vw,50px);padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--slate-soft);display:grid;gap:10px}
.foot__disclosure{max-width:120ch}
@media (max-width:1080px){ .foot__grid{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:720px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot__grid{grid-template-columns:1fr} .foot__suite li{grid-template-columns:1fr;gap:0} }

/* --- Document pages ------------------------------------------------------ */
.legal{padding:var(--section-y) 0}
.legal__head{max-width:760px;margin-bottom:clamp(26px,4vw,42px)}
.legal__title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);letter-spacing:-.024em;line-height:1.13;margin-bottom:10px}
.legal__updated{color:var(--slate);font-size:var(--fs-sm)}
.legal__grid{display:grid;grid-template-columns:240px 1fr;gap:clamp(26px,4vw,52px);align-items:start}
@media (max-width:900px){ .legal__grid{grid-template-columns:1fr} }
.toc{position:sticky;top:110px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--e-1)}
@media (max-width:900px){ .toc{position:static} }
.toc__h{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-soft);margin-bottom:10px}
.toc ol{list-style:none;display:grid;gap:8px}
.toc a{font-size:14px;font-weight:600}
.toc a:hover{color:var(--gold-deep)}
.doc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);box-shadow:var(--e-1)}
.doc h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);letter-spacing:-.012em;margin:32px 0 12px;scroll-margin-top:110px}
.doc h2:first-child{margin-top:0}
.doc p{margin-bottom:14px}
.doc p.muted{color:var(--slate)}
.doc ul{margin:0 0 14px 22px;display:grid;gap:8px}
.doc li{color:var(--navy)}
.doc a{color:var(--gold-deep);font-weight:600}
.doc a:hover{text-decoration:underline}
.doc code{font-size:.92em;background:var(--warm);border:1px solid var(--line);border-radius:6px;padding:1px 5px}
.contact-card{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r-md);padding:18px 20px;margin-top:8px}
.contact-card a{font-family:var(--font-display);font-weight:700;font-size:18px}

@media print{
  .hdr,.foot,.final,.skip{display:none!important}
  body{background:#fff}
  .doc,.toc{box-shadow:none;border:0}
  .legal__grid{grid-template-columns:1fr}
}