/* Team Build page — one structure, two skins (gold / fresh).
 * Colours, fonts and button style arrive as CSS custom properties on
 * .tb (set by includes/teambuild.php from a bounded preset, never raw
 * user text colours), so a leader's choices can't produce unreadable text. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.tb-body{margin:0;font-size:16px;line-height:1.55;min-height:100vh;overflow-x:hidden}
.tb{position:relative;min-height:100vh;color:var(--tb-ink);font-family:var(--tb-font-body);font-size:16px;line-height:1.55}
.tb a:not(.tb-btn):not(.tb-prog-btn){color:inherit}
.tb img{max-width:100%;display:block}
.tb button{font:inherit}
.tb button:not(.tb-btn){color:inherit}
.tb :focus-visible{outline:2px solid var(--tb-focus);outline-offset:3px;border-radius:10px}
.tb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- backdrop: page colour field + optional spotlight ---------- */
.tb-sky{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--tb-sky)}
.tb-sky::after{content:"";position:absolute;inset:0;background:var(--tb-sky-veil)}
.tb-spot{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s ease}
.tb-spot.is-on{opacity:1}
.tb-spot-layer{position:absolute;inset:-10%;opacity:0;transition:opacity 1.1s ease;background:radial-gradient(60% 50% at 50% 30%,var(--c) 0%,transparent 70%),radial-gradient(40% 40% at 15% 85%,var(--c) 0%,transparent 70%);filter:blur(10px) saturate(1.15)}
.tb-spot-layer.is-active{opacity:var(--tb-spot-strength)}
.tb-spot-mark{position:absolute;right:-4vw;bottom:-6vh;font-family:var(--tb-font-head);font-weight:700;font-size:38vw;line-height:.8;color:var(--c);opacity:.10;filter:blur(3px);letter-spacing:-.04em}
.tb-spot-logo{position:absolute;right:4vw;bottom:6vh;width:30vw;max-width:420px;opacity:.10;filter:blur(2px) grayscale(.2)}
@media (max-width:760px){.tb-spot-mark{font-size:60vw}.tb-spot-logo{width:60vw}}
.tb-dust{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--tb-dust,0)}
.tb-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--tb-dust-color);box-shadow:0 0 8px var(--tb-dust-color);animation:tb-float 18s linear infinite;opacity:0}
@keyframes tb-float{0%{transform:translateY(20px);opacity:0}15%{opacity:.8}85%{opacity:.6}100%{transform:translateY(-140px);opacity:0}}
.tb-blob{position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:var(--tb-blob-op,.0);animation:tb-drift 26s ease-in-out infinite alternate}
@keyframes tb-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(6vw,-5vh) scale(1.12)}}

/* ---------- ribbon ---------- */
.tb-ribbon{position:relative;z-index:2;display:flex;justify-content:center;gap:.5em;align-items:center;padding:.5rem 1rem;font-size:.82rem;letter-spacing:.01em;color:var(--tb-ribbon-ink);background:var(--tb-ribbon-bg);border-bottom:1px solid var(--tb-line);text-align:center}
.tb-ribbon b{font-weight:600}
.tb-ownerbar{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:.5rem .9rem;justify-content:center;align-items:center;padding:.55rem 1rem;font-size:.85rem;background:#111;color:#fff}
.tb-ownerbar a{color:#fff;font-weight:600;text-decoration:underline}

/* ---------- column ---------- */
.tb-wrap{position:relative;z-index:1;width:100%;max-width:600px;margin:0 auto;padding:22px 16px 56px}
.tb-col{display:flex;flex-direction:column;gap:18px}

/* ---------- hero ---------- */
.tb-hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:4px}
.tb-photo{position:relative;width:var(--tb-photo-w,148px);height:var(--tb-photo-h,148px);border-radius:var(--tb-photo-r,50%);padding:3px;background:var(--tb-photo-ring);box-shadow:var(--tb-photo-glow)}
.tb-photo img,.tb-photo .tb-initial{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--tb-photo-r,50%) - 2px);background:var(--tb-surface-solid)}
.tb-photo .tb-ph{display:block;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--tb-photo-r,50%) - 2px)}
.tb-photo .tb-ph .tb-initial{border-radius:inherit}
.tb-photo .tb-initial{display:flex;align-items:center;justify-content:center;font-family:var(--tb-font-head);font-size:3.4rem;color:var(--tb-accent-text)}
.tb[data-shape="circle"]{--tb-photo-r:50%}
.tb[data-shape="rounded"]{--tb-photo-r:26px;--tb-photo-w:168px;--tb-photo-h:168px}
.tb[data-shape="portrait"]{--tb-photo-r:22px;--tb-photo-w:176px;--tb-photo-h:216px}

.tb-name{margin:6px 0 0;font-family:var(--tb-font-head);font-weight:var(--tb-head-weight);font-size:clamp(2.4rem,9vw,3.2rem);line-height:1.04;letter-spacing:var(--tb-head-track);color:var(--tb-name-ink)}
.tb-promise{margin:0;max-width:30em;font-size:1.06rem;line-height:1.5;color:var(--tb-ink-soft)}
.tb-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.tb-chips li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:.82rem;background:var(--tb-chip-bg);border:1px solid var(--tb-chip-line);color:var(--tb-chip-ink)}
.tb-chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tb-accent)}

/* ---------- cards ---------- */
.tb-card{position:relative;border-radius:var(--tb-radius);background:var(--tb-surface);border:1px solid var(--tb-line);box-shadow:var(--tb-card-shadow);padding:18px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tb-card h2{margin:0 0 4px;font-family:var(--tb-font-head);font-weight:var(--tb-head-weight);font-size:1.45rem;line-height:1.15;color:var(--tb-name-ink)}
.tb-card p{margin:0}
.tb-muted{color:var(--tb-muted)}
.tb-small{font-size:.86rem}

/* step 1 */
.tb-step1 .tb-lead{margin:2px 0 12px;color:var(--tb-ink-soft);font-size:.95rem}
.tb-form{display:flex;gap:8px;flex-wrap:wrap}
.tb-form .tb-btn{flex:1 0 auto}
.tb-input{flex:999 1 220px;min-width:0;height:52px;padding:0 16px;border-radius:calc(var(--tb-radius) - 6px);border:1px solid var(--tb-input-line);background:var(--tb-input-bg);color:var(--tb-ink);font:inherit;font-size:16px}
.tb-input::placeholder{color:var(--tb-muted)}
.tb-input:focus{outline:none;border-color:var(--tb-accent);box-shadow:0 0 0 3px var(--tb-ring)}
.tb-meta{margin:10px 0 0;font-size:.82rem;line-height:1.5;color:var(--tb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.tb-meta{font-size:.72rem;letter-spacing:-.005em}}
@media (max-width:359px){.tb-meta{white-space:normal}}
.tb-meta a{color:inherit}
.tb-msgform .tb-meta{white-space:normal}   /* the message form says it sets up an account: never cut that off (2026-10-29) */
.tb-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;border:1px solid var(--tb-chip-line);background:var(--tb-chip-bg);color:var(--tb-chip-ink);font-size:.78rem;white-space:nowrap}
.tb-msg{margin-top:10px;font-size:.9rem;min-height:0}
.tb-msg.is-err{color:var(--tb-err)}
.tb-msg.is-ok{color:var(--tb-ok)}
.tb-saved{display:flex;align-items:center;gap:10px;font-size:1rem}
.tb-saved .tb-tick{flex:0 0 auto}
.tb-codebox{margin-top:12px;display:none}
.tb-codebox.is-open{display:block}

/* ---------- buttons ---------- */
.tb .tb-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border:0;border-radius:calc(var(--tb-radius) - 6px);cursor:pointer;font-weight:700;font-size:1rem;letter-spacing:.005em;text-decoration:none;color:var(--tb-on-accent);background:var(--tb-btn-bg);box-shadow:var(--tb-btn-shadow);transition:transform .15s ease,filter .15s ease}
.tb-btn:hover{filter:brightness(1.06)}
.tb-btn:active{transform:translateY(1px)}
.tb-btn[disabled]{opacity:.6;cursor:wait}
.tb-btn-wide{width:100%}
.tb .tb-btn-ghost{background:transparent;color:var(--tb-accent-text);border:1px solid var(--tb-chip-line);box-shadow:none}
.tb-link{background:none;border:0;padding:0;cursor:pointer;color:var(--tb-accent-text);text-decoration:underline;text-underline-offset:3px;font-size:.88rem}
/* sheen: one band of light that passes over primary buttons now and then */
.tb[data-sheen="1"] .tb-btn:not(.tb-btn-ghost)::after,.tb[data-sheen="1"] .tb-prog-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:tb-sheen 6.5s ease-in-out infinite;pointer-events:none}
@keyframes tb-sheen{0%,72%{left:-60%}100%{left:130%}}

/* ---------- steps strip ---------- */
.tb-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:12px 10px;list-style:none;text-align:center;border-radius:var(--tb-radius);border:1px solid var(--tb-line);background:var(--tb-surface)}
.tb-strip li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.82rem;line-height:1.25;color:var(--tb-ink-soft)}
.tb-strip b{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:.85rem;color:var(--tb-on-accent);background:var(--tb-btn-bg)}
.tb-strip li.is-done b{background:var(--tb-ok)}
.tb-powered{margin:-8px 0 0;text-align:center;font-size:.8rem;color:var(--tb-muted)}

/* ---------- trust ---------- */
.tb-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.tb-badges li{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.78rem;border:1px solid var(--tb-chip-line);background:var(--tb-chip-bg);color:var(--tb-chip-ink)}
.tb-badges svg{width:13px;height:13px;color:var(--tb-ok)}
.tb-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:calc(var(--tb-radius) - 6px);overflow:hidden;background:var(--tb-video-bg);border:1px solid var(--tb-line);margin-bottom:12px}
.tb-video button{position:absolute;inset:0;width:100%;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--tb-ink)}
.tb-video .tb-play{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tb-btn-bg);color:var(--tb-on-accent);box-shadow:var(--tb-btn-shadow)}
.tb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tb-trust-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.tb-socials{display:flex;gap:8px;flex-wrap:wrap}
.tb-socials a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--tb-chip-line);background:var(--tb-chip-bg);color:var(--tb-chip-ink)}
.tb-socials svg{width:17px;height:17px}

/* ticker */
.tb-ticker{display:flex;align-items:center;gap:10px;justify-content:center;font-size:.86rem;color:var(--tb-ink-soft);min-height:22px;text-align:center}
.tb-ticker .tb-dot{width:8px;height:8px;border-radius:50%;background:var(--tb-ok);box-shadow:0 0 0 0 var(--tb-ok);animation:tb-pulse 2.4s ease-out infinite;flex:0 0 auto}
@keyframes tb-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tb-ok) 60%,transparent)}100%{box-shadow:0 0 0 10px transparent}}

/* ---------- programs ---------- */
.tb-progress{display:flex;flex-direction:column;gap:6px}
.tb-progress-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.88rem;color:var(--tb-ink-soft)}
.tb-progress-top strong{font-family:var(--tb-font-head);font-weight:var(--tb-head-weight);font-size:1.3rem;color:var(--tb-name-ink)}
.tb-bar{height:8px;border-radius:99px;background:var(--tb-bar-bg);overflow:hidden}
.tb-bar span{display:block;height:100%;width:0;border-radius:inherit;background:var(--tb-btn-bg);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.tb-progs{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.tb-prog{position:relative;scroll-margin-top:80px}
.tb-ribbon-tag{position:absolute;z-index:2;top:-9px;right:14px;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:700;color:var(--tb-on-accent);background:var(--tb-btn-bg);box-shadow:var(--tb-btn-shadow)}
.tb-prog-btn{position:relative;overflow:hidden;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:76px;padding:12px 14px 12px 12px;border-radius:var(--tb-radius);text-decoration:none;color:var(--tb-pbtn-ink);background:var(--tb-pbtn-bg);border:1px solid var(--tb-pbtn-line);box-shadow:var(--tb-pbtn-shadow);transition:transform .15s ease,filter .15s ease}
.tb-prog-btn:hover{filter:brightness(1.05)}
.tb-prog-btn:active{transform:translateY(1px)}
.tb-prog.is-joined .tb-prog-btn{background:var(--tb-pbtn-done-bg);color:var(--tb-pbtn-done-ink);border-color:var(--tb-line);box-shadow:none}
.tb-prog-icon{width:52px;height:52px;border-radius:calc(var(--tb-radius) - 8px);display:flex;align-items:center;justify-content:center;background:var(--tb-icon-bg);overflow:hidden}
.tb-prog-icon img{width:100%;height:100%;object-fit:contain;padding:7px}
.tb-prog-icon svg{width:26px;height:26px;color:var(--tb-icon-ink)}
.tb-prog-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.tb-prog-title{font-weight:700;font-size:1.04rem;line-height:1.2}
.tb-prog-why{font-size:.86rem;line-height:1.35;opacity:.86}
.tb-prog-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.tb-tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.02em;background:var(--tb-tag-bg);color:var(--tb-tag-ink)}
.tb-gift{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--tb-gift-bg);color:var(--tb-gift-ink)}
.tb-prog-end{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tb-end-bg);color:var(--tb-end-ink)}
.tb-prog-end svg{width:16px;height:16px}
.tb-prog.is-joined .tb-prog-end{background:var(--tb-ok);color:#fff}
.tb-prog-under{padding:8px 4px 0 6px;display:flex;flex-direction:column;gap:8px}
.tb-joined{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.9rem;color:var(--tb-ink-soft)}
.tb-joined b{color:var(--tb-ok)}
.tb-save{display:none;padding:14px;border-radius:calc(var(--tb-radius) - 4px);background:var(--tb-surface);border:1px solid var(--tb-line)}
.tb-prog.is-open .tb-save{display:block;animation:tb-in .35s ease}
@keyframes tb-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tb-save label{display:block;font-size:.9rem;margin-bottom:8px;color:var(--tb-ink-soft)}
.tb-save .tb-input{height:48px}
.tb-save .tb-btn{min-height:48px}
.tb-save-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.tb-sponsor{font-size:.84rem;color:var(--tb-muted)}
.tb-sponsor b{color:var(--tb-ink)}
.tb-more{display:flex;flex-wrap:wrap;gap:4px 16px}
.tb-more details{font-size:.86rem}
.tb-more summary{cursor:pointer;color:var(--tb-accent-text);list-style:none}
.tb-more summary::-webkit-details-marker{display:none}
.tb-more summary::after{content:" +"}
.tb-more details[open] summary::after{content:" –"}
.tb-more details > div{margin-top:6px;padding:10px 12px;border-radius:12px;background:var(--tb-surface);border:1px solid var(--tb-line);color:var(--tb-ink-soft);line-height:1.5}
.tb-more ol{margin:0;padding-left:1.2em}
.tb-more li+li{margin-top:4px}
.tb-more details[open]{flex-basis:100%}
.tb-check{display:inline-block;animation:tb-pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes tb-pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---------- finish ---------- */
.tb-next{text-align:center;font-size:.92rem;color:var(--tb-ink-soft)}
.tb-gate{display:block;text-align:center;font-size:.84rem;color:var(--tb-muted);margin:0 0 8px}
/* Phones open popups at the TOP, as in frames (Sheridan 2026-10-21): a bottom sheet put the
   email box and its button where the keyboard comes up. Wider screens centre it (below). */
.tb-modal{position:fixed;inset:0;z-index:50;display:none;align-items:flex-start;justify-content:center;padding:16px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tb-modal.is-open{display:flex}
/* Framed (frame-visible.js sets data-atb-framed and --atb-vis-top/-h): a frame taller than
   the window (topdogsrotator's 1000px slot) put the popup's lower half below the screen.
   Keep the popup inside the band of the frame the visitor can actually see. */
html[data-atb-framed] .tb-modal{top:var(--atb-vis-top,0px);bottom:auto;height:var(--atb-vis-h,100%)}
html[data-atb-framed] .tb-sheet{max-height:calc(var(--atb-vis-h,100vh) - 32px)}
@media (min-width:640px){.tb-modal{align-items:center}}
/* Framed: pin the popup to the TOP of the visible band, so its headline is the first thing seen (2026-10-20, Sheridan). */
html[data-atb-framed] .tb-modal{align-items:flex-start}
.tb-sheet{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;border-radius:var(--tb-radius);padding:24px 20px 20px;background:var(--tb-sheet-bg);color:var(--tb-ink);border:1px solid var(--tb-line);box-shadow:0 30px 80px rgba(0,0,0,.45);animation:tb-in .3s ease}
.tb-sheet h2{margin:0 0 6px;font-family:var(--tb-font-head);font-weight:var(--tb-head-weight);font-size:1.6rem;line-height:1.12;color:var(--tb-name-ink)}
.tb-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--tb-line);background:transparent;cursor:pointer;color:var(--tb-ink-soft);font-size:20px;line-height:1}
.tb-sheet-prog{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--tb-chip-bg);border:1px solid var(--tb-chip-line);font-size:.85rem;margin-bottom:12px}
.tb-sheet-prog img{width:24px;height:24px;border-radius:50%;object-fit:contain;background:#fff}
/* "No thanks, just take me to <Program>" under the popup's email box (2026-10-21). */
.tb-gate-skip{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--tb-line);text-align:center}
.tb-gate-skip[hidden]{display:none}
.tb-gate-skip .tb-link{display:inline-block;padding:6px 4px;line-height:1.35}
.tb-finish-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.tb-finish-list .tb-btn{width:100%}

/* ---------- footer ---------- */
.tb-foot{margin-top:18px;text-align:center;font-size:.78rem;line-height:1.55;color:var(--tb-muted)}
/* Framed: some exchanges clip the bottom of their frame (topdogsrotator hides ~80px), which
   hid the earnings disclosure and Terms/Privacy. Room at the end keeps them reachable. */
html.atb-framed .tb-foot{padding-bottom:110px}
.tb-foot p{margin:0 0 8px}
.tb-foot a{color:var(--tb-muted)}
.tb-foot nav{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}

/* desktop: same column, a touch wider and more air */
@media (min-width:900px){.tb-wrap{max-width:640px;padding-top:40px}.tb-col{gap:22px}}

@media (prefers-reduced-motion:reduce){
  .tb *,.tb *::before,.tb *::after{animation:none!important;transition:none!important}
  .tb-dust,.tb-blob{display:none}
}
.tb[data-motion="0"] .tb-dust,.tb[data-motion="0"] .tb-blob{display:none}
.tb[data-motion="0"] *{animation:none!important}

/* ---------- utilities ---------- */
.tb [hidden]{display:none!important}

/* ================= GOLD — gilded luxury ================= */
.tb[data-theme="gold"] .tb-name{background:var(--tb-foil);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.tb[data-theme="gold"] .tb-photo{padding:4px}
.tb[data-theme="gold"] .tb-card{border-color:var(--tb-line)}
.tb[data-theme="gold"] .tb-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,236,190,.07),transparent 40%)}
.tb[data-theme="gold"][data-mode="light"] .tb-card::before{display:none}
.tb[data-theme="gold"] .tb-prog-title{font-family:var(--tb-font-body);letter-spacing:.005em}
.tb[data-theme="gold"][data-btn="glass"] .tb-prog-btn,.tb[data-theme="gold"][data-btn="outline"] .tb-prog-btn{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tb[data-theme="gold"][data-btn="glass"] .tb-prog-icon,.tb[data-theme="gold"][data-btn="outline"] .tb-prog-icon{border:1px solid var(--tb-chip-line)}
.tb[data-theme="gold"] .tb-strip b{font-family:var(--tb-font-head);font-size:.95rem}

/* ================= FRESH — light and colourful ================= */
.tb[data-theme="fresh"] .tb-name{letter-spacing:var(--tb-head-track)}
.tb[data-theme="fresh"] .tb-photo{padding:5px}
.tb[data-theme="fresh"] .tb-chips li::before{background:var(--tb-accent)}
.tb[data-theme="fresh"] .tb-chips li:nth-child(2)::before{background:#f59e0b}
.tb[data-theme="fresh"] .tb-chips li:nth-child(3)::before{background:#0ea5e9}
/* Shine / Solid: every program wears its own colour, white text (palette is contrast-checked). */
.tb[data-theme="fresh"][data-btn="sheen"] .tb-prog-btn,.tb[data-theme="fresh"][data-btn="solid"] .tb-prog-btn{background:linear-gradient(135deg,var(--pc) 0%,color-mix(in srgb,var(--pc) 80%,#000) 100%);color:#fff;border-color:transparent;box-shadow:0 16px 30px -18px var(--pc)}
.tb[data-theme="fresh"][data-btn="solid"] .tb-prog-btn{background:var(--pc)}
.tb[data-theme="fresh"][data-btn="sheen"] .tb-prog-icon,.tb[data-theme="fresh"][data-btn="solid"] .tb-prog-icon{background:rgba(255,255,255,.95)}
.tb[data-theme="fresh"][data-btn="sheen"] .tb-prog-icon svg,.tb[data-theme="fresh"][data-btn="solid"] .tb-prog-icon svg{color:var(--pc)}
.tb[data-theme="fresh"][data-btn="sheen"] .tb-tag,.tb[data-theme="fresh"][data-btn="solid"] .tb-tag,
.tb[data-theme="fresh"][data-btn="sheen"] .tb-prog-end,.tb[data-theme="fresh"][data-btn="solid"] .tb-prog-end{background:rgba(255,255,255,.2);color:#fff}
.tb[data-theme="fresh"][data-btn="sheen"] .tb-prog-why,.tb[data-theme="fresh"][data-btn="solid"] .tb-prog-why{opacity:.92}
/* Glass / Outline: light card, the colour moves to the icon tile and the edge. */
.tb[data-theme="fresh"][data-btn="glass"] .tb-prog-icon{background:var(--pc)}
.tb[data-theme="fresh"][data-btn="glass"] .tb-prog-icon svg{color:#fff}
.tb[data-theme="fresh"][data-btn="glass"] .tb-tag,.tb[data-theme="fresh"][data-btn="outline"] .tb-tag{background:color-mix(in srgb,var(--pc) 12%,#fff);color:var(--pc)}
.tb[data-theme="fresh"][data-mode="dark"][data-btn="glass"] .tb-tag,.tb[data-theme="fresh"][data-mode="dark"][data-btn="outline"] .tb-tag{background:rgba(255,255,255,.12);color:#fff}
.tb[data-theme="fresh"][data-btn="outline"] .tb-prog-btn{background:transparent;border:2px solid var(--pc)}
.tb[data-theme="fresh"][data-btn="outline"] .tb-prog-icon{background:color-mix(in srgb,var(--pc) 12%,#fff)}
.tb[data-theme="fresh"][data-btn="outline"] .tb-prog-icon svg{color:var(--pc)}
.tb[data-theme="fresh"] .tb-prog-end{color:inherit}
/* Joined rows calm down in every style. */
.tb .tb-prog.is-joined .tb-prog-btn{background:var(--tb-pbtn-done-bg)!important;color:var(--tb-pbtn-done-ink)!important;border:1px solid var(--tb-line)!important;box-shadow:none!important}
.tb .tb-prog.is-joined .tb-prog-btn::after{display:none}
.tb .tb-prog.is-joined .tb-tag{background:var(--tb-chip-bg)!important;color:var(--tb-chip-ink)!important}
.tb .tb-prog.is-joined .tb-prog-end{background:var(--tb-ok)!important;color:#fff!important}
.tb[data-theme="fresh"] .tb-prog.is-joined .tb-prog-icon{background:#fff!important}
.tb[data-theme="fresh"] .tb-prog.is-joined .tb-prog-icon svg{color:var(--pc)!important}
.tb-ticker span[data-tick]{transition:opacity .25s ease}
.tb-prog-icon:has(img){background:#fff!important}

/* Phones: the photo, name, promise and the "Save my spot" button all fit on the
   first screen (CLAUDE.md lander rule 7) — measured on a 393x659 iPhone view. */
@media (max-width:480px){
  .tb-wrap{padding-top:12px}
  .tb-col{gap:14px}
  .tb[data-shape="circle"]{--tb-photo-w:112px;--tb-photo-h:112px}
  .tb[data-shape="rounded"]{--tb-photo-w:120px;--tb-photo-h:120px}
  .tb[data-shape="portrait"]{--tb-photo-w:118px;--tb-photo-h:146px}
  .tb-photo .tb-initial{font-size:2.6rem}
  .tb-hero{gap:6px}
  .tb-name{font-size:2.25rem;margin-top:2px}
  .tb-promise{font-size:.97rem;line-height:1.42}
  .tb-chips li{font-size:.76rem;padding:3px 9px}
  .tb-card{padding:15px}
  .tb-card h2{font-size:1.28rem}
  .tb-step1 .tb-lead{font-size:.88rem;line-height:1.4;margin:0 0 10px}
  .tb .tb-btn{min-height:48px}
  .tb-input{height:48px}
}
/* Rotation: whose link this program uses (0466) */
.tb .tb-under{display:flex;align-items:center;gap:10px;margin:8px 2px 2px;font-size:.84rem;line-height:1.4;color:var(--tb-muted)}
.tb .tb-under img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--tb-line,rgba(127,127,127,.3))}
.tb .tb-under b{color:var(--tb-ink)}
.tb-finish-list [data-rot-ask][disabled]{opacity:.7;cursor:default}
.tb .tb-prog.is-joined .tb-under{display:none}
/* Strip labels stay on one line on phones (Sheridan 2026-10-18) */
.tb .tb-short{display:none}
.tb .tb-strip{container-type:inline-size}
.tb .tb-strip li{white-space:nowrap}
@container (max-width:680px){.tb .tb-strip .tb-long{display:none}.tb .tb-strip .tb-short{display:inline}}
/* Wide-look wrappers are invisible to the column looks */
.tb-top{display:contents}
.tb-who{display:none}
@container (max-width:340px){.tb .tb-strip li{white-space:normal}}
/* What every member gets, free (2026-10-18) */
.tb-yours h2{margin:0 0 6px}
.tb .tb-yours-lead{margin:0 0 18px}
.tb-yours-list{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;text-align:left}
.tb-yours-list li{display:flex;gap:12px;align-items:flex-start;min-width:0}
.tb-yours-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--tb-accent-soft,color-mix(in srgb,var(--tb-accent) 14%,transparent));color:var(--tb-accent-text)}
.tb-yours-ic svg{width:22px;height:22px}
.tb-yours-list li>div{min-width:0}
.tb-yours-list b{display:block;font-weight:700;line-height:1.3}
.tb-yours-list li>div>span{display:block;margin-top:2px;font-size:.92rem;line-height:1.45;color:var(--tb-muted)}
/* Message box (2026-10-18) */
.tb .tb-textarea{display:block;width:100%;height:auto;min-height:92px;padding-top:12px;padding-bottom:12px;margin:0 0 10px;resize:vertical;line-height:1.45}
.tb-msgform .tb-form{margin:0}
.tb [data-msg-to]{overflow-wrap:anywhere}

/* One line on phones (Sheridan 2026-10-18): the opt-in and the terms line under
   Save my spot shrink to fit instead of wrapping; teambuild.js sets the size
   (fitOneLine). Below the smallest readable size they wrap as before. */
.tb label > .tb-fit1{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden}
.tb .tb-meta.tb-fit1{white-space:nowrap;overflow:hidden;text-overflow:clip}
.tb .tb-fit1.is-wrap{white-space:normal}
.tb .tb-signup label.tb-small input,.tb .tb-msgform label.tb-small input{margin:0!important;flex:none}
/* Tag + gift pills stay pills (Sheridan 2026-10-18: the gift pill wrapped to three lines
   inside a round shape). One line, ellipsis if a card is ever too narrow. */
.tb .tb-tag,.tb .tb-gift{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:1.35;vertical-align:middle}

/* ---------- traffic-exchange frames: sign-up box on the first screen (2026-10-19) ----------
   Browser lab, every exchange frame shape: in short slots (1250x500, 1000x250) and narrow
   ones (350x1000) the full hero (148px photo, intro, chips) pushed the email box below the
   frame, so a surfer saw no way to sign up. Sheridan's frame rule: hero higher, the CTA
   in the frame without scrolling, no duplicate button. Only when framed (html.atb-framed,
   set by atb_frame_fit_head) and only when the frame is short or narrow; media queries
   follow the frame, so an exchange that resizes its slot later still gets the right one. */
@media (max-height:600px),(max-width:520px){
  html.atb-framed .tb .tb-wrap{padding-top:10px}
  html.atb-framed .tb .tb-col{gap:12px}
  html.atb-framed .tb .tb-top{padding:12px 0 14px}
  html.atb-framed .tb .tb-hero{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 12px;padding-top:0}
  html.atb-framed .tb .tb-photo{--tb-photo-w:56px;--tb-photo-h:56px;--tbw-photo-w:64px;--tbw-photo-h:64px;padding:2px}
  html.atb-framed .tb[data-shape="portrait"] .tb-photo{--tb-photo-w:52px;--tb-photo-h:68px;--tbw-photo-w:56px;--tbw-photo-h:74px}
  html.atb-framed .tb .tb-photo .tb-initial{font-size:1.5rem}
  html.atb-framed .tb .tb-name{font-size:clamp(1.6rem,5vw,2.1rem);margin:0;align-self:center}
  html.atb-framed .tb .tb-promise{flex-basis:100%;margin:0;font-size:.92rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html.atb-framed .tb .tb-chips{display:none}
}
@media (max-height:560px){
  html.atb-framed .tb .tb-promise,
  html.atb-framed .tb .tb-step1 .tb-lead{display:none}
  html.atb-framed .tb .tb-step1{padding:14px 16px}
  html.atb-framed .tb .tb-step1 h2{font-size:1.2rem;line-height:1.2;margin:0 0 10px}
}
@media (max-height:360px){
  html.atb-framed .tb .tb-wrap{padding-top:6px}
  html.atb-framed .tb .tb-top{padding:6px 0 8px}
  html.atb-framed .tb .tb-photo{--tb-photo-w:40px;--tb-photo-h:40px;--tbw-photo-w:44px;--tbw-photo-h:44px}
  html.atb-framed .tb .tb-name{font-size:1.35rem}
  html.atb-framed .tb .tb-step1{padding:10px 14px}
}

/* Clickable "how it works" steps (2026-10-21): each step scrolls to its part
   of the page (teambuild.js goStep). Looks the same at rest; shows it is
   tappable on hover/focus, and the target flashes briefly on arrival. */
.tb-strip [data-go]{cursor:pointer;border-radius:12px;transition:background .15s ease;-webkit-tap-highlight-color:transparent}
.tb-strip [data-go]:hover{background:color-mix(in srgb,var(--tb-ink) 6%,transparent)}
.tb-strip [data-go]:active{background:color-mix(in srgb,var(--tb-ink) 10%,transparent)}
.tb-strip [data-go]:focus-visible{outline:2px solid var(--tb-btn-bg);outline-offset:2px}
#tb-step1,#tb-programs,#tb-yours,.tb-prog{scroll-margin-top:16px}
@keyframes tbFlash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tb-btn-bg) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.tb-flash{animation:tbFlash 1.4s ease-out 1}
@media (prefers-reduced-motion:reduce){.tb-flash{animation:none;outline:2px solid var(--tb-btn-bg)}}

/* Share + QR button (2026-10-27): quiet, under the hero chips; opens includes/share_modal.php. */
.tb-share{display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:7px 14px;min-height:36px;border:1px solid var(--tb-line,rgba(127,127,127,.35));border-radius:999px;background:transparent;color:var(--tb-muted,inherit);font:600 13px/1 inherit;cursor:pointer}
.tb-share:hover{color:var(--tb-ink,inherit);border-color:currentColor}
.tb-share[hidden]{display:none}

/* ---------- wide, short screens: side by side (2026-10-27) ----------
   Sheridan, from a session recording of /teambuild/gold in a wide, short window:
   "landers don't look like optimized for screen size" — one narrow centred column
   left most of the width empty and pushed the email box to the bottom edge.
   On wide screens that are short, the leader sits left and the save-your-spot
   card right, so both are on the first screen. Gold and Fresh only; Wide has
   its own two-column layout (teambuild-wide.css). */
@media (min-width:860px) and (max-height:720px){
  .tb:not([data-theme="wide"]) .tb-wrap{max-width:min(1040px,94vw);padding-top:18px}
  .tb:not([data-theme="wide"]) .tb-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:16px 36px;align-items:center;padding:14px 0 18px}
  .tb:not([data-theme="wide"]) .tb-top>.tb-hero{padding-top:0}
  .tb:not([data-theme="wide"]) .tb-top>.tb-step1{margin:0}
  .tb:not([data-theme="wide"]) .tb-photo{--tb-photo-w:112px;--tb-photo-h:112px}
  .tb[data-shape="portrait"]:not([data-theme="wide"]) .tb-photo{--tb-photo-w:96px;--tb-photo-h:126px}
  /* framed short-frame rules above shrink the hero further; keep it in its column */
  html.atb-framed .tb:not([data-theme="wide"]) .tb-hero{flex-direction:column;flex-wrap:nowrap}
}