/* ---------- light hero (hero-l): "lime dawn" — the light counterpart of the dark hero-d ----------
   For pages people read or fill in: answers, news, legal, editorial policy, free review + thanks,
   self-check and the calculator pages. Same grammar as hero-d (crumb, glass pill tag, accent word,
   soft lime glows, fine grain), but on a pale lime-to-white wash so reading and forms stay light.
   Every rule is scoped to .hero-l (this file ships in the shared bundle). No motion. */

.hero.hero-l{background:linear-gradient(180deg,#F1F8DC 0,#F6FAEA 45%,#FCFDF8 82%,#fff 100%);border-bottom:1px solid #E3EAD0;isolation:isolate}
/* glows: one wide dawn behind the headline, two quieter ones at the edges */
.hero.hero-l:before{inset:-140px -20% auto;height:640px;z-index:-1;
  background:radial-gradient(620px 300px at 50% 46%,rgba(200,240,90,.34),transparent 70%),radial-gradient(420px 260px at 10% 30%,rgba(200,240,90,.20),transparent 70%),radial-gradient(420px 260px at 92% 24%,rgba(200,240,90,.18),transparent 70%)}
/* grain: the hero-d noise tile, multiplied and very faint, fading out towards the bottom */
.hero.hero-l:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}

/* text-only heroes end as a panel: room below, a hairline edge */
.hero.inner.hero-l{padding-top:64px}
.hero.inner.hero-l:not(:has(.mock)){padding-bottom:64px}
/* heroes holding a product window: the wash runs out to white behind the window, no hairline */
.hero.inner.hero-l:has(.mock){border-bottom:0;background:linear-gradient(180deg,#F1F8DC 0,#F6FAEA 340px,#FCFDF8 calc(100% - 160px),#fff 100%)}

/* crumb: crisp, darker than --muted so it keeps AA on the tint */
.hero-l .crumbs ol{color:#565B50}
.hero-l .crumbs li+li:before{color:#A3AA92}
.hero-l .crumbs a{color:var(--ink);text-decoration-color:rgba(78,107,0,.45);text-decoration-thickness:1px}
.hero-l .crumbs a:hover{color:var(--olive);text-decoration-color:var(--olive)}

/* tag: a white glass pill with a lit dot — the light twin of hero-d's smoked pill */
.hero-l .tag{background:rgba(255,255,255,.78);border-color:#D3E6A0;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 20px -14px rgba(78,107,0,.45)}
.hero-l .tag .dot{background:var(--olive);box-shadow:0 0 0 3px rgba(200,240,90,.55)}
.hero-l .tag.tag-ok .dot{background:var(--pos);box-shadow:0 0 0 3px rgba(31,122,77,.18)}

/* accent word: olive, like hero-d's lime word, with a thin lime rule instead of the marker block */
.hero.hero-l h1 .hl{color:var(--olive);background:none;padding:0;margin:0;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:.09em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.hero.hero-l h1 .hl:after{content:none}

.hero-l .sub{color:#43473F}
.hero-l .fine{color:#565B50}
.hero-l .btn-dark{box-shadow:0 14px 30px -16px rgba(14,15,12,.55)}
.hero-l .btn-light{background:rgba(255,255,255,.82);border-color:#D3DCC0}
.hero-l .btn-light:hover{background:#fff;border-color:var(--ink)}
.hero-l :focus-visible{outline-color:var(--olive)}
.hero-l .win{box-shadow:0 0 0 1px rgba(78,107,0,.08),0 40px 90px -40px rgba(43,58,0,.38)}

/* reading pages (answers, news): calm left-aligned column, byline set like a receipt line */
.hero-l.ans-hero{padding-bottom:52px}
.hero-l .ans-lead{color:#2A2D26}
.hero-l .ans-by{display:inline-block;margin-top:22px;padding-top:12px;border-top:1px dashed #C9D3AE;color:#565B50}
.hero-l.ans-hero:before{background:radial-gradient(560px 300px at 34% 46%,rgba(200,240,90,.30),transparent 70%),radial-gradient(460px 280px at 88% 30%,rgba(200,240,90,.20),transparent 70%)}

/* forms and calculators: the hero closes cleanly above the form */
.hero-l.tools-hero,.hero-l.sc-hero:not(:has(.mock)){padding-bottom:56px}

/* legal draft note keeps its own styling; just let it sit on the wash */
.hero-l .legal-status{position:relative}

@media (max-width:640px){
  .hero.inner.hero-l{padding-top:40px}
  .hero.inner.hero-l:not(:has(.mock)),.hero-l.ans-hero,.hero-l.tools-hero{padding-bottom:44px}
  .hero.hero-l:before{inset:-120px -40% auto;height:520px}
  .hero-l .ans-by{display:block}
}
@media print{
  .hero.hero-l{background:none;border:0}
  .hero.hero-l:before,.hero.hero-l:after{display:none}
  .hero-l .tag{box-shadow:none}
}