/* The Start window and the "Your PRFKT ADS" plan tour (tour.js). Tokens come from site.css; works in Classic light and dark. */

/* ---------- Start ---------- */
.start{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:34px;align-items:center;padding:6px 0 4px}
.start h1{font-size:clamp(28px,3vw,40px);line-height:1.04;margin:0 0 12px}
.start h1 em{font-style:normal;background:var(--lime);color:var(--lime-ink);padding:0 .14em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.start .lead{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin:0 0 16px;max-width:46ch}
.beats{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:b}
.beats li{counter-increment:b;border:1px solid var(--line);border-radius:8px;background:var(--win);padding:10px 12px;display:grid;gap:2px;box-shadow:2px 2px 0 var(--hair)}
.beats b{font-family:var(--display);font-size:16px;letter-spacing:-.02em}
.beats b::before{content:counter(b,decimal-leading-zero) " ";font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--muted)}
.beats span{font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.start .btn.big{font-size:16px;padding:11px 22px}
.start .quiet{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);text-underline-offset:3px;padding:6px 4px}
.start .quiet:hover{background:var(--lime);color:var(--lime-ink);border-radius:4px}
.start .fine{margin:14px 0 0;font-size:13px;color:var(--muted)}
.start .hero-frame .shot{aspect-ratio:16/10}

/* ---------- tour ---------- */
.tour2{display:grid;gap:12px}
.tour2>*{min-width:0}
.t-head .eyebrow{margin-bottom:6px}
.t-h{font-size:clamp(21px,2.2vw,26px);margin:0 0 10px}
.t-plans{display:flex;flex-wrap:wrap;gap:6px}
.t-plans button{font:inherit;display:flex;align-items:baseline;gap:7px;text-align:left;background:var(--win);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:6px 11px;cursor:pointer;box-shadow:1px 1px 0 var(--hair)}
.t-plans button b{font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.t-plans button span{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.t-plans button:hover{background:var(--paper)}
.t-plans button.on{background:var(--lime);color:var(--lime-ink);box-shadow:2px 2px 0 var(--line)}
.t-plans button.on span{color:var(--lime-ink);opacity:.8}
.t-plans button:focus-visible,.t-rail button:focus-visible,.t-thumb:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.t-rail{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.t-rail button{font:inherit;background:none;border:0;padding:4px 2px 2px;cursor:pointer;color:var(--muted);display:grid;gap:5px;justify-items:start;border-top:3px solid var(--hair);min-width:0}
.t-rail button span{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.t-rail button i{display:flex;gap:3px}
.t-rail button em{width:7px;height:7px;border-radius:2px;border:1px solid var(--muted);display:block}
.t-rail button em.no{border-style:dashed;opacity:.6}
.t-rail button em.on{background:var(--lime);border-color:var(--line)}
.t-rail button.past{border-top-color:var(--ink-2);color:var(--ink-2)}
.t-rail button.on{border-top-color:var(--lime);color:var(--ink)}
.t-rail button:hover{color:var(--ink)}

.t-stage{position:relative;touch-action:pan-y}
.t-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center;animation:t-in .28s var(--ease) both}
.t-card.from-r{animation-name:t-from-r}.t-card.from-l{animation-name:t-from-l}
@keyframes t-in{from{opacity:0}}
@keyframes t-from-r{from{opacity:0;transform:translateX(24px)}}
@keyframes t-from-l{from{opacity:0;transform:translateX(-24px)}}
.t-media{position:relative;min-width:0}
.t-media .frame .shot{aspect-ratio:16/10}
.t-media .frame .shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.t-media .t-phone{width:min(240px,62%);margin:0 auto;border-radius:22px;border-width:2px;padding:8px;background:var(--ink)}
.t-media .t-phone .shot{aspect-ratio:780/1688;border-radius:14px;overflow:hidden}
.t-card.no .t-media .frame{filter:grayscale(1);opacity:.42}
.t-flag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);font-family:var(--display);font-weight:800;font-size:18px;background:var(--win);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 16px;box-shadow:3px 3px 0 var(--line);white-space:nowrap}
.t-copy{display:grid;gap:10px;align-content:center;min-width:0}
.t-kick{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.t-copy h3{font-size:clamp(22px,2.3vw,28px);font-weight:800;letter-spacing:-.03em;margin:0}
.t-copy p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.t-avail{display:grid;gap:6px;justify-items:start;border-top:1px solid var(--hair);padding-top:10px}
.t-avail>span:not(.t-pill){font-size:14px;color:var(--ink-2);line-height:1.45}
.t-pill{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:5px;padding:2px 8px;background:var(--paper)}
.t-pill.yes{background:var(--lime);color:var(--lime-ink)}
.t-pill.part,.t-pill.add{background:var(--win);border-style:dashed}
.t-pill.no{background:var(--paper);color:var(--muted);border-style:dashed}
.t-copy .t-sample{font-size:12.5px;color:var(--muted)}


.t-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--hair);padding-top:12px}
.t-nav .btn{min-width:56px}
.t-nav .btn:disabled{opacity:.35;pointer-events:none}
.t-count{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center}

/* the end: the plan, its price, every screen at a glance */
.t-end{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}
.t-end h3{font-size:clamp(22px,2.3vw,28px);font-weight:800;margin:4px 0 10px}
.t-price{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.04em;line-height:1}
.t-price small{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted)}
.t-early{font-size:14px;color:var(--ink-2);margin:10px 0 4px}
.t-early b{background:var(--lime);color:var(--lime-ink);padding:1px 6px;border-radius:4px;border:1px solid var(--line)}
.t-end .row{margin-top:8px}
.t-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.t-thumb{font:inherit;position:relative;display:grid;gap:4px;align-content:start;text-align:left;background:var(--win);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:5px;cursor:pointer;min-width:0}
.t-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:4px;border:1px solid var(--hair);display:block}
.t-thumb .t-thumb-card{display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:12px;background:var(--paper)}
.t-thumb>span{font-size:12.5px;line-height:1.25;font-weight:600}
.t-thumb em{position:absolute;top:8px;left:8px;right:8px;font-style:normal;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--win);border:1px dashed var(--line);border-radius:4px;padding:1px 4px;text-align:center}
.t-thumb.no img,.t-thumb.no .t-thumb-card{filter:grayscale(1);opacity:.35}
.t-thumb.no>span{color:var(--muted)}
.t-thumb:hover{box-shadow:2px 2px 0 var(--line)}

/* narrow windows and phones: one card at a time, stacked like cards */
@media (max-width:1000px){.start{grid-template-columns:1fr}.t-card,.t-end{grid-template-columns:1fr}}
body.phone .start{grid-template-columns:1fr;gap:20px}
body.phone .start .hero-frame{display:none}
body.phone .beats{grid-template-columns:1fr}
body.phone .t-plans{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px 4px}
body.phone .t-plans button{flex:none}
body.phone .t-rail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 14px 0}
body.phone .t-rail button{flex:none}
body.phone .t-rail button{padding-right:8px}
body.phone .t-card{grid-template-columns:1fr;gap:14px;border:1px solid var(--line);border-radius:12px;background:var(--win);padding:12px;box-shadow:0 6px 0 -2px var(--win-2),0 6px 0 -1px var(--line),0 12px 0 -4px var(--win-2),0 12px 0 -3px var(--hair)}
body.phone .t-stage{padding-bottom:12px}
body.phone .t-nav{position:sticky;bottom:-24px;background:var(--paper-2);padding-bottom:10px}
body.phone .t-grid{grid-template-columns:repeat(3,1fr)}
@media (prefers-reduced-motion:reduce){.t-card{animation:none}}
/* who it's for: two words, one choice */
.t-aud{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:2px 0 10px;box-shadow:2px 2px 0 var(--line)}
.t-aud button{font:700 13.5px var(--display);background:var(--win);color:var(--ink);border:0;border-left:1px solid var(--line);padding:7px 14px;min-height:36px;cursor:pointer}
.t-aud button:first-child{border-left:0}
.t-aud button.on{background:var(--ink);color:var(--paper)}
.t-aud button:focus-visible{outline:2px solid var(--lime);outline-offset:-3px}

/* The Start window's middle: four steps, the founder's note, a pricing summary and the first questions (index.html) */
.start-how{padding:4px 0 10px}
.how-steps{list-style:none;counter-reset:how;margin:14px 0 8px;padding:0;display:grid;gap:10px}
.how-steps li{counter-increment:how;display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);box-shadow:2px 2px 0 var(--line)}
.how-steps li::before{content:counter(how);grid-row:span 2;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:7px;background:var(--lime);color:#1a2200;font-weight:800;font-size:14px;box-shadow:1px 1px 0 var(--ink)}
.how-steps b{display:block;font-size:16px;margin-bottom:2px}.how-steps span{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.start-pricing,.start-questions{margin:22px 0 6px;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);box-shadow:2px 2px 0 var(--line)}
.start-pricing h2,.start-questions h2{margin:4px 0 8px}
.how-questions{list-style:none;margin:8px 0 10px;padding:0;display:grid;gap:6px}
.how-questions a{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:7px;color:inherit;text-decoration:none;font-weight:600}
.how-questions a:hover,.how-questions a:focus-visible{background:var(--lime);color:#1a2200;border-color:var(--ink)}
@media (min-width:641px){.how-steps{grid-template-columns:1fr 1fr}}