/* Kubic Studio website. Same look as the app (studio.kubicmedia.com): its dark tokens, gold accent and Plus Jakarta Sans,
   so the site feels like the product. Apple-style rhythm: one idea per section, huge short headlines, lots of air. */
:root {
  --bg: #0E0E11; --bg-2: #0A0A0C; --card: #18181C; --card-2: #222228; --ink: #F5F5F7; --muted: #9B9BA5; --line: #2B2B33;
  --accent: #F2C14E; --on-accent: #1A1406; --ok: #4ADE80; --red: #F87171; --blue: #60A5FA; --violet: #A78BFA; --pink: #F472B6;
  --k-red: #FF3B3B; --k-yellow: #FFC21A; --k-blue: #2F7BFF; --k-green: #22C55E;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { background: var(--bg); color: var(--ink); font: 500 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden }
img, video, svg { display: block; max-width: 100% }
a { color: inherit }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto }
section { padding: var(--s10) 0; position: relative }
@media (max-width: 720px) { section { padding: var(--s9) 0 } }

/* type */
.eyebrow { font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: var(--s4); letter-spacing: .01em }
.h-xl { font-size: clamp(48px, 9vw, 120px); font-weight: 800; letter-spacing: -.055em; line-height: .98 }
.h-l { font-size: clamp(38px, 6.2vw, 80px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02 }
.h-m { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08 }
.lead { font-size: clamp(18px, 2vw, 22px); color: var(--muted); line-height: 1.5; max-width: 640px }
.center { text-align: center } .center .lead { margin-inline: auto }
.grad { background: linear-gradient(100deg, var(--accent), #FFE7A3 45%, var(--accent) 90%); -webkit-background-clip: text; background-clip: text; color: transparent }
.muted { color: var(--muted) }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 16px; padding: 16px 26px; border-radius: 999px;
  text-decoration: none; transition: transform .3s var(--ease), background .3s, box-shadow .3s; white-space: nowrap }
.btn:hover { transform: translateY(-2px) }
.btn:active { transform: scale(.97) }
.btn.gold { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 40px -10px rgba(242, 193, 78, .55) }
.btn.gold:hover { box-shadow: 0 14px 50px -8px rgba(242, 193, 78, .7) }
.btn.ghost { background: var(--card-2); color: var(--ink) }
.btn.link { padding: 0; color: var(--accent) }
.btn.link::after { content: "→"; transition: transform .3s var(--ease) }
.btn.link:hover::after { transform: translateX(4px) }
.ctas { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6) }
.center .ctas { justify-content: center }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(14, 14, 17, .72); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.06) }
.nav .wrap { display: flex; align-items: center; gap: var(--s5); height: 64px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: .04em; font-size: 14px }
.brand svg { width: 28px; height: 28px }
.brand b { color: #4A93E0; font-weight: 800 }
.nav .links { display: flex; gap: var(--s5); margin-left: auto }
.nav .links a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; transition: color .2s }
.nav .links a:hover, .nav .links a[aria-current="page"] { color: var(--ink) }
.nav .btn { padding: 10px 18px; font-size: 14px }
@media (max-width: 760px) {
  .nav .wrap { flex-wrap: wrap; height: auto; padding: 12px 0; row-gap: 10px }
  .nav .links { order: 3; width: 100%; margin: 0; gap: var(--s5); overflow-x: auto }
  .nav .btn { margin-left: auto }
}

/* the phone (looks like the app) */
/* an iPhone in titanium: brushed frame with a bright edge, a black bezel, side buttons, Dynamic Island, a status bar
   and a faint glass glare over the screen */
.device { position: relative; width: min(330px, 82vw); aspect-ratio: 9 / 19.4; border-radius: 58px; padding: 13px; flex: none;
  background: linear-gradient(150deg, #8d8d96 0%, #3b3b42 9%, #1b1b20 30%, #121216 60%, #2c2c33 86%, #9a9aa3 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 3px #17171b, inset 0 0 0 8px #050506,
              0 1px 0 rgba(255,255,255,.08), 0 50px 90px -30px rgba(0,0,0,.95), 0 90px 160px -60px rgba(0,0,0,.8),
              0 40px 120px -50px color-mix(in srgb, var(--accent) 35%, transparent) }
.device::before { content: ""; position: absolute; left: -3px; top: 21%; width: 4px; height: 34px; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #6e6e77, #2a2a30); box-shadow: 0 52px 0 0 #3a3a41, 0 102px 0 0 #3a3a41 }
.device::after { content: ""; position: absolute; right: -3px; top: 30%; width: 4px; height: 78px; border-radius: 0 3px 3px 0; background: linear-gradient(270deg, #6e6e77, #2a2a30) }
.screen { position: relative; height: 100%; border-radius: 46px; overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px #000 }
.screen::before { content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 34%; height: 30px; border-radius: 20px; background: #000; z-index: 6;
  box-shadow: inset -8px 0 0 -2px #000, inset 0 0 0 1px #0d0d10 }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 28%, transparent 40%) }
.sbar { position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; pointer-events: none }
.sbar b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink) }
.sbar span { display: flex; align-items: center; gap: 5px }
.sbar i { display: block; background: var(--ink) }
.sbar .sig { width: 17px; height: 11px; clip-path: polygon(0 75%, 22% 75%, 22% 100%, 0 100%, 0 75%, 26% 55%, 48% 55%, 48% 100%, 26% 100%, 26% 55%, 52% 30%, 74% 30%, 74% 100%, 52% 100%, 52% 30%, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% 0) }
.sbar .wifi { width: 15px; height: 11px; clip-path: polygon(50% 100%, 0 30%, 18% 12%, 50% 0, 82% 12%, 100% 30%) }
.sbar .bat { width: 25px; height: 12px; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); position: relative }
.sbar .bat::after { content: ""; position: absolute; inset: 2.5px 7px 2.5px 2.5px; border-radius: 2px; background: var(--ink) }
.ui { position: absolute; inset: 0; padding: 60px 16px 18px; display: flex; flex-direction: column; gap: 12px; font-size: 13px;
  transition: opacity .6s var(--ease), transform .6s var(--ease) }
.js .stack .ui { opacity: 0; transform: scale(.97) translateY(10px); pointer-events: none }
.js .stack .ui.on { opacity: 1; transform: none; pointer-events: auto }
.ui .ttl { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1 }
.ui .sub { color: var(--muted); font-size: 12.5px }
.ui .kb { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em }
.ui .kb svg { width: 16px; height: 16px } .ui .kb b { color: #4A93E0 }
.ui .card { background: var(--card); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px }
.ui .row { display: flex; align-items: center; gap: 10px }
.ui .chip { font-size: 10.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--card-2); color: var(--muted); white-space: nowrap }
.ui .chip.gold { background: var(--accent); color: var(--on-accent) } .ui .chip.ok { background: #12301F; color: var(--ok) } .ui .chip.vi { background: #261A3F; color: var(--violet) }
.ui .bigbtn { margin-top: auto; background: var(--accent); color: var(--on-accent); border-radius: 14px; padding: 13px; text-align: center; font-weight: 800; font-size: 14px }
.ui .bigbtn.okb { background: var(--ok); color: #06210F }
.ui .tabs { display: flex; justify-content: space-around; align-items: flex-end; border-top: 1px solid var(--line); margin: 4px -16px -16px; padding: 8px 6px 14px; background: var(--card) }
.ui .tabs i { width: 22px; height: 22px; border-radius: 7px; background: var(--card-2); display: block }
.ui .tabs i.c { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); margin-top: -18px }
.ui .tabs i.on { background: var(--ink) }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px }
.tile { position: relative; aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden; background: var(--card-2) center / cover }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.8)) }
.tile span { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; font-weight: 800; font-size: 11px; line-height: 1.2; color: #fff }
.tile video, .tile img { width: 100%; height: 100%; object-fit: cover }
.prog { height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden }
.prog i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width 1.6s var(--ease) }
.on .prog i, .prog.full i { width: var(--w, 64%) }
.toggle { width: 38px; height: 22px; border-radius: 11px; background: var(--ok); position: relative; flex: none }
.toggle::after { content: ""; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px }
.week div { background: var(--card); border-radius: 10px; padding: 6px 0; text-align: center; font-size: 10px; color: var(--muted); font-weight: 700 }
.week div b { display: block; font-size: 14px; color: var(--ink) }
.week div.on { background: var(--ink); color: var(--bg) } .week div.on b { color: var(--bg) }
.item { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 8px; min-width: 0 }
.ui .chip { flex: none }
.item .th { width: 34px; height: 46px; border-radius: 8px; background: var(--card-2) center / cover; flex: none }
.item .tx { flex: 1; min-width: 0 } .item .tx b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.item .tx small { color: var(--muted); font-size: 10.5px }
.banner { background: rgba(40,40,46,.92); backdrop-filter: blur(10px); border-radius: 18px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.4) }
.banner .ap { width: 30px; height: 30px; border-radius: 8px; flex: none }
.banner b { font-size: 12px; display: block } .banner small { font-size: 11px; color: #c9c9d1 }

/* hero */
.hero { padding: var(--s9) 0 var(--s8); overflow: hidden }
.hero .grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s7); align-items: center }
.hero .stagewrap { position: relative; display: grid; place-items: center; min-height: 640px; perspective: 1400px }
.hero .device { transform-style: preserve-3d; transition: transform .6s var(--ease) }
.hero .h-xl { font-size: clamp(48px, 7.4vw, 104px) }
.float { position: absolute; z-index: 3; width: 228px; animation: floaty 7s ease-in-out infinite }
.float.f1 { top: 4%; left: -16% } .float.f2 { top: 44%; right: -18%; animation-delay: -2.5s } .float.f3 { bottom: 5%; left: -12%; animation-delay: -4.5s }
@keyframes floaty { 50% { transform: translateY(-14px) } }
.glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(242,193,78,.22), transparent 62%); filter: blur(20px); z-index: 0 }
@media (max-width: 900px) {
  .hero .grid { grid-template-columns: minmax(0, 1fr) }
  .hero .stagewrap { min-height: 600px }
  .float { width: 200px } .float.f1 { top: 2%; left: 0 } .float.f2 { top: 46%; right: 0 } .float.f3 { bottom: 2%; left: 2% }
}

/* platforms marquee */
.marquee { border-block: 1px solid var(--line); padding: var(--s5) 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) }
.marquee .track { display: flex; gap: var(--s8); width: max-content; animation: slide 30s linear infinite; color: var(--muted); font-weight: 800; font-size: 20px; letter-spacing: -.01em }
.marquee span { display: flex; align-items: center; gap: 10px } .marquee span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent) }
@keyframes slide { to { transform: translateX(-50%) } }

/* speed race */
.race { display: grid; gap: var(--s6); margin-top: var(--s8); background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: 32px; padding: var(--s6) }
.lane { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--s5); align-items: center }
.lane .lbl b { font-size: 18px; font-weight: 800 }
.bars { display: grid; gap: 10px }
.b { position: relative; height: 46px; border-radius: 14px; background: var(--card-2); overflow: hidden }
.b::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--to); min-width: 10px; border-radius: 14px; transition: width 2.2s var(--ease) }
.b.slow::before { background: linear-gradient(90deg, #4a4a55, #6b6b78) }
.b.fast::before { background: var(--accent); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 70%, transparent) }
.js .race:not(.in) .b::before { width: 0 }
.b span { position: relative; z-index: 1; display: flex; align-items: center; height: 100%; padding: 0 16px; font-weight: 700; font-size: 14px; white-space: nowrap }
.b.fast span { padding-left: 22px; color: var(--accent) }
@media (max-width: 720px) { .lane { grid-template-columns: minmax(0, 1fr); gap: 10px } .b span { font-size: 12.5px; padding: 0 12px } .b.fast span { padding-left: 18px } }

/* speed duel: the same clip sent to an editor and to Kubic Studio, live clocks */
.duel { margin-top: var(--s8); background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: 32px; padding: var(--s6) }
.duel-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap }
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5) }
.side { background: var(--bg); border-radius: 24px; padding: var(--s5); display: flex; flex-direction: column; gap: 12px; min-height: 330px; position: relative; overflow: hidden;
  border: 1px solid transparent; transition: border-color .4s, box-shadow .4s }
.side .who { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--muted) }
.side .dot { width: 10px; height: 10px; border-radius: 50% }
.side.ed .dot { background: #6b6b78 } .side.ks .dot { background: var(--accent) } .side.ks .who { color: var(--accent) }
.side .clock { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: 1 }
.side .prog { height: 8px } .side .prog i { transition: none; width: 0 }
.side.ed .prog i { background: #6b6b78 }
.side .status { font-weight: 700; font-size: 15px; min-height: 22px; color: var(--ink) }
.side .status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 8px; vertical-align: 1px }
.side.run .status::before { animation: blink 1s infinite } .side.done .status::before { background: var(--ok); animation: none }
@keyframes blink { 50% { opacity: .2 } }
.outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: auto }
.outs .o { aspect-ratio: 9 / 14; border-radius: 12px; background: var(--card-2) center / cover; position: relative; overflow: hidden; animation: pop .6s var(--ease) both }
.outs .o span { position: absolute; left: 6px; bottom: 5px; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000 }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(10px) } }
.side.ks.done { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 60px -20px color-mix(in srgb, var(--accent) 60%, transparent) }
.side .win { position: absolute; top: 16px; right: 16px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 999px; animation: pop .5s var(--ease) both }
.duel-note { color: var(--muted); font-size: 14px; margin-top: var(--s4); text-align: center }
@media (max-width: 720px) { .sides { grid-template-columns: minmax(0, 1fr) } .side { min-height: 0 } .duel-top .btn { width: 100% } }

/* the six roles */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s7); text-align: left }
.role { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: 22px; padding: var(--s5); display: flex; flex-direction: column; gap: 6px;
  transition: transform .4s var(--ease), border-color .3s }
.role:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.14) }
.role i { width: 14px; height: 14px; border-radius: 4px; margin-bottom: 8px }
.role b { font-size: 19px; font-weight: 800; letter-spacing: -.02em } .role span { color: var(--muted); font-size: 15px }
@media (max-width: 760px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
/* comment autopilot + avatar */
.dm { display: flex; flex-direction: column; gap: 10px; min-height: 280px }
.cmt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px }
.cmt .av { width: 30px; height: 30px; border-radius: 50%; flex: none }
.cmt b { display: block; font-size: 13px }
.pdf { align-self: flex-start; display: flex; gap: 12px; align-items: center; background: var(--card-2); border-radius: 16px; padding: 12px 14px; max-width: 290px }
.pdf .doc { width: 40px; height: 50px; border-radius: 6px; background: linear-gradient(160deg, var(--accent), #c98f1c); flex: none; position: relative }
.pdf .doc::after { content: "PDF"; position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 800; color: var(--on-accent) }
.pdf b { font-size: 14px; display: block } .pdf small { color: var(--muted) }
.js .dm .later { display: none } .js .dm.go .later { display: flex; animation: drop .6s var(--ease) both }
.js .dm.go .later.d2 { animation-delay: .9s } .js .dm.go .later.d3 { animation-delay: 1.8s }
.hourgrid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin-top: var(--s5) }
.hourgrid i { aspect-ratio: 9 / 14; border-radius: 6px; background: var(--card-2); display: block; transition: background .4s, transform .4s var(--ease) }
.hourgrid.go i { background: var(--accent); transform: scale(1) }
.hourgrid.go i:nth-child(3n) { background: var(--blue) } .hourgrid.go i:nth-child(5n) { background: var(--ok) } .hourgrid.go i:nth-child(7n) { background: var(--pink) }

/* sticky story: text scrolls, the phone stays and changes screen */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8) }
.story .phone-col { position: sticky; top: 90px; height: calc(100vh - 110px); display: grid; place-items: center }
.story .steps { padding: 20vh 0 }
.story .step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; transition: opacity .5s }
.js .story .step { opacity: .28 } .js .story .step.on { opacity: 1 }
.story .num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #0B1022; margin-bottom: var(--s5) }
.story .step p { color: var(--muted); font-size: 19px; margin-top: var(--s4); max-width: 460px }
/* phones: the same scroll story, side by side. The phone sticks on the left (smaller), the steps scroll past on the right,
   and the step in the middle of the screen picks what the phone shows. Nothing ever sits on top of the text. */
@media (max-width: 900px) {
  .story { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start }
  .story .phone-col { position: sticky; top: calc(50vh - 160px); height: 320px; width: 150px; display: block; padding: 0 }
  .story .phone-col .device { position: absolute; top: 0; left: 0; width: 330px; transform: scale(.4545); transform-origin: top left }
  .story .steps { padding: 18vh 0 }
  .story .step { min-height: 74vh }
  .story .step .h-m { font-size: 24px }
  .story .step p { font-size: 15px; margin-top: 10px }
  .story .num { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; margin-bottom: 12px }
}
@media (max-width: 380px) {
  .story { grid-template-columns: 124px minmax(0, 1fr); gap: 14px }
  .story .phone-col { width: 124px; height: 265px; top: calc(50vh - 132px) }
  .story .phone-col .device { transform: scale(.3757) }
}

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s8) }
.bx { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: 28px; padding: var(--s6); position: relative; overflow: hidden; min-height: 300px;
  display: flex; flex-direction: column; transition: transform .5s var(--ease), border-color .3s }
.bx:hover { transform: translateY(-4px); border-color: rgba(242,193,78,.25) }
.bx.w3 { grid-column: span 3 } .bx.w2 { grid-column: span 2 } .bx.w4 { grid-column: span 4 }
.bx h3 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15 }
.bx p { color: var(--muted); margin-top: var(--s2); font-size: 16px }
.bx .art { margin-top: auto; padding-top: var(--s5) }
.bx:not(:has(.art)) { min-height: 210px }
@media (max-width: 900px) { .bento { grid-template-columns: minmax(0, 1fr) } .bx.w3, .bx.w2, .bx.w4 { grid-column: auto } }
.wave { display: flex; align-items: center; gap: 3px; height: 70px }
.wave i { flex: 1; border-radius: 2px; background: var(--muted); height: var(--h); transition: background .4s, opacity .4s, flex .6s var(--ease) }
.wave i.cut { background: var(--red); opacity: .9 }
.bx:hover .wave i.cut, .wave.done i.cut { flex: 0; opacity: 0; margin: 0 -1.5px }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px }
.cal i { aspect-ratio: 1; border-radius: 8px; background: var(--card-2); display: block; transition: background .4s, transform .4s var(--ease) }
.cal i.p { background: var(--accent) }
.bx:hover .cal i.p { transform: scale(1.12) }
.stylechips { display: flex; gap: 8px; flex-wrap: wrap }
.stylechips span { padding: 8px 14px; border-radius: 999px; background: var(--card-2); font-weight: 700; font-size: 14px }
.stylechips span:nth-child(1) { background: #3A2F12; color: var(--accent) } .stylechips span:nth-child(2) { background: #14263F; color: var(--blue) }
.stylechips span:nth-child(3) { background: #3B1730; color: var(--pink) } .stylechips span:nth-child(4) { background: #12301F; color: var(--ok) }

/* numbers */
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s8) }
.nums div { border-top: 1px solid var(--line); padding-top: var(--s5) }
.nums b { display: block; font-size: clamp(56px, 8vw, 104px); font-weight: 800; letter-spacing: -.06em; line-height: 1 }
.nums p { color: var(--muted); margin-top: var(--s3) }
@media (max-width: 720px) { .nums { grid-template-columns: minmax(0, 1fr) } }

/* features page demos */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center }
.demo.flip > :first-child { order: 2 }
@media (max-width: 900px) { .demo, .demo.flip { grid-template-columns: minmax(0, 1fr) } .demo.flip > :first-child { order: 0 } }
.panel { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: 32px; padding: var(--s6) }
.words { display: flex; flex-wrap: wrap; gap: 6px; font-size: 17px; line-height: 1.4; min-height: 150px; align-content: flex-start }
.words span { padding: 3px 8px; border-radius: 8px; background: var(--card-2); transition: all .55s var(--ease); max-width: 400px; overflow: hidden; white-space: nowrap }
.words span.bad { background: rgba(248,113,113,.16); color: var(--red); text-decoration: line-through }
.words.cut span.bad { max-width: 0; padding-inline: 0; margin-inline: -3px; opacity: 0 }
.timer { display: flex; align-items: baseline; gap: 10px; margin-top: var(--s5) }
.timer b { font-size: 48px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; color: var(--muted); font-size: 14px; margin-top: var(--s3) }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--red); margin-right: 6px; vertical-align: 0 }
.seg { display: inline-flex; gap: 4px; background: var(--card-2); border-radius: 999px; padding: 4px; flex-wrap: wrap }
.seg button { padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); transition: background .3s, color .3s }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.styler { display: flex; flex-direction: column; align-items: center; gap: var(--s5) }
.styler .device { width: min(300px, 76vw) }
.styler .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s }
.sched { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: var(--s5) }
.sched .day { background: var(--bg); border-radius: 16px; min-height: 190px; padding: 8px 6px; display: flex; flex-direction: column; gap: 6px }
.sched .day > small { text-align: center; color: var(--muted); font-weight: 700; font-size: 12px }
.sched .slot { border-radius: 10px; padding: 6px; font-size: 11px; font-weight: 700; background: var(--card-2); line-height: 1.25; animation: drop .7s var(--ease) both }
.sched .slot b { display: block; color: var(--accent); font-size: 10.5px }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.9) } }
.pool { display: flex; gap: 8px; flex-wrap: wrap; min-height: 44px }
.pool span { background: var(--card-2); padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; transition: opacity .4s, transform .4s }
.pool.gone span { opacity: 0; transform: translateY(20px) }
@media (max-width: 560px) { .sched { grid-template-columns: repeat(4, minmax(0, 1fr)) } .sched .day:nth-child(n+5) { display: none } }
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 230px }
.bub { align-self: flex-end; background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: 18px 18px 4px 18px; font-weight: 700; max-width: 85% }
.bub.them { align-self: flex-start; background: var(--card-2); color: var(--ink); border-radius: 18px 18px 18px 4px; font-weight: 600 }
.ring { width: 64px; height: 64px } .ring circle { fill: none; stroke-width: 7 } .ring .t { stroke: var(--card-2) }
.ring .p { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset 2.4s var(--ease) }
.ring.go .p { stroke-dashoffset: 0; stroke: var(--ok) }
.inputrow { display: flex; gap: 8px; margin-top: var(--s4) }
.inputrow input { flex: 1; min-width: 0; background: var(--card-2); border: 1px solid transparent; border-radius: 14px; padding: 13px 14px; color: var(--ink); font: 600 15px var(--font) }
.inputrow input:focus { border-color: var(--accent); outline: none }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s8); align-items: stretch }
.plan { background: var(--card); border: 1px solid rgba(255,255,255,.06); border-radius: 32px; padding: var(--s6); display: flex; flex-direction: column; position: relative;
  transition: transform .5s var(--ease), border-color .3s }
.plan:hover { transform: translateY(-6px) }
.plan.pop { border-color: rgba(242,193,78,.6); background: linear-gradient(180deg, #241f12, var(--card) 45%); box-shadow: 0 40px 100px -50px rgba(242,193,78,.45) }
.plan .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 12px; padding: 6px 14px; border-radius: 999px; white-space: nowrap }
.plan h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em }
.plan .for { color: var(--muted); margin-top: var(--s2); font-size: 15px; min-height: 48px }
.plan .price { margin: var(--s5) 0 var(--s2); font-size: 56px; font-weight: 800; letter-spacing: -.05em; line-height: 1 }
.plan .per { color: var(--muted); font-size: 14px; margin-bottom: var(--s5) }
.plan ul { list-style: none; display: grid; gap: 12px; margin-bottom: var(--s6) }
.plan li { padding-left: 28px; position: relative; font-size: 15px }
.plan li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #12301F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat }
.plan .btn { margin-top: auto }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto } .plan.pop { order: -1 } }
.compare { width: 100%; border-collapse: collapse; margin-top: var(--s7); font-size: 15px }
.compare th, .compare td { padding: 16px 12px; border-bottom: 1px solid var(--line); text-align: center }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--muted); font-weight: 600 }
.compare thead th { font-size: 15px; font-weight: 800 }
.compare td.y { color: var(--ok); font-weight: 800 } .compare td.n { color: #55555e }
.tablewrap { overflow-x: auto }
.faq { display: grid; gap: var(--s3); max-width: 820px; margin: var(--s7) auto 0 }
details { background: var(--card); border-radius: 20px; padding: 20px 24px }
summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 17px; display: flex; justify-content: space-between; gap: var(--s4) }
summary::-webkit-details-marker { display: none }
summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; transition: transform .3s var(--ease) }
details[open] summary::after { transform: rotate(45deg) }
details p { color: var(--muted); margin-top: var(--s3) }

/* closing CTA */
.final { text-align: center; border-radius: 40px; padding: var(--s10) var(--s5); background: radial-gradient(60% 90% at 50% 0%, rgba(242,193,78,.2), transparent 70%), var(--card); overflow: hidden; position: relative }
.final .ctas { justify-content: center }
.final .blocks { display: flex; justify-content: center; gap: 10px; margin-bottom: var(--s6) }
.final .blocks i { width: 34px; height: 34px; border-radius: 10px; animation: bob 2.4s var(--ease) infinite }
.final .blocks i:nth-child(1) { background: var(--k-red) } .final .blocks i:nth-child(2) { background: var(--k-yellow); animation-delay: .15s }
.final .blocks i:nth-child(3) { background: var(--k-blue); animation-delay: .3s } .final .blocks i:nth-child(4) { background: var(--k-green); animation-delay: .45s }
@keyframes bob { 0%, 60%, 100% { transform: none } 30% { transform: translateY(-14px) rotate(8deg) } }
footer { padding: var(--s8) 0; color: var(--muted); font-size: 14px }
footer .wrap { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--s6) }
footer nav { display: flex; gap: var(--s5) } footer a { text-decoration: none } footer a:hover { color: var(--ink) }

/* page header (features, pricing) */
.phead { padding: var(--s9) 0 var(--s7) }

/* scroll reveals: only once the script has run, so the page is never blank without it */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s) }
.js [data-reveal].in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
  .js [data-reveal] { opacity: 1; transform: none }
}