/* E-only text roles and action states. */
body{color:var(--t-body);font-weight:500}
.hero,.tech,.ct-copy{color:var(--t-body)}
h1,h2,h3,.h1,.h2,.h3,.faq-h,.proof h3,.values h3,.more-in h3,.step h3,.c-name{
  color:var(--t-head);font-weight:800;
}
.aud-line strong,.sc-h,.f-screen-head strong,.f-report h4,.f-share-sheet h4,
.hub span,.hp-mi b,.faq summary,.more summary{color:var(--t-head)}
.js .emblem .e-word{color:var(--t-head)}
.e-item em,.e-item.on em,.e-item:hover em{color:var(--t-head)}
/* Paragraphs stay one rung below headings, including coloured panels. */
.lead,.tech .lead,.aud-line p,.m-body p,.m-body .m-lead,#how .step p,
.proof p,.more-in p,.pt-head p,.co-copy .reveal,.values p,.ct-copy>p,
.faq .a p,.c-what dd{color:var(--t-body);font-weight:500}
/* Only the completed words carry the body contrast requirement. One --rw per section. */
#mission{--rv-from:#DCCFC9;--month-fill:#D63A6E}
/* Lc 21.36 on blush centre (15.87–27.86 across its gradient endpoints). */
#company{--rv-from:#CBBABB}
.reveal .w{
  --rv-t:clamp(0,calc((var(--rw,999) - var(--w)) / 3),1);
  --rv-a:clamp(0,calc(var(--rv-t) * 2),1);
  --rv-b:clamp(0,calc(var(--rv-t) * 2 - 1),1);
  opacity:1;color:var(--t-body);
  color:color-mix(in oklab,color-mix(in oklab,var(--rv-from) calc((1 - var(--rv-a)) * 100%),var(--t-accent)) calc((1 - var(--rv-b)) * 100%),var(--t-body));
}
@media(prefers-reduced-motion:reduce){.reveal .w{color:var(--t-body)}}
/* Supporting copy is opaque: hierarchy must not sacrifice contrast. */
.aud-pause,.flow-note,.proof .cond,.more-in .cond,.pt-note,.co-name,.ct-copy .small,
.foot-in,.c-meta dt,.c-what dt,.c-what small,.c-scope,.faq .scope,.hp-mi span{
  color:var(--t-aux);font-weight:500;font-size:13px;
}
.gen-tag,.sim,#how .sim{color:var(--t-aux);background:var(--surface);font-weight:500}
.scope,.proof .pill{color:var(--t-aux);font-weight:500;font-size:13px}
/* Exactly one highlight per specified heading; no paragraph accents. */
.hl{font-style:normal;color:var(--t-accent)}
.eyebrow,.tag,.tech .eyebrow,.pt-head .eyebrow,.ct-copy .eyebrow{
  color:var(--t-accent);font-weight:720;font-size:13px;letter-spacing:.06em;
}
.tag{font-size:14px}
.tag::before{background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
#how .step{opacity:1}
#how .step:not(.on) h3,#how .s-num{color:var(--t-aux)}
#how .step.on .s-num,#how .rm:not(.lit),.run .lbl,.slots span{color:var(--t-accent)}
/* Selected flow fills, progress strokes, hero lens and emblem icons remain product-owned. */
#how .rm.lit{color:var(--surface)}
/* Product text accents use the accessible product ink, never the page accent. */
.card .c-line,.card .c-what b,.card .hl,.card .badge{color:var(--c-ink)}
.card .badge.on{background:var(--surface)}
.card .badge.soon{background:var(--bg-2)}
/* Small device labels are text roles; the coloured shapes retain product identity. */
#how .zone-tag,.f-tablet-top>span,.f-initial,.f-panel h4,.f-side-label,
.f-report small,.f-timer,.f-loop,.guide-card p,.dev-l{color:var(--t-body)}
.f-panel small,.f-tablet-top small,.f-generated,.f-type-card small,.f-six small,
.f-share-sheet>small,.f-qr-panel>small,.ph-l,.srv small,.callouts,.mall-h,.entry .d{color:var(--t-aux)}
.go,.cart{background:var(--flow-fill,var(--fill-brand));color:#FFFFFF}
/* Company actions: fixed geometry, no decorative shadows or arrows. */
.btn,.hero .btn,.hp-sheet-act .hp-mail,.hp-try,.hp-sheet-act .hp-try,.mcopy,.card .c-btn{
  min-height:48px;height:48px;padding:0 22px;border-radius:var(--r-btn);border:0;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;font-weight:650;letter-spacing:-.01em;box-shadow:none;transform:none;text-decoration:none;
}
.btn,.hero .btn,.btn.inv,.hp-sheet-act .hp-mail{background:var(--co-btn);color:var(--co-on)}
.btn:hover,.hero .btn:hover,.hp-sheet-act .hp-mail:hover{background:var(--co-hover);transform:none}
.btn:active,.hero .btn:active,.hp-sheet-act .hp-mail:active{background:var(--co-active);transform:translateY(1px)}
.btn.ghost,.btn.line,.hero .btn.ghost,.hp-try,.hp-sheet-act .hp-try,.mcopy{
  background:transparent;color:var(--ink-1);box-shadow:inset 0 0 0 1.5px var(--ink-1);
}
.btn.ghost:hover,.btn.line:hover,.hero .btn.ghost:hover,.hp-try:hover,.hp-sheet-act .hp-try:hover,.mcopy:hover{
  background:var(--ink-1);color:var(--paper);transform:none;
}
.btn.ghost:active,.btn.line:active,.hero .btn.ghost:active,.hp-try:active,.hp-sheet-act .hp-try:active,.mcopy:active{
  background:#120E0D;color:var(--paper);transform:translateY(1px);
}
.hp-demo,.hp-sheet-act .hp-demo{
  height:36px;min-height:36px;padding:0 14px;border-radius:var(--r-sm);border:0;
  background:var(--co-tint);color:var(--menu-ink);font-size:14px;font-weight:650;box-shadow:none;
}
.hp-demo:hover{background:var(--co-tint-2)}
.hp-demo:active{background:var(--co-tint-2);transform:translateY(1px)}
.aud-picks,.flow-picks{
  display:flex;flex-wrap:nowrap;gap:2px;padding:4px;width:fit-content;max-width:100%;
  background:rgba(32,26,25,.06);border:0;border-radius:12px;
}
.flow-picks{margin:14px auto 12px}
.aud-picks button,.aud-picks button:first-child,.flow-picks button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;flex:0 1 auto;
  height:40px;min-height:40px;padding:0 10px;border:0;border-radius:9px;
  background:transparent;color:var(--ink-3);font-size:15px;font-weight:600;white-space:nowrap;
}
.aud-picks button:hover,.flow-picks button:hover{background:rgba(255,255,255,.55);color:var(--ink-1)}
.aud-picks button:active,.flow-picks button:active{background:rgba(255,255,255,.75);color:var(--ink-1)}
.aud-picks button[aria-pressed="true"],.flow-picks button[aria-pressed="true"]{
  background:#FFFFFF;color:var(--ink-1);box-shadow:0 1px 2px rgba(32,26,25,.12);
}
.aud-picks button[aria-pressed="true"]::before,.flow-picks button[aria-pressed="true"]::before{
  content:'';width:8px;height:8px;flex:none;border-radius:50%;background:var(--product-dot);
}
.aud-bar{display:none}
.card .c-btn,.card .c-btn.ghost{background:transparent;color:var(--c-ink);box-shadow:inset 0 0 0 1.5px var(--c-ink)}
.card .c-btn:hover,.card .c-btn.ghost:hover{background:var(--product-fill);color:#FFFFFF;transform:none}
.card .c-btn:active,.card .c-btn.ghost:active{background:color-mix(in srgb,var(--product-fill) 88%,#000000);color:#FFFFFF;transform:translateY(1px)}
.e-item b,.e-item.on b,.e-item:hover b{background:var(--product-fill);color:#FFFFFF;box-shadow:0 1px 2px rgba(32,26,25,.15)}
#how .rm.lit,#how .logo-pill,.f-check>i,.f-save,.f-received-tag{background:var(--flow-fill);color:#FFFFFF}
.tlink,.hero .tlink,.mission .tlink,.foot a{
  color:var(--ink-1);text-decoration:underline;text-decoration-color:var(--co);text-decoration-thickness:1px;text-underline-offset:4px;
}
.tlink:hover,.foot a:hover{text-decoration-thickness:2px}
.ext-arrow{font-size:.85em;color:var(--ink-3)}
:is(.btn.ghost,.btn.line,.hp-try,.c-btn):hover .ext-arrow{color:inherit}
.hp-word,.foot-word,.intro-word{color:var(--wordmark)}
.mcopy-done{color:var(--ink-2)}
.hp-tb[aria-expanded="true"],.hp-mi:hover,.hp-mi:focus-visible{background:rgba(32,26,25,.06)}
a:focus-visible,button:focus-visible,summary:focus-visible,.flow-picks button:focus-visible,#how .s-go:focus-visible{
  outline:2px solid var(--co);outline-offset:3px;border-radius:var(--r-xs);
}
.btn,.hp-demo,.hp-sheet-act a,.mcopy,.aud-picks button,.flow-picks button,.card .c-btn{
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
@media(max-width:560px){
  .aud-picks button,.aud-picks button:first-child,.flow-picks button{height:36px;min-height:36px;padding:0 5px;gap:4px}
  .flow-picks button{white-space:normal;line-height:1.05}
}
@media(max-width:1099px){.hp-act .hp-try{display:none}}
@media(prefers-reduced-motion:reduce){
  .btn,.hp-demo,.hp-sheet-act a,.mcopy,.aud-picks button,.flow-picks button,.card .c-btn{transition:none}
}
.hp-demo:hover,.hp-demo:active{color:var(--co-hover)}

:is(.btn,.hp-try,.hp-mail,.mcopy,.c-btn):focus-visible{border-radius:var(--r-btn)}
:is(.hp-demo,.hp-tb,.hp-burger,.hp-mi):focus-visible{border-radius:var(--r-sm)}
.aud-picks button:focus-visible,.flow-picks button:focus-visible{border-radius:9px}
.e-item:focus-visible{border-radius:var(--r-card)}.replay:focus-visible{border-radius:50%}