/* Terrapilgrim AI: "old world, grown up" hybrid design example (PREVIEW ONLY).
   Layer on top of the live classic.css + wof.css. Fonts (Oct 23, 2026, Terra's choice): Source Serif 4 for headlines, body and italics; Inter for the small functional layer (nav, Menu, buttons, forms, labels, tags, footer small print). The old EB Garamond only rule was removed by Terra. No copy changes.
   Old world dominates (parchment, ink, gold small-caps labels, framed paintings, rules with ornaments).
   AI motif = a quiet modern layer: (1) star-chart/neural constellations in gold hairlines, (2) ring "via" nodes at
   corners and rule ends, (3) thin geometric line icons, (4) faint dot-matrix texture, (5) glowing node accents.
   From the 2718 sample: hero scale, spacing rhythm, clear section layout, calmer buttons and nav. All AI motif art is
   decorative CSS background (not in the accessibility tree). */
:root{
  --page:#faf6ec;--paper:#fffdf7;--soft:#f3ecdc;--line:#e4d9c0;
  --ink:#252d28;--head:#141c17;--muted:#575d57;
  --gold:#b48a3c;--goldt:#8a6a2e;--goldl:#c9a35a;
  --sec:104px;
  --orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18' width='160' height='18'%3E%3Cpath d='M0 9H55M105 9H160' stroke='%23b48a3c' stroke-width='1'/%3E%3Cpath d='M26 9L30 5H40M134 9L130 13H120' stroke='%23b48a3c' stroke-width='1' fill='none'/%3E%3Ccircle cx='42' cy='5' r='1.2' fill='%23b48a3c'/%3E%3Ccircle cx='118' cy='13' r='1.2' fill='%23b48a3c'/%3E%3Ccircle cx='58.5' cy='9' r='2.6' fill='none' stroke='%23b48a3c' stroke-width='1'/%3E%3Ccircle cx='101.5' cy='9' r='2.6' fill='none' stroke='%23b48a3c' stroke-width='1'/%3E%3Cpath d='M80 1.5L82 7 87.5 9 82 11 80 16.5 78 11 72.5 9 78 7Z' fill='%23b48a3c'/%3E%3Cpath d='M80 9L85 4M80 9L85 14M80 9L75 14M80 9L75 4' stroke='%23b48a3c' stroke-width='1.1'/%3E%3Ccircle cx='68' cy='9' r='1.3' fill='%23b48a3c'/%3E%3Ccircle cx='92' cy='9' r='1.3' fill='%23b48a3c'/%3E%3C/svg%3E");
  --orn-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18' width='160' height='18'%3E%3Cpath d='M0 9H55M105 9H160' stroke='%23c9a35a' stroke-width='1'/%3E%3Cpath d='M26 9L30 5H40M134 9L130 13H120' stroke='%23c9a35a' stroke-width='1' fill='none'/%3E%3Ccircle cx='42' cy='5' r='1.2' fill='%23c9a35a'/%3E%3Ccircle cx='118' cy='13' r='1.2' fill='%23c9a35a'/%3E%3Ccircle cx='58.5' cy='9' r='2.6' fill='none' stroke='%23c9a35a' stroke-width='1'/%3E%3Ccircle cx='101.5' cy='9' r='2.6' fill='none' stroke='%23c9a35a' stroke-width='1'/%3E%3Cpath d='M80 1.5L82 7 87.5 9 82 11 80 16.5 78 11 72.5 9 78 7Z' fill='%23c9a35a'/%3E%3Cpath d='M80 9L85 4M80 9L85 14M80 9L75 14M80 9L75 4' stroke='%23c9a35a' stroke-width='1.1'/%3E%3Ccircle cx='68' cy='9' r='1.3' fill='%23c9a35a'/%3E%3Ccircle cx='92' cy='9' r='1.3' fill='%23c9a35a'/%3E%3C/svg%3E");
}
body.hy{background:var(--page);text-rendering:optimizeLegibility}
body.hy p,body.hy li{text-wrap:pretty}
body.hy h1,body.hy h2,body.hy h3,body.hy blockquote{text-wrap:balance}

/* ---- header: lighter, quieter (2718), keeps the gold small-caps nav ---- */
body.hy header.top{background:rgba(250,246,236,.94);border-bottom:1px solid var(--line)}
body.hy .nav{height:72px}
body.hy .nav ul{gap:34px}
body.hy .nav ul a{font-size:15px;font-weight:600;letter-spacing:.14em;color:var(--head);padding:6px 0;border-bottom:1px solid transparent}
body.hy .nav ul a:hover{color:var(--brand);border-bottom-color:var(--gold)}

/* ---- buttons: calmer (2718): soft corners, no heavy shadow; ghost keeps the gold hairline ---- */
body.hy .btn{border-radius:5px;font-weight:600;letter-spacing:.01em;padding:14px 26px;transition:background .15s,border-color .15s}
body.hy .btn.sm{padding:9px 18px;font-size:15.5px}
body.hy .btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--brand)}
body.hy .btn.ghost:hover{background:var(--paper);border-color:var(--brand)}
body.hy .product-dark .btn.ghost,body.hy section.final .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,254,250,.6)}
body.hy .product-dark .btn.ghost:hover,body.hy section.final .btn.ghost:hover{background:rgba(255,254,250,.1);border-color:#fff;color:#fff}

/* ---- HERO: bigger title page (2718 scale), green italic key phrase, constellations beside the painting ---- */
body.hy .home-hero{padding:56px 0 40px}
body.hy .home-hero h1{font-size:clamp(2.55rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.022em;max-width:1120px;font-weight:600}
body.hy .home-hero h1 .acc{display:block;color:var(--brand);font-style:italic;font-weight:500;letter-spacing:-.015em}
body.hy .home-hero h1::after{margin:26px auto 22px}
body.hy .home-hero .lead{font-size:clamp(1.35rem,2vw,1.65rem);max-width:870px}
body.hy .home-hero .ctas{margin-top:28px;gap:16px}
body.hy .home-hero figure.art{margin-top:36px}
/* AI motif 1: star-chart constellations down both sides of the hero (CSS background, decorative) */
body.hy .home-hero.motif::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(/img/hy/net-l.svg) no-repeat left 0 top 380px/auto 760px,url(/img/hy/net-r.svg) no-repeat right 0 top 40px/auto 880px}
/* AI motif 4: faint dot-matrix that fades out downward from the header */
body.hy .home-hero .hero-grid{position:relative}
body.hy .home-hero .hero-grid::before{content:"";position:absolute;left:50%;top:-92px;transform:translateX(-50%);width:min(1100px,100vw);height:320px;pointer-events:none;z-index:-1;
  background:url(/img/hy/dots.svg) repeat;opacity:.34;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 100%);mask-image:linear-gradient(180deg,#000 0,transparent 100%)}
/* under 1100px the nets keep to the outer edge strips (masked to nothing over the text column), so no line runs behind the headline or intro */
@media(max-width:1100px){body.hy .home-hero.motif::after{opacity:.6;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 56px,transparent 120px,transparent calc(100% - 120px),#000 calc(100% - 56px),#000 100%);mask-image:linear-gradient(90deg,#000 0,#000 56px,transparent 120px,transparent calc(100% - 120px),#000 calc(100% - 56px),#000 100%)}}
/* phones: one small net behind the ornament rule, top right of the hero (no new element) */
@media(max-width:760px){body.hy .home-hero.motif::after{background:url(/img/hy/net-s.svg) no-repeat right -34px top 292px/auto 200px;opacity:.7;-webkit-mask-image:none;mask-image:none}}

/* ---- AI motif 2: ring "via" nodes at the corners of every framed painting (old-world frame, circuit corners) ---- */
body.hy figure.art .frame{position:relative}
body.hy figure.art .frame::before{content:"";display:block;position:absolute;inset:-9px;pointer-events:none;
  background:
   radial-gradient(circle,var(--page) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) left top/10px 10px no-repeat,
   radial-gradient(circle,var(--page) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) right top/10px 10px no-repeat,
   radial-gradient(circle,var(--page) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) left bottom/10px 10px no-repeat,
   radial-gradient(circle,var(--page) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) right bottom/10px 10px no-repeat}
body.hy .about-contact figure.art .frame::before{background-image:
   radial-gradient(circle,var(--soft) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px),radial-gradient(circle,var(--soft) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px),radial-gradient(circle,var(--soft) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px),radial-gradient(circle,var(--soft) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px)}

/* ---- How we work: illuminated initial (gold-ruled square), narrower measure ---- */
body.hy #approach{padding:76px 0 52px}
body.hy #approach .lead::first-letter,body.hy .about-contact .ac-grid>div:nth-child(2) .lead::first-letter{font-size:4.5em;line-height:.82;padding:.07em .1em .02em;margin:.05em .16em 0 0;border:1px solid var(--gold);background:var(--paper);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px rgba(180,138,60,.35)}

/* ---- Services: ruled table of contents, thin line icons, ring nodes where the rules cross ---- */
body.hy #services .section-head{margin-bottom:60px}
body.hy .svc{position:relative}
body.hy .svc .card{position:relative;padding:40px 36px 44px}
body.hy .svc-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
body.hy .svc-head::after{content:"";width:46px;height:46px;background:no-repeat center/contain;opacity:.95}
body.hy .svc .card:nth-child(1) .svc-head::after{background-image:url(/img/hy/ic-review.svg)}
body.hy .svc .card:nth-child(2) .svc-head::after{background-image:url(/img/hy/ic-flow.svg)}
body.hy .svc .card:nth-child(3) .svc-head::after{background-image:url(/img/hy/ic-research.svg)}
body.hy .svc .card:nth-child(4) .svc-head::after{background-image:url(/img/hy/ic-voice.svg)}
body.hy .svc .card:nth-child(5) .svc-head::after{background-image:url(/img/hy/ic-plan.svg)}
body.hy .svc .card:nth-child(n+2)::before{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--page);border:1px solid var(--gold);box-sizing:border-box;z-index:1}
body.hy .svc .card:nth-child(3n+1)::before{display:none}
body.hy .svc .card.cta-cell{background:var(--soft)}
body.hy .svc .card.cta-cell .svc-head{display:none}

/* ---- The result: pull quote between node-ended rules ---- */
body.hy .result .tint-block{border-color:var(--gold)}
body.hy .result blockquote{font-size:clamp(2.2rem,4.8vw,3.8rem)}

/* ---- Product panel: deep green, gold double frame, ring nodes on the frame corners, faint constellation + dots ---- */
body.hy .product-final .product-dark{position:relative;padding:64px 68px}
body.hy .product-final .product-dark::before{content:"";position:absolute;inset:-4px;pointer-events:none;
  background:
   radial-gradient(circle,#0f5132 0 2.2px,var(--goldl) 2.6px 3.5px,transparent 4px) left top/9px 9px no-repeat,
   radial-gradient(circle,#0f5132 0 2.2px,var(--goldl) 2.6px 3.5px,transparent 4px) right top/9px 9px no-repeat,
   radial-gradient(circle,#0f5132 0 2.2px,var(--goldl) 2.6px 3.5px,transparent 4px) left bottom/9px 9px no-repeat,
   radial-gradient(circle,#0f5132 0 2.2px,var(--goldl) 2.6px 3.5px,transparent 4px) right bottom/9px 9px no-repeat}
body.hy .product-final .product-dark::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.8;
  background:url(/img/hy/net-dark.svg) no-repeat right 20px bottom -40px/auto 380px,url(/img/hy/dots.svg) repeat left top/22px 22px;
  -webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 100%);mask-image:linear-gradient(100deg,transparent 40%,#000 100%)}
body.hy .product-final .product-dark>*{position:relative;z-index:1}
body.hy .pricebox{border-radius:2px}

/* ---- Kits: bullets become ring nodes; rows breathe a little more ---- */
body.hy .kit-also li::before{width:8px;height:8px;border-radius:50%;background:var(--paper);border:1px solid var(--gold);transform:none;top:.6em;box-sizing:border-box}
body.hy .kitrow{padding:28px 0}
body.hy .kitrow h3{font-size:25px}
body.hy .btn.is-soon{border-radius:5px}

/* ---- Motto band: compass flanked by the same star-chart, very faint ---- */
body.hy .motto-band{position:relative;overflow:hidden;isolation:isolate}
body.hy .motto-band::before,body.hy .motto-band::after{content:"";position:absolute;top:0;bottom:0;width:340px;pointer-events:none;z-index:-1;opacity:.5;background:no-repeat center/auto 100%}
body.hy .motto-band::before{left:0;background-image:url(/img/hy/net-l.svg);background-position:left center}
body.hy .motto-band::after{right:0;background-image:url(/img/hy/net-r.svg);background-position:right center}
@media(max-width:900px){body.hy .motto-band::before,body.hy .motto-band::after{display:none}}

/* ---- Phones ---- */
@media(max-width:640px){
  :root{--sec:72px}
  body.hy .home-hero{padding:52px 0 24px}
  body.hy .home-hero h1{font-size:2.45rem;line-height:1.05}
  body.hy .home-hero figure.art{margin-top:52px}
  body.hy .svc .card{padding:30px 6px 32px}
  body.hy .svc .card:nth-child(n+2)::before{display:none}
  body.hy .product-final .product-dark{padding:36px 22px}
  body.hy #approach .lead::first-letter{font-size:4em}
}
@media(prefers-reduced-motion:no-preference){body.hy .btn{transition:background .2s,border-color .2s,transform .2s}body.hy .btn:hover{transform:translateY(-1px)}}

/* =====================================================================================================
   PART A (visual fixes from the hybrid design critique) applied to every page
   ===================================================================================================== */
/* gold contrast: numerals and the ghost-button border use the darker gold (4.65:1 on parchment, a UI part needs 3:1);
   14 to 15px labels use #7a5d25 (about 5.5:1 on the tinted #f3ecdc); the dark-panel eyebrow is lightened to #e0c88f */
body.hy{--goldx:#7a5d25;--goldt:#7a5d25;--goldb:#8a6a2e}
body.hy .svc-num,body.hy .inside .card .n{color:var(--goldb)}
body.hy .btn.ghost{border-color:var(--goldb)}
body.hy .eyebrow,body.hy .label,body.hy .motto-sub,body.hy .rel-head .label{color:var(--goldx)}
body.hy .product-final .eyebrow,body.hy .final .eyebrow,body.hy .product-dark .eyebrow{color:#e0c88f}
body.hy .product-final .eyebrow::after,body.hy .final .eyebrow::after{background:#e0c88f}
body.hy .menu-txt{font-size:14px}
/* focus: brand green on light (6.9:1 on parchment), light gold on the dark green panels */
body.hy a:focus-visible,body.hy button:focus-visible,body.hy input:focus-visible,body.hy select:focus-visible,body.hy summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
body.hy .product-final :focus-visible,body.hy section.final :focus-visible,body.hy .product-dark :focus-visible{outline-color:#f3e3b8}

/* =====================================================================================================
   ALL OTHER PAGES: the hybrid layer on the inner pages (shared components: nav, buttons, ornament rules,
   frames with ring nodes, motto band, footer are the same rules as the home page above)
   ===================================================================================================== */
:root{--hair:#cdb88c}
/* shared: how the quiet constellations sit on every inner hero (outer edges only, masked over the text column) */
body.hy :is(.kit-hero,.updates-head,.sl-head,.privacy-sec){position:relative;isolation:isolate;overflow:clip}
body.hy :is(.kit-hero,.updates-head,.sl-head,.privacy-sec)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55}
body.hy .kit-hero .hero-grid{position:relative}
/* kit-style heroes (kit, security guide, add-ons and the four add-on pages): bigger title, green italic key phrase, net beside the painting, dot-matrix fade */
body.hy .kit-hero{padding:72px 0 80px}
body.hy .kit-hero h1{font-size:clamp(2.4rem,4.9vw,4.35rem);line-height:1.04;letter-spacing:-.02em;font-weight:600}
body.hy .kit-hero h1 .acc{display:block;color:var(--brand);font-style:italic;font-weight:500;letter-spacing:-.012em}
body.hy .kit-hero .ctas{margin-top:30px;gap:14px}
body.hy .kit-hero::after{background:url(/img/hy/net-r.svg) no-repeat right 0 top 0/auto 760px,url(/img/hy/net-s.svg) no-repeat left 0 bottom -30px/auto 260px}
body.hy .kit-hero .hero-grid::before{content:"";position:absolute;left:50%;top:-72px;transform:translateX(-50%);width:min(1100px,100vw);height:280px;pointer-events:none;z-index:-1;
  background:url(/img/hy/dots.svg) repeat;opacity:.3;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 100%);mask-image:linear-gradient(180deg,#000 0,transparent 100%)}
body.hy .kit-hero.motif-sec::after,body.hy .kit-hero:not(.motif-kit)::after{background-position:right 0 top 0,left 0 bottom -30px}
@media(max-width:1100px){body.hy :is(.kit-hero,.updates-head,.sl-head,.privacy-sec)::after{opacity:.5;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 56px,transparent 120px,transparent calc(100% - 120px),#000 calc(100% - 56px),#000 100%);mask-image:linear-gradient(90deg,#000 0,#000 56px,transparent 120px,transparent calc(100% - 120px),#000 calc(100% - 56px),#000 100%)}}
@media(max-width:760px){body.hy :is(.kit-hero,.updates-head,.sl-head,.privacy-sec)::after{background:url(/img/hy/net-s.svg) no-repeat right -40px top 8px/auto 200px;opacity:.6;-webkit-mask-image:none;mask-image:none}}
/* centered page heads (updates, sources) and left text heads (states, privacy, corrections) */
body.hy :is(.updates-head,.sl-head,.privacy-sec)::after{background:url(/img/hy/net-l.svg) no-repeat left 0 top 20px/auto 560px,url(/img/hy/net-r.svg) no-repeat right 0 top 0/auto 620px}
body.hy .updates-head h1{font-size:clamp(2.5rem,5vw,4.2rem);line-height:1.04;letter-spacing:-.02em}
body.hy .privacy-sec{padding:64px 0 var(--sec)}
body.hy .privacy-sec h1::after{content:"";display:block;width:160px;height:18px;margin:22px 0 4px;background:var(--orn) no-repeat left center/160px 18px}
body.hy .privacy-sec h2{position:relative;padding-top:22px;margin-top:34px;border-top:1px solid var(--line)}
body.hy .privacy-sec h2::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--page);border:1px solid var(--gold);box-sizing:border-box}
body.hy .privacy-sec p{font-size:19px}
/* frames: ring nodes on the feature (price) card and the framed statistic, same as the paintings */
body.hy .card.feature,body.hy .stat{position:relative}
body.hy .card.feature::before,body.hy .stat::before{content:"";position:absolute;inset:-5px;pointer-events:none;
  background:
   radial-gradient(circle,var(--paper) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) left top/10px 10px no-repeat,
   radial-gradient(circle,var(--paper) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) right top/10px 10px no-repeat,
   radial-gradient(circle,var(--paper) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) left bottom/10px 10px no-repeat,
   radial-gradient(circle,var(--paper) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) right bottom/10px 10px no-repeat}
/* the dark closing panel on the kit page ("final") gets the same gold-framed panel nodes and a faint net */
body.hy section.final:not(.product-final){position:relative}
body.hy section.final:not(.product-final)>.wrap{position:relative}
body.hy section.final:not(.product-final)>.wrap::before{content:"";position:absolute;inset:-4px;pointer-events:none;
  background:
   radial-gradient(circle,#0f5132 0 2.2px,var(--goldl) 2.6px 3.5px,transparent 4px) left top/9px 9px no-repeat,
   radial-gradient(circle,#0f5132 0 2.2px,var(--goldl) 2.6px 3.5px,transparent 4px) right top/9px 9px no-repeat,
   radial-gradient(circle,#0f5132 0 2.2px,var(--goldl) 2.6px 3.5px,transparent 4px) left bottom/9px 9px no-repeat,
   radial-gradient(circle,#0f5132 0 2.2px,var(--goldl) 2.6px 3.5px,transparent 4px) right bottom/9px 9px no-repeat}
body.hy section.final:not(.product-final)>.wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.75;
  background:url(/img/hy/net-dark.svg) no-repeat right 14px bottom -30px/auto 300px;-webkit-mask-image:linear-gradient(100deg,transparent 45%,#000 100%);mask-image:linear-gradient(100deg,transparent 45%,#000 100%)}
body.hy section.final:not(.product-final)>.wrap>*{position:relative;z-index:1}
/* numbered "inside" cards and part cards: thin line icon in the corner, ring node where the rules cross */
body.hy .part{position:relative}
body.hy .part::after{content:"";position:absolute;right:22px;top:22px;width:40px;height:40px;background:no-repeat center/contain;opacity:.9}
body.hy .part:nth-child(1)::after{background-image:url(/img/hy/ic-plan.svg)}
body.hy .part:nth-child(2)::after{background-image:url(/img/hy/ic-flow.svg)}
body.hy .part:nth-child(3)::after{background-image:url(/img/hy/ic-voice.svg)}
body.hy .part:nth-child(4)::after{background-image:url(/img/hy/ic-research.svg)}
body.hy .part:nth-child(5)::after{background-image:url(/img/hy/ic-review.svg)}
body.hy .inside .card{position:relative}
body.hy .inside .card:nth-child(n+2):not(:nth-child(3n+1))::before{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--page);border:1px solid var(--gold);box-sizing:border-box;z-index:1}
body.hy .alt .inside .card:nth-child(n+2):not(:nth-child(3n+1))::before{background:var(--soft)}
@media(max-width:900px){body.hy .inside .card::before,body.hy .inside .card:nth-child(n+2)::before{display:none!important}}
/* add-ons hub: line icons on the four add-on cards */
body.hy .card.addon{position:relative}
body.hy .card.addon::after{content:"";position:absolute;right:22px;top:22px;width:40px;height:40px;background:no-repeat center/contain;opacity:.9}
body.hy .card.addon:nth-child(1)::after{background-image:url(/img/hy/ic-voice.svg)}
body.hy .card.addon:nth-child(2)::after{background-image:url(/img/hy/ic-flow.svg)}
body.hy .card.addon:nth-child(3)::after{background-image:url(/img/hy/ic-review.svg)}
body.hy .card.addon:nth-child(4)::after{background-image:url(/img/hy/ic-plan.svg)}
/* upsell cards: ring node on the gold top rule */
body.hy .upcard{position:relative}
body.hy .upcard::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--page);border:1px solid var(--gold);box-sizing:border-box}
body.hy .alt .upcard::before{background:var(--soft)}
/* source groups and update releases: ring node on the gold group rule */
body.hy .src-group+.src-group{position:relative}
body.hy .src-group+.src-group::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--soft);border:1px solid var(--gold);box-sizing:border-box}
body.hy .kit-meta{position:relative}
body.hy .kit-meta::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--page);border:1px solid var(--gold);box-sizing:border-box}
body.hy .alt .kit-meta::before{background:var(--soft)}
/* comparison table: quiet header, hairline gold rules */
body.hy .cmp th{letter-spacing:.1em}
/* motif is a decorative layer: it never takes clicks and never shows in print */
@media print{body.hy *::before,body.hy *::after{background-image:none!important}}

/* =====================================================================================================
   WHAT'S CHANGING state pages (and the AI rules by state index): Word on Fire character, kept on the site's one serif.
   Ivory page, navy headings, small gold uppercase labels, thin gold dividers, airy boxes, larger text.
   The hybrid nav, footer, ornament rule and a faint constellation tie it to the rest of the site.
   ===================================================================================================== */
body.hy.hy-wc,body.hy.hy-states{--page:#fbf8f2;--paper:#fffdf8;--navy:#1f3a68;--hair:#cdb88c;background:#fbf8f2}
body.hy.hy-wc header.top,body.hy.hy-states header.top{background:rgba(251,248,242,.94)}
body.hy.hy-wc :is(h1,h2,h3),body.hy.hy-states :is(h1,h2,h3){color:var(--navy)}
body.hy.hy-wc .sl-head,body.hy.hy-states .sl-head{padding:64px 0 36px}
body.hy.hy-wc .sl-head>.wrap,body.hy.hy-wc .sl-results>.wrap,body.hy.hy-wc .sl-foot>.wrap,
body.hy.hy-states .sl-head>.wrap,body.hy.hy-states .sl-results>.wrap,body.hy.hy-states .sl-foot>.wrap{max-width:760px}
body.hy.hy-wc .sl-head h1,body.hy.hy-states .sl-head h1{font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.08;font-weight:600;letter-spacing:-.012em;margin:0 0 6px}
body.hy.hy-wc .sl-head h1::after,body.hy.hy-states .sl-head h1::after{content:"";display:block;width:160px;height:18px;margin:24px 0 8px;background:var(--orn) no-repeat left center/160px 18px}
body.hy.hy-wc .sl-head .eyebrow,body.hy.hy-states .sl-head .eyebrow{color:var(--goldx)}
body.hy.hy-wc .sl-head .eyebrow a,body.hy.hy-states .sl-head .eyebrow a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--hair)}
body.hy.hy-wc .sl-head .lead,body.hy.hy-states .sl-head .lead{font-size:20px;line-height:1.62;color:#22262b}
body.hy.hy-wc .wc-by{font-size:16px;letter-spacing:.01em;color:#4a4f55;margin:16px 0 0}
body.hy.hy-wc .sl-note,body.hy.hy-states .sl-note{margin:20px 0 0;padding:14px 20px;border-left:2px solid var(--gold);background:var(--paper);font-size:17px;line-height:1.55;color:#3d434a}
body.hy.hy-wc a:not(.btn),body.hy.hy-states .sl-results a:not(.btn){color:var(--navy)}
body.hy.hy-wc .wc-cite a{color:var(--navy)}
body.hy.hy-wc .wc-sec{margin:40px 0 0;padding:30px 0 0;border-top:1px solid var(--hair);position:relative}
body.hy.hy-wc .wc-sec::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--page);border:1px solid var(--gold);box-sizing:border-box}
body.hy.hy-wc .wc-sec h2{font-size:clamp(1.7rem,3vw,2.15rem);font-weight:600;margin:0 0 16px}
body.hy.hy-wc .wc-sec :is(p,li){font-size:19.5px;line-height:1.66;color:#22262b}
body.hy.hy-wc .wc-sec li::marker{color:var(--gold)}
body.hy.hy-wc .wc-sec li{margin:0 0 14px}
body.hy.hy-wc .wc-log th{font-size:15px;letter-spacing:.14em;color:var(--goldx);border-bottom:1px solid var(--gold)}
body.hy.hy-wc .wc-log td{font-size:18.5px;line-height:1.6;border-bottom:1px solid var(--hair);padding:14px 16px 14px 0}
body.hy.hy-wc .wc-log td:first-child{color:var(--navy);font-weight:600;white-space:nowrap}
body.hy.hy-wc .wc-signup{margin:52px 0 0;padding:32px 34px;border:1px solid var(--gold);outline:1px solid var(--hair);outline-offset:-7px;background:var(--paper);position:relative}
body.hy.hy-wc .wc-signup::before{content:"";position:absolute;inset:-5px;pointer-events:none;
  background:
   radial-gradient(circle,var(--page) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) left top/10px 10px no-repeat,
   radial-gradient(circle,var(--page) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) right top/10px 10px no-repeat,
   radial-gradient(circle,var(--page) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) left bottom/10px 10px no-repeat,
   radial-gradient(circle,var(--page) 0 2.2px,var(--gold) 2.6px 3.5px,transparent 4px) right bottom/10px 10px no-repeat}
body.hy.hy-wc .wc-signup h2{font-size:26px;margin:0 0 8px}
body.hy.hy-wc .wc-signup p{font-size:18.5px;line-height:1.6}
body.hy.hy-wc .wc-soft{font-size:18.5px}
body.hy.hy-wc .wc-tc{font-size:14px;color:#7a4b00;background:transparent;border:1px solid var(--hair);border-radius:999px;padding:0 9px 1px;font-style:normal;letter-spacing:.02em}
body.hy.hy-wc .sl-foot,body.hy.hy-states .sl-foot{padding-bottom:64px}
/* index lookup */
body.hy.hy-states .sl-five{border-top:1px solid var(--hair)}
body.hy.hy-states .sl-five li,body.hy.hy-states .sl-results :is(p,li){font-size:19px;line-height:1.64}
body.hy.hy-states .sl-pick{border-top:1px solid var(--hair)}
body.hy.hy-states .sl-pick select{border-radius:5px}
@media(max-width:640px){
  body.hy.hy-wc .wc-sec :is(p,li){font-size:18.5px}
  body.hy.hy-wc .wc-signup{padding:26px 20px}
  body.hy.hy-wc .wc-log td:first-child{white-space:normal}
  body.hy .privacy-sec{padding:44px 0 var(--sec)}
  body.hy .kit-hero{padding:48px 0 60px}
  body.hy .kit-hero h1{font-size:2.3rem}
  body.hy .card.addon::after,body.hy .part::after{width:34px;height:34px;right:14px;top:16px}
}

/* =====================================================================================================
   PART B helpers (copy changes): longer hero headline, kit differentiator line, price-box note, small notes
   ===================================================================================================== */
body.hy .home-hero h1{font-size:clamp(2.3rem,4.7vw,4.1rem);max-width:1040px}
body.hy .home-hero h1 .acc{max-width:960px;margin-left:auto;margin-right:auto}
body.hy .usp{margin:22px 0 0;padding:4px 0 4px 20px;border-left:2px solid #e0c88f;font-size:19px;line-height:1.55;color:#fff;max-width:640px}
body.hy .pricebox .pend{font-size:15px;font-style:italic;margin-top:14px}
body.hy .kitcard .kc-advice{margin:0 0 14px;font-style:italic}
body.hy .rv-one{text-align:center;margin:26px auto 0;max-width:720px}
@media(max-width:640px){body.hy .home-hero h1{font-size:2.2rem}body.hy .usp{padding-left:16px;font-size:18px}}

/* price box: the two facts stack on their own lines; the separator dot is hidden so it never dangles */
.pricebox .pk span{display:block}.pricebox .pk .sep{display:none}

/* Oct 23, 2026: stronger EB Garamond italics sitewide (Terra: "the italic of garamond seems light and difficult to read").
   Weight 500 for italic text (600 for the large green hero lines), deeper text colors (all above 7:1 on the cream), small italics at 16px or more.
   EB Garamond italic 400, 500 and 600 are already in the Google Fonts link. Words are unchanged. */
:root{--ital:#2f3832;--ital-g:#0b4029}
body.hy :is(em,cite,i:not(.sep)){font-weight:500}
body.hy :is(figure.art figcaption,.home-hero .lead,.cmp-price,.cmp-note,.src-link,.rv-flag,.rv-name,.rv-as-name,.fix-none,.sl-note,.sl-hint,.sl-confirm,.sl-none,p.rv,p.byline-hero,.kit-meta .byline,.rel-summary,.pricebox .pend,.kitcard .kc-advice){font-weight:500;color:var(--ital)}
body.hy :is(.card .card-stat){font-weight:500;color:var(--ital-g)}
body.hy :is(.rv-flag,.sl-confirm,p.rv,.pricebox .pend,.kitcard .kc-advice,.rv-name,.rv-as-name){font-size:max(16px,1em)}
body.hy :is(.rv-flag,.sl-confirm){font-size:16px}
body.hy p.rv,body.hy .pricebox .pend{font-size:16px}
body.hy .home-hero h1 .acc,body.hy .kit-hero h1 .acc{color:var(--ital-g);font-weight:600}
body.hy :is(.svc .card.cta-cell p:not(.eyebrow),.motto-band .motto-title,.result blockquote){font-weight:500}
body.hy :is(.svc-num,.inside .card .n,.steps .card::before,#believe li::before,.stat .stat-num){font-weight:500}
body.hy :is(.home-hero .lead){text-wrap:balance}
body.hy .kitcard>p.kc-advice,body.hy .kitcard>p.rv{color:var(--ital)}
body.hy .kitcard>p.rv{font-size:16px!important}
body.hy .kitcard>p.kc-advice{color:var(--ital)!important}
body.hy em,body.hy .hs-credit{color:var(--ital);font-weight:500}
body.hy #human .hs-credit{color:var(--ital);font-weight:500}
body.hy p.lead.ad-hero-value,body.hy .ad-hero-value{font-weight:500}


/* =====================================================================
   Oct 23, 2026: FONT SYSTEM, Source Serif 4 plus Inter (Terra's choice, preview only). No copy changes.
   Source Serif 4 (ital, opsz, wght 400..700) replaces EB Garamond for headlines, body, italics, captions, footer tagline
   and the state pages. Inter carries only the functional layer: nav, Menu, buttons, form controls, eyebrows and labels,
   tags, footer small print. Source Serif has a taller x-height than Garamond, so sizes are tuned (no font-size-adjust:
   every computed size is the real size, body 18.5px, nothing under 14px).
   ===================================================================== */
:root{--serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;--sans:"Source Serif 4",Georgia,serif;--ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
html body.hy{font-family:var(--serif);font-optical-sizing:auto;font-size:18.5px;line-height:1.6;font-feature-settings:"kern","liga";font-variant-numeric:lining-nums proportional-nums}
body.hy :is(p,li){font-size:18.5px}
body.hy :is(.lead,#approach .lead,.result .lead,#human .lead,#believe .bl-head .lead){font-size:18.5px;line-height:1.6}
body.hy :is(.svc .card p,.card p,ul.check li,details p,.policy,#human .hs-point p,#believe li p,#human .hs-signup-intro){font-size:18.5px;line-height:1.55}
body.hy :is(.micro,.pricebox .micro,figure.art figcaption,#human figure.art figcaption,.ac-grid figure.art figcaption,#believe .bl-credit){font-size:17px}
/* headlines: real weight 600, slightly tighter than Garamond because Source Serif runs wider */
body.hy :is(h1,h2,h3,summary){font-family:var(--serif);font-weight:600;letter-spacing:-.012em;font-variant-numeric:lining-nums}
body.hy h1{letter-spacing:-.02em}
body.hy .home-hero h1{font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.08;letter-spacing:-.025em}
body.hy .kit-hero h1{font-size:clamp(2.1rem,3.8vw,3.2rem);line-height:1.1}
body.hy h2{font-size:clamp(1.85rem,3.3vw,2.7rem);line-height:1.14}
body.hy :is(.svc .card h3,.inside .card h3,.steps .card h3,#human .hs-point h3,#believe li h3){font-size:23px;font-weight:600;line-height:1.22}
body.hy .kitrow h3{font-size:22px}
body.hy summary{font-size:22px}
body.hy .home-hero .lead{font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.5}
body.hy .result blockquote{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.2}
body.hy .motto-band .motto-title{font-size:clamp(2.1rem,4.2vw,3.5rem);line-height:1.12}
body.hy .stat .stat-num{font-size:clamp(3rem,5.2vw,4rem)}
body.hy .price{font-size:3.7rem}
body.hy .kc-price{font-size:42px}
body.hy .svc-num{font-size:40px}
body.hy .steps .card::before{font-size:46px}
body.hy .subbrand{font-size:20px}
/* real italics, weight 500, dark ink (above 7:1 on cream and white) */
:root{--ital:#1f2723;--ital-g:#0b4029}
body.hy :is(em,i:not(.sep),cite,.home-hero .lead,figure.art figcaption,.kc-advice,.pricebox .pend,#human .hs-credit,.svc .card.cta-cell p:not(.eyebrow),.result blockquote,p.rv,.rv){font-style:italic;font-weight:500;color:var(--ital)}
body.hy :is(.svc-num,.inside .card .n,.steps .card::before,#believe li::before,.stat .stat-num){font-style:italic;font-weight:500}
body.hy .home-hero h1 .acc,body.hy .kit-hero h1 .acc{font-style:italic;font-weight:500;color:#0f5132}
body.hy :is(.rv-flag,.sl-confirm,p.rv,.pricebox .pend,.kitcard .kc-advice,.rv-name,.rv-as-name){font-size:max(16px,1em)}
body.hy :is(.rv-flag,.sl-confirm,p.rv,.pricebox .pend,.kitcard>p.rv){font-size:16px!important}
body.hy .svc .card.cta-cell p:not(.eyebrow){font-size:22px}
body.hy figure.art figcaption{font-size:17px}
body.hy .motto-band .motto-title{color:var(--head)}
body.hy .motto-band .motto-sub{font-family:var(--ui)!important;font-weight:600;font-size:14.5px;letter-spacing:.12em}
/* Inter layer: nav, Menu, buttons, form controls */
body.hy :is(.nav ul a,.menu-txt,.sublinks a,.btn,.btn.sm,.btn.lg,input,button,select,textarea,.cmp-hint){font-family:var(--ui)!important;font-variant-numeric:normal;font-feature-settings:"cv11"}
/* eyebrows, small labels, tags */
body.hy :is(.eyebrow,.label,.card p.eyebrow,.svc .card p.eyebrow,.price small,.ka-meta,.kr-head .kc-note,.wl-label,.rel-date,.src-name,.kit-meta .t-name,.sample figcaption,.cmp-hint,.motto-sub){font-family:var(--ui)!important;font-weight:600;font-size:14.5px;letter-spacing:.12em;font-variant-numeric:normal;font-feature-settings:"cv11"}
body.hy :is(.src-name,.kit-meta .t-name,.sample figcaption,.rel-date,.wl-label,.cmp-hint){font-size:14.5px;letter-spacing:.1em}
/* kit tags: Inter 14.5px, weight 500, sentence case styling only, darker grey */
body.hy .kc-note,body.hy .kitrow .kc-note,body.hy .kr-head .kc-note{font-family:var(--ui)!important;font-size:14.5px;font-weight:500;letter-spacing:.01em;text-transform:none;color:#575d57;font-variant-numeric:normal;font-feature-settings:"cv11"}
/* footer small print in Inter (tagline stays serif) */
body.hy footer .fcols>div>p:nth-child(n+2),body.hy footer .micro,body.hy .micro:not(.kc-advice),body.hy footer .wrap>p:last-child{font-family:var(--ui)!important;font-size:15px;line-height:1.7;font-feature-settings:"cv11"}
body.hy footer .fcols>div>p:first-child{font-size:18px;line-height:1.55}
/* Inter runs wider than Garamond: functional sizes retuned */
body.hy .nav ul a{font-size:14px;font-weight:600;letter-spacing:.08em;min-height:44px;display:inline-flex;align-items:center;padding:0}
body.hy .btn{font-size:16px;font-weight:600;letter-spacing:0;padding:14px 26px;min-height:44px}
body.hy .btn.sm{font-size:15px;padding:10px 18px;min-height:44px}
body.hy .menu-btn{min-height:44px;height:44px;min-width:44px}
body.hy .menu-txt{font-size:14px;font-weight:600}
body.hy form.nl input[type=email],body.hy #human form.nl input[type=email],body.hy form.wl select,body.hy form.wl input[type=email]{font-size:17px}
/* 44px tap targets: footer links and kit-row buttons */
body.hy footer :is(.fcols a){display:inline-block;min-height:44px;line-height:44px;padding:0 3px}
body.hy .kitrow .btn{min-width:200px;justify-content:center;text-align:center}
body.hy .rel-date,body.hy .cmp-hint{font-weight:600}
body.hy .price small{line-height:1.35;margin-top:12px}
body.hy :is(.stat-src,.stat-src *,.cmp-badge,.cmp-note){font-size:max(14px,1em)}
body.hy .stat-src,body.hy .cmp-badge{font-size:14px}
body.hy footer .fcols>div>p:nth-child(n+2){line-height:44px}
body.hy :is(.cmp-badge,.stat .stat-src){font-family:var(--ui)!important;font-weight:600;letter-spacing:.1em;font-variant-numeric:normal}