/* ==========================================================================
   KIN WEBSITE V3, delta layer.  Extends the approved Kin system.
   Adds nothing to the token set. Every colour, type role, surface, radius and
   duration below resolves to an existing Core token.
   Prefix v3- so the delta is separable from the incumbent marketing layer.
   ========================================================================== */

/* --- Identity lockup ---------------------------------------------------- */
.v3-lock { display: inline-flex; align-items: center; gap: var(--s4); }
.v3-lock-rule { width: 1px; align-self: stretch; background: var(--edge); }
.v3-lock b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.v3-attrib { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }

/* --- Cleo mark host ----------------------------------------------------- */
.v3-mark { position: relative; display: block; }
.v3-mark canvas { display: block; }
.v3-mark[data-mark-state="fallback"] .v3-mark-fallback { display: grid; }
.v3-mark-fallback { display: none; position: absolute; inset: 0; place-items: center; }

/* --- Portrait frame: the aperture bezel, reused as a photographic crop --- */
.v3-portrait { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--carbon); border: 1px solid var(--line-strong); }
.v3-portrait::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--bevel), inset 0 0 60px 10px rgba(8, 9, 10, 0.55); pointer-events: none; }
.v3-portrait-ticks { position: absolute; inset: -10px; border-radius: 50%; pointer-events: none; }
.v3-portrait-ph { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; text-align: center; padding: var(--s5); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px); }
.v3-portrait-ph span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); max-width: 22ch; line-height: 1.5; }

/* --- Route comparison card ---------------------------------------------- */
.v3-route { display: grid; gap: 0; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; position: relative; }
.v3-route::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--bevel); }
.v3-route[data-pick="true"] { border-color: color-mix(in oklab, var(--olive) 52%, var(--line)); }
.v3-route-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s5); border-bottom: 1px solid var(--line); background: var(--void); }
.v3-route-stage { height: 220px; display: grid; place-items: center; background: var(--void); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.v3-route-b { padding: var(--s5); display: grid; gap: var(--s4); }
.v3-verdict { display: grid; gap: 6px; padding: var(--s4) var(--s5); border-top: 1px solid var(--line); background: var(--fill-faint); }
.v3-verdict b { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; }

/* --- Visual mechanism block: headline, one line, one visual, one action -- */
.v3-mech { display: grid; gap: var(--s5); }
.v3-mech-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 1.03; letter-spacing: -0.03em; margin: 0; }
.v3-mech-l { font-size: 16px; line-height: 1.5; color: color-mix(in oklab, var(--sand) 78%, var(--sage)); max-width: 46ch; margin: 0; }

/* --- Flow diagram: the four movement steps ------------------------------ */
.v3-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--ink); }
.v3-step { padding: var(--s5); border-right: 1px solid var(--line); display: grid; gap: var(--s3); align-content: start; position: relative; }
.v3-step:last-child { border-right: 0; }
.v3-step[data-on="true"] { background: var(--void); box-shadow: inset 0 2px 0 var(--olive-lift); }
.v3-step-n { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
.v3-step b { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.015em; }
.v3-step p { margin: 0; font-size: 13px; color: var(--sage); }
@media (max-width: 900px) { .v3-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3-step:nth-child(2) { border-right: 0; } .v3-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .v3-flow { grid-template-columns: minmax(0, 1fr); } .v3-step { border-right: 0; border-bottom: 1px solid var(--line); } .v3-step:last-child { border-bottom: 0; } }

/* --- Source to field connection: the confirm mechanism ------------------ */
.v3-link { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: center; gap: 0; }
.v3-link-said { padding: 11px var(--s4); background: var(--void); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 13.5px; }
.v3-link-said mark { background: color-mix(in oklab, var(--signal) 18%, transparent); color: var(--sand); border-radius: 3px; padding: 0 3px; box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--signal) 50%, transparent); }
.v3-link-wire { height: 1px; background: var(--olive); position: relative; }
.v3-link-wire::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--olive-lift); }
.v3-link-field { padding: 11px var(--s4); background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-ctl); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); box-shadow: inset 2px 0 0 var(--olive); }
.v3-link-field[data-src="unknown"] { box-shadow: inset 2px 0 0 var(--edge); }
.v3-link-field[data-src="unknown"] .v3-link-v { color: var(--sage); font-style: italic; }
.v3-link-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.v3-link-v { font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 700px) { .v3-link { grid-template-columns: minmax(0, 1fr); gap: 8px; } .v3-link-wire { width: 1px; height: 20px; justify-self: start; margin-left: var(--s5); } .v3-link-wire::after { right: -3px; top: auto; bottom: 0; } }

/* --- Product route card ------------------------------------------------- */
.v3-prod { display: grid; gap: var(--s4); padding: var(--s6); background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-panel); position: relative; overflow: hidden; transition: border-color var(--d-ui) var(--e-out), background var(--d-ui) var(--e-out); }
.v3-prod::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--bevel); }
.v3-prod:hover { border-color: var(--line-strong); background: color-mix(in oklab, var(--ink) 93%, var(--sand)); }
.v3-prod[data-lead="true"] { border-color: color-mix(in oklab, var(--olive) 46%, var(--line)); }
.v3-prod-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive-lift); }
.v3-prod h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; margin: 0; }
.v3-prod p { margin: 0; font-size: 14px; color: color-mix(in oklab, var(--sand) 74%, var(--sage)); }

/* --- Capability catalogue row ------------------------------------------- */
.v3-cap { display: grid; grid-template-columns: 220px repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line-soft); }
.v3-cap:last-child { border-bottom: 0; }
.v3-cap > div { padding: var(--s4) var(--s5); display: grid; gap: 4px; align-content: start; border-right: 1px solid var(--line-soft); }
.v3-cap > div:last-child { border-right: 0; }
.v3-cap b { font-size: 14px; font-weight: 600; }
.v3-cap span { font-size: 12.5px; color: var(--sage); line-height: 1.45; }
.v3-cap-head { background: var(--raised); }
.v3-cap-head span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 980px) { .v3-cap { grid-template-columns: minmax(0, 1fr); } .v3-cap > div { border-right: 0; border-bottom: 1px solid var(--line-soft); } .v3-cap > div:last-child { border-bottom: 0; } .v3-cap-head { display: none; } .v3-cap > div::before { content: attr(data-l); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); } }

/* --- Hero chapter rail -------------------------------------------------- */
.v3-rail { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.v3-chapter { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--sage); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all var(--d-ui) var(--e-out); }
.v3-chapter:hover { color: var(--sand); border-color: var(--line-strong); }
.v3-chapter[aria-current="true"] { color: var(--sand); border-color: var(--olive); background: color-mix(in oklab, var(--olive) 16%, transparent); }
.v3-chapter i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.v3-chapter[aria-current="true"] i { background: var(--signal); }
.v3-transport { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--void); }
.v3-transport button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--sage); cursor: pointer; transition: all var(--d-ui) var(--e-out); }
.v3-transport button:hover { color: var(--sand); background: var(--hover); }

/* --- Brochure and social frames ----------------------------------------- */
.v3-cover { width: 100%; aspect-ratio: 210 / 297; background: var(--void); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; position: relative; display: grid; grid-template-rows: auto 1fr auto; }
.v3-social { width: 100%; aspect-ratio: 1; background: var(--void); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; position: relative; display: grid; }

/* --- Fixture label ------------------------------------------------------ */
.v3-fixture { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px dashed color-mix(in oklab, var(--amber) 40%, var(--line)); border-radius: var(--r-ctl); background: color-mix(in oklab, var(--amber) 6%, transparent); }
.v3-fixture b { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); font-weight: 400; }
.v3-fixture span { font-size: 12px; color: color-mix(in oklab, var(--sand) 72%, var(--sage)); }

/* --- Frame chrome for responsive references ----------------------------- */
.v3-frame { background: var(--carbon); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--lift); }
.v3-frame-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 8px 14px; background: var(--void); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }