/* ============================================================
   Solar Up · Focus Funnel
   One viewport, no scroll. Two structures: 4 Plate (full-bleed
   photography, the CTA press pans the camera) and 5 Rail (every
   screen on one rail that slides). The page ground and type are the
   site's Cold Porcelain system from theme.css, restated here because
   these pages do not load theme.css or the scroll engine: a landing
   page for paid traffic has to paint in one request.

   Layout is driven by CONTAINER queries on #app, not media queries,
   so the same rules hold whether the page is a phone or a phone-sized
   frame in a review tool.
   ============================================================ */
:root{
  --porcelain:#EEF1F4; --band:#DCE3E9; --panel:#F5F7F9;
  --deep:#0B1E28; --deep-ink:#E8F0F3; --deep-soft:#A2B8C0; --deep-line:rgba(232,240,243,.16);
  --ink:#0D1418; --ink-soft:#4E5A64; --line:#CCD6DE;
  --lime:#8CE838; --lime-ink:#0D1710; --lime-deep:#2A6D18;
  --display:"Sora",system-ui,-apple-system,sans-serif;
  --text:"Satoshi","Instrument Sans",system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);
  --r-field:12px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:2px solid var(--lime-deep);outline-offset:3px}
h1,h2{text-wrap:balance;margin:0}

/* Without a script the funnel cannot advance, so the no-script visitor
   gets the site's full form instead of a dead first screen. */
.nojs{position:absolute;inset:0;z-index:60;display:grid;place-items:center;padding:2rem;background:var(--porcelain);text-align:center}
.nojs a{color:var(--lime-deep);font-weight:600}
html.js .nojs{display:none}

/* ---------- the shell ---------- */
#app{
  position:fixed;inset:0;overflow:hidden;
  background:var(--porcelain);color:var(--ink);
  container-type:inline-size;container-name:app;
  --gutter:clamp(1.25rem,4vw,4rem);
  --bar-h:clamp(4rem,7vw,5.5rem);
  isolation:isolate;
}
.mark{
  position:absolute;left:var(--gutter);top:calc(var(--bar-h)/2);transform:translateY(-50%);
  z-index:40;display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;
  transition:transform 160ms var(--ease-out);
}
.mark:active{transform:translateY(-50%) scale(.97)}
.mark img{width:34px;height:34px;display:block;border-radius:8px}
.mark .mark__word{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:-.045em;line-height:1}
.mark i{font-style:normal;color:var(--lime-deep)}
#app[data-s="plate"] .mark{color:#fff}
#app[data-s="plate"] .mark i{color:var(--lime)}

.progress{position:absolute;left:0;top:0;right:0;height:3px;z-index:41;background:rgba(13,20,24,.08)}
#app[data-s="plate"] .progress{background:rgba(255,255,255,.14)}
.progress i{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(.2);transition:transform 600ms var(--ease-out)}

/* ---------- screens ---------- */
.stage{position:absolute;inset:0;z-index:10}
.screen{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto}
.screen[hidden]{display:none}
.copy{
  padding:calc(var(--bar-h) + 1rem) var(--gutter) 2rem;
  display:flex;flex-direction:column;gap:1.1rem;min-height:0;overflow:hidden auto;
  max-width:min(70ch,100%);scrollbar-width:none;
}
.copy>:first-child{margin-top:auto}
.copy>:last-child{margin-bottom:auto}
.kick{margin:0;font-weight:600;font-size:.8125rem;letter-spacing:.02em;color:var(--ink-soft)}
.copy h1{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02;font-size:clamp(1.9rem,4.3cqw,3.8rem)}
.screen[data-i="0"] h1,.screen[data-i="4"] h1{font-size:clamp(2rem,5.2cqw,4.4rem)}
.screen[data-i="3"] h1{font-size:clamp(1.6rem,3.4cqw,3rem)}
.screen[data-i="1"] .copy,.screen[data-i="2"] .copy,.screen[data-i="3"] .copy{gap:.8rem}
/* Screens one and two ASK. The hero type belongs on the plates that sell,
   which are zero and four; at 3.8rem it costs a whole question row, and the
   copy column scrolls rather than shrinks, so the row it costs is one nobody
   ever sees. Measured with lab/_fitcheck.mjs, not chosen by eye. */
.screen[data-i="1"] h1,.screen[data-i="2"] h1{font-size:clamp(1.5rem,2.9cqw,2.5rem);max-width:24ch}
/* The last 15px. Screen three is the only plate whose content is fixed by the
   answers rather than by us: a longer verdict prints longer lines, and on
   every verdict but the first one the consent line ended up under the band by
   almost exactly one line of leading. The plate has 2rem of dead space at the
   bottom and this is what it is for. */
.screen[data-i="3"] .copy{padding-bottom:1rem}
.copy h1 sup{font-size:.4em;font-weight:600;letter-spacing:0;vertical-align:.9em;margin-left:.1em;color:var(--lime-deep)}
#app[data-s="plate"] .copy h1 sup{color:var(--lime)}
.lede{margin:0;font-size:clamp(1rem,1.5cqw,1.25rem);line-height:1.45;color:var(--ink-soft);max-width:48ch}
.facts{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.45rem;max-width:52ch}
.facts li{padding-left:1.1rem;position:relative;font-size:clamp(.95rem,1.25cqw,1.1rem);line-height:1.4}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--lime)}
.facts b{font-weight:600;color:var(--ink)}
.foot{margin:.2rem 0 0;font-size:.75rem;line-height:1.4;color:var(--ink-soft);max-width:60ch}

/* fields */
.field{display:grid;gap:.6rem;margin-top:.4rem}
.field .q{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.5cqw,1.3rem);letter-spacing:-.02em}
.choices{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));max-width:min(44rem,100%)}
.choice{
  display:flex;align-items:center;gap:.7rem;text-align:left;
  padding:.8rem .9rem;border-radius:var(--r-field);
  background:var(--panel);border:1px solid var(--line);
  transition:transform 160ms var(--ease-out),border-color 160ms ease,background 160ms ease;
}
.choice:active{transform:scale(.98)}
@media (hover:hover){.choice:hover{border-color:var(--ink-soft)}}
.choice[aria-pressed="true"]{border-color:var(--lime-deep);background:#fff;box-shadow:inset 0 0 0 1px var(--lime-deep)}
.choice kbd{
  font:600 .72rem/1 var(--text);letter-spacing:.02em;
  width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:6px;
  background:var(--band);color:var(--ink-soft);flex:0 0 auto;
}
.choice[aria-pressed="true"] kbd{background:var(--lime);color:var(--lime-ink)}
.choice span{display:grid;line-height:1.2}
.choice small{font-size:.78rem;color:var(--ink-soft)}
.inputs{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(9.5rem,100%),1fr));max-width:min(44rem,100%)}
.inputs label{display:grid;gap:.3rem;font-size:.8125rem;font-weight:600;color:var(--ink-soft)}
.inputs input{
  width:100%;padding:.8rem .9rem;border-radius:var(--r-field);
  background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:1rem;
  transition:border-color 160ms ease;
}
.inputs input::placeholder{color:#7A8790}
.inputs input:focus{border-color:var(--lime-deep);outline:0;box-shadow:inset 0 0 0 1px var(--lime-deep)}
.err{margin:0;font-size:.8125rem;color:#A8321F;min-height:1.2em}
.consent{margin:0;font-size:.75rem;line-height:1.4;color:var(--ink-soft);max-width:56ch}
.consent a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
/* Five rows now: the package, the three lines the verdict prints, and the
   territory. At the old .55rem padding that pushed the contact fields under
   the call-to-action band on a 900px viewport, which is the one place on this
   page a visitor cannot afford to miss. Tightened rather than shortened,
   because every one of the five says something the email repeats. */
.readout{list-style:none;margin:0;padding:0;display:grid;gap:.28rem;max-width:56ch}
.readout li{padding:.32rem 0;border-top:1px solid var(--line);font-size:clamp(.88rem,1.1cqw,.98rem);line-height:1.35}
.readout li:first-child{border-top:0;padding-top:0}
.readout b{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
/* What they qualify for whatever the verdict said. Set apart from the read-out
   above it by a rule and a label rather than by more borders: the read-out is
   about this application, and this is about everything the application does
   not change. Small and tight because it sits between the verdict and the
   contact fields and cannot push either off the plate. */
.alsowrap{border-top:1px solid var(--line);padding-top:.55rem;max-width:56ch}
.also__kick{margin:0 0 .3rem;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--ink-soft)}
.also{list-style:none;margin:0;padding:0;display:grid;gap:.22rem}
.also li{padding-left:.85rem;position:relative;font-size:.85rem;line-height:1.32;color:var(--ink-soft)}
.also li::before{content:"";position:absolute;left:0;top:.55em;width:.3rem;height:.3rem;border-radius:50%;background:var(--lime)}
.also b{color:var(--ink);font-weight:600}
#app[data-s="rail"] .screen[data-i="3"] .alsowrap{border-color:var(--deep-line)}
#app[data-s="rail"] .screen[data-i="3"] .also li{color:var(--deep-soft)}
#app[data-s="rail"] .screen[data-i="3"] .also b{color:var(--deep-ink)}
.turnstile{min-height:0}
.turnstile:empty{display:none}
/* the honeypot: off-canvas, never display:none, so a bot that checks
   visibility by computed style still fills it */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* the banner: the CTA is a band, not a button */
.banner{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  padding:0 var(--gutter);min-height:clamp(5.5rem,22cqh,11rem);
  background:var(--lime);color:var(--lime-ink);text-align:left;
  transition:transform 160ms var(--ease-out);overflow:hidden;
}
.banner:active{transform:scale(.995)}
.banner__label{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;font-size:clamp(1.6rem,4.6cqw,4rem)}
.banner__arrow{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,4.2cqw,3.6rem);line-height:1;transition:transform 220ms var(--ease-out)}
@media (hover:hover){.banner:hover .banner__arrow{transform:translateX(.25em)}}
.banner__hint{position:absolute;right:var(--gutter);bottom:.9rem;font-size:.72rem;font-weight:600;letter-spacing:.02em;opacity:.7}
.banner[disabled]{cursor:default;opacity:.85}
.screen[data-final] .banner{display:none}

/* ---------- structure · Plate ---------- */
#plates{display:none;position:absolute;inset:0;z-index:1;background:var(--deep)}
#app[data-s="plate"] #plates{display:block}
#plates img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
#plates img[data-on]{opacity:1}
#plates::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,22,.82) 0%,rgba(6,16,22,.55) 45%,rgba(6,16,22,.15) 100%),linear-gradient(0deg,rgba(6,16,22,.6) 0%,rgba(6,16,22,0) 40%)}
#app[data-s="plate"]{color:#F4F7F8}
#app[data-s="plate"] .lede,#app[data-s="plate"] .foot,#app[data-s="plate"] .kick,#app[data-s="plate"] .consent,#app[data-s="plate"] .inputs label,#app[data-s="plate"] .choice small,#app[data-s="plate"] .also li,#app[data-s="plate"] .also__kick{color:#C9D5DA}
#app[data-s="plate"] .facts b,#app[data-s="plate"] .readout,#app[data-s="plate"] .also b{color:#F4F7F8}
#app[data-s="plate"] .alsowrap{border-color:rgba(255,255,255,.22)}
#app[data-s="plate"] .choice{background:rgba(6,16,22,.5);border-color:rgba(255,255,255,.22);color:#F4F7F8;backdrop-filter:blur(8px)}
#app[data-s="plate"] .choice kbd{background:rgba(255,255,255,.14);color:#F4F7F8}
#app[data-s="plate"] .choice[aria-pressed="true"]{background:rgba(140,232,56,.18);border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
#app[data-s="plate"] .inputs input{background:rgba(6,16,22,.5);border-color:rgba(255,255,255,.22);color:#F4F7F8;backdrop-filter:blur(8px)}
#app[data-s="plate"] .inputs input::placeholder{color:#9FB0B7}
#app[data-s="plate"] .readout li{border-color:rgba(255,255,255,.18)}
#app[data-s="plate"] .err{color:#FFB4A3}
#app[data-s="plate"] .copy{max-width:min(58ch,100%)}
#app[data-s="plate"] .screen[data-i="3"] .copy{max-width:min(78ch,100%)}
#app[data-s="plate"] .copy>:last-child{margin-bottom:0}
#app[data-s="plate"] .banner{min-height:clamp(5.5rem,18cqh,9rem)}

/* ---------- structure · Rail ---------- */
#app[data-s="rail"] .stage{display:flex;flex-direction:row;width:100%;height:100%}
#app[data-s="rail"][data-dir="ltr"] .stage{flex-direction:row-reverse}
#app[data-s="rail"] .screen{position:relative;inset:auto;flex:0 0 100%;height:100%;display:grid}
#app[data-s="rail"] .screen[hidden]{display:grid}
#app[data-s="rail"] .screen[data-i="3"]{background:var(--deep);color:var(--deep-ink)}
#app[data-s="rail"] .screen[data-i="3"] .lede,#app[data-s="rail"] .screen[data-i="3"] .kick,#app[data-s="rail"] .screen[data-i="3"] .foot,#app[data-s="rail"] .screen[data-i="3"] .consent,#app[data-s="rail"] .screen[data-i="3"] .inputs label{color:var(--deep-soft)}
#app[data-s="rail"] .screen[data-i="3"] .inputs input{background:rgba(255,255,255,.06);border-color:var(--deep-line);color:var(--deep-ink)}
#app[data-s="rail"] .screen[data-i="3"] .inputs input::placeholder{color:#8FA3AB}
#app[data-s="rail"] .screen[data-i="3"] .readout li{border-color:var(--deep-line)}
#app[data-s="rail"] .screen[data-i="3"] .err{color:#FFB4A3}
#app[data-s="rail"] .progress{display:none}
.rail{display:none;position:absolute;left:calc(var(--gutter) + 11rem);right:var(--gutter);top:calc(var(--bar-h)/2 - 1px);z-index:41;gap:.4rem}
#app[data-s="rail"] .rail{display:grid;grid-template-columns:repeat(5,1fr)}
.rail i{height:3px;background:rgba(13,20,24,.12);border-radius:2px;overflow:hidden;display:block}
.rail i::after{content:"";display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;transition:transform 500ms var(--ease-out)}
.rail i[data-on]::after{transform:none}
#app[data-s="rail"][data-deep-rail] .rail i{background:rgba(255,255,255,.16)}
#app[data-s="rail"] .copy{padding-left:clamp(2rem,8cqw,8rem)}

/* ---------- phone-width layout ---------- */
@container app (max-width:700px){
  #app{--bar-h:4rem}
  .copy{padding-top:calc(var(--bar-h) + .5rem);gap:.8rem}
  .copy>:last-child{margin-bottom:0}
  .copy h1{font-size:clamp(1.75rem,9cqw,2.4rem)}
  .screen[data-i="3"] h1{font-size:1.5rem}
  .screen[data-i="3"] .kick{display:none}
  .lede{font-size:1rem}
  .facts li{font-size:.95rem}
  .foot{font-size:.7rem}
  .choices{grid-template-columns:1fr;gap:.4rem}
  .choice{padding:.65rem .8rem}
  .inputs{grid-template-columns:1fr;gap:.45rem}
  .inputs input{padding:.7rem .8rem}
  .banner{min-height:clamp(5rem,16cqh,7rem);padding:0 var(--gutter)}
  .banner__label{font-size:clamp(1.5rem,8cqw,2.2rem)}
  .banner__arrow{font-size:1.8rem}
  .banner__hint{display:none}
  .readout li{padding:.45rem 0;font-size:.95rem}
  #plates::after{background:linear-gradient(0deg,rgba(6,16,22,.9) 0%,rgba(6,16,22,.55) 55%,rgba(6,16,22,.2) 100%)}
  #app[data-s="rail"] .copy{padding-left:var(--gutter)}
  .rail{left:calc(var(--gutter) + 8.5rem)}
}

/* ---------- small viewports ----------------------------------------
   The plate promises one screen and no scrolling, and the qualifying
   questions made that promise expensive: measured across twelve real
   viewports with lab/_audit-fit-devices.mjs, plate two ran 145px past the
   fold at 390x844 and plate four 225px. Phones are most of the traffic
   these pages are bought for, so this is the case that matters.

   Three levers, in the order of what they buy. The choice grid keeps TWO
   columns instead of collapsing to one, which is worth about half the
   height of every question. The contact fields do the same. Then the
   vertical rhythm tightens. Nothing is removed: a question that is not on
   the plate is a question nobody answers.

   Keyed to height as well as width, because a 1280x720 laptop has the
   same problem as a phone and none of the same excuses. */
@media (max-width: 30rem), (max-height: 46rem) {
  .choices { grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: .4rem; }
  .choice { padding: .6rem .7rem; gap: .5rem; }
  .choice kbd { width: 1.3rem; height: 1.3rem; }
  .choice small { font-size: .72rem; }
  .inputs { grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); gap: .45rem; }
  .copy { gap: .7rem; padding-bottom: 1rem; }
  .screen[data-i="1"] .copy, .screen[data-i="2"] .copy, .screen[data-i="3"] .copy { gap: .55rem; }
  .q { margin-bottom: .1rem; }
  .facts { gap: .3rem; }
  .facts li { font-size: .9rem; }
  .readout { gap: .2rem; }
  .readout li { padding: .26rem 0; font-size: .84rem; line-height: 1.32; }
  .alsowrap { padding-top: .4rem; }
  .also li { font-size: .78rem; line-height: 1.3; }
  .consent { font-size: .7rem; }
}

/* ---------- the smallest and the shortest ---------------------------
   A second tier for a 360-wide Android and a 720-tall laptop, where the
   first one leaves plate four short by about a hundred pixels. The band is
   the biggest single item left: 22cqh of a short viewport is a lot of lime
   for four words, and it is the one element on the plate that says nothing
   the visitor has not already read on the button before it. */
@media (max-width: 26rem), (max-height: 45rem) {
  .banner { min-height: 4.25rem; }
  .banner__label { font-size: clamp(1.35rem, 6cqw, 2rem); }
  .copy { padding-top: calc(var(--bar-h) + .35rem); }
  .screen[data-i="3"] h1 { font-size: 1.35rem; }
  .readout li { font-size: .8rem; padding: .22rem 0; }
  .also li { font-size: .74rem; }
  .also__kick { font-size: .68rem; }
  .consent { font-size: .66rem; }
  .inputs { grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr)); }
}

@media (prefers-reduced-motion:reduce){
  .banner,.banner__arrow,.choice,.mark,.progress i,.rail i::after{transition-duration:1ms}
}