/* Product pages: products, antarax, plexyz, tinara (rebuilt 13 Oct 2026).
   One palette (base.css tokens), no eyebrows, no icon tiles, no sticky scroll. Real marks and real screenshots only;
   anything still to come is a .ph placeholder with a data-gen brief. */

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pp{--gut:24px;--card:#fff;background:var(--white);overflow-x:clip}
.pp.bg-oat{background:var(--oat)}

/* widths */
.w{width:min(1280px,calc(100% - 2*var(--gut)));margin-inline:auto}
.wi{width:min(1184px,calc(100% - 2*var(--gut)));margin-inline:auto}
.wn{width:min(880px,calc(100% - 2*var(--gut)));margin-inline:auto}

/* type */
.h72{font:600 clamp(38px,5vw,72px)/1.02 var(--sans);letter-spacing:-.03em}
.h48{font:500 clamp(30px,3.34vw,48px)/1.05 var(--sans);letter-spacing:-.035em}
.h32{font:600 clamp(24px,2.23vw,32px)/1.12 var(--sans);letter-spacing:-.02em}
.h24b{font:600 clamp(20px,1.67vw,24px)/1.2 var(--sans);letter-spacing:-.02em}
.h20b{font:600 20px/1.3 var(--sans);letter-spacing:-.02em}
.t24{font-size:clamp(19px,1.67vw,24px);line-height:1.35}
.t20{font-size:clamp(17px,1.39vw,20px);line-height:1.45}
.t16{font-size:16px;line-height:1.5}
.t14{font-size:14px;line-height:1.45}
.mut{color:var(--muted)}
.tc{text-align:center}.bal{text-wrap:balance}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btns.c{justify-content:center}
.lnk{display:inline-flex;align-items:center;gap:6px;font:500 16px/24px var(--sans);border-bottom:1px solid currentColor}
.lnk:hover{color:var(--brand-text)}
.ul{text-decoration:underline;text-underline-offset:3px}
.ul:hover{color:var(--brand-text)}

/* sections */
.sec{padding:88px 0}
.sec+.sec{padding-top:24px}
.sec.line{border-top:1px solid var(--line)}
.shead h2{max-width:760px}
.shead p{max-width:680px;margin-top:16px}
.shead+*{margin-top:40px}
@media (max-width:760px){.sec{padding:56px 0}.sec+.sec{padding-top:16px}.shead+*{margin-top:28px}}

/* hero: plain, centred */
.phero{padding:72px 0 64px;text-align:center}
.phero .mark{display:block;width:64px;height:64px;margin:0 auto 24px}
.phero h1{max-width:920px;margin-inline:auto}
.phero p{max-width:720px;margin:24px auto 0}
.phero .btns{margin-top:28px;justify-content:center}
.phero .hshot{margin-top:56px}
@media (max-width:760px){.phero{padding:40px 0 40px}.phero .hshot{margin-top:36px}}

/* product mark pills (a real mark + name) */
.pmarks{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.pmarks a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--card);border:1px solid var(--line);font:500 14px/1 var(--sans);color:var(--ink)}
.pmarks a:hover{border-color:var(--ink)}
.pmarks img{width:28px;height:28px;object-fit:contain}

/* one oat frame around a screenshot */
.shot{background:var(--oat);border-radius:24px;padding:clamp(10px,1.4vw,20px)}
.bg-oat .shot{background:#E5E4E1}
.shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
.shot.crop img{aspect-ratio:16/10;object-fit:cover;object-position:top left}
.shot.photo img{aspect-ratio:4/3;object-fit:cover;border:0}

/* ---------- PRODUCT CARD (the one reusable product tile) ----------
   <article class="pcard">
     <div class="pc-shot"><img src="…screenshot…" alt="…"></div>          (optional)
     <div class="pc-body">
       <div class="pc-id"><img class="pc-mark" src="…/logos/ax/<product>.svg" alt=""><h3><a href="…">Name</a></h3></div>
       <p>One line.</p>
       <span class="pc-go">See Name &rarr;</span>
     </div>
   </article>
   The heading link covers the whole card. */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pcards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:border-color .2s,transform .3s var(--ease)}
.pcard:hover{border-color:var(--ink)}
.pcard:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.pc-shot{margin:10px 10px 0;background:var(--oat);border-radius:16px;padding:12px 12px 0;overflow:hidden}
.pc-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top left;border-radius:8px 8px 0 0;border:1px solid var(--line);border-bottom:0;background:#fff}
.pc-body{display:flex;flex-direction:column;gap:10px;padding:20px 24px 24px;flex:1}
.pc-id{display:flex;align-items:center;gap:12px}
.pc-mark{width:36px;height:36px;object-fit:contain;flex:0 0 36px}
.pc-id h3{font:600 20px/1.2 var(--sans);letter-spacing:-.02em}
.pc-id h3 a{color:inherit}
.pc-id h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pc-id h3 a:focus-visible{outline:0}
.pc-meta{font:500 13px/1.3 var(--sans);color:var(--muted)}
.pcard p{font-size:16px;line-height:1.5;color:var(--muted)}
.pc-go{margin-top:auto;padding-top:6px;font:500 15px/1.4 var(--sans);color:var(--ink)}
.pcard:hover .pc-go{color:var(--brand-text)}
/* wide variant: mark panel beside the text */
.pcard.wide{flex-direction:row;align-items:stretch}
.pcard.wide .pc-art{flex:0 0 38%;margin:10px;border-radius:16px;background:var(--oat);display:grid;place-items:center;min-height:200px}
.pcard.wide .pc-art img{width:96px;height:96px}
.pcard.wide .pc-body{padding:32px 32px 32px 16px;justify-content:center}
.pcard.wide .pc-id h3{font-size:28px}
.pcard.wide p{max-width:560px}
.pcard .pc-extra{position:relative;z-index:2}
@media (max-width:1000px){.pcards{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.pcards,.pcards.two{grid-template-columns:1fr}.pcard.wide{flex-direction:column}.pcard.wide .pc-art{flex:none;min-height:140px}.pcard.wide .pc-body{padding:20px 24px 24px}.pcard.wide .pc-id h3{font-size:22px}}

/* alternating text / visual rows */
.frows{display:flex;flex-direction:column;gap:64px}
.frow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.frow.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.frow.rev>.txt{order:2}
.frow .txt h3{max-width:460px}
.frow .txt p{margin-top:14px;max-width:480px}
.frow .txt .lnk,.frow .txt .btn{margin-top:20px}
.frow .pid{display:flex;align-items:center;gap:10px;margin-bottom:16px;font:600 16px/1 var(--sans)}
.frow .pid img{width:32px;height:32px;object-fit:contain}
@media (max-width:900px){.frows{gap:48px}.frow,.frow.rev{grid-template-columns:1fr;gap:24px}.frow.rev>.txt{order:0}}

/* plain text block: heading + paragraphs, no split */
.prose h2{max-width:760px}
.prose p{max-width:680px;margin-top:14px}
.prose .btns{margin-top:24px}

/* family map: a compact table */
.ftable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;font-size:16px;line-height:1.45}
.ftable th,.ftable td{text-align:left;vertical-align:top;padding:18px 24px;border-top:1px solid var(--line)}
.ftable thead th{border-top:0;font:500 13px/1.3 var(--sans);color:var(--muted);background:var(--oat)}
.ftable tbody th{font-weight:600;white-space:nowrap}
.ftable tbody th span{display:block;font:400 14px/1.4 var(--sans);color:var(--muted);margin-top:2px}
.ftable td.d{color:var(--muted);max-width:420px}
.ftable .prods{display:flex;flex-wrap:wrap;gap:8px 16px}
.ftable .prods a{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.ftable .prods a:hover{color:var(--brand-text)}
.ftable .prods img{width:24px;height:24px;object-fit:contain}
.ftable .prods small{font:400 12px/1 var(--sans);color:var(--muted)}
@media (max-width:760px){.ftable thead{display:none}.ftable,.ftable tbody,.ftable tr,.ftable th,.ftable td{display:block;width:100%}.ftable tr{border-top:1px solid var(--line);padding:16px 18px}.ftable tr:first-child{border-top:0}.ftable th,.ftable td{border:0;padding:0}.ftable td{margin-top:8px}.ftable tbody th{white-space:normal}}

/* one simple flow: labels joined by arrows */
.flow{display:flex;align-items:stretch;gap:0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px}
.flow .st{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:20px;border-radius:16px;background:var(--oat)}
.flow .st b{font:600 18px/1.25 var(--sans)}
.flow .st span{font-size:14px;line-height:1.45;color:var(--muted)}
.flow .st.mid{flex:1.4 1 0;background:var(--brand-tint)}
.flow .st.mid ul{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:6px}
.flow .st.mid li{font-size:15px;line-height:1.35;padding-left:18px;position:relative}
.flow .st.mid li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.flow .st .lg{display:flex;align-items:center;gap:10px}
.flow .st .lg img{width:28px;height:28px}
.flow .ar{flex:0 0 56px;display:grid;place-items:center;color:var(--brand-text)}
.flow .ar svg{width:28px;height:14px}
.flow-note{margin-top:16px;max-width:760px}
@media (max-width:760px){.flow{flex-direction:column;padding:16px}.flow .ar{flex:0 0 40px}.flow .ar svg{transform:rotate(90deg)}}

/* names and quotes */
.names{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;font:500 16px/1.3 var(--sans);color:var(--muted)}
.qpanel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:16px}
.qcard blockquote{margin:0;font:500 clamp(20px,1.8vw,26px)/1.3 var(--sans);letter-spacing:-.02em}
.qcard cite{font-style:normal;font-size:14px;line-height:1.45;color:var(--muted)}
.qcard cite b{display:block;color:var(--ink);font-weight:600}
.qlist{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:24px}
.qlist li{padding:20px 28px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--muted)}
.qlist li:first-child{border-top:0}
.qlist li b{color:var(--ink);font-weight:600}
.qlist li a{color:var(--ink)}
@media (max-width:900px){.qpanel{grid-template-columns:1fr}.qcard{padding:24px}.qlist li{padding:16px 20px}}

/* plain accordion */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:600 18px/1.35 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;font:400 24px/1 var(--sans);color:var(--brand-text);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;max-width:680px;color:var(--muted)}
.faq details p a{color:var(--ink)}

/* placeholders sized by ratio */
.ph.r{border-radius:20px;width:100%}
.ph[data-ratio="16:10"]{aspect-ratio:16/10}
.ph[data-ratio="16:9"]{aspect-ratio:16/9}
.ph[data-ratio="4:3"]{aspect-ratio:4/3}

/* PLExyz: camera vs PLExyz Crowd toggle (behaviour in product.js) */
.pxsw{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pxb{border:0;border-radius:12px;background:var(--oat);padding:10px 16px;font:500 16px var(--sans);color:var(--muted);cursor:pointer;min-height:44px}
.pxb[aria-pressed="true"]{background:var(--ink);color:#fff}
.pxn{margin-left:auto;font:400 16px var(--sans);color:var(--muted)}
.pxn b{font-weight:600;color:var(--ink)}
.cmp6{margin-top:16px;padding:32px;border-radius:24px;background:var(--oat)}
.c6{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin-inline:auto}
.c6c{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:6px;transition:opacity .3s,border-color .3s}
.c6c svg{display:block;width:100%;height:auto;margin:10px 0 12px}
.c6k{font:600 14px/1 var(--sans);color:var(--muted)}
.c6c b{font:600 26px/1.1 var(--sans);letter-spacing:-.5px}
.c6c>span:last-child{font:400 16px/1.4 var(--sans);color:var(--muted)}
.c6c.sel{border-color:var(--ink)}
.c6c.dim{opacity:.4}
.pxcap{margin-top:12px;font-size:14px;line-height:1.45;color:var(--muted)}
@media (max-width:760px){.pxn{margin-left:0;width:100%}.cmp6{padding:12px}.c6{grid-template-columns:1fr;gap:12px}.c6c{padding:16px}.c6c b{font-size:22px}}

/* PLExyz page bits */
.px-clients{justify-content:center;margin-top:32px;list-style:none;padding:0}
.px-clients li{margin:0}
.px-free{margin-top:56px;display:flex;align-items:center;justify-content:space-between;gap:24px 40px;padding:28px 32px;background:var(--brand-tint);border-radius:24px}
.px-free p{margin-top:8px;max-width:720px}
.px-free .btn{flex:0 0 auto}
@media (max-width:760px){.px-free{flex-direction:column;align-items:flex-start;padding:22px}}

/* Tinara page bits */
.tq{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.tq ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tq li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.tq .btn{margin-top:24px}
.t3{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.t3 ul{list-style:none;margin:0;padding:0}
.t3 li{padding:20px 0;border-top:1px solid var(--line)}
.t3 li:first-child{border-top:0;padding-top:0}
.t3 li p{margin-top:6px;color:var(--muted)}
.t3 .btn{margin-top:8px}
.pil{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
.pil .faq{margin-top:20px}
.axline{display:flex;align-items:center;gap:20px;padding:24px 28px;background:var(--card);border:1px solid var(--line);border-radius:24px}
.axline img{width:48px;height:48px;flex:0 0 48px}
.axline p{flex:1;font:500 18px/1.35 var(--sans)}
@media (max-width:900px){.tq,.t3,.pil{grid-template-columns:1fr;gap:28px}.axline{flex-wrap:wrap}}

/* Colour with meaning (14 Oct 2026). REKA's light page, each product in its own colour from the AntaraX brand kit
   (tokens/product-palettes.css): a product's card, row or page wears its product tone; AntaraX blue only where the thing
   is AntaraX itself; REKA orange where it is REKA (Managed AI, research). Same --t* variables as base.css's division tones,
   so .btn-tone, .tone-panel and tinted .ph slots work unchanged. */
.pp [data-tone=yara],.pp[data-tone=yara]{--t:#08B0B3;--t-ink:#05686A;--t-bg:#EEF9F9;--t-2:#DAF3F3;--t-btn:#098284;--t-btn-fg:#fff}
.pp [data-tone=janka],.pp[data-tone=janka]{--t:#0CC4FB;--t-ink:#066482;--t-bg:#EDF9FF;--t-2:#D7F2FE;--t-btn:#077DA1;--t-btn-fg:#fff}
.pp [data-tone=plexyz],.pp[data-tone=plexyz]{--t:#2C09B2;--t-ink:#2C09B2;--t-bg:color-mix(in srgb,#E7ECFF 50%,#F4F6FE);--t-2:color-mix(in srgb,#D0D9FE 40%,#E7ECFF);--t-btn:#2C09B2;--t-btn-fg:#fff}
.pp [data-tone=crowd],.pp[data-tone=crowd]{--t:#6040CC;--t-ink:#442C95;--t-bg:color-mix(in srgb,#EBEBFF 50%,#F6F6FE);--t-2:color-mix(in srgb,#D7D6FF 40%,#EBEBFF);--t-btn:#6040CC;--t-btn-fg:#fff}
.pp [data-tone=tinara],.pp[data-tone=tinara]{--t:#7A1E3C;--t-ink:#7A1E3C;--t-bg:#FEF4F6;--t-2:#FFE6EA;--t-btn:#7A1E3C;--t-btn-fg:#fff}
.pp [data-tone=antarax],.pp[data-tone=antarax]{--t:#0459F7;--t-ink:#0347C8;--t-bg:color-mix(in srgb,#E6EEFE 60%,#fff);--t-2:#E6EEFE;--t-btn:#0459F7;--t-btn-fg:#fff}
/* AntaraX families (tokens.css: colour and its dark shade), only as a marker on the family map */
.pp [data-tone=ripple]{--t:#08B0B3;--t-ink:#0B6E72;--t-bg:#D9F3F2}
.pp [data-tone=edge]{--t:#12B76A;--t-ink:#0B7A47;--t-bg:#DCF5E8}
.pp [data-tone=frame]{--t:#074AF8;--t-ink:#0533A8;--t-bg:#E2EAFE}
.pp [data-tone=loom]{--t:#4904B3;--t-ink:#33027D;--t-bg:#EEE6FA}
.pp [data-tone=motion]{--t:#FC5D04;--t-ink:#A83A00;--t-bg:#FFE9DC}
.pp [data-tone=tide]{--t:#E9579D;--t-ink:#9C2B63;--t-bg:#FDE8F1}
.pp[data-tone] .pcard:focus-within,.pp .pcard[data-tone]:focus-within{outline-color:var(--t)}

/* links and the hero's product shot in the product's colour */
.pp [data-tone] .lnk,.pp[data-tone] .lnk{color:var(--t-ink)}
.pp [data-tone] .lnk:hover,.pp[data-tone] .lnk:hover{color:var(--ink)}
.pp[data-tone] .phero .shot{background:var(--t-bg)}
.pp .shot.tilt{transform-origin:50% 50%}

/* product cards: tinted in their product's colour, lift and deepen on hover (Clay's card hover) */
.pcard[data-tone]{background:var(--t-bg);border-color:transparent;transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease)}
.pcard[data-tone]:hover{background:var(--t-2);border-color:transparent;transform:translateY(-4px);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--t) 70%,transparent)}
.pcard[data-tone] .pc-shot,.pcard[data-tone].wide .pc-art{background:rgba(255,255,255,.66)}
.pcard[data-tone] .pc-shot img{transition:transform .5s var(--ease);transform-origin:50% 0}
.pcard[data-tone]:hover .pc-shot img{transform:scale(1.03)}
.pcard[data-tone] .pc-go,.pcard[data-tone]:hover .pc-go{color:var(--t-ink)}
.pcard[data-tone] .pc-meta{color:var(--ink)}

/* /antarax: product pills take their product's tint on hover */
.pmarks a{transition:background .2s,border-color .2s,transform .3s var(--ease)}
.pmarks a[data-tone]:hover{background:var(--t-bg);border-color:var(--t);transform:translateY(-2px)}

/* /antarax: each product row is a panel in its product's colour */
.frow[data-tone]{background:var(--t-bg);border-radius:28px;padding:clamp(24px,3.4vw,48px);gap:clamp(24px,3.4vw,48px);transition:background .25s,box-shadow .35s var(--ease)}
.frow[data-tone]:hover{background:var(--t-2);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--t) 70%,transparent)}
.frow[data-tone] .pid{color:var(--t-ink)}
.frow[data-tone] .shot{background:rgba(255,255,255,.66)}
.frows:has(.frow[data-tone]){gap:20px}

/* /antarax family map: one family colour per row, as a marker and its verb */
.ftable tbody tr[data-tone] th{position:relative;padding-left:40px}
.ftable tbody tr[data-tone] th::before{content:"";position:absolute;left:22px;top:25px;width:8px;height:8px;border-radius:50%;background:var(--t)}
.ftable tbody tr[data-tone] th span{color:var(--t-ink)}
.ftable tbody tr[data-tone]{transition:background .2s}
.ftable tbody tr[data-tone]:hover{background:color-mix(in srgb,var(--t-bg) 55%,#fff)}
@media (max-width:760px){.ftable tbody tr[data-tone] th{padding-left:18px}.ftable tbody tr[data-tone] th::before{left:0;top:7px}}

/* /antarax: the closed pilots are REKA's Managed AI, so that panel is REKA orange */
.prose.cpanel{padding:clamp(28px,4vw,56px);border-radius:28px}
.cpanel .lnk{color:var(--t-ink)}

/* /antarax graduation flow: REKA research in orange, the criteria neutral, the AntaraX product in AntaraX blue */
.flow .st[data-tone]{background:var(--t-bg)}
.flow .st[data-tone] .lg b{color:var(--t-ink)}
.flow:has(.st[data-tone]) .st.mid{background:var(--oat)}
.flow:has(.st[data-tone]) .st.mid li::before{background:var(--ink)}
.flow:has(.st[data-tone]) .ar{color:var(--muted)}

/* PLExyz: tinted free-plan box, quote panel and the camera vs Crowd comparison in Crowd's colour */
.pp[data-tone] .px-free{background:var(--t-bg)}
.qcard.tone-panel blockquote{color:var(--t-ink)}
.pp [data-tone] .pxb{transition:background .2s,color .2s}
.pp [data-tone] .pxb:hover{color:var(--t-ink)}
.pp [data-tone] .pxb[aria-pressed="true"]{background:var(--t-btn);color:var(--t-btn-fg)}
.pp [data-tone] .pxn b{color:var(--t-ink)}
.pp [data-tone] .cmp6{background:var(--t-bg)}
.pp [data-tone] .c6c.sel{border-color:var(--t)}
.pp [data-tone] .c6c circle[fill="#FB9800"]{fill:var(--t)}

/* Tinara: the buyer's question in a garnet panel, the three lines ruled in garnet */
.tq.tone-panel{padding:clamp(28px,4vw,56px);border-radius:28px}
.tq.tone-panel ul{border-top-color:color-mix(in srgb,var(--t) 25%,transparent)}
.tq.tone-panel li{border-bottom-color:color-mix(in srgb,var(--t) 25%,transparent);color:var(--ink)}
.pp[data-tone] .t3 li{border-top-color:color-mix(in srgb,var(--t) 25%,transparent)}
.pp[data-tone] .t3 li h3{color:var(--t-ink)}
.pp[data-tone] .faq summary::after{color:var(--t-ink)}
.pp[data-tone] .faq summary:hover{color:var(--t-ink)}
.pp[data-tone] .pf .f input:focus,.pp[data-tone] .pf .f textarea:focus{outline-color:var(--t)}
.pp[data-tone] .pf{border-color:color-mix(in srgb,var(--t) 22%,transparent)}
@media (prefers-reduced-motion:reduce){.pcard[data-tone],.pcard[data-tone] .pc-shot img,.pmarks a,.frow[data-tone]{transition:none}.pcard[data-tone]:hover,.pmarks a[data-tone]:hover{transform:none}.pcard[data-tone]:hover .pc-shot img{transform:none}}
/* owner, 14 Oct: each product leads with the money question it answers */
.pcard .pq{display:block;margin-bottom:6px;font:600 18px/1.35 var(--sans);color:var(--t-ink,var(--ink));letter-spacing:-.2px;text-wrap:pretty}
/* a hero that asks a question runs longer, so it sits a size down */
.h72.hq{font-size:56px;line-height:60px;letter-spacing:-1.8px;max-width:920px;margin-inline:auto}
@media (max-width:760px){.h72.hq{font-size:34px;line-height:38px;letter-spacing:-1px}}

/* ---------- Section grammar + pictures (Phase 2, 14 Oct 2026) ----------
   products, antarax, plexyz and tinara re-housed on base.css's chapter titles and trays. Every rule below is scoped to
   main.pg-prod (added to <main> on those four pages) so nothing above changes meaning for any other caller.
   Ground paper; trays oat or the product's own tint; cards white with colour on the frame, the title and the corner;
   text never on a tint; no hairlines between sections. */
main.pg-prod{background:var(--white)}
main.pg-prod .chap:not(.related) .chap-head h2,main.pg-prod .blk:not(.related) .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance;max-width:none}
main.pg-prod .chap-head p{margin:0}
main.pg-prod .phero{padding:96px 0 0}
main.pg-prod .blk:not(.chap){padding-top:56px}
main.pg-prod .ph[data-ratio="16/9"]{aspect-ratio:16/9}
main.pg-prod .ph[data-ratio="4/3"]{aspect-ratio:4/3}
main.pg-prod .ph[data-ratio="3/4"]{aspect-ratio:3/4}
main.pg-prod .ph[data-ratio="1/1"]{aspect-ratio:1/1}
main.pg-prod .ph.pic{width:100%;border-radius:20px}
main.pg-prod .tray>*+*{margin-top:16px}
main.pg-prod .tray>p.t16{max-width:760px}
/* a white card in a tray (the grammar's card, for blocks that are not links) */
main.pg-prod .wcard{background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);padding:32px}
main.pg-prod .wcard h2,main.pg-prod .wcard h3.h32{color:var(--ink)}
/* two columns in a tray: a picture one side, words the other; .flip swaps the sides */
main.pg-prod .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
main.pg-prod .duo.flip>:first-child{order:2}
main.pg-prod .duo>.ph{height:100%;min-height:320px}
main.pg-prod .duo .wcard{display:flex;flex-direction:column;justify-content:center;gap:14px}
main.pg-prod .duo .wcard p{margin:0;max-width:56ch}
main.pg-prod .duo .wcard .btns{margin-top:10px}
@media (max-width:900px){
  main.pg-prod .chap:not(.related) .chap-head h2,main.pg-prod .blk:not(.related) .chap-head h2{font-size:38px;line-height:1.08}
  main.pg-prod .duo{grid-template-columns:minmax(0,1fr)}
  main.pg-prod .duo.flip>:first-child{order:0}
  main.pg-prod .duo>.ph{height:auto;min-height:0}
}
@media (max-width:760px){main.pg-prod .phero{padding-top:48px}main.pg-prod .wcard{padding:22px}}

/* product cards as grammar cards: white, the product's tint in the screenshot frame, its colour on the title and corner */
main.pg-prod .tray .pcard{background:#fff;border:0;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
main.pg-prod .tray .pcard:hover{background:#fff;transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--t,var(--ink)),0 16px 32px -24px color-mix(in srgb,var(--t,#1D1D1D) 80%,transparent)}
main.pg-prod .tray .pcard:focus-within{outline:2px solid var(--t,var(--brand));outline-offset:2px}
main.pg-prod .tray .pcard .pc-shot{background:var(--t-bg,var(--oat))}
main.pg-prod .tray .pcard .pc-id h3{color:var(--t-ink,var(--ink))}
main.pg-prod .tray .pcard p{font-size:15px;line-height:1.5}
main.pg-prod .pcard .card-foot{margin-top:auto;padding-top:10px}
main.pg-prod .pcard .card-foot .code{font:600 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--t-ink,var(--muted))}
main.pg-prod .pcard:hover .corner,main.pg-prod .pcard:focus-within .corner{background:var(--t-btn,var(--ink));color:var(--t-btn-fg,#fff)}
main.pg-prod .tray[data-tone]{background:var(--t-bg)}
main.pg-prod .tray[data-tone] .pcard.wide .pc-art,main.pg-prod .tray .pcard.wide .pc-art{background:var(--t-bg,var(--oat))}
main.pg-prod .pcard.wide .pc-art{min-height:280px;padding:28px}
main.pg-prod .pcard.wide .pc-body{padding:32px}
main.pg-prod .pp-axnote{margin-top:20px!important}

/* the Kain A (assets/ax-mark.js; the same motion as Home's AntaraX tray, scoped here). Above a card's link layer, so a
   press parts the pieces rather than following the link */
main.pg-prod .ax-mark{position:relative;z-index:2;width:100%;max-width:240px;margin-inline:auto;aspect-ratio:760/780;perspective:900px;cursor:pointer;touch-action:pan-y;outline:none;-webkit-tap-highlight-color:transparent}
main.pg-prod .ax-mark:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px #0459F7}
main.pg-prod .ax-mark>img,main.pg-prod .ax-mark>svg{position:relative;display:block;width:100%;height:auto}
main.pg-prod .ax-mark>svg{overflow:visible;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
main.pg-prod .axa-pc,main.pg-prod .axa-spark{transform-box:fill-box;transform-origin:center}
main.pg-prod .axa-pc{transition:transform 1s cubic-bezier(.3,1.45,.45,1),opacity .5s ease;filter:drop-shadow(0 10px 18px rgba(4,30,90,.22))}
main.pg-prod .axa-cloth{transition:translate .6s cubic-bezier(.2,.8,.2,1)}
main.pg-prod .axa-spark{transition:translate .6s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.3,1.5,.5,1),opacity .4s}
main.pg-prod .ax-mark.pre .axa-pc{opacity:0}
main.pg-prod .ax-mark.pre .axa-pc[data-i="0"]{transform:translate(-120px,-110px) rotate(-14deg)}
main.pg-prod .ax-mark.pre .axa-pc[data-i="1"]{transform:translate(130px,40px) rotate(12deg)}
main.pg-prod .ax-mark.pre .axa-pc[data-i="2"]{transform:translate(-90px,120px) rotate(10deg)}
main.pg-prod .ax-mark.pre .axa-spark{opacity:0;transform:scale(.2) rotate(-120deg)}
main.pg-prod .ax-mark.on .axa-pc[data-i="1"]{transition-delay:.12s}
main.pg-prod .ax-mark.on .axa-pc[data-i="2"]{transition-delay:.24s}
main.pg-prod .ax-mark.on .axa-spark{transition-delay:0s,.55s,.55s;animation:ppAxaBreathe 6s ease-in-out 1.6s infinite}
@media (hover:hover){
  main.pg-prod .ax-mark.on:not(.burst) .axa-pc{transition-delay:0s}
  main.pg-prod .ax-mark.on:not(.burst) .axa-pc[data-i="0"]:hover{transform:translate(-8px,-10px)}
  main.pg-prod .ax-mark.on:not(.burst) .axa-pc[data-i="1"]:hover{transform:translate(10px,4px)}
  main.pg-prod .ax-mark.on:not(.burst) .axa-pc[data-i="2"]:hover{transform:translate(-8px,10px)}
}
main.pg-prod .ax-mark.burst .axa-pc{transition:transform .32s cubic-bezier(.2,.7,.3,1);transition-delay:0s!important}
main.pg-prod .ax-mark.burst .axa-pc[data-i="0"]{transform:translate(-44px,-40px) rotate(-5deg)}
main.pg-prod .ax-mark.burst .axa-pc[data-i="1"]{transform:translate(48px,14px) rotate(5deg)}
main.pg-prod .ax-mark.burst .axa-pc[data-i="2"]{transform:translate(-36px,44px) rotate(4deg)}
main.pg-prod .ax-mark.spin .axa-spark{animation:ppAxaSpin 1s cubic-bezier(.3,1.3,.5,1)}
@keyframes ppAxaBreathe{50%{transform:scale(1.08) rotate(8deg)}}
@keyframes ppAxaSpin{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.25) rotate(200deg)}100%{transform:scale(1) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){main.pg-prod .ax-mark>svg,main.pg-prod .axa-pc,main.pg-prod .axa-cloth,main.pg-prod .axa-spark{transition:none!important;animation:none!important}main.pg-prod .ax-mark{cursor:default}main.pg-prod .tray .pcard{transition:none}main.pg-prod .tray .pcard:hover{transform:none}}
@media (max-width:760px){main.pg-prod .pcard.wide .pc-art{min-height:0;padding:24px}main.pg-prod .ax-mark{max-width:180px}main.pg-prod .pcard.wide .pc-body{padding:20px 22px 22px}}
main.pg-prod .pcard.wide .pc-body{justify-content:center}
main.pg-prod .pcard.wide .card-foot{margin-top:18px}

/* /antarax: the hero sets the words beside the Kain A, as Home's AntaraX tray does */
main.pg-antarax .axh{text-align:left;padding-top:72px}
main.pg-antarax .axh-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
main.pg-antarax .axh .mark{margin:0 0 24px}
main.pg-antarax .axh h1,main.pg-antarax .axh p{margin-inline:0;max-width:640px}
main.pg-antarax .axh .btns,main.pg-antarax .axh .pmarks{justify-content:flex-start}
main.pg-antarax .axh-art{display:grid;place-items:center;padding:48px;border-radius:40px;background:var(--t-bg)}
main.pg-antarax .axh-art .ax-mark{max-width:340px}
@media (max-width:900px){main.pg-antarax .axh-grid{grid-template-columns:minmax(0,1fr);gap:32px}main.pg-antarax .axh-art{padding:32px;border-radius:28px}main.pg-antarax .axh-art .ax-mark{max-width:220px}}
/* product rows: white cards in the tray; the product's tint frames its screenshot, its colour names it */
main.pg-prod .tray .frows{gap:16px}
main.pg-prod .tray .frow{background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);padding:clamp(20px,2.8vw,40px);gap:clamp(24px,3.4vw,48px)}
main.pg-prod .tray .frow[data-tone]:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--t),0 16px 32px -24px color-mix(in srgb,var(--t) 80%,transparent)}
main.pg-prod .tray .frow .shot{background:var(--t-bg,var(--oat))}
main.pg-prod .tray .frow h3{color:var(--t-ink,var(--ink))}
/* the family map and the flow are white cards in their trays */
main.pg-prod .tray .ftable{border:0;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);background:#fff;border-collapse:separate;border-spacing:0}
main.pg-prod .tray .ftable thead th{background:#fff}
main.pg-prod .tray .flow{border:0;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-prod .tray .flow-note{margin-top:20px}
@media (max-width:760px){main.pg-prod .tray .ftable tr:first-child{border-top:0}}

/* PLExyz page on the grammar */
main.pg-plexyz .phero .hshot{max-width:1184px}
main.pg-plexyz .phero .hshot .shot{background:var(--t-bg)}
main.pg-prod .pcard .pc-pic{padding:0;border-radius:14px}
main.pg-prod .pcard .pc-pic .ph{width:100%;border-radius:14px}
main.pg-plexyz .tray .px-free{margin-top:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:20px}
main.pg-plexyz .tray .px-free h3{color:var(--t-ink)}
main.pg-plexyz .tray .frow .shot.photo img{border-radius:12px}
main.pg-plexyz .qpanel{gap:16px;align-items:stretch}
main.pg-plexyz .qside{display:flex;flex-direction:column;gap:16px}
main.pg-plexyz .qside .ph{border-radius:20px}
main.pg-plexyz .qcard,main.pg-plexyz .qlist{border:0;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-plexyz .qcard blockquote{color:var(--t-ink)}
main.pg-plexyz .qlist{display:flex;flex-direction:column;justify-content:center}
main.pg-plexyz .qlist li{border-top:0;padding:18px 28px}
main.pg-plexyz .qlist li+li{padding-top:0}
main.pg-plexyz .qlist li:first-child{padding-top:28px}
main.pg-plexyz .qlist li:last-child{padding-bottom:28px}
main.pg-plexyz .px-same .tray{background:var(--t-bg)}
main.pg-plexyz .px-samecopy{display:flex;align-items:center;justify-content:space-between;gap:24px 40px}
main.pg-plexyz .px-samecopy p{max-width:760px}
main.pg-plexyz .px-samecopy .btns{flex:none}
main.pg-plexyz .px-cmp{margin-top:16px}
main.pg-plexyz .px-same .cmp6{background:transparent;padding:0;margin-top:16px}
main.pg-plexyz .px-same .c6{max-width:none;gap:16px}
main.pg-plexyz .px-same .c6c{border:0;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-plexyz .px-same .c6c.sel{box-shadow:inset 0 0 0 1.5px var(--t)}
main.pg-plexyz .px-same .pxb{background:#fff}
main.pg-plexyz .px-same .pxb[aria-pressed="true"]{background:var(--t-btn)}
@media (max-width:900px){main.pg-plexyz .px-samecopy{flex-direction:column;align-items:flex-start}main.pg-plexyz .qlist li{padding:14px 20px}main.pg-plexyz .qlist li:first-child{padding-top:20px}main.pg-plexyz .qlist li:last-child{padding-bottom:20px}}

/* Tinara page on the grammar */
main.pg-tinara .tn-q .wcard h2{color:var(--t-ink)}
main.pg-tinara .tn-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
main.pg-tinara .tn-list li{position:relative;padding-left:20px;color:var(--ink)}
main.pg-tinara .tn-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--t)}
main.pg-tinara .t3{gap:16px;align-items:stretch}
main.pg-tinara .tn-shot{padding:12px;display:flex}
main.pg-tinara .tn-shot .ph{border-radius:14px;height:100%;min-height:280px}
main.pg-tinara .t3 ul{display:flex;flex-direction:column;gap:16px}
main.pg-tinara .t3 li.wcard{padding:24px 28px;border-top:0}
main.pg-tinara .t3 li.wcard:first-child{padding-top:24px}
main.pg-tinara .pil{gap:16px;align-items:start}
main.pg-tinara .tn-pilot{display:flex;flex-direction:column;gap:18px}
main.pg-tinara .tn-pilot .ph{border-radius:14px;margin:-12px -12px 4px;width:calc(100% + 24px)}
main.pg-tinara .tn-pilot .faq{margin-top:0}
main.pg-tinara .tray .pf{border:0;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-tinara .tn-ax .tray.ink{padding:40px 48px}
main.pg-tinara .tn-ax .axline{background:transparent;border:0;padding:0;gap:40px;color:#fff}
main.pg-tinara .tn-ax .ax-mark{flex:0 0 160px;max-width:160px;margin:0}
main.pg-tinara .tn-ax .axa-pc{filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
main.pg-tinara .tn-ax .ax-mark:focus-visible{box-shadow:0 0 0 3px #0E1116,0 0 0 5px #FB9800}
main.pg-tinara .axl-copy{flex:1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
main.pg-tinara .axl-copy p{flex:1;min-width:220px;color:#fff}
@media (max-width:900px){main.pg-tinara .tn-shot .ph{min-height:0;height:auto}main.pg-tinara .tn-ax .axline{flex-direction:column;align-items:flex-start;gap:24px}main.pg-tinara .tn-ax .tray.ink{padding:24px}main.pg-tinara .tn-ax .ax-mark{flex:none;width:140px}}