/* Landing page (2026-10-28 redo). Every product picture is captured from the
   running app (scripts/capture/), never drawn. The family look: a live hero
   (static/js/landing.js), the app in a laptop and phone like the Full Stop
   page, and every other section a band in Rota Done green. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11";overflow-x:hidden}
a{color:inherit}
img,video{display:block;max-width:100%;height:auto}
.dot{color:var(--brand)}

/* ---- Hero ---- */
.hero{position:relative;isolation:isolate;padding:76px 0 0;text-align:center;overflow:hidden}
.hero>.wrap,.hero>.stage{position:relative;z-index:1}
.bgx{position:absolute;inset:0;z-index:0;pointer-events:none}
.bgx canvas{display:block;width:100%;height:100%}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--muted);padding:5px 12px;border-radius:99px;background:color-mix(in srgb,var(--bg) 82%,transparent)}
.kicker .pip{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.hero h1{margin:20px auto 0;font-size:clamp(54px,8.8vw,120px);font-weight:800;letter-spacing:-.058em;line-height:.92;max-width:12ch}
.hero-stop{display:inline-block;width:.3em;height:.3em;margin-left:.1em;vertical-align:baseline}
.hero-stop svg{display:block;width:100%;height:100%}
.hero-sub{margin:26px auto 0;max-width:600px;font-size:19.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.hero-sub b{color:var(--text);font-weight:600}
.hero-ctas{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.assure{margin:20px 0 0;padding:0;list-style:none;display:flex;gap:6px 22px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.assure li{display:inline-flex;align-items:center;gap:7px}
.assure svg{flex:none}

/* ---- The app on a laptop and a phone (after the Full Stop page) ---- */
.stage{margin:64px auto 0;max-width:1240px;padding:0 24px 72px}
.devices{position:relative;padding-right:9%}
.lap{margin:0}
.lap-lid{position:relative;padding:1.1% 1.1% 1.5%;border-radius:clamp(10px,1.5vw,22px) clamp(10px,1.5vw,22px) 0 0;background:#0b0d10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 50px 100px -40px rgba(17,22,29,.45)}
.lap-screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:clamp(3px,.4vw,6px);background:#f6f5f1}
.lap-media{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.lap-base{position:relative;height:clamp(8px,1.15vw,17px);margin:0 -5.5%;border-radius:0 0 clamp(8px,1vw,16px) clamp(8px,1vw,16px);background:linear-gradient(#d9dbdf,#a9adb4 60%,#8a8f97);box-shadow:0 24px 40px -22px rgba(0,0,0,.55)}
.lap-base::before{content:"";position:absolute;left:50%;top:0;width:14%;height:42%;margin-left:-7%;border-radius:0 0 8px 8px;background:rgba(0,0,0,.16)}
.ph{--pw:clamp(130px,21vw,290px);margin:0;width:var(--pw);font-size:calc(var(--pw) / 30)}
.devices .ph{position:absolute;right:0;bottom:-28px;z-index:2}
.ph-body{position:relative;padding:.42em;border-radius:4.8em;background:#0b0d10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 60px -30px rgba(0,0,0,.6)}
.ph-screen{position:relative;aspect-ratio:393/852;overflow:hidden;border-radius:4.4em;background:#f6f5f1}
.ph-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ph-island{position:absolute;left:50%;top:1.5em;width:10.5em;height:3.1em;margin-left:-5.25em;border-radius:2em;background:#0b0d10}
.caption{margin:48px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}

/* ---- Facts strip ---- */
.facts{padding:40px 0 44px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--band)}
.facts-h{margin:0 0 22px;text-align:center;font-size:13.5px;font-weight:500;color:var(--muted)}
.facts ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.facts li{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 12px;text-align:center;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.facts li+li{border-left:1px solid var(--border)}
.facts svg{color:var(--brand)}

/* ---- Sections ---- */
section{position:relative;padding:120px 0}
.eyebrow{font-size:14.5px;font-weight:600;letter-spacing:-.005em;color:var(--brand-text);margin-bottom:14px}
h2{margin:0;font-size:clamp(36px,4.8vw,58px);font-weight:800;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.lede{margin:20px 0 0;font-size:18.5px;color:var(--muted);max-width:600px;text-wrap:pretty}
.lede b{color:var(--text);font-weight:600}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px;align-items:center}
.split.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.split.flip .split-copy{order:2}
.ticks{list-style:none;margin:28px 0 32px;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;font-size:16px;line-height:1.5}
.ticks svg{margin-top:3px}
.note{margin:18px 0 0;padding:14px 16px;border-radius:10px;background:var(--surface2);font-size:14.5px;color:var(--muted);max-width:600px}

/* A screenshot on a card (the Full Stop page's .feat) */
.shot{margin:0;border-radius:18px;padding:clamp(14px,2.4vw,28px);background:var(--surface2)}
.shot img{width:100%;border-radius:10px;box-shadow:0 0 0 1px rgba(17,22,29,.08),0 18px 34px -18px rgba(0,0,0,.45)}
.shot figcaption{margin:14px 2px 0;font-size:15px;font-weight:650;letter-spacing:-.015em}
.shots{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.wide{margin-top:56px}

/* Steps */
.steps{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step{padding:28px 28px 30px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--border),0 1px 2px rgba(17,22,29,.04);display:flex;flex-direction:column;gap:12px}
.step-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--brand-text);background:color-mix(in srgb,var(--brand) 11%,transparent)}
.step h3{margin:6px 0 0;font-size:22px;font-weight:700;letter-spacing:-.025em}
.step p{margin:0;font-size:15.5px;color:var(--muted)}

/* Ken */
.kenline{display:flex;align-items:flex-start;gap:12px;padding:12px 18px 12px 12px;border-radius:14px;background:#11161d;color:#f6f5f1;font-size:15.5px;line-height:1.45;font-weight:500;box-shadow:0 12px 32px -12px rgba(17,22,29,.35);max-width:460px}
.kf{flex:none;display:block;width:36px;height:36px}
.kf svg{display:block;width:100%;height:100%}
.kenline p{margin:7px 0 0}
.kbtns{display:flex;gap:8px;margin-top:10px}
.kbtns span{padding:5px 12px;border-radius:8px;font-size:13.5px;font-weight:600;background:#2a303a;color:#f6f5f1}
.kbtns span:first-child{background:#2dac7f;color:#11161d}
.kenstack{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.kenstack .kenline:nth-child(2){margin-left:36px}
.kenstamp{display:inline-flex;align-items:center;gap:8px;margin-left:12px;padding:8px 14px;border:1.5px dashed var(--border-strong);border-radius:10px;font-size:14.5px;color:var(--muted)}
.kenstamp b{color:var(--text)}
.kenstamp .kf{width:20px;height:20px}

/* Two phones side by side */
.phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,3vw,36px)}
.phones .ph{--pw:clamp(150px,19vw,270px)}
.phones .ph:nth-child(2){margin-bottom:48px}

/* Venue types */
.types{margin-top:48px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.type{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 18px 20px;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--border);text-decoration:none;transition:box-shadow .15s}
.type:hover{box-shadow:0 0 0 1px var(--border-strong),0 8px 20px -12px rgba(17,22,29,.25)}
.type b{font-size:16px;font-weight:650;letter-spacing:-.015em}
.type span{font-size:13.5px;color:var(--muted)}
.type .arr{position:absolute;top:18px;right:16px;color:var(--muted2);transition:transform .18s,color .18s}
.type:hover .arr{transform:translateX(3px);color:var(--brand-text)}
.types-more{margin:22px 0 0;font-size:15px;color:var(--muted)}
.types-more a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Price */
.price{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;padding:52px 56px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--border),0 1px 2px rgba(17,22,29,.04)}
.price-big{font-size:clamp(80px,10vw,136px);font-weight:800;letter-spacing:-.06em;line-height:.85}
.price-big small{font-size:.22em;letter-spacing:-.02em;font-weight:600;color:var(--muted);margin-left:8px}
.price ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px}
.price li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px}
.price li svg{margin-top:3px}
.price-ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* FAQ */
.faq{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.faq details{border-top:1px solid var(--border);padding:20px 0}
.faq summary{list-style:none;cursor:pointer;font-size:17px;font-weight:650;letter-spacing:-.015em;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:400;font-size:20px;line-height:1;color:var(--muted);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:10px 0 0;color:var(--muted);font-size:15.5px}

/* ---- Bands: Rota Done green, the page reads as if it were dark mode on it ---- */
.band{--band-bg:#107f5c;background-color:var(--band-bg);color:#fff;
  --text:#fff;--muted:rgba(255,255,255,.84);--muted2:rgba(255,255,255,.7);--brand:#fff;--brand-text:#fff;
  --surface:rgba(255,255,255,.08);--surface2:rgba(255,255,255,.1);--border:rgba(255,255,255,.18);--border-strong:rgba(255,255,255,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
html:not(.rd-light-mode) .band{--band-bg:#0c6a4c}
.band .shot{background:rgba(255,255,255,.1)}
.band .shot img{box-shadow:0 0 0 1px rgba(0,0,0,.12),0 24px 44px -20px rgba(0,0,0,.55)}
.band .note{background:rgba(255,255,255,.1)}
.band .btn-primary{background:#fff;color:#11161d}
.band .btn-primary:hover{background:#f3f2ee}
.band .btn-primary .bt,.nav.on-band .btn-primary .bt{background:#107f5c;color:#fff}
.band .btn-secondary{color:#fff;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.band .btn-secondary:hover{background:rgba(255,255,255,.1)}
.band .more{color:#fff}
.band .ph-body{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 70px -30px rgba(0,0,0,.6)}
.band .kenline{background:#0b0d10}
/* The top bar takes the colour under it. */
.nav{transition:background-color .25s,color .25s,border-color .2s}
.nav.on-band{background:color-mix(in srgb,#107f5c 93%,transparent);border-bottom-color:transparent;--text:#fff;--muted:rgba(255,255,255,.84);--accent-wash:rgba(255,255,255,.12);color:#fff}
html:not(.rd-light-mode) .nav.on-band{background:color-mix(in srgb,#0c6a4c 93%,transparent)}
.nav.on-band .btn-primary{background:#fff;color:#11161d}
.nav.on-band{--brand:#fff}
.nav.on-band .rd-logo svg{border-radius:28%;box-shadow:0 0 0 1.5px rgba(255,255,255,.75)}

/* Close */
.close{text-align:center;padding:136px 0 144px}
.close h2{font-size:clamp(50px,7.6vw,104px);letter-spacing:-.055em;line-height:.94}
.close .lede{margin:22px auto 0}
.close .hero-ctas{margin-top:36px}

/* Reveal on scroll: visible without JS; reduced motion skips it. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none;transition:none}}

@media (max-width:1000px){
  .steps{grid-template-columns:1fr}
  .split,.split.flip{grid-template-columns:1fr;gap:44px}
  .split.flip .split-copy{order:0}
  .types{grid-template-columns:repeat(3,minmax(0,1fr))}
  .price{grid-template-columns:1fr;padding:36px 28px;gap:32px}
  .faq{grid-template-columns:1fr}
  .facts ul{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
  .facts li:nth-child(4){border-left:0}
  .shots{grid-template-columns:1fr}
  section{padding:96px 0}
}
@media (max-width:800px){.kenstack .kenline:nth-child(2){margin-left:0}}
@media (max-width:600px){
  .hero{padding-top:52px}
  .kicker{font-size:13.5px}
  .kicker .pip{display:none}
  .hero-sub{font-size:17.5px}
  .hero-ctas .btn-primary{flex:1 1 100%}
  .stage{padding:0 12px 56px;margin-top:44px}
  .devices{padding-right:14%}
  .devices .ph{--pw:34vw;bottom:-36px}
  .facts ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li:nth-child(odd){border-left:0}
  .facts li:nth-child(4){border-left:1px solid var(--border)}
  .types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phones .ph{--pw:42vw}
  .phones .ph:nth-child(2){margin-bottom:28px}
}

/* The closing band's tick is drawn by its full stop; the heading's own dot waits (landing.js). */
.band.pen-down h2 .dot{opacity:0}