/* ============================================================
   Home (index.html) only, on top of site.css. The home is a menu: every section is a
   heading, at most one line, one thing to look at or try, and a link onward.
     #who ............ "Which one are you?": every section below stays hidden until it is
                       answered, then it shrinks to one line with a switch (home.js swaps
                       every [data-idea]/[data-dev] pair)
     .nights/.tl ..... one night on one time axis, two lanes: an AI tool on its own, and
                       ShipItFam, which stops at 3:42 until the reader answers
     .pains .......... the problems, the reader's two leading
     .board .......... what you do in the app: three real screens, the tap marked (.hot)
     .ledger ......... what's in the box: three columns, every doodle visible
   .steps3 and .flow (the Kraken diagram) live in site.css.
   ============================================================ */

#main svg.doodle{width:100%;height:auto}
#main h2{max-width:24ch}

/* ---------- hero ---------- */
.hero{padding:48px 0 72px}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px 64px;align-items:center}
.hero h1{max-width:14ch;font-size:clamp(40px,5.4vw,74px)}
.sub{max-width:50ch;margin-top:20px;font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}


@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.phone--hero{max-width:300px}}

/* ---------- real screenshots ---------- */
.phone{margin:0;background:var(--ink);border:2px solid var(--rule);border-radius:34px;padding:12px;box-shadow:0 28px 70px rgba(0,0,0,.4)}
.phone img{display:block;width:100%;height:auto;aspect-ratio:390/760;object-fit:cover;object-position:top;border-radius:24px}
.phone figcaption{padding:12px 8px 4px;font-size:14px;color:var(--chalk-dim);text-align:center}



/* ---------- overnight, two lanes ----------
   Positions are hours on the 10 pm to 8 am axis, as --at percentages. Lane names sit in a left column so
   the whole comparison fits one screen. */
.nights{padding:56px 0 52px}
.nights-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px}
.nights-head .more{margin-top:0}
.nights-ask{margin-top:10px;font-size:17px;color:var(--chalk-dim)}
.nights-ask q{font-weight:800;font-size:19px;color:var(--chalk)}
.tl{margin-top:28px}
.tl-axis,.lane{display:grid;grid-template-columns:170px minmax(0,1fr);gap:0 28px}
.tl-axis{height:20px;border-bottom:1px solid var(--rule)}
.tl-scale{position:relative;grid-column:2}
.tl-scale span{position:absolute;left:var(--at);transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:12.5px;color:var(--chalk-dim)}
.tl-scale span:first-child{transform:none}
.tl-scale span:last-child{transform:translateX(-100%)}
.lane{padding:18px 0 20px;border-bottom:1px solid var(--rule);align-items:start}
.lane-h{font-size:19px;letter-spacing:-.02em;line-height:1.2;padding-top:0}
.lane--alone .lane-h{color:var(--flag-text)}
.lane--us .lane-h{color:var(--signal)}
.lane-body{min-width:0}
.bar{position:relative;height:8px;background:var(--sea-2);border-radius:4px;margin-top:6px}
.fill{position:absolute;top:0;bottom:0;left:0;border-radius:4px}
.fill--alone{width:97%;background:var(--flag)}
.fill--us{width:57%;background:var(--signal)}
.fill--done{left:57%;width:40%;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.nights.answered .fill--done{transform:scaleX(1)}
.pin{position:absolute;top:50%;left:var(--at);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:3px solid var(--ink)}
.pin--bad{background:var(--flag)}
.pin--ask{background:var(--signal);box-shadow:0 0 0 4px rgba(242,194,48,.3)}
.pin--done{background:var(--sea-2);transition:background .3s .6s}
.nights.answered .pin--done{background:var(--mint)}
.notes{list-style:none;display:grid;grid-template-columns:55% 26% 19%;margin-top:14px}
.notes li{font-size:15px;line-height:1.4}
.notes li:first-child{grid-column:1;max-width:30ch}
.notes li:nth-child(2){grid-column:2;grid-row:1;padding-right:14px}
.notes li.note--end{grid-column:3;grid-row:1;text-align:right}
.notes time{display:block;font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--chalk-dim);margin-bottom:2px}
.lane--alone .notes li:not(:first-child) time{color:var(--flag-text)}
.notes b{display:block;font-size:18px;letter-spacing:-.02em;line-height:1.2;color:var(--flag-text)}
.notes b+span{display:block;margin-top:2px;color:var(--chalk-dim)}
.notes .stamp{font-size:12px;text-transform:uppercase;margin-top:8px}
.notes .stamp[hidden]{display:none}
.note--end .stamp{margin-left:auto}
.stamp.press{animation:press .45s cubic-bezier(.16,1,.3,1)}
@keyframes press{0%{transform:rotate(-3deg) scale(1.6);opacity:0}60%{opacity:1}100%{transform:rotate(-3deg) scale(1)}}
.buzz{padding:10px 12px 12px;background:var(--chalk);color:var(--sea);border-radius:14px;box-shadow:0 14px 32px rgba(0,0,0,.35)}
.buzz-k{font-family:var(--mono);font-weight:700;font-size:12px;color:#6B4E06}
.buzz-q{margin-top:2px;font-weight:800;font-size:15px;line-height:1.3}
.decide{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dbtn{min-height:44px;padding:4px 12px;border:2px solid var(--sea);border-radius:999px;background:transparent;color:var(--sea);font:inherit;font-weight:700;font-size:14px;text-align:left;cursor:pointer;touch-action:manipulation;transition:background .18s,color .18s}
.dbtn:not([aria-pressed="true"]):hover{background:rgba(13,43,51,.1)}
.dbtn[aria-pressed="true"]{background:var(--sea);color:var(--chalk)}
.lane--us .note--end span:first-child{color:var(--chalk-dim)}
.nights.answered .lane--us .note--end span:first-child{color:var(--chalk)}
.nights.answered .lane--us .note--end time{color:var(--mint)}
@media(max-width:900px){
  .tl-axis,.bar{display:none}
  .lane{grid-template-columns:1fr}
  .notes{display:block;margin-top:10px}
  .notes li,.notes li.note--end{max-width:none;margin:0 0 14px;text-align:left}
  .note--end .stamp{margin-left:0}
  .notes time::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--signal);vertical-align:0}
  .lane--alone .notes time::before{background:var(--flag)}
}

/* ---------- sound familiar ----------
   The reader's two problems (.is-feat) lead with their doodles; the other lane's two follow as one-line links. */
.pains{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.pains li{order:2}
.pains li.is-feat{order:1}
.pains a{position:relative;display:flex;flex-direction:column;height:100%;color:var(--sea);text-decoration:none;transition:background .18s}
.pains li.is-feat a{padding:22px 24px 24px;border:2px solid var(--sea);background:#FFF3C4}
.pains li.is-feat a:hover{background:#FFF8DC}
.pain-art{display:none}
.pains li.is-feat .pain-art{display:block;height:150px;margin-bottom:14px}
.pain-art svg{height:100%!important;width:auto!important;max-width:100%}
.pains b{font-size:clamp(19px,1.8vw,23px);letter-spacing:-.02em;line-height:1.25}
.pains a>span:not(.pain-art){margin-top:8px;font-size:16px;line-height:1.45}
.pains li.is-feat a::after{content:"See how \2192";margin-top:auto;padding-top:14px;font-weight:800;font-size:15.5px}
.pains li:not(.is-feat) a{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 0;border-top:1px solid rgba(13,43,51,.28)}
.pains li:not(.is-feat) b{font-size:17px}
.pains li:not(.is-feat) b::after{content:" \2192"}
.pains li:not(.is-feat) a>span:not(.pain-art){margin-top:0;font-size:15px}
.pains li:not(.is-feat) a:hover b{text-decoration:underline;text-underline-offset:4px}
.pains .you{position:absolute;top:12px;right:12px;font-style:normal;font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;background:var(--sea);color:var(--signal);display:none}
.pains li.is-feat.is-you .you{display:block}
@media(max-width:700px){.pains{grid-template-columns:1fr}.pains li.is-feat .pain-art{height:120px}}



/* ---------- what you do in the app ---------- */
.board{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:36px}
.board h3{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:clamp(19px,1.7vw,22px);letter-spacing:-.02em}
.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--signal);color:var(--sea);font-size:16px;font-weight:800;flex:none}
.board p{margin-top:6px;font-size:16px;line-height:1.45;color:var(--chalk-dim);max-width:34ch}
@media(max-width:900px){.board{grid-template-columns:1fr;max-width:380px}}

/* ---------- the Kraken ---------- */
#kraken .lede{max-width:66ch}

/* ---------- what's in the box ---------- */
.ledger{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:28px;border-top:2px solid var(--sea)}
.ledger a{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto 1fr;gap:2px 16px;align-items:start;height:100%;padding:16px 0;border-bottom:1px solid var(--paper-rule);color:var(--sea);text-decoration:none}
.led-art{grid-row:1/3;width:64px}
.ledger b{font-size:18px;letter-spacing:-.02em;line-height:1.25;transition:color .18s}
.ledger b::after{content:" \2192";font-weight:800}
.ledger a>span:last-child{font-size:15px;line-height:1.45;color:#2E4247}
.ledger a:hover b{color:var(--flag-deep)}
@media(max-width:1000px){.ledger{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ledger{grid-template-columns:1fr}}

/* ---------- price ---------- */
.price-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:start}
.price-art{display:block;max-width:260px;margin-top:20px}
@media(max-width:860px){.price-grid{grid-template-columns:1fr}.price-art{max-width:180px}}


/* ---------- close ---------- */
.final .btn{margin-top:22px}
.final-art{display:block;width:220px;color:var(--sea)}
@media(max-width:820px){.final-art{width:150px}}


@media(prefers-reduced-motion:reduce){.pick-btn,.pains a,.fill--done,.pin--done{transition:none;transform:none!important}.stamp.press{animation:none}}