/* TNL Performance: proposal page (LTG PEAK). Same black + yellow as the demo. Mobile first. */
:root{
  --bg:#0B0B0C; --surface:#151517; --surface-2:#1C1C1F;
  --ink:#F4F4F0; --ink-2:#A8A8A2; --ink-3:#8A8A85;
  --line:#2A2A2E; --accent:#FFD400; --on-accent:#0B0B0C;
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --body:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,5vw,40px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 clamp(1rem,.95rem + .25vw,1.125rem)/1.55 var(--body);
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.mono{ font-family:var(--mono); font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.wrap{ width:min(1080px,100%); margin-inline:auto; padding-inline:var(--gutter); }

.skip{ position:absolute; left:var(--gutter); top:8px; transform:translateY(-200%); background:var(--accent); color:var(--on-accent); padding:10px 14px; z-index:100; font-weight:700; }
.skip:focus{ transform:none; }

/* top bar */
.bar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px var(--gutter); background:rgb(11 11 12 / .88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar__brand{ display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; font:400 1.15rem/1 var(--display); letter-spacing:.04em; text-transform:uppercase; }
.bar__brand img{ width:36px; height:36px; }
.bar__tag{ font-size:.7rem; color:var(--ink-3); text-align:right; }

/* hero */
.hero{ position:relative; overflow:hidden; padding-block:clamp(48px,12vw,120px) clamp(48px,10vw,96px); isolation:isolate; }
.hero__mark{
  position:absolute; z-index:-1; right:-18%; top:-8%; width:min(95vw,640px); aspect-ratio:1;
  background:url("logo.png") center/contain no-repeat; opacity:.07; filter:grayscale(1) brightness(1.8);
  animation:turn 90s linear infinite;
}
@keyframes turn{ to{ transform:rotate(360deg); } }
.eyebrow{ margin:0 0 16px; font-size:.78rem; color:var(--accent); }
.hero__title{
  margin:0; font:400 clamp(2.5rem,10.5vw,6.6rem)/.94 var(--display); text-transform:uppercase; letter-spacing:.005em; text-wrap:balance;
}
.hl{ color:var(--accent); }
.lede{ max-width:34ch; margin:clamp(20px,4vw,32px) 0 0; font-size:clamp(1.15rem,1rem + .9vw,1.6rem); line-height:1.35; color:var(--ink); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,4vw,36px); }
.hero__price{ margin:24px 0 0; font-size:.85rem; color:var(--ink-2); }
.hero__price b{ color:var(--accent); font-size:1.15rem; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; text-decoration:none;
  font:500 .88rem/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; border:2px solid var(--accent);
  transition:transform .15s, background .2s, color .2s; text-align:center;
}
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ background:#FFE45C; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--accent); }
.btn--ghost:hover{ background:var(--accent); color:var(--on-accent); transform:translateY(-2px); }

/* sections */
.band{ padding-block:clamp(56px,10vw,112px); border-top:1px solid var(--line); }
.band--alt{ background:var(--surface); }
.h2{ margin:0 0 clamp(28px,5vw,48px); font:400 clamp(1.9rem,6vw,3.6rem)/1 var(--display); text-transform:uppercase; text-wrap:balance; max-width:20ch; }
.h2--xl{ font-size:clamp(2.2rem,8vw,5rem); max-width:16ch; }

/* why */
.why{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.why__item{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,4vw,40px); padding-block:clamp(22px,4vw,36px); border-top:1px solid var(--line); }
.why__item:last-child{ border-bottom:1px solid var(--line); }
.why__n{ font:400 clamp(2.4rem,8vw,4.4rem)/.9 var(--display); color:var(--accent); min-width:2ch; }
.why h3, .flow h3, .ups h3{ margin:0 0 8px; font:400 clamp(1.4rem,4vw,2rem)/1.05 var(--display); text-transform:uppercase; letter-spacing:.01em; }
.why p, .flow p, .ups p{ margin:0; color:var(--ink-2); max-width:58ch; }

/* flow */
.flow{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:none; }
.flow__step{ position:relative; padding:0 0 28px 56px; }
.flow__step::before{ content:""; position:absolute; left:19px; top:40px; bottom:0; width:2px; background:var(--line); }
.flow__step:last-child{ padding-bottom:0; }
.flow__step:last-child::before{ display:none; }
.flow__n{
  position:absolute; left:0; top:0; width:40px; height:40px; display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); font-size:1rem; letter-spacing:0;
}
.honest{ margin:clamp(28px,5vw,48px) 0 0; padding:18px 20px; max-width:72ch; border-left:4px solid var(--accent); background:var(--bg); color:var(--ink); }

/* price */
.price{ display:grid; gap:16px; }
.card{ padding:clamp(22px,4vw,36px); background:var(--surface); border:1px solid var(--line); }
.card--accent{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.card__label{ margin:0 0 8px; font-size:.78rem; }
.card--accent .card__label{ color:rgb(11 11 12 / .78); }
.card:not(.card--accent) .card__label{ color:var(--accent); }
.card__price{ margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.card__amt{ font:400 clamp(3.6rem,13vw,6.4rem)/.9 var(--display); }
.card__per{ font:500 .85rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.card__sub{ margin:10px 0 20px; font-weight:600; }
.card:not(.card--accent) .card__sub{ color:var(--ink-2); font-weight:400; }
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ticks li{ position:relative; padding-left:26px; }
.ticks li::before{ content:""; position:absolute; left:2px; top:.5em; width:10px; height:10px; background:currentColor; clip-path:polygon(55% 0,0 58%,42% 58%,30% 100%,100% 38%,58% 38%); }
.card:not(.card--accent) .ticks li::before, .ticks--big li::before{ background:var(--accent); }
.ticks--big{ gap:14px; font-size:clamp(1.05rem,1rem + .5vw,1.3rem); max-width:62ch; }
.ticks--big li{ padding-left:32px; }
.ticks--big li::before{ width:14px; height:14px; top:.4em; }
.fine{ list-style:none; margin:clamp(24px,4vw,36px) 0 0; padding:0; display:grid; gap:10px; color:var(--ink-2); max-width:72ch; }
.fine b{ color:var(--ink); }

/* upgrades */
.ups{ list-style:none; margin:0; padding:0; }
.ups__row{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-block:22px; border-top:1px solid var(--line); }
.ups__row:last-child{ border-bottom:1px solid var(--line); }
.ups__price{ margin:0; flex:none; color:var(--accent); font-size:1.5rem; letter-spacing:.02em; white-space:nowrap; }
.ups__price span{ color:var(--ink-2); font-size:.75rem; }

/* next */
.band--cta{ background:var(--accent); color:var(--on-accent); border-top:0; }
.band--cta .eyebrow{ color:rgb(11 11 12 / .78); }
.steps{ margin:0 0 8px; padding-left:1.25em; display:grid; gap:8px; font-size:clamp(1.05rem,1rem + .5vw,1.3rem); max-width:52ch; }
.band--cta .btn--primary{ background:var(--on-accent); color:var(--accent); border-color:var(--on-accent); }
.band--cta .btn--primary:hover{ background:#26262a; }
.band--cta .btn--ghost{ color:var(--on-accent); border-color:var(--on-accent); }
.band--cta .btn--ghost:hover{ background:var(--on-accent); color:var(--accent); }
.band--cta :focus-visible{ outline-color:var(--on-accent); }
.more{ margin:28px 0 0; font-weight:600; }

.foot{ border-top:1px solid var(--line); padding-block:28px; color:var(--ink-2); font-size:.9rem; }
.foot__in{ display:flex; flex-wrap:wrap; gap:4px 28px; align-items:center; justify-content:space-between; }
.foot a{ display:inline-block; padding-block:12px; }
@media (max-width:480px){ .bar__tag{ display:none; } }
.foot .mono{ font-size:.7rem; color:var(--ink-3); }

/* mobile dock */
.dock{
  position:fixed; inset:auto 0 0; z-index:60; display:grid; grid-template-columns:1fr auto; gap:10px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background:rgb(11 11 12 / .94);
  border-top:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

@media (min-width:760px){
  .price{ grid-template-columns:1.25fr 1fr; align-items:stretch; }
  .flow{ grid-template-columns:repeat(4,1fr); gap:28px; }
  .flow__step{ padding:56px 0 0; }
  .flow__step::before{ left:40px; right:-28px; top:19px; bottom:auto; width:auto; height:2px; }
  .flow__n{ top:0; }
}
@media (min-width:900px){
  body{ padding-bottom:0; }
  .dock{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero__mark{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* ---------- live demo (embedded real site, in a phone) ---------- */
.bar__nav{ display:none; gap:28px; font-size:.75rem; }
.bar__nav a{ text-decoration:none; color:var(--ink-2); padding:12px 0; }
.bar__nav a:hover{ color:var(--accent); }
.band--demo{ background:radial-gradient(60% 50% at 75% 40%, rgb(255 212 0 / .10), transparent 70%), var(--bg); }
.demo{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,5vw,56px); align-items:center; }
.demo__lede{ margin:0 0 20px; max-width:44ch; font-size:clamp(1.05rem,1rem + .5vw,1.3rem); color:var(--ink); }
.try{ margin:0 0 4px; padding-left:1.25em; display:grid; gap:12px; color:var(--ink-2); max-width:52ch; }
.try b{ color:var(--ink); }
.try li::marker{ color:var(--accent); font-weight:700; }

/* The phone: titanium edge, black bezel, dynamic island, status bar, home bar, screen glare.
   Sized like a real iPhone 14/15: the screen inside is ~386px wide, the width real phones report.
   The screen is the real, interactive demo. Every decorative layer is pointer-events:none or sits outside the iframe. */
.phone{
  --edge:10px;
  position:relative; isolation:isolate; justify-self:center; width:424px; max-width:100%;
  padding:var(--edge); border-radius:66px;
  background:linear-gradient(135deg,#7a7a82 0%,#2c2c31 16%,#111113 38%,#4a4a51 58%,#17171a 80%,#6a6a72 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .30),
    inset 0 0 0 3px rgb(0 0 0 / .55),
    0 1px 0 rgb(255 255 255 / .06),
    0 56px 90px -26px rgb(0 0 0 / .8),
    0 0 0 1px #000,
    0 0 110px rgb(255 212 0 / .13);
}
.phone::after{
  content:""; position:absolute; z-index:-2; left:10%; right:10%; bottom:-30px; height:36px;
  background:radial-gradient(50% 50% at 50% 50%, rgb(255 212 0 / .22), transparent 72%); filter:blur(10px);
}
.phone__btn{
  position:absolute; z-index:-1; width:5px; border-radius:3px; box-shadow:0 0 0 1px #000;
  background:linear-gradient(90deg,#74747c,#2c2c31 55%,#3f3f46);
}
.phone__btn--action{ left:-4px; top:136px; height:33px; }
.phone__btn--up{ left:-4px; top:200px; height:64px; }
.phone__btn--down{ left:-4px; top:280px; height:64px; }
.phone__btn--power{ right:-4px; top:238px; height:106px; background:linear-gradient(270deg,#74747c,#2c2c31 55%,#3f3f46); }

.phone__bezel{ background:#000; border-radius:56px; padding:9px; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07); }
.phone__display{
  position:relative; display:flex; flex-direction:column; overflow:hidden; background:#0B0B0C; border-radius:47px;
  height:clamp(680px,calc(100vh - 120px),860px);
  height:clamp(680px,calc(100svh - 120px),860px);
}
.phone__status{
  flex:none; height:54px; padding:9px 33px 0 38px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  color:#fff; background:#0B0B0C; user-select:none; -webkit-user-select:none;
}
.phone__time{ font:600 17px/1 var(--body); letter-spacing:-.01em; }
.phone__island{ position:relative; width:118px; height:34px; background:#000; border-radius:22px; }
.phone__island i{
  position:absolute; right:11px; top:50%; width:12px; height:12px; transform:translateY(-50%); border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#34457a 0,#0c1020 45%,#000 72%); box-shadow:0 0 0 2px #06070b;
}
.phone__icons{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.phone__icons svg{ display:block; fill:currentColor; }
.phone__screen{ position:relative; flex:1 1 auto; min-height:0; background:#0B0B0C; }
.phone__screen::before{ content:""; position:absolute; inset:0; background:url("logo-sm.png") center/80px no-repeat; opacity:.3; }
.phone__screen iframe{ position:relative; display:block; width:100%; height:100%; border:0; background:transparent; }
.phone__nojs{ position:relative; margin:0; padding:24px; text-align:center; }
.phone__home{ flex:none; height:31px; display:grid; place-items:center; background:#0B0B0C; }
.phone__home i{ display:block; width:146px; height:5px; border-radius:3px; background:rgb(255 255 255 / .82); }
.phone__glare{
  position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:linear-gradient(112deg, rgb(255 255 255 / .10) 0%, rgb(255 255 255 / .035) 24%, transparent 40%);
}

/* phones: the frame runs almost edge to edge (like holding a real one), with the same details, scaled to the screen */
@media (max-width:480px){
  .phone{ --edge:7px; justify-self:center; width:min(432px, calc(100% + 2 * var(--gutter) - 12px)); max-width:none; border-radius:52px; }
  .phone__bezel{ border-radius:45px; padding:6px; }
  .phone__display{
    border-radius:39px;
    height:clamp(600px,calc(100vh - 110px),800px);
    height:clamp(600px,calc(100svh - 110px),800px);
  }
  .phone__status{ height:48px; padding:7px 24px 0 28px; }
  .phone__time{ font-size:16px; }
  .phone__island{ width:104px; height:30px; }
  .phone__island i{ width:11px; height:11px; right:10px; }
  .phone__btn{ width:4px; }
  .phone__btn--action{ left:-3px; top:112px; height:28px; }
  .phone__btn--up{ left:-3px; top:170px; height:54px; }
  .phone__btn--down{ left:-3px; top:236px; height:54px; }
  .phone__btn--power{ right:-3px; top:200px; height:90px; }
  .phone__home{ height:26px; }
  .phone__home i{ width:124px; }
}
@media (max-width:360px){
  .phone__status{ padding:6px 16px 0 20px; }
  .phone__icons{ gap:5px; }
  .phone__icons svg:nth-child(2){ display:none; }
}
@media (min-width:760px){ .bar__nav{ display:flex; } }
@media (min-width:900px){ .demo{ grid-template-columns:minmax(0,1fr) auto; } }