/* The landing page (index.html), on top of site.css. Colours, fonts and the light/dark pairs all come
   from site.css; this file only lays the page out.
   Order follows what a visitor from an ad needs: what it is and the install button, what to hand it, how it
   works, why it is safe, what it costs, who made it, the questions, what it cannot do, the power-user parts,
   then the button once more. The same button shows up wherever someone is likely to decide.
   The header floats as a rounded bar here; every other page keeps the full-width one.
   The install button goes to the Web Store on every device. html[data-install] is set in the page head:
   "chrome" on a computer with a Chrome-based browser, "other" on a phone, a tablet, Firefox or Safari, where
   the note and "Copy the link" under the hero button show as well (home.js tags those clicks). Without script
   the Chrome face shows. */
:where(.home) p{margin:0}

/* the two faces of the install button */
.alt-only{display:none}
html[data-install="other"] .alt-only{display:inline}
html[data-install="other"] .textlink.alt-only{display:inline-flex}
html[data-install="other"] .desk-only{display:none}

/* hero: centred, with a copper glow and a faint grid behind it, then the demo */
.hero{position:relative;margin-top:calc(var(--head) * -1);padding:calc(var(--head) + 72px) 0 0;text-align:center;overflow:clip}
.hero::before,.hero::after{content:"";position:absolute;inset:0 0 auto;pointer-events:none}
.hero::before{height:820px;background:radial-gradient(52% 58% at 50% 0%,var(--glow),transparent 72%)}
.hero::after{height:640px;opacity:.55;background:linear-gradient(var(--line) 1px,transparent 1px) center top/72px 72px,linear-gradient(90deg,var(--line) 1px,transparent 1px) center top/72px 72px;-webkit-mask-image:radial-gradient(58% 72% at 50% 0%,#000,transparent 78%);mask-image:radial-gradient(58% 72% at 50% 0%,#000,transparent 78%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin:0 auto;font:620 clamp(2.25rem,5.6vw,4.25rem)/1.04 var(--sans);letter-spacing:-.045em}
.hero h1 span{display:block}
.hero h1 .cu{color:var(--cu)}
.hero .sub{margin:24px auto 0;max-width:50ch;text-wrap:balance;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.6}
/* the install button, its promise on it, and what happens when it is pressed */
.getit{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px}
.btn.xl{min-height:60px;padding:0 28px 0 24px;gap:12px;border-radius:14px;font-size:1.1875rem;font-weight:650;box-shadow:0 14px 34px -14px rgba(176,83,40,.75);transition:background-color .15s,transform .15s,box-shadow .15s}
.btn.xl:hover{transform:translateY(-1px);box-shadow:0 18px 38px -14px rgba(176,83,40,.85)}
.btn.xl .i{width:22px;height:22px}
.btn .free{padding-left:14px;border-left:1px solid rgba(255,255,255,.4);font-size:.9375rem;font-weight:550;color:rgba(255,255,255,.92)}
.getit-note{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:46ch;text-wrap:balance;font-size:.9375rem;line-height:1.55;color:var(--faint)}
.getit-note .textlink{min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:.9375rem;color:var(--muted);cursor:pointer}
.facts{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 30px}
.facts li{display:flex;align-items:center;gap:10px;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.stage{position:relative;margin:56px 0 0;text-align:left}
.stage::before{content:"";position:absolute;inset:12% 4% -5%;border-radius:48px;background:var(--glow);filter:blur(56px);z-index:-1}
.win{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:var(--term-bg);box-shadow:0 60px 100px -52px rgba(0,0,0,.7)}
.win-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--term-line);font:400 .875rem/1.4 var(--mono);font-variation-settings:"wdth" 87.5;color:var(--term-muted);min-width:0}
.win-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--term-ps);flex:none;animation:pulse 1.4s ease-in-out 4}
@keyframes pulse{50%{opacity:.3}}
/* while a demo loads: the same shimmer a loading card has, not a black box */
.shim{position:relative;background:#111}
.shim::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(236,233,230,.06) 50%,transparent 70%) -100% 0/60% 100% no-repeat;animation:shimmer 1.6s ease-in-out 3;pointer-events:none}
.shim.ready::before{display:none}
@keyframes shimmer{to{background-position:260% 0}}
video.demo{display:block;width:100%;height:auto;aspect-ratio:16/9;pointer-events:none;background:#111}
/* where it was listed: three badges under the demo, always in one row. They share one height that follows the
   screen (their widths add up to about 11.8 times it), so they fill the row on a phone and stay small on a computer. */
.badges{--gap:clamp(6px,2.4vw,24px);--bh:clamp(20px,calc((100vw - 36px - 2 * var(--gap)) / 12),40px);display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:var(--gap);margin-top:clamp(28px,6vw,44px)}
.badges a{display:inline-flex;flex:0 1 auto;min-width:0;border-radius:clamp(6px,1.2vw,10px)}
.badges img{display:block;height:var(--bh);width:auto;max-width:100%;object-fit:contain}
.chips{list-style:none;margin:0;padding:0}

/* every section after the hero */
.sec{padding:128px 0 0}
.sec h2{margin-top:20px;font:620 clamp(2.125rem,4.4vw,3.5rem)/1.04 var(--sans);letter-spacing:-.04em;max-width:18ch}
.sec .intro{margin-top:18px;font-size:1.1875rem;max-width:58ch}

/* what to hand over: pick a mold on the left, read it on the right */
.pick{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;margin-top:56px}
.pick-list{display:grid;gap:8px;align-content:start}
.pick-list button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 18px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);font:600 1.0625rem/1.35 var(--sans);color:var(--text);transition:border-color .15s,background-color .15s}
.pick-list button .i{margin-left:auto;color:var(--faint);transition:color .15s,transform .15s}
.pick-list button:hover{border-color:var(--line-ui)}
.pick-list button[aria-selected="true"]{border-color:var(--cu);background:var(--tint);box-shadow:inset 3px 0 0 var(--cu)}
.pick-list button[aria-selected="true"] .i{color:var(--cu);transform:translateX(2px)}
.pick-list button:focus-visible{outline:2px solid var(--cu);outline-offset:2px}
.pick-body{padding:36px;border-radius:20px;background:var(--tint);border:1px solid var(--cu-line)}
.pick-body [role="tabpanel"]{display:block}
.pick-body [role="tabpanel"][hidden]{display:none}
html:not(.js) .pick{grid-template-columns:minmax(0,1fr)}
html:not(.js) .pick-list{display:none}
html:not(.js) .pick-body{display:grid;gap:44px}
html:not(.js) .pick-body [role="tabpanel"][hidden]{display:block}
.pick-body p{margin-top:12px;font-size:1.0625rem}
.pick-body p.lbl{margin-top:0;font-size:.875rem}
.pick-body p.lbl:not(:first-child){margin:30px 0 12px}
.pick-body .lbl b{font-weight:600;color:var(--cu)}
.pick-body h3{margin-top:14px;font:600 1.875rem/1.15 var(--sans);letter-spacing:-.03em}
.pick-body .chips{display:grid;gap:8px}
.pick-body .chips li{display:flex;gap:12px;font-size:1rem;line-height:1.5;color:var(--muted)}
.pick-body .chips li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--cu)}
.pick-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:30px}
.pick-act .go{margin-top:0}

/* how it works: four steps, each with the panel as it looks at that point */
.how{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.how li{display:flex;flex-direction:column;border-radius:20px;background:var(--surface);border:1px solid var(--line-2);overflow:hidden;transition:border-color .2s}
.how li:hover{border-color:var(--line-ui)}
.how .shot{position:relative;aspect-ratio:76/68;overflow:hidden;background:var(--term-bg);border-bottom:1px solid var(--line-2)}
.how .shot::after{content:"";position:absolute;inset:auto 0 0;height:26%;background:linear-gradient(transparent,var(--term-bg));pointer-events:none}
.how .shot.low::after{inset:0 0 auto;background:linear-gradient(var(--term-bg),transparent)}
.how .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.how .shot.low img{object-position:50% 100%}
.how .txt{padding:22px 22px 26px}
.how .lbl b{margin-right:8px;font-weight:600;color:var(--cu)}
.how h3{margin-top:14px;font:600 1.3125rem/1.25 var(--sans);letter-spacing:-.02em}
.how .txt p:not(.lbl){margin-top:8px;font-size:1rem}

/* why it is safe: six short cards, each with a tag */
.guard{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.guard li{display:flex;flex-direction:column;padding:24px;border-radius:20px;background:var(--surface);border:1px solid var(--line-2);transition:border-color .2s}
.guard li:hover{border-color:var(--cu-line)}
.guard .chip{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;color:var(--cu);font:500 .875rem/1.4 var(--mono);font-variation-settings:"wdth" 87.5;letter-spacing:.04em;text-transform:uppercase}
.guard h3{margin-top:20px;font:600 1.3125rem/1.25 var(--sans);letter-spacing:-.02em}
.guard li>p:not(.chip){margin-top:8px;font-size:1rem}
/* a button in the middle of the page */
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:32px;padding:28px 32px;border-radius:20px;background:var(--tint);border:1px solid var(--cu-line)}
.band h3{font:620 clamp(1.5rem,2.6vw,1.875rem)/1.2 var(--sans);letter-spacing:-.03em}
.band p{margin-top:4px;font-size:1.0625rem}

/* what it costs */
.plans{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.plans>li{display:flex;flex-direction:column;padding:26px;border-radius:20px;background:var(--surface);border:1px solid var(--line-2)}
.plans>li.start{border-color:var(--cu);background:var(--tint);box-shadow:0 0 0 4px var(--cu-soft)}
.plans .lbl b{font-weight:600;color:var(--cu)}
.plans h3{margin-top:10px;font:620 1.5rem/1.2 var(--sans);letter-spacing:-.025em}
.plans .price{margin-top:12px;font-size:1rem;color:var(--muted)}
.plans .amt{font:620 2.5rem/1 var(--sans);letter-spacing:-.04em;color:var(--text)}
.plans>li>p:not(.lbl):not(.price){margin-top:12px;font-size:1rem}
.plans ul{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.plans ul li{display:flex;gap:10px;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.plans ul li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--ok)}
.plans .btn{margin-top:auto;align-self:flex-start}
.plans>li.start ul{margin-bottom:22px}
.plans-more{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:18px}
.plans-more .go{margin-top:0}
.maker{display:flex;align-items:center;gap:16px;margin-top:56px;padding:18px 22px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface)}
.maker img{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 30%;border:1px solid var(--line-2)}
.maker p{font-size:1rem;color:var(--muted)}
.maker strong{color:var(--text)}

/* the buttons that go to a page: arrows, links */
.go{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:10px;font-weight:600;font-size:1rem}
.go .i{width:14px;height:14px;transition:transform .15s}
.go:hover .i{transform:translateX(3px)}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flow li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--line-2);font-size:1.0625rem;color:var(--text)}
.flow li b{font:600 .875rem/1 var(--mono);color:var(--cu);width:1.5rem}
.term pre i{font-style:normal;color:var(--term-ps);user-select:none}

/* questions: the heading stays beside the list */
.faqgrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
.faqhead{position:sticky;top:96px}
.faqhead h2{max-width:11ch}

/* what it cannot do, said plainly */
.limits{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px}
.limits>div{padding:30px;border-radius:20px;background:var(--surface);border:1px solid var(--line-2)}
.limits h3{font:600 1.375rem/1.25 var(--sans);letter-spacing:-.02em}
.limits ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.limits li{display:flex;gap:12px;font-size:1rem;color:var(--muted)}
.limits li::before{content:"";flex:none;width:8px;height:8px;margin-top:10px;border-radius:50%;background:var(--warn)}
.limits p{margin-top:12px;font-size:1.0625rem}
.limits .go{margin-top:12px}

/* the power-user parts: Claude, and your own computer */
.dev{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px}
.dev>div{padding:30px;border-radius:20px;background:var(--surface);border:1px solid var(--line-2)}
.dev h3{font:600 1.375rem/1.25 var(--sans);letter-spacing:-.02em}
.dev>div>p{margin-top:10px;font-size:1.0625rem}
.dev ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.dev ul li{display:flex;gap:12px;font-size:1rem;color:var(--muted)}
.dev ul li::before{content:"";flex:none;width:8px;height:8px;margin-top:10px;border-radius:50%;background:var(--ok)}
.dev .flow{margin-top:22px}
.dev .term{margin:18px 0 0}
.mcp-note{margin-top:14px;font-size:1rem}

/* the end: a dark panel with the typing box, and what happens next */
.finale{padding:128px 0 112px}
.finale-mark{display:block;--size:72px;margin:0 auto 30px}
.composer{margin:40px auto 0;display:flex;align-items:flex-end;gap:16px;max-width:820px;padding:20px 20px 20px 26px;border-radius:20px;background:rgba(236,233,230,.05);border:1px solid rgba(236,233,230,.2);box-shadow:0 0 0 6px rgba(217,119,87,.13);text-align:left}
.typed{flex:1;min-height:58px;color:var(--term-text);font:400 clamp(1rem,1.8vw,1.25rem)/1.5 var(--mono);font-variation-settings:"wdth" 87.5}
.caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;background:var(--term-ps);vertical-align:-3px;animation:blink 1s steps(1) 5}
@keyframes blink{50%{opacity:0}}
.next{list-style:none;margin:30px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;max-width:960px;text-align:left}
.next li{display:flex;align-items:center;gap:10px;font-size:1rem;color:var(--term-text)}
.next b{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--term-ps);color:var(--term-ps);font:600 .875rem/1 var(--mono)}
.hint{margin:24px auto 0;max-width:62ch;font-size:1rem;color:var(--term-muted)}
.end .hint a{color:#f0a487}

@media (max-width:1100px){
.how,.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){.guard{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
.hero{padding-top:calc(var(--head) + 40px)}
.limits,.pick,.faqgrid,.dev{grid-template-columns:minmax(0,1fr)}
.sec{padding-top:96px}
.pick-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.pick-list button{flex:none;min-height:48px;scroll-snap-align:start}
.pick-list button .i{display:none}
.pick-body{padding:26px 22px}
.pick-body h3{font-size:1.5rem}
.faqgrid{gap:36px}
.faqhead{position:static}
.faqhead h2{max-width:none}
.composer{flex-direction:column;align-items:stretch}
.finale{padding:96px 0 80px}
.band{padding:24px 22px}
}
@media (max-width:620px){
.how,.guard,.plans{grid-template-columns:minmax(0,1fr)}
.facts{flex-direction:column;align-items:center;gap:8px}
.btn.xl{width:100%;padding:0 20px}
.band .btn,.pick-act .btn{width:100%}
.limits>div,.dev>div{padding:24px 20px}
.maker{align-items:flex-start}
.next{flex-direction:column;align-items:flex-start}
}
@media (pointer:coarse),(max-width:900px){.go,.textlink{min-height:48px}}
/* the device asks for no see-through layers */
@media (prefers-reduced-transparency:reduce){.facts li{background:var(--bg)}}
/* forced colours: draw edges the system way, and drop the decorative glow and grid */
@media (forced-colors:active){
.composer,.how li,.guard li,.plans>li,.band,.maker,.pick-body,.pick-list button,.limits>div,.dev>div{border-color:CanvasText}
.hero::before,.hero::after,.stage::before{display:none}
.pick-list button[aria-selected="true"]{outline:2px solid Highlight;outline-offset:-2px}
.btn .free{border-left-color:ButtonText}
}