/*
   ÷   T O P   T H R E E   W E B   D E S I G N
           topthreewebdesign.com

       Site      Kerwin's Trading Floor · XAU/USD education
       Built by  Dennis Aguilar
       Year      2026

       Hand-coded static HTML. No frameworks, no page builders,
       no tracking bloat.

       Building the web for local businesses, one at a time.
*/

/* ---------- TOKENS ----------------------------------------------------
   The three brand colors are sampled from Kerwin's own hi-res KTF logo
   (ktf-mark.png, 505x409): bull #A7E754 · bear #F04B4F · cream #FED5A9
   To move the site to a light background, change --ink* only.
   -------------------------------------------------------------------- */
:root{
  /* Kerwin's live site is pure black end to end. These are the surfaces,
     stepped just enough to separate sections without leaving black. */
  --ink:      #000000;   /* header, hero, footer, CTA bands */
  --ink-2:    #0C0C0D;   /* panels + cards */
  --ink-3:    #1A1B1D;   /* hover states */
  --paper:    #000000;   /* body surface */
  --paper-2:  #08080A;   /* alternating section */
  --surface:  #121214;   /* raised: cards on black */

  /* THE PAPER SURFACE — used only where the reader is deciding, not watching.
     Warm, pulled from the cream circle in Kerwin's own logo. */
  --cream:    #F7F1E6;
  --cream-2:  #ECE2D0;
  --cream-3:  #FFFFFF;
  --on-cream: #17130F;
  --on-cream-2: #5B5348;
  --line-cream: rgba(23,19,15,.16);
  --bull:     #A7E754;
  --bear:     #F04B4F;
  --tan:      #FED5A9;

  --on-ink:   #F2F5F8;
  --on-ink-2: #9AA3AC;
  --text:     #F2F5F8;
  --muted:    #9AA3AC;
  --line:     rgba(242,245,248,.14);
  --line-ink: rgba(242,245,248,.14);

  --wrap: 1120px;
  --r: 4px;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --disp: "Archivo", var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--disp); font-weight:700; letter-spacing:-.022em; line-height:1.05; margin:0}
p{margin:0 0 1.05em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}

.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin:0 0 14px;
}
.eyebrow{color:var(--bull)}
.sec .lede, .on-ink .lede{color:var(--muted)}

/* ---------- HEADER ---------- */
.hdr{
  position:sticky; top:0; z-index:60; background:var(--ink);
  border-bottom:1px solid var(--line-ink);
}
.hdr .wrap{display:flex; align-items:center; gap:18px; min-height:64px}
.brand{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  color:var(--on-ink); font-family:var(--disp); font-weight:800;
  letter-spacing:-.02em; font-size:16px; margin-right:auto;
}
.brand .mark{width:38px; height:auto; flex:0 0 38px; display:block}
.nav{display:flex; align-items:center; gap:4px}
.nav a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-ink-2); text-decoration:none;
  padding:9px 11px; border-radius:var(--r); transition:color .15s,background .15s;
}
.nav a:hover,.nav a:focus-visible{color:var(--on-ink); background:var(--ink-3)}
.nav a[aria-current="page"]{color:var(--bull)}
.nav .btn-sm{
  background:var(--bull); color:var(--ink); font-weight:600;
  margin-left:8px; padding:9px 14px;
}
.nav .btn-sm:hover,.nav .btn-sm:focus-visible{background:#B8EE6C; color:var(--ink)}
.social{display:flex; gap:2px; margin-left:6px}
.social a{
  width:32px; height:32px; display:grid; place-items:center; border-radius:var(--r);
  color:var(--on-ink-2); transition:color .15s,background .15s;
}
.social a:hover,.social a:focus-visible{color:var(--on-ink); background:var(--ink-3)}
.social svg{width:15px; height:15px; fill:currentColor}

/* no-JS mobile menu */
.menu-tgl{position:absolute; opacity:0; pointer-events:none}
.menu-btn{display:none}
@media (max-width:860px){
  .menu-btn{
    display:grid; place-items:center; width:38px; height:38px; cursor:pointer;
    border:1px solid var(--line-ink); border-radius:var(--r); color:var(--on-ink);
  }
  .menu-btn svg{width:18px;height:18px;fill:currentColor}
  .nav{
    display:none; position:absolute; top:64px; left:0; right:0;
    background:var(--ink); border-bottom:1px solid var(--line-ink);
    flex-direction:column; align-items:stretch; padding:8px 14px 16px; gap:2px;
  }
  .nav a{padding:13px 12px; font-size:14px}
  .nav .btn-sm{margin:8px 0 0; text-align:center}
  .menu-tgl:checked ~ .wrap .nav{display:flex}
  .social{margin:10px 0 0}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:13.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  padding:15px 24px; border-radius:var(--r); border:1px solid transparent;
  transition:transform .12s, background .15s, border-color .15s;
}
.btn:active{transform:translateY(1px)}
.btn--bull{background:var(--bull); color:var(--ink)}
.btn--bull:hover,.btn--bull:focus-visible{background:#B8EE6C}
.btn--ghost{border-color:var(--line-ink); color:var(--on-ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--bull); color:var(--bull)}
.btn--ink{background:var(--ink); color:var(--on-ink)}
.btn--ink:hover,.btn--ink:focus-visible{background:var(--ink-2)}
:focus-visible{outline:2px solid var(--bull); outline-offset:3px}

/* ---------- HERO ---------- */
.hero{
  background:var(--ink); color:var(--on-ink);
  padding:76px 0 68px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(to right, rgba(242,245,248,.05) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(to bottom, rgba(242,245,248,.05) 0 1px, transparent 1px 84px);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:center}
.hero-mark{position:relative; display:grid; place-items:center}
.hero-mark::before{
  content:""; position:absolute; width:86%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(254,213,169,.16) 0%, transparent 68%);
}
.hero-mark img{position:relative; width:100%; max-width:360px}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:26px}
  .hero-mark{order:-1; justify-items:start}
  .hero-mark img{max-width:200px}
  .hero-mark::before{display:none}
}
.hero .eyebrow{color:var(--bull)}
.hero h1{
  font-size:clamp(2.5rem,7.2vw,4.6rem); color:var(--on-ink);
  max-width:16ch; margin:0 0 20px;
}
.hero h1 em{font-style:normal; color:var(--bull)}
.hero .lede{
  font-size:clamp(1.02rem,2vw,1.2rem); color:var(--on-ink-2);
  max-width:56ch; margin:0 0 30px;
}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- SESSION CLOCK (signature) ---------- */
.clock{
  margin:38px 0 0; border:1px solid var(--line-ink); border-radius:var(--r);
  background:var(--ink-2); padding:20px 22px; max-width:640px;
}
.clock-top{
  display:flex; align-items:center; gap:9px; margin-bottom:12px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--on-ink-2);
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--on-ink-2); flex:0 0 8px}
.clock[data-state="open"] .dot{background:var(--bull); box-shadow:0 0 0 4px rgba(167,231,84,.16)}
.clock[data-state="open"] .clock-top{color:var(--bull)}
.clock-time{
  font-family:var(--mono); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(2.1rem,6.6vw,3.1rem); color:var(--on-ink);
  line-height:1; font-variant-numeric:tabular-nums; margin:0 0 10px;
}
.clock[data-state="open"] .clock-time{color:var(--bull)}
.clock-sub{
  font-family:var(--mono); font-size:12px; color:var(--on-ink-2);
  letter-spacing:.03em; margin:0;
}

/* ---------- SECTIONS ---------- */
.sec{padding:74px 0; border-top:1px solid rgba(242,245,248,.07)}
.hero + .sec{border-top:0}
.sec--tight{padding:54px 0}
.sec--paper2{background:var(--paper-2)}
.on-ink{background:var(--ink); color:var(--on-ink)}
.on-ink h2,.on-ink h3{color:var(--on-ink)}
.on-ink p{color:var(--on-ink-2)}
.sec h2{font-size:clamp(1.85rem,4.1vw,2.7rem); max-width:20ch; margin:0 0 16px}
.sec .lede{font-size:1.06rem; color:var(--muted); max-width:62ch}
.on-ink .lede{color:var(--on-ink-2)}

/* ---------- PAPER SECTIONS ----------------------------------------
   Black is the floor: hero, session timeline, the room, membership.
   Cream is the paper: his story, the fit screen, the FAQ, the form.
   ------------------------------------------------------------------ */
.paper{background:var(--cream); color:var(--on-cream); border-top:0}
.paper + .paper{border-top:1px solid var(--line-cream)}
.paper h2,.paper h3,.paper b,.paper blockquote{color:var(--on-cream)}
.paper p,.paper span,.paper li{color:var(--on-cream-2)}
.paper .lede,.sec.paper .lede{color:var(--on-cream-2)}
.paper .eyebrow{color:#3F7A16}
.paper .tl,.paper .tl li,.paper .story,.paper .story-row{border-color:var(--line-cream)}
.paper .tl time,.paper .story-row h3,.paper .tl b{color:var(--on-cream)}
.paper .tl span,.paper .story-row p{color:var(--on-cream-2)}
.paper .story-row .yr{color:#3F7A16}
.paper .story-row .yr.is-bear{color:#B32C30}
.paper .fit-col,.paper .form{background:var(--cream-3); border-color:var(--line-cream)}
.paper .fit-col h3{color:#3F7A16}
.paper .fit-col--no h3{color:#B32C30}
.paper .fit-col li{color:var(--on-cream)}
.paper .fit-col li::before{color:#3F7A16}
.paper .fit-col--no li::before{color:#B32C30}
.paper .field label{color:var(--on-cream-2)}
.paper .field .req{color:#B32C30}
.paper .field input,.paper .field textarea,.paper .field select{
  background:var(--cream); border-color:var(--line-cream); color:var(--on-cream);
}
.paper .field input:focus,.paper .field textarea:focus,.paper .field select:focus{
  background:var(--cream-3); border-color:var(--on-cream);
}
.paper .field select option{background:var(--cream-3); color:var(--on-cream)}
.paper .aside-box{background:var(--cream-2); border-color:var(--line-cream)}
.paper .aside-box h3{color:var(--on-cream)}
.paper .steps li::before{color:var(--cream); background:var(--on-cream)}
.paper .faq,.paper .faq details{border-color:var(--line-cream)}
.paper .faq summary{color:var(--on-cream)}
.paper .faq summary::after{color:#3F7A16}
.paper .quote-fig img{background:var(--cream-2); border-color:var(--line-cream)}
.paper .quote cite{color:var(--on-cream-2)}
.paper a{color:var(--on-cream)}
.paper .btn--ink{background:var(--on-cream); color:var(--cream)}
.paper .btn--ink:hover,.paper .btn--ink:focus-visible{background:#332B22}
.paper :focus-visible{outline-color:#3F7A16}

/* ---------- SESSION TIMELINE ---------- */
.tl{list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--line)}
.tl li{
  display:grid; grid-template-columns:110px 1fr; gap:22px;
  padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.tl time{
  font-family:var(--mono); font-size:14px; font-weight:600;
  color:var(--text); letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.tl b{display:block; font-family:var(--disp); font-size:1.08rem; font-weight:700; margin-bottom:3px}
.tl span{color:var(--muted); font-size:.97rem}
@media (max-width:620px){
  .tl li{grid-template-columns:1fr; gap:5px}
}

/* ---------- THE ROOM (screenshot) ---------- */
.shot{margin:34px 0 0}
.shot img{
  width:100%; border-radius:var(--r); border:1px solid var(--line-ink);
  background:var(--ink-2);
}
.shot figcaption{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  color:var(--on-ink-2); margin-top:12px;
}

/* ---------- CARD GRID ---------- */
.grid{display:grid; gap:16px; margin-top:34px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:940px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.grid--4,.grid--2{grid-template-columns:1fr}}
.card{
  background:var(--ink-2); border:1px solid rgba(242,245,248,.18);
  border-radius:var(--r); padding:24px 22px;
}
.card .k{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bull); display:block; margin-bottom:12px;
}
.card h3{font-size:1.14rem; margin:0 0 8px; color:var(--on-ink)}
.card p{margin:0; font-size:.95rem; color:var(--on-ink-2)}

/* ---------- FIT / NOT-FIT ---------- */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px}
@media (max-width:760px){.fit{grid-template-columns:1fr}}
.fit-col{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; border-top:3px solid var(--bull);
}
.fit-col--no{border-top-color:var(--bear)}
.fit-col h3{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bull); margin:0 0 16px;
}
.fit-col--no h3{color:var(--bear)}
.fit-col ul{list-style:none; margin:0; padding:0}
.fit-col li{
  padding:0 0 13px 26px; position:relative; font-size:.98rem; color:var(--text);
}
.fit-col li::before{
  content:"↑"; position:absolute; left:0; top:0; color:var(--bull);
  font-family:var(--mono); font-weight:700;
}
.fit-col--no li::before{content:"↓"; color:var(--bear)}

/* ---------- QUOTE ---------- */
.quote{
  display:grid; grid-template-columns:200px 1fr; gap:36px; align-items:center;
  margin-top:6px;
}
@media (max-width:760px){.quote{grid-template-columns:1fr; gap:24px}}
.quote-fig{margin:0}
.quote-fig img{
  border-radius:var(--r); background:var(--ink-2);
  border:1px solid var(--line); padding:10px 10px 0;
}
.quote blockquote{
  margin:0; font-family:var(--disp); font-weight:600;
  font-size:clamp(1.2rem,2.7vw,1.6rem); line-height:1.34; letter-spacing:-.015em;
}
.quote cite{
  display:block; margin-top:16px; font-style:normal; font-family:var(--mono);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* ---------- STORY (about) ---------- */
.story{margin-top:34px; border-top:1px solid var(--line)}
.story-row{
  display:grid; grid-template-columns:120px 1fr; gap:28px;
  padding:30px 0; border-bottom:1px solid var(--line);
}
@media (max-width:620px){.story-row{grid-template-columns:1fr; gap:8px}}
.story-row .yr{
  font-family:var(--mono); font-weight:600; font-size:1.6rem;
  color:var(--bull); line-height:1; letter-spacing:-.02em;
}
.story-row .yr.is-bear{color:var(--bear)}
.story-row h3{font-size:1.24rem; margin:0 0 8px}
.story-row p{margin:0; color:var(--muted)}
.story-row p + p{margin-top:.8em}

/* ---------- FORM ---------- */
.form-wrap{
  display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start;
}
@media (max-width:880px){.form-wrap{grid-template-columns:1fr; gap:32px}}
.form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px;
}
.field{margin-bottom:18px}
.field label{
  display:block; font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.field .req{color:var(--bear)}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--text);
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 14px; transition:border-color .15s, background .15s;
}
.field textarea{min-height:132px; resize:vertical}
.field select option{background:var(--ink-2); color:var(--text)}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--bull); background:var(--ink-3); outline:none;
}
.field .help{font-size:.86rem; color:var(--muted); margin:7px 0 0}
.form .btn{width:100%; justify-content:center; margin-top:6px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.aside-box{
  border:1px solid var(--line); border-radius:var(--r); padding:24px 22px;
  background:var(--ink-2);
}
.aside-box + .aside-box{margin-top:16px}
.aside-box h3{font-size:1.08rem; margin:0 0 10px}
.aside-box p{margin:0 0 .8em; font-size:.95rem; color:var(--muted)}
.aside-box p:last-child{margin-bottom:0}
.steps{list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{
  counter-increment:s; position:relative; padding:0 0 14px 34px;
  font-size:.95rem; color:var(--muted);
}
.steps li:last-child{padding-bottom:0}
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--bull);
  background:var(--ink); border-radius:var(--r); padding:2px 6px;
}

/* ---------- FAQ ---------- */
.faq{margin-top:30px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:19px 40px 19px 0; position:relative;
  font-family:var(--disp); font-weight:600; font-size:1.05rem; letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:17px;
  font-family:var(--mono); font-size:1.28rem; color:var(--bull); line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 0 20px; color:var(--muted); max-width:70ch}
.faq__a p{margin:0 0 .8em}
.faq__a p:last-child{margin-bottom:0}

/* ---------- CTA BAND ---------- */
.band{
  background:var(--ink); color:var(--on-ink); padding:66px 0; text-align:center;
  border-top:1px solid rgba(242,245,248,.07);
}
.band h2{font-size:clamp(1.8rem,4.4vw,2.8rem); color:var(--on-ink); margin:0 auto 14px; max-width:20ch}
.band p{color:var(--on-ink-2); max-width:52ch; margin:0 auto 26px}
.band .btn{margin:0 6px 8px}

/* ---------- RISK + FOOTER ---------- */
.risk{
  background:var(--cream); color:var(--on-cream-2); padding:34px 0;
  border-top:1px solid var(--line-cream);
}
.risk p{
  margin:0 auto; max-width:80ch; font-size:.86rem; line-height:1.65; text-align:center;
}
.risk b{color:var(--on-cream); font-weight:600}
.ftr{background:var(--ink); color:var(--on-ink-2); padding:40px 0 34px; border-top:1px solid var(--line-ink)}
.ftr-top{
  display:flex; flex-wrap:wrap; gap:20px; align-items:center;
  padding-bottom:24px; border-bottom:1px solid var(--line-ink);
}
.ftr-nav{display:flex; flex-wrap:wrap; gap:6px; margin-left:auto}
.ftr-nav a{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-ink-2); text-decoration:none; padding:6px 10px; border-radius:var(--r);
}
.ftr-nav a:hover,.ftr-nav a:focus-visible{color:var(--bull)}
.ftr-btm{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  padding-top:22px; font-size:.84rem;
}
.ftr-btm a{color:var(--on-ink-2)}
.ftr-btm a:hover{color:var(--bull)}
/* Footer credit — the Top Three reverse lockup. Black footer only;
   the mark is white + orange with no dark outline, so it must never be
   placed on a .paper / cream surface. */
.credit{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; opacity:.85; transition:opacity .15s;
}
.credit:hover,.credit:focus-visible{opacity:1}
.credit-k{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-ink-2); white-space:nowrap;
}
.credit img{width:126px; height:auto}
@media (max-width:520px){
  .credit img{width:110px}
}

/* Mobile footer: stack and centre. On a narrow screen the left-aligned
   lockup with the nav pushed right reads as two loose columns; centred,
   the whole block reads as one closing mark. */
@media (max-width:640px){
  .ftr-top{
    flex-direction:column; align-items:center; text-align:center; gap:18px;
  }
  .ftr-nav{margin-left:0; justify-content:center}
  .ftr-btm{
    flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:14px;
  }
  .credit{justify-content:center}
}

/* ---------- THANK YOU ---------- */
.ty{
  min-height:62vh; display:grid; place-items:center; text-align:center;
  background:var(--ink); color:var(--on-ink); padding:80px 0;
}
.ty h1{font-size:clamp(2rem,5.4vw,3.2rem); color:var(--on-ink); margin:0 0 16px}
.ty p{color:var(--on-ink-2); max-width:52ch; margin:0 auto 26px}

/* ---------- THE TRADE BAR --------------------------------------------
   Modeled on the MT4/MT5 one-click ticket: small label above, big value
   below, hard vertical splits, no rounding.
   The left panel is live: red while the floor is shut, green while it's
   open — the bull/bear language used for something that's actually true.

   MOBILE  : the ticket spans the full width, edge to edge.
   DESKTOP : the ticket docks right inside a full-width terminal strip,
             with the session hours filling the space on the left.
   -------------------------------------------------------------------- */
.tbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--ink);
  border-top:1px solid rgba(242,245,248,.14);
  box-shadow:0 -10px 26px rgba(0,0,0,.5);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.tbar-ticket{display:grid}
.tbar-cell{
  display:flex; flex-direction:column; justify-content:center;
  min-height:58px; padding:8px 12px; text-decoration:none; overflow:hidden;
}
.tbar-k{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; opacity:.88;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tbar-v{
  font-family:var(--mono); font-size:15px; font-weight:600;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* left — session state */
.tbar-state{background:var(--bear); color:#12100F}
.tbar[data-state="open"] .tbar-state{background:var(--bull)}

/* middle — the mark, standing in for the lot-size cell */
.tbar-mid{
  align-items:center; background:#000; color:var(--on-ink-2);
  gap:3px; padding:8px 6px;
  border-left:1px solid rgba(0,0,0,.55); border-right:1px solid rgba(0,0,0,.55);
}
.tbar-mid img{width:26px; height:auto}
.tbar-mid span{
  font-family:var(--mono); font-size:8.5px; font-weight:500;
  letter-spacing:.08em; white-space:nowrap;
}

/* right — the action */
.tbar-cta{background:var(--bull); color:#0A0F04; transition:background .15s}
.tbar-cta .tbar-v{font-size:13.5px; letter-spacing:0; font-family:var(--sans); font-weight:600}
.tbar-cta:hover{background:#B8EE6C}
.tbar-cta:active{background:#93D044}
.tbar-cta:focus-visible{outline:3px solid var(--cream-3); outline-offset:-3px}

/* the session hours — desktop only, fills the strip's empty left side */
.tbar-note{
  display:none; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-ink-2);
  white-space:nowrap;
}

/* only pages that carry the bar reserve room for it */
body.has-tbar{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}

/* ---- MOBILE: full-bleed ticket ---- */
@media (max-width:860px){
  .tbar-ticket{grid-template-columns:1fr 74px 1.28fr}
}

/* ---- DESKTOP: terminal strip, ticket docked right ---- */
@media (min-width:861px){
  /* The ticket is centred in the viewport. The hours are taken OUT of the
     flow (absolute, left) so their width can't pull the ticket off centre. */
  .tbar{display:flex; align-items:stretch; justify-content:center}
  .tbar-ticket{grid-template-columns:212px 88px 266px; flex:0 0 auto}
  .tbar-cell{min-height:56px; padding:8px 16px}
  .tbar-k{font-size:10px}
  .tbar-v{font-size:16px}
  .tbar-cta .tbar-v{font-size:14px}
  .tbar-mid img{width:28px}
  .tbar-mid span{font-size:9px}
  body.has-tbar{padding-bottom:56px}
}

/* With the ticket centred, the hours would collide with it on a narrow
   laptop. Shortened (the full caption is already under the hero clock) and
   held back until the maths clears at 1100px. */
@media (min-width:1100px){
  .tbar-note{
    display:flex; align-items:center;
    position:absolute; left:26px; top:0; bottom:0;
  }
}

/* Small phones (iPhone SE and similar, 320px): the weekend countdown
   reaches "2d 16h 50m" and the CTA is two words long. Both need the
   extra room, so tighten the type and narrow the centre cell. */
@media (max-width:359px){
  .tbar-ticket{grid-template-columns:1fr 58px 1.34fr}
  .tbar-cell{padding:8px 9px}
  .tbar-k{font-size:9px; letter-spacing:.1em}
  .tbar-v{font-size:13px}
  .tbar-cta .tbar-v{font-size:12.5px}
  .tbar-mid img{width:21px}
  .tbar-mid span{font-size:8px}
}