@font-face{font-family:'Teneo Sans';src:url('/fonts/teneo-sans.woff2?r=2008e95d71a6') format('woff2');font-weight:200 900;font-display:block}
/* ── VERBATIM FROM MY TENEO'S ui.css (2026-10-13): the tokens, the rings, the surfaces, the hit, the pointer rules; then the pieces this site keeps (the card's content, the rows, the pill, the fields, the check, the tabs, the busy bar, the notice, the sheet rows); a fix there is re-copied here line for line. The ground is turned round in THE ADVISER'S OWN block at the end ── */
/* THE TOKENS, the one place for a value (the learner audit, 2026-09-25): colours, the type scale (8 steps and the door's display), 4 radii and the pill, the shadows, the hit, the frame and the bar's room; a rule names a token, never a typed size. THE SHADOWS, ONE SCHEME (2026-09-26, the owner: "the shadows around the popups are not uniform"): the outlines are rings (--ring and --ring-on, set per element by --rc; --ring-hair; --edge on glass, --edge-night on the night glass) and the elevation is three levels (--lift-card the card's frame, --lift-bar the bar, the pills and the rounds, --lift-sheet every popup); a box-shadow names these tokens alone (tools/clean.mjs) */
:root{--crest-inline:20px;--crest-row:34px;--crest-card:64px;--crest-hero:96px;color-scheme:only light;--act-row:768px;--wide:1500px;--read:880px;--lead:32px;--lead-box:22px;--dash:3 3;--chip-x:8px;--paper-min:320px;--rim-foot:#222345;--stage-foot:16px;--row:12px;--step-gap:14px;--it-y:8px;--it-x:10px;--kick:20px;--head:24px;--q-row:36px;--q-row-sm:28px;--ink:#232467;--ink-soft:#4a4b83;--mute:#67688d;--faint:#6a6c96;--paper:#f6f6fa;--sheet-foot:#f8f8fc;--sheet:linear-gradient(180deg,#fff,var(--sheet-foot)) var(--sheet-foot);--dim:rgba(10,11,40,.55);--chat-h:640px;--line:#d7d8e3;--ok:#1b6b4a;--warm:#b3261e;--warn:#8a4b00;--sky:#4a91e5;--sky-ink:#1a62b8;--sky-rgb:74,145,229;--sky-soft:rgba(74,145,229,.12);--sky-tint:rgba(74,145,229,.06);--sky-glow:rgba(74,145,229,.35);--ice-rgb:207,227,255;--glow-rgb:142,193,255;--night:rgba(255,255,255,.92);--night-mute:rgba(255,255,255,.72);--night-faint:rgba(255,255,255,.6);--field:linear-gradient(180deg,#25265a 0%,#141539 100%);--sans:'Teneo Sans',system-ui,-apple-system,'Segoe UI',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';--mono:ui-monospace,'SF Mono',Menlo,monospace;--tab:tabular-nums lining-nums;--t1:12px;--t2:13px;--t3:14px;--t4:15px;--t5:16px;--t6:18px;--t7:22px;--t8:28px;--t-display:clamp(30px,3.2vw,42px);--r1:6px;--r2:10px;--r3:14px;--r4:18px;--pill:999px;--edge:inset 0 0 0 1px rgba(20,21,58,.1),inset 0 1px 0 rgba(255,255,255,.8);--edge-night:inset 0 0 0 1px var(--isle-line),inset 0 1px 0 rgba(255,255,255,.16);--lift-card:0 12px 32px -14px rgba(4,6,32,.5);--lift-bar:0 12px 32px -14px rgba(4,6,32,.5);--lift-sheet:0 24px 48px -16px rgba(4,6,32,.6);--lift-knob:0 0 0 .5px rgba(20,21,58,.1),0 1px 3px rgba(20,21,58,.25);--glow:0 0 12px var(--sky-glow);--sheet-pad:22px;--sheet-in:sheet-in .35s cubic-bezier(.2,.8,.2,1);--sheet-out:sheet-out .22s cubic-bezier(.4,0,.6,1) forwards;--hit:44px;--band:7px;--round:25px;--rim-r:32px;--top-h:64px;--otty-row:138px;--bar-h:58px;--bar-edge:14px;--bar-gap:8px;--bar-room:calc(var(--bar-h) + 2 * var(--bar-edge) + env(safe-area-inset-bottom));--goal-bar:8px;--goal-act:44px;--badge-art:64px;--hair:2px;--chip-h:36px;--chip-h-sm:28px;--round-h:40px;--av-s:32px;--av-m:44px;--av-l:64px;--av-ground:radial-gradient(120% 100% at 50% 12%,#fff 0%,#e8effb 78%) #e8effb;--av-rim:rgba(35,36,103,.12);--face-pod:56px;--icon-s:18px;--icon-m:20px;--icon-sm:16px;--tok-s:28px;--meter-h:6px;--glass:rgba(255,255,255,.3);--bar-glass:rgba(255,255,255,.92);--glass-blur:blur(9px) saturate(1.4);--lens:rgba(255,255,255,.5);--lens-blur:blur(4px) saturate(1.6) brightness(1.04);--isle:rgba(28,29,74,.55);--isle-blur:blur(20px) brightness(.42) saturate(1.4);--isle-line:rgba(255,255,255,.14);--night-fill:rgba(255,255,255,.06);--hair-night:inset 0 1px 0 var(--isle-line);--night-lift:0 8px 24px rgba(5,6,30,.24);--rim:rgba(255,255,255,.06);--rim-blur:blur(18px) saturate(1.3);--glyph-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16.5v.01'/%3E%3C/svg%3E");--glyph-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6v.01'/%3E%3C/svg%3E");--glyph-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");--glyph-way:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");--glyph-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");--way-s:16px;--way-r:32px;--page-head:124px;--g-spark:var(--sky);--g-spark-lt:rgb(var(--ice-rgb));--g-sparkle:#a13fc0;--g-sparkle-lt:#e0a0ff;--g-thanks:#d23c68;--g-thanks-lt:#ff8fb0;--g-flame:#dd6326;--g-flame-lt:#ff8a55;--g-chest:#bd7f0a;--g-chest-lt:#f6c350;--g-mission:#6a52de;--g-mission-lt:#b3a1ff;--g-rank:var(--ink);--g-rank-lt:var(--night);--g-on-gold:#5a3a08;--g-level-1:#a86437;--g-level-1-lt:#f0c29a;--g-level-2:#74819a;--g-level-2-lt:#e6ebf2;--g-level-3:#a87712;--g-level-3-lt:#f8d977;--g-dot-lit:#ffd166;--hold:linear-gradient(180deg,#ffd27a,#f2b347);--hold-ink:#3f2a06;--hair-lit:inset 0 1px 0 rgba(255,255,255,.45);--g-tile:32px;--g-dot:8px;--gold:linear-gradient(180deg,#fff4c8,#f3c850 55%,#e0a93a);--gold-lift:0 0 0 1px rgba(142,96,15,.35),0 4px 14px rgba(240,166,64,.35);--gold-glow:0 0 6px 1px rgba(255,209,102,.8)}
/* the two rings resolve on the element that wears them, so its --rc (the ring's colour) holds */
*,::before,::after{box-sizing:border-box;--ring:inset 0 0 0 1px var(--rc,var(--line));--ring-on:inset 0 0 0 1.5px var(--rc,var(--ink));--ring-hair:inset 0 0 0 var(--hair) var(--rc,var(--ink));--tint:linear-gradient(180deg,var(--tint-hi),var(--tint-lo)) var(--g,var(--sky));--wait:linear-gradient(180deg,var(--wait-hi),var(--wait-lo)) var(--g,var(--ink));--tint-edge:var(--ring);--tint-edge:inset 0 0 0 1px color-mix(in srgb,var(--g,var(--sky)) 24%,transparent),var(--top-light);--wait-edge:var(--ring);--wait-edge:inset 0 0 0 1px color-mix(in srgb,var(--g,var(--ink)) 30%,transparent),var(--top-light)}
/* THE SURFACES, ONE SYSTEM (2026-09-27, the owner, over the grey "Nothing to bank yet" pill: "I don't like this lazy undesigned gray background you put behind anything. You need to design this nicer, wherever there is a gray"; "you need to think designer, and lux"): no element takes a flat grey; a fill names one of six surfaces, its values the tokens here, in the night side's language (a fill with a top light, a precise hairline, a soft layered shadow). RAISED (--raised, --raised-edge): white with its top light, the hairline and a soft lift; the cards, tiles and cells on the paper. TINTED (--tint, --tint-edge): the concept's own colour (--g, the sky when none) at a breath, its hairline in the same colour, the top light; the game's items and the notes (the chest gold, the flame warm, a sparkle violet, done green). QUIET (--quiet-edge, no fill): a clear control, one hairline ring and the ink; the rounds, the arrows, the small tags. WAITING (--wait, --wait-edge): a promise, never a broken grey: the concept's colour at its faintest, its ring a little clearer, the glyph and the words muted; a hero one (the Bank pill) runs a slow light round its ring. TRACK (--track-fill, --track-edge; --track-line for a ring's track): a channel sunk in the paper, the ink at 7% with a rounded inner shadow; meters, bars, the switch, the flip. HOVER (--hover): the sky's breath under the pointer. TINTED and WAITING read --g on the element (so their two tokens resolve here beside the rings); tools/clean.mjs 10 refuses a grey fill anywhere else */
:root{--hairline:rgba(35,36,103,.09);--raised:linear-gradient(180deg,#fff 0%,#fafafd 100%) #fff;--lift-raised:0 1px 2px rgba(20,21,58,.05),0 6px 16px -10px rgba(20,21,58,.2);--raised-edge:inset 0 0 0 1px var(--hairline),var(--lift-raised);--top-light:inset 0 1px 0 rgba(255,255,255,.8);--tint-hi:rgba(255,255,255,.94);--tint-lo:rgba(255,255,255,.87);--wait-hi:rgba(255,255,255,.97);--wait-lo:rgba(255,255,255,.91);--quiet-edge:inset 0 0 0 1px rgba(35,36,103,.16);--hover:var(--sky-tint);--track-fill:rgba(35,36,103,.07);--track-edge:inset 0 1px 2px rgba(20,21,58,.13),inset 0 0 0 1px rgba(35,36,103,.05);--track-line:rgba(35,36,103,.12);--tile-art:56px;--h-1:#3553b5;--h-2:#11808a;--h-3:#a53c6b;--h-4:#6f7d1c;--h-5:#a4592b;--h-6:#52607a;--h-v:#6a52de;--hue-edge:var(--raised-edge);--crest-s:34px;--crest-m:44px;--crest-l:60px;--kind-s:34px;--act-h:36px;--tick-s:30px;--seg-h:6px;--ok-disc:linear-gradient(180deg,#2c8a63,#1b6b4a);--halo:0 0 0 5px rgba(74,145,229,.14);--lift-ok:0 2px 6px -2px rgba(27,107,74,.5);--sky-edge:inset 0 0 0 1.5px rgba(74,145,229,.5);--now-line:rgba(74,145,229,.6);--flame-edge:inset 0 0 0 1px rgba(221,99,38,.3);--dot-s:12px;--dot-edge:inset 0 0 0 2px rgba(35,36,103,.12);--act-way:26px;--ok-line:rgba(27,107,74,.45);--card-slot:52px;--round-s:26px;--tile-min:150px;--tile-h:108px;--tile-glyph:38px}
button{font:inherit}
/* THE HIT, one rule for every tap target (the learner audit, 2026-09-25: arrows at 28, words at 17, links at 15; 2026-09-27, the owner: the clear ring that grew the tap drew every small pill's ends as an ellipse): a target is --hit tall and wide at least; a target drawn smaller names its face (--face tall, --face-i wide: a round, a chip, a word) and its box IS the face, so its radius, ring, shadow, focus ring and room in the layout are the face's own; the tap grows to 44 px by one clear layer, --rb above and below and --ri at the sides: the target's ::after, or its ::before where the ::after draws (a summary's chevron, an outside link's arrow, the bank's ring); a target at full size has a layer of no size; every target is its layer's box (position: relative) */
:where(a[href],button,summary,[role=button]){--rb:max(0px,(var(--hit) - var(--face,var(--hit))) / 2);--ri:max(0px,(var(--hit) - var(--face-i,var(--hit))) / 2);position:relative;min-block-size:calc(var(--hit) - 2 * var(--rb));min-inline-size:calc(var(--hit) - 2 * var(--ri));border:0}
:where(a[href],button,[role=button]):not(:where(summary,.prose a[target='_blank'],.pbank))::after,:where(summary,.prose a[target='_blank'],.pbank)::before{content:'';position:absolute;right:calc(var(--ri) * -1);bottom:calc(var(--rb) * -1);width:min(100% + 2 * var(--ri),(var(--rb) + var(--ri)) * 9999);height:min(100% + 2 * var(--rb),(var(--rb) + var(--ri)) * 9999)}
/* THE TAP IS THE TARGET'S OWN (2026-09-27, the owner: "you click Back or Hand in and nothing happens; you need to re-click"): the parts inside a target (its word, its glyph, its svg) take no hit, so the press and the release land on the target itself even when a part is written again between them; a control inside a target, and a part with its own tip, keep theirs */
:where(a[href],button,summary,[role=button]) *{pointer-events:none}
:where(a[href],button,summary,[role=button]) :where(a[href],button,summary,input,select,textarea,label,video,audio,iframe,[role=button],[tabindex],[data-tip],.pinfo){pointer-events:auto}
:where(a:not([class]),.prose a:not(.ccard):not(.pic)){--face:1.3em;--face-i:calc(var(--hit) - 12px);min-inline-size:0}
[hidden]{display:none!important}
.sheet{display:flex;flex-direction:column;min-height:0}
.sheet[hidden]{display:none}
.sheet .n{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 10px;align-items:start;padding:10px 14px;border-radius:var(--r2);text-decoration:none;color:var(--ink)}
.sheet .n:hover{background:var(--hover)}
.sheet .n b{display:block;font:500 var(--t3)/20px var(--sans)}
.sheet .n small{display:block;font:400 var(--t1)/17px var(--sans);color:var(--mute)}
.sheet .r{display:block;padding:12px 14px;border-radius:var(--r2);font:500 var(--t3)/20px var(--sans);color:var(--ink);text-decoration:none}
.sheet .r:hover{background:var(--hover)}
.who{margin-top:36px}
.who:first-child{margin-top:0}
:where(h1,h2).nm{margin:0}
.who .nm{font:600 var(--t7)/28px var(--sans);letter-spacing:-.02em;color:var(--ink)}
.who .fx{font:400 var(--t3)/20px var(--sans);color:var(--mute);margin-top:3px}
.who .fx a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:20px;padding:var(--row) 0}
.kv .k{font:400 var(--t5)/22px var(--sans);color:var(--ink);min-width:0}
.kv .k small{display:block;min-height:18px;font:400 var(--t2)/18px var(--sans);color:var(--mute);margin-top:1px}
.kv .v{font:400 var(--t5)/22px var(--sans);color:var(--ink);text-align:right;white-space:nowrap}
.kv .v.num{font-family:var(--sans);font-variant-numeric:var(--tab);font-size:var(--t4)}
.kv .v.need{color:var(--warm);font-weight:500}
.kv .v.ok{color:var(--ok);font-weight:500}
.kv .v.mu{color:var(--mute)}
:is(.bar .sg,.bar .sup,.dcard,.go.pale,.upl .take,.ptok,.sheet .lang .flip button,.qpick button)::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--lift-to);opacity:0;pointer-events:none;transition:opacity .2s ease}
:is(.bar .sg:hover,.bar .sup:hover,.bar .sg.on,.bar .sup.open,.dcard.on,.go.pale:hover,.upl .take:hover,.ptok.lit,.sheet .lang .flip button[aria-checked="true"],.qpick button:not(:disabled):hover,.qpick button.on:disabled)::before{opacity:1}
/* ── ACTS: one shape, the pill ── */
/* a pill is a link or a button: the button's border and pointer go here, once (2026-09-21: they stood in 17 rules); A PILL NEVER SHRINKS UNDER ITS WORDS (round 2 of the audit: the hit's min-width let a flex row squeeze "Try again ›" past the notice's edge; its words never wrap) */
.go{display:inline-flex;flex-shrink:0;border:0;cursor:pointer;align-items:center;gap:12px;background:var(--ink);color:#fff;font:500 var(--t4)/1 var(--sans);border-radius:var(--pill);padding:8px 8px 8px 22px;white-space:nowrap;justify-self:end;text-decoration:none;box-shadow:var(--lift-bar);transition:transform .5s cubic-bezier(.32,.72,0,1)}
.go:active{transform:scale(.98)}
.go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.go.quiet:focus-visible{border-radius:var(--r1)}
.go:disabled,.go[aria-disabled=true]{opacity:var(--go-off,.4);cursor:default}
.go i{width:var(--way-r);height:var(--way-r);border-radius:50%;background:rgba(255,255,255,.3);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:var(--t5)}
.go.quiet{--face:1.2em;background:none;color:var(--ink);box-shadow:none;padding:0;gap:6px}
.go.quiet i{width:auto;height:auto;background:none;font-size:var(--t5);transition:transform .2s ease}
.go.quiet:hover i{transform:translateX(2px)}
.way{display:inline-grid;place-items:center;flex:none;font-style:normal;vertical-align:middle}
.way::after,:is(.mod,.prose) summary::after,.prose a.ccard .c-word::after{content:'';display:inline-block;flex:none;inline-size:var(--way-s);block-size:var(--way-s);background:currentColor;-webkit-mask:var(--glyph-way) center/100% 100% no-repeat;mask:var(--glyph-way) center/100% 100% no-repeat}
.way.out::after{-webkit-mask-image:var(--glyph-out);mask-image:var(--glyph-out)}
.go.wide{width:100%;justify-content:space-between;margin-top:18px;box-sizing:border-box}
.fields{display:grid;grid-template-columns:1fr;gap:14px 16px;margin-top:20px}
/* a field's line: held under the input so the box never grows; the meta tone for a notice, the warm with the circle-i for a refusal, the green when it is right; the field keeps its ring in the warm, focused too */
.fld{display:grid;gap:6px;min-width:0;align-content:start}
.fld>span{font:500 var(--t2)/18px var(--sans);color:var(--mute)}.fld>span:empty{display:none}
.fld input{height:46px;border:0;border-radius:var(--r3);background:#fff;box-shadow:var(--ring);padding:0 14px;font:400 var(--t5)/22px var(--sans);color:var(--ink);width:100%;font-variant-numeric:var(--tab)}
/* THE ONE FIELD FOCUS (the owner: the Ask field glowed while the learner typed): a text field in focus turns its ring the accent, one pixel and a half, no halo, blur or shadow; buttons and chips keep their ring for the keyboard alone (:focus-visible) */
:is(.fld input,.fld select,.fld textarea):focus{outline:0;--rc:var(--sky);box-shadow:var(--ring-on)}
/* THE ONE FOCUS RING (the owner, 2026-09-26: the Standings tab wore a heavy box after a click): a pointer's focus shows none; the keyboard's focus (:focus-visible) keeps the ring, a tab's the accent inside its box */
:is(button,a,[role=tab],[tabindex]):focus:not(:focus-visible){outline:none}
.tab:focus-visible{outline:2px solid var(--sky-ink);outline-offset:-2px;border-radius:var(--r1)}
.fld input::placeholder{color:var(--faint)}
.meta{font:400 var(--t2)/18px var(--sans);color:var(--mute);margin:10px 0 0}
.meta.ok{color:var(--ok);font-weight:500}
.meta.warn{color:var(--warm);font-weight:500}
.go.pale{position:relative;background:#fff;color:var(--ink);box-shadow:var(--ring);--lift-to:var(--ring-on)}
.check{position:relative;display:flex;gap:12px;align-items:flex-start;margin-top:20px;cursor:pointer;font:400 var(--t4)/22px var(--sans);color:var(--ink)}
.check .box{flex:none;width:22px;height:22px;border-radius:var(--r1);--rc:var(--faint);box-shadow:var(--ring-on);display:grid;place-items:center;color:#fff;font-size:var(--t2);margin-top:0}
.check.on .box{background:var(--ink);box-shadow:none}
.check input{position:absolute;opacity:0;width:0;height:0}.check input:focus-visible+.box{outline:2px solid var(--ink);outline-offset:2px}
.check small{display:block;font:400 var(--t2)/18px var(--sans);color:var(--mute);margin-top:2px}.check:has(input:disabled){cursor:default;opacity:.6}
.tabs{position:relative;display:flex;margin:-4px 0 24px}
.tab{--face:38px;flex:1;background:none;padding:6px 8px 12px;font:500 var(--t4)/20px var(--sans);color:var(--faint);cursor:pointer;text-align:center;white-space:nowrap;overflow:hidden;overflow:clip visible;text-overflow:ellipsis;transition:color .3s}
.tab.on{color:var(--ink)}
.tabs .ink{position:absolute;bottom:0;left:0;height:3px;border-radius:var(--pill);background:var(--ink);transform-origin:left center;transition:transform .25s ease}
.fld select{height:46px;border:0;border-radius:var(--r3);background:#fff;box-shadow:var(--ring);padding:0 40px 0 14px;font:400 var(--t5)/22px var(--sans);color:var(--ink);width:100%;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.lastrow .who b{font:500 var(--t5)/22px var(--sans)}
.lastrow .who small{font:400 var(--t2)/18px var(--sans);color:var(--mute)}
.lastrow i{font-style:normal;color:var(--mute);font-size:var(--t6)}
.moment{margin-top:22px}
.moment p{margin:0 0 10px;font:400 var(--t3)/20px var(--sans);color:var(--mute)}
/* THE BUSY BAR, OPTION A, ONE RULE FOR EVERY BUSY BAR (the owner, 2026-09-30, chosen from the coordinator's page; the connect moment's too): the track clearly seen (the ink at 12% on the paper with the track's inset edge, the white at 12% on the night ground, --bar-track), the bar sweeping to and fro for as long as the wait lasts (the ink on the paper, the sky on the night ground, --bar-ink); the page's own wait line still speaks after about 19 s */
.scanbar{--bar-track:rgba(35,36,103,.12);--bar-ink:var(--ink);position:relative;height:4px;border-radius:var(--pill);background:var(--bar-track);box-shadow:var(--track-edge);overflow:hidden}
.otty .scanbar,.connect .scanbar{--bar-track:rgba(255,255,255,.12);--bar-ink:var(--sky);box-shadow:none}
.scanbar i{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:var(--pill);background:var(--bar-ink);animation:scan 1.6s cubic-bezier(.4,0,.6,1) infinite alternate both}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(264%)}}
.fld .line{display:flex;gap:6px;align-items:flex-start;min-height:18px;font:400 var(--t2)/18px var(--sans);color:var(--mute);text-wrap:pretty}
.fld.warn .line{color:var(--warm);font-weight:500}
.fld.ok .line{color:var(--ok);font-weight:500}
.fld.warn .line:not(:empty)::before{content:'';flex:none;width:16px;height:16px;margin-top:1px;background:currentColor;-webkit-mask:var(--glyph-i) center/16px no-repeat;mask:var(--glyph-i) center/16px no-repeat}
.fld.warn input,.fld.warn select,.fld.warn input:focus,.fld.warn select:focus{--rc:var(--warm);box-shadow:var(--ring-on)}
/* the card's row: the ask's soft well with the glyph leading the words; attention and info on the well, a refusal in the warm on a faint warm tint, a success in the green on a faint green tint; no border, no fade */
.notice{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:13px 16px;border-radius:var(--r3);background:var(--tint);box-shadow:var(--tint-edge);font:400 var(--t3)/20px var(--sans);color:var(--ink);text-wrap:pretty}
.notice::before{content:'';flex:none;width:18px;height:18px;margin-top:1px;background:currentColor;-webkit-mask:var(--glyph-i) center/18px no-repeat;mask:var(--glyph-i) center/18px no-repeat}
.notice.info{color:var(--ink-soft)}
.notice.error{--g:var(--warm);color:var(--warm);font-weight:500}
.notice.success{--g:var(--ok);color:var(--ok);font-weight:500}
.notice.success::before{-webkit-mask-image:var(--glyph-ok);mask-image:var(--glyph-ok)}
.notice .go.quiet{margin-left:auto}
.notice.end{flex-wrap:wrap}
.notice.end > span{flex:1 1 0;min-width:0}
.door .notice{background:none;box-shadow:none;padding:0;margin:0 0 14px;border-radius:0;font-size:var(--t2);line-height:18px;gap:6px}
.door .notice::before{width:16px;height:16px;-webkit-mask-size:16px;mask-size:16px}
.fld input.otp{font:500 var(--t8)/28px var(--mono);letter-spacing:.42em;text-align:center;height:56px;padding-left:calc(14px + .42em);font-variant-numeric:var(--tab)}
@keyframes t-in{from{opacity:0}}
.fld textarea{border:0;border-radius:var(--r3);background:#fff;box-shadow:var(--ring);padding:11px 14px;font:400 var(--t5)/22px var(--sans);color:var(--ink);width:100%;resize:vertical;min-height:120px}
.ways{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:8px}
/* ── MORE OF MY TENEO, VERBATIM (2026-10-13, the owner: "make it resemble our design elements a lot more"): the pale pill's ink disc, the bar's right side, the door statement's eyebrow, head and lead, the card, the document block with its rows and its row-size pills, the fold, the chips, Otty's bubble; a fix there is re-copied here line for line ── */
.go.pale i,.pgoal .go.pwhite i{background:var(--ink);color:#fff}
.tright{display:flex;align-items:center;gap:16px}
.statement .eyebrow{display:block;font:500 var(--t1)/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--night-faint)}
.statement h1{margin:14px 0;font:600 var(--t-display)/1.12 var(--sans);letter-spacing:-.025em}
.statement p{margin:0;font:400 var(--t5)/26px var(--sans);color:var(--night-mute)}
.card{background:var(--sheet);border-radius:var(--card-r);box-shadow:none;padding:clamp(24px,3vw,40px) var(--gut) clamp(24px,3vw,40px);min-width:0}
.doc{padding:4px 0 0;min-width:0}
.doc .dh .k{display:block;font:500 var(--t5)/24px var(--sans);color:var(--ink)}
.doc .dh .k small{display:block;font:400 var(--t2)/18px var(--sans);color:var(--mute);margin-top:2px;max-width:60ch;text-wrap:pretty}
.doc .facts{font:400 var(--t2)/18px var(--sans);color:var(--mute);margin-top:6px}
.doc .go{--face:42px;height:var(--face);padding:0 7px 0 18px;font-size:var(--t3)}
.doc .go:not(:has(i)){padding:0 18px}
.doc .go i{width:28px;height:28px;font-size:var(--t4)}
.doc .taps{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px}
.doc .file{--face:36px;display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:8px 0;margin-top:14px;text-decoration:none;color:var(--ink)}
.doc .file .fi{display:grid;place-items:center;color:var(--mute)}.doc .file .fi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.doc .file .fn{display:flex;align-items:baseline;gap:8px;min-width:0;font:400 var(--t4)/20px var(--sans)}
.doc .file .fn b{font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc .file .fn small{flex:none;font:400 var(--t1)/17px var(--sans);color:var(--mute)}
.doc .file .dl{font-style:normal;color:var(--mute);font-size:var(--t5);line-height:22px;transition:transform .2s ease,color .2s ease}
.doc .file a{color:inherit;text-decoration:none;min-width:0}.doc .file a.dl:hover{transform:translateY(2px);color:var(--ink)}
.mod summary{--face:var(--hit);list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--step-gap);padding:var(--row) 0;user-select:none;-webkit-user-select:none}
.mod summary::-webkit-details-marker,.prose summary::-webkit-details-marker{display:none}
.mod summary::after,.prose summary::after{color:var(--mute);transform:rotate(90deg);margin:0 0 0 var(--it-x);transition:transform .3s}
.mod[open] > summary::after,.prose details[open] > summary::after{transform:rotate(-90deg)}
.mod summary .gt{margin:0;flex:1 1 auto;min-width:0;font:500 var(--t5)/22px var(--sans);color:var(--ink)}
details.mod + .mod{border-top:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{--face:40px;height:var(--face);padding:0 16px;border-radius:var(--pill);background:var(--chip-fill,#fff);box-shadow:var(--ring);font:500 var(--t3)/1 var(--sans);color:var(--ink);cursor:pointer;white-space:nowrap}
.chip.on{box-shadow:var(--ring-on)}
.otty{--col-pad:12px;--col-pad-x:14px}
.otty .say .bub{position:relative;max-width:min(100%,26em);min-height:0;padding:var(--col-pad) var(--col-pad-x);transform-origin:left center}
.otty .say .bub{--tail:12px;--tail-base:16px;--tail-x:calc(1px - var(--tail) / 2);--tail-y:calc(50% - var(--tail) / 2);--tail-clip:polygon(0 0,0 100%,100% 100%);--say-cut:linear-gradient(#000 0 0) right / calc(100% - 1px) 100% no-repeat,linear-gradient(#000 calc(50% - var(--tail-base) / 2),#0000 0 calc(50% + var(--tail-base) / 2),#000 0) left / 1px 100% no-repeat;isolation:isolate;border-radius:var(--r4);background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--night-lift)}
.otty .say .bub::before{content:'';display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--night-fill);box-shadow:var(--edge-night);-webkit-mask:var(--say-cut);mask:var(--say-cut);pointer-events:none}
.otty .say .bub::after{content:'';position:absolute;left:var(--tail-x);top:var(--tail-y);right:auto;bottom:auto;z-index:-1;width:var(--tail);height:var(--tail);margin:0;border:0;border-radius:0;background:var(--night-fill);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--edge-night);clip-path:var(--tail-clip);transform:rotate(45deg);pointer-events:none}
.otty .say .bub:empty{display:none}
.otty .say .bub p{margin:0}
@keyframes bub-in{from{opacity:0;transform:scale(.92)}60%{opacity:1}}
/* ── MORE OF MY TENEO, VERBATIM (2026-10-13 21:xx, the owner: the sign-up and the log-in in My Teneo's sheet, the choices as its enrol format cards): the choice cards (.flow .wk), the offer sheet (.offer .sheet, its rim and its paper), the announce dialog, the confirm sheet's rise, the paper round ── */
.flow .weeks{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.flow .wk{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;min-width:0;padding:12px 14px;border:0;border-radius:var(--r3);background:#fff;color:var(--ink);box-shadow:var(--ring);text-align:left;cursor:pointer;font:inherit}
.flow .wk .cal{display:grid;grid-template-columns:repeat(5,12px);gap:3px;flex:none;padding-top:2px}
.flow .wk .t{flex:1;min-width:0;display:grid;gap:2px}
.flow .wk .nm{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.flow .wk .name{font:600 var(--t5)/24px var(--sans);letter-spacing:-.01em;color:var(--ink)}
.flow .wk .say{font:400 var(--t1)/17px var(--sans);color:var(--ink-soft);text-wrap:pretty}
.flow .wk .price{margin-top:2px;font:500 var(--t1)/20px var(--sans);color:var(--ink)}
.flow .wk .price b{font:500 var(--t2)/20px var(--sans);font-variant-numeric:var(--tab)}
.flow .wk .r{flex:none;display:grid;justify-items:end;padding-top:3px}
.flow .wk.on{box-shadow:var(--ring-on)}
.flow .ring{flex:none;width:18px;height:18px;border-radius:50%;--rc:var(--faint);box-shadow:var(--ring-on);margin-top:2px}
.flow .flag{font:500 var(--t1)/16px var(--sans);letter-spacing:.02em;color:var(--sky-ink)}
.flow .opt.on .ring,.flow .wk.on .ring{box-shadow:none;background:radial-gradient(circle,#fff 3px,var(--ink) 3.5px)}
.offer .sheet{position:relative;width:min(100%,440px);color:var(--ink);border-radius:var(--round);padding:var(--sheet-pad) var(--sheet-pad) 18px;z-index:9}
.offer .sheet::before{content:'';position:absolute;inset:calc(var(--band) * -1);border-radius:var(--rim-r);background:var(--rim);backdrop-filter:var(--rim-blur);-webkit-backdrop-filter:var(--rim-blur);box-shadow:var(--edge-night),var(--lift-sheet);z-index:-2}
.offer .sheet::after{content:'';position:absolute;inset:0;border-radius:var(--round);background:var(--sheet);box-shadow:var(--ring);z-index:-1}
.offer .nm,.announce .title,#dtitle,#pb-title{font:600 var(--t7)/26px var(--sans);letter-spacing:-.02em;color:var(--ink)}
.offer .fx{display:block;margin:6px 0 0;font:400 var(--t3)/20px var(--sans);color:var(--mute);text-wrap:pretty}
.offer .foot{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:20px}
.offer .x{position:absolute;top:var(--sheet-pad);right:var(--sheet-pad);z-index:1}
.announce{box-sizing:border-box;border:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;padding:calc(max(16px,4vh) + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(max(16px,4vh) + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));background:transparent;overflow:hidden;display:flex;align-items:center;justify-content:center}
.announce:not([open]){display:none}
.announce::backdrop{background:var(--dim)}
dialog.confirm{align-items:flex-end;padding:0 var(--row) calc(var(--row) + env(safe-area-inset-bottom))}
dialog.confirm[open] .sheet{animation:var(--sheet-in)}
.pround{--face:var(--round-h);--face-i:var(--face);display:grid;place-items:center;width:var(--face);height:var(--face);padding:0;border-radius:50%;background:none;box-shadow:var(--quiet-edge);color:var(--ink);cursor:pointer}
.pround:not(:disabled):not(.on-night):hover{background:var(--hover)}
.pround svg{width:var(--icon-s);height:var(--icon-s);stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pround.s-sm{--face:var(--chip-h-sm)}.pround.s-sm svg{width:var(--icon-sm);height:var(--icon-sm)}
/* ── THE ADVISER'S OWN (2026-10-13, the owner: "dark on white, the opposite of My Teneo, small deviations allowed"): the paper is the page, the ink the words, the bar the pill's paper glass with ink; every size, colour and radius below is a My Teneo token or a My Teneo value named at its rule (the rule it came from in the comment); the layout of a landing page is the one deviation ── */
html,body{overflow-x:hidden;overscroll-behavior-x:none}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t4)/22px var(--sans);-webkit-font-smoothing:antialiased}
/* My Teneo's .app tokens (the card's round, its gutter); the ground the paper, never the field */
.app{--card-r:var(--round);--gut:clamp(20px,3vw,40px);--wrap:1040px;--sec:36px;min-height:100vh;min-height:100dvh;background:var(--paper);display:flex;flex-direction:column}
.app:not(.up) *{transition:none!important}
/* ONE CONTENT COLUMN (the owner, 2026-10-13 18:0x: "why is the width of this page so not aligned, small, big"): every block of every page (the bar's inner row, the hero, each section, the panel, the FAQ, the hub's card, the foot's inner row) sits in the one .wrap at --wrap (1040 px, the owner's width; My Teneo's stage is 1760 and its reading measure 880) and starts at its left edge; the door card (the sign-up, the log-in, the code, the mailed link's landing, the not-found page) and the hub's card are the wrap too (the owner, 18:4x: every block's edges on the two lines), their words and forms inside at the enrol door's measure (480 px, .enroldoor #code) on the card's left edge */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 16px;min-width:0}
.shell{width:100%;margin:0 auto;min-width:0}
.door .card > .who,.card.door > .who{max-width:480px}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* THE EYEBROW is the door statement's (.statement .eyebrow: 500 t1/16, .14em, capitals), its night-faint turned to the paper's mute; the bar's tag, the section labels, the why cards' labels and the hub's labels wear it */
.eyebrow{display:block;font:500 var(--t1)/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.statement .eyebrow{color:var(--mute)}
/* ── THE TOP BAR: My Teneo's .top (its height --top-h, sticky here; its inner row the one wrap) on the pill's paper glass (--bar-glass, --glass-blur) with the hairline under; the wordmark in ink from the one white file (a mask); the section links at the island segment's size (.isl.one .seg: 36 px, 500 t3); Log in and Sign up the two pills (.go.pale, .go) at the document row's size (.doc .go); the menu round (--round-h) with the quiet ring ── */
.top{position:sticky;top:0;z-index:6;height:var(--top-h);display:flex;align-items:center;color:var(--ink);background:var(--bar-glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 -1px 0 var(--hairline)}
.top>.wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{--face:42px;--face-i:auto;display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.logo .word{display:block;width:118px;height:35px;background:currentColor;-webkit-mask:url('/logo.svg') left center/contain no-repeat;mask:url('/logo.svg') left center/contain no-repeat}
.logo .eyebrow{white-space:nowrap}
.top .links{display:none;align-items:center;gap:4px}
.top .links a{--face:36px;display:inline-flex;align-items:center;height:var(--face);padding:0 12px;border-radius:var(--pill);font:500 var(--t3)/1 var(--sans);color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.top .links a:hover{background:var(--hover);color:var(--ink)}
.top .go,.codecard .go,.kv .go{--face:42px;height:var(--face);padding:0 7px 0 18px;font-size:var(--t3)}
.top .go:not(:has(i)),.codecard .go:not(:has(i)),.kv .go:not(:has(i)){padding:0 18px}
.top .go i,.codecard .go i,.kv .go i{width:28px;height:28px;font-size:var(--t4)}
.top .menu{--face:var(--round-h);--face-i:var(--round-h);display:inline-grid;place-items:center;width:var(--face-i);height:var(--face);border-radius:50%;background:none;color:var(--ink);cursor:pointer;box-shadow:var(--quiet-edge)}
.top .menu svg{width:var(--icon-m);height:var(--icon-m);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){.top .links{display:flex}.top .menu{display:none}}
@media (max-width:1099px){.top .logo .eyebrow{display:none}}
@media (max-width:899px){.site .top .go.pale{display:none}}
/* ── THE SHEET: the phone's menu under the round, My Teneo's sheet dress (the rim's radius, the rim a band of the one solid ground, the paper inside at the concentric round, one elevation; it rises from the bar and goes back the same way) ── */
.sheet.nav{position:fixed;top:calc(var(--top-h) + 8px);left:12px;right:12px;z-index:9;display:flex;flex-direction:column;padding:var(--band);border-radius:var(--rim-r);background:var(--rim-foot);box-shadow:var(--lift-sheet);animation:var(--sheet-in)}
.sheet.nav .paper{display:flex;flex-direction:column;padding:8px;border-radius:var(--round);background:var(--sheet);box-shadow:var(--ring)}
.sheet.nav.away{animation:var(--sheet-out);pointer-events:none}
@keyframes sheet-in{from{opacity:0;transform:translateY(-6px)}}
@keyframes sheet-out{to{opacity:0;transform:translateY(-6px)}}
.veil{position:fixed;inset:0;z-index:8;background:var(--dim)}
.veil[hidden]{display:none}
/* ── THE STAGE: every section one --sec apart (the owner, 2026-10-13 18:0x: equal gaps); the statement is the door's (its eyebrow, its h1 on --t-display, My Teneo's largest page head, and its lead verbatim above; the night colours turned to the paper's); a section head a step down, the values of My Teneo's .mhead b (600 t8/32, -.02em), so the page reads big to medium; the acts row the document's taps (.doc .taps) ── */
.stage{flex:1;min-width:0}
.sec{margin-top:var(--sec)}
.statement{color:var(--ink)}
/* ONE RHYTHM under every eyebrow (the owner, 2026-10-13 18:4x: eyebrow to head, head to lead, lead to actions the same everywhere): 10 px, 8 px, 14 px (.doc .taps); the tiles the same 10 and 8 */
.statement h1{margin:10px 0 0;color:var(--ink);text-wrap:pretty}
.statement h2{margin:10px 0 0;font:600 var(--t8)/32px var(--sans);letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.statement :is(h1,h2) + p{margin-top:8px}
.statement p{color:var(--mute);max-width:56ch;text-wrap:pretty}
.taps{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px}
/* THE DISC IS THE PRIMARY'S ALONE (the owner, 2026-10-13 18:0x; My Teneo's door: Sign in wears it, the pale pills beside it do not): a pale pill in the acts row stands at the primary's own height (the disc's 32 px and the pill's 8 px above and below) with the row-size padding of a pill without a disc (.doc .go:not(:has(i))) */
.taps .go{--face:48px;height:var(--face)}
.taps .go:not(:has(i)){padding:0 22px;justify-content:center}
@media (max-width:599px){.taps{flex-direction:column;align-items:stretch}.taps .go{width:100%;justify-content:space-between}.taps .go:not(:has(i)){justify-content:center}}
/* ── THE HERO: the words and Otty's column. On a phone the guardian head's row under the words (the owner, 2026-10-13 18:4x: Otty and his bubble below, at the guardian head's size; shell.js .otty: his still at --osz 104 px beside his words, the tail towards him); from 900 px his column at the right at the door's figure (.door .otty --fig: 200 px), his bubble above him (the door's .say: 400 t4/21) with the tail turned down. The bubble is My Teneo's (verbatim above), its night glass turned to the raised paper ── */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-top:24px}
.hero .otty{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:'mount say';align-items:center;column-gap:12px;--osz:104px}
.hero .otty .mount{grid-area:mount;width:var(--osz);aspect-ratio:1}
.hero .otty .mount img{display:block;width:100%;height:auto}
.hero .otty .say{grid-area:say;display:flex;align-items:center;min-width:0;font:400 var(--t4)/21px var(--sans);color:var(--ink);text-wrap:pretty}
.hero .otty .say .bub{box-shadow:var(--lift-raised);animation:bub-in .34s cubic-bezier(.2,.7,.2,1)}
.hero .otty .say .bub::before,.hero .otty .say .bub::after{background:#fff;box-shadow:inset 0 0 0 1px var(--hairline)}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:end}
  .hero .otty{grid-template-columns:1fr;grid-template-areas:'say' 'mount';justify-items:center;row-gap:16px;--osz:200px}
  .hero .otty .say .bub{--tail-x:calc(50% - var(--tail) / 2);--tail-y:calc(100% - 1px - var(--tail) / 2);--tail-clip:polygon(0 100%,100% 100%,100% 0);--say-cut:linear-gradient(#000 0 0) top / 100% calc(100% - 1px) no-repeat,linear-gradient(90deg,#000 calc(50% - var(--tail-base) / 2),#0000 0 calc(50% + var(--tail-base) / 2),#000 0) bottom / 100% 1px no-repeat;transform-origin:center bottom}
}
/* ── THE CARDS ON PAPER: My Teneo's .card (verbatim above: its sheet, its round) wears the raised edge (the hairline and the soft lift), since no night rim frames it here, and ONE PADDING, My Teneo's card gutter --gut (the owner, 2026-10-13 18:4x: equal card paddings, the same ring and shadow on every card); a tile is a card among the small ones (the steps, the pools, the why cards, the counts, the fold rows); the commission panel the card on the sky tint ── */
.card{box-shadow:var(--raised-edge);padding:var(--gut)}
.card.sky{background:var(--sky-tint)}
.card .who{margin-top:0}
.card .fx b{font-weight:500;color:var(--ink)}
.card .meta a,.check a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* the steps: three tiles of one height; THE NUMERAL IS THE DESIGN ELEMENT (the owner, 2026-10-13 22:2x: "the small 1 2 3, is that elegant?"): a large figure at the display size (--t-display, My Teneo's largest head) in the sky accent, standing where My Teneo's tile glyph stands (the top-left of a tile, .tiles > .kv.it .ki), the title under it; one baseline across the three since every numeral is one line of one size */
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:20px;align-items:stretch}
.step .n{display:block;font:600 var(--t-display)/1 var(--sans);letter-spacing:-.03em;color:var(--sky);font-variant-numeric:var(--tab)}
.step b,.why b,.pool .t{display:block;font:500 var(--t5)/24px var(--sans);color:var(--ink)}
.step b,.why b{margin-top:10px}
.step p,.why p{margin:8px 0 0;font:400 var(--t4)/22px var(--sans);color:var(--mute);text-wrap:pretty}
@media (min-width:700px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the commission: the two pools as tiles in the panel, the amount at the largest head */
.pools{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:20px}
.pool .amt,.count b,.codecard .code{display:block;font:600 var(--t8)/32px var(--sans);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:var(--tab)}
.pool .amt{margin-top:8px}
.pool small,.count small{display:block;margin-top:8px;font:400 var(--t2)/18px var(--sans);color:var(--mute)}
@media (min-width:600px){.pools{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the why cards: three tiles under their labels */
.why{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:20px}
@media (min-width:800px){.why{grid-template-columns:repeat(3,minmax(0,1fr))}}
.centre{display:flex;justify-content:center;margin-top:20px}
/* the FAQ: My Teneo's fold (.mod summary, the way glyph turned as its chevron, verbatim above) in a tile per row; the row's own padding less the summary's */
.faq{display:grid;gap:8px;margin-top:20px}
.faq .mod{padding:calc(var(--gut) - var(--row)) var(--gut)}
.faq details.mod + .mod{border-top:0}
.faq .mod .a{margin:0;padding:0 0 var(--row);font:400 var(--t4)/22px var(--sans);color:var(--mute);text-wrap:pretty}
/* ── THE DOOR CARD (the sign-up, the log-in, the code) and the mailed link's landing: My Teneo's door spacing (.door .go.wide 16, .door .ways 18, .door .help's quiet link at t3) ── */
.door .stage{display:grid;align-content:center;padding:24px 0}
.door .card{min-height:260px;display:flex;flex-direction:column;justify-content:center}
.door .notice{margin:0 0 14px}
/* the forms in the card at My Teneo's enrol door measure (.enroldoor #code: 480 px; the two-column form at two of its columns), on the card's left edge as every block is */
.card .fields{max-width:480px}.card .fields.two{max-width:640px}
@media (min-width:600px){.fields.two{grid-template-columns:1fr 1fr}.fld.wide{grid-column:1 / -1}}
.fld textarea{min-height:88px}
.fld.acts{display:flex;justify-content:flex-start;margin-top:8px}
.fld.acts .moment.busy{margin:0;width:100%}
.card .go.wide{margin-top:16px}
.card .ways{justify-content:flex-start;margin-top:18px}
.card .ways .go.quiet,.card .acts .go.quiet{font-size:var(--t3)}
/* ── THE HUB: the head the statement, the card at the wrap with the tabs; THE CODE CARD in the ink carries the code and the share link (the owner, 2026-10-13 20:4x: "make the link more visible, copy easier"): two rows, each its words and its copy pill on the night fill (the glass's own tokens), the link in the body size and wrapping, the rows side by side on a desk and stacked on a phone, then the quiet share action; the counts three tiles; the split a tile of .kv rows ── */
.hub .stage{padding-top:24px}
.hub .shell{margin-top:var(--sec)}
.codecard{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:var(--gut);border-radius:var(--round);background:var(--ink);color:#fff;box-shadow:var(--lift-raised);min-width:0}
.codecard .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;min-width:0}
.codecard .row>div{min-width:0;flex:1 1 220px}
.codecard .eyebrow{color:var(--night-faint)}
.codecard .code{margin-top:4px;color:#fff;letter-spacing:.04em;overflow-wrap:anywhere}
.codecard .link{display:block;margin-top:8px;font:400 var(--t4)/22px var(--sans);color:#fff;overflow-wrap:anywhere}
.codecard .go.pale{background:var(--night-fill);box-shadow:var(--edge-night);color:#fff;flex:none}
.codecard .go.pale:hover{background:var(--isle-line)}
.codecard .share{display:flex;flex-wrap:wrap;gap:8px 22px}
.codecard .share .go.quiet{color:#fff}
.codecard.off{opacity:.55}
@media (min-width:900px){.codecard{grid-template-columns:auto minmax(0,1fr)}.codecard .share{grid-column:1 / -1}}
.go.pale svg{width:var(--icon-sm);height:var(--icon-sm);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.go.pale.did{color:var(--ok)}
.kv.link .k small{font-family:var(--mono);overflow-wrap:anywhere}
.counts{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
.count span{display:block;margin-top:8px;font:400 var(--t4)/22px var(--sans);color:var(--mute)}
.count small{color:var(--faint)}
@media (min-width:700px){.counts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.split{margin-top:12px;padding-bottom:calc(var(--gut) - var(--row))}
.split .hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.split .ratio{font:500 var(--t2)/18px var(--sans);color:var(--mute);font-variant-numeric:var(--tab)}
.split .kv .k{color:var(--mute);font-size:var(--t4)}.split .kv .v{font-weight:500}
/* ── THE RESOURCES as the Figma (the owner, 2026-10-13 20:5x): the category column at the left (the glyph, the name, its one-line hint; My Teneo's sheet rows .sheet .n, the open one on the hover tint), the material tiles at the right (the title opens the file in a new tab, kind · size under it, the Download or Copy text quiet pill), two tiles a row on a desk; on a phone the column is My Teneo's chips in a row and the tiles one column; an empty category one quiet line; the help line the info notice ── */
.res{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.res .doc .dh{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cats{display:flex;gap:8px;overflow:auto hidden;overscroll-behavior:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats .n small,.cats .n svg{display:none}
.cats .n{--face:40px;flex:none;display:inline-flex;align-items:center;height:var(--face);padding:0 16px;border-radius:var(--pill);background:#fff;box-shadow:var(--ring);font:500 var(--t3)/1 var(--sans);color:var(--ink);cursor:pointer;white-space:nowrap}
.cats .n.on{box-shadow:var(--ring-on)}
.mats{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
.mat .t{display:block;font:500 var(--t5)/24px var(--sans);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.mat .t:hover{text-decoration:underline;text-underline-offset:2px}
.mat .t svg{width:var(--icon-m);height:var(--icon-m);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px;margin-right:8px;color:var(--mute)}
.mat small{display:block;margin-top:8px;font:400 var(--t2)/18px var(--sans);color:var(--mute)}
.mat .taps{margin-top:10px}
.mat .go.quiet.did{color:var(--ok)}
.res .notice{margin:20px 0 0}
@media (min-width:600px){.mats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.res{grid-template-columns:220px minmax(0,1fr)}.cats{flex-direction:column;overflow:visible;margin:0;padding:0;gap:2px;align-self:start}.cats .n{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:start;height:auto;padding:10px 14px;border-radius:var(--r2);background:none;box-shadow:none;font:500 var(--t3)/20px var(--sans);white-space:normal;text-align:left}.cats .n:hover,.cats .n.on{background:var(--hover)}.cats .n svg{display:block;width:var(--icon-m);height:var(--icon-m);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--mute);margin-top:1px}.cats .n small{display:block;grid-column:2;font:400 var(--t1)/17px var(--sans);color:var(--mute)}}
/* ── THE FOOT: a flat full-width band of My Teneo's night field (the owner, 2026-10-13 18:0x: no rounded corners), its inner row the one wrap: the wordmark in white from the one file, the two lines ── */
.foot{margin-top:var(--sec);padding:32px 0 calc(28px + env(safe-area-inset-bottom));background:var(--field);color:var(--night-mute)}
.foot .word{display:block;width:118px;height:35px;background:#fff;-webkit-mask:url('/logo.svg') left center/contain no-repeat;mask:url('/logo.svg') left center/contain no-repeat}
.foot p{margin:14px 0 0;max-width:72ch;font:400 var(--t2)/18px var(--sans);text-wrap:pretty}
.foot small{display:block;margin-top:10px;font:400 var(--t1)/16px var(--sans);color:var(--night-faint)}
/* the skeleton before a tree paints: the house's WAITING surface */
.ske{display:grid;gap:14px;padding:24px 0}
.ske i{display:block;border-radius:var(--r2);background:var(--wait);box-shadow:var(--wait-edge)}
.ske .nm{height:26px;width:55%}.ske .fld{height:48px}.ske .go{height:44px;width:40%;border-radius:var(--pill)}.ske .sub{height:12px;width:40%}.ske .box{height:96px;border-radius:var(--r3)}.ske .row{height:40px;border-radius:var(--r3)}
/* ── THE ENTRY: the sign-up and the log-in in My Teneo's sheet over the page (the owner, 2026-10-13 21:2x: "the move to Sign up and Log in is so long"): the announce dialog with the offer sheet (verbatim above), centred on a desk at the door's width (540 px), the whole screen on a phone; the close round at the sheet's corner (.offer .x); the form at the enrol step's spacing (12 px rows, 6 px label to field, two columns for the short fields, the ticks compact, the primary at the end with the quiet link beside it, .offer .foot); the choice cards two a row from 600 px ── */
dialog.confirm.entry{align-items:center;padding:calc(max(16px,4vh) + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(max(16px,4vh) + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
.entry .sheet{width:min(100%,540px);max-height:100%;overflow:auto;overscroll-behavior:contain}
.entry .x svg{fill:none}
.entry .eyebrow,.entry .nm{padding-right:44px}
.entry .fields{gap:12px 16px;margin-top:14px}
.entry .fld textarea{min-height:0}
.entry .fld .fx{font:400 var(--t2)/18px var(--sans);color:var(--mute)}
.entry .check{margin-top:12px;font:400 var(--t3)/20px var(--sans)}
.entry .foot{grid-column:1 / -1}
.entry .foot .go.quiet{font-size:var(--t3)}
.entry .foot .moment{flex:1;margin:0}
.entry .go.wide{margin-top:16px}
.entry .weeks{grid-column:1 / -1}
@media (min-width:600px){.entry .weeks{grid-template-columns:1fr 1fr;gap:16px}}
/* the choice card's glyph tile (the owner, 2026-10-13 21:5x: "add icons to these"): My Teneo's tile glyph (.tiles > .kv.it .ki: the tinted rounded square, the 20 px line glyph) at the card's left, the words beside it */
.flow .wk .ki{flex:none;display:grid;place-items:center;width:var(--tile-glyph);height:var(--tile-glyph);border-radius:var(--r2);--g:var(--ink-soft);background:var(--tint);box-shadow:var(--tint-edge)}
.flow .wk .ki svg{width:20px;height:20px;color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the split bar on the split card: the adviser's share in the ink, the family's on the sky tint, the percentages inside */
.flow .wk .cal.split{display:flex;width:100%;height:20px;margin:0 0 6px;padding:0;border-radius:var(--pill);overflow:hidden;background:var(--sky-soft);box-shadow:var(--track-edge)}
.flow .wk .cal.split i{display:grid;place-items:center;min-width:0;font:600 var(--t1)/1 var(--sans);font-style:normal;color:#fff;background:var(--ink)}
.flow .wk .cal.split i + i{color:var(--ink);background:none}
/* the phone field: the dialling code drawn in the box, the number typed after it (the owner, 2026-10-13 21:3x); the box wears the field's ring, the focus and the warm as a field does */
.telbox{display:flex;align-items:center;height:46px;border-radius:var(--r3);background:#fff;box-shadow:var(--ring)}
.telbox .dial{flex:none;padding-left:14px;font:400 var(--t5)/22px var(--sans);color:var(--mute)}
.fld .telbox input,.fld .telbox input:focus,.fld.warn .telbox input{height:44px;background:none;box-shadow:none;padding-left:6px}
.telbox:focus-within{--rc:var(--sky);box-shadow:var(--ring-on)}
.fld.warn .telbox{--rc:var(--warm);box-shadow:var(--ring-on)}
@media (max-width:599px){dialog.confirm.entry{padding:0}.entry .sheet{width:100%;height:100%;max-height:none;border-radius:0;padding-top:calc(var(--sheet-pad) + env(safe-area-inset-top))}.entry .sheet::before{display:none}.entry .sheet::after{border-radius:0;box-shadow:none}.entry .x{top:calc(var(--sheet-pad) + env(safe-area-inset-top))}}
[data-landed]>:not(.moment){animation:t-in .24s ease-out both}
@media (prefers-reduced-motion:reduce){.scanbar i{animation:none;width:100%;opacity:.35}[data-landed]>*{animation:none}.sheet.nav{animation:none}.hero .otty .say .bub{animation:none}}