/* ═══════════════════════════════════════════════════════════════
   th-gsx.css — the get-started EXTENSIONS, loaded after th-gs.css on every wizard.

   A separate file on purpose: th-gs.css is re-processed by _thbuild/_gs_retone.js, which
   rewrites everything outside its PAPER-V8 block as "base" and generates paper overrides
   for it. Rules written paper-native here must not be fed back through that machine.

   Contents
     §1  the signup feedback step (DDAI-GS-FEEDBACK-V1) — the star rating
     §2  the products checkout (em · me · lg · bk · bo): plan meta, notes, honeypot
     §3  the post-payment page (/app-install) build card
   ═══════════════════════════════════════════════════════════════ */

/* ── §1 feedback ─────────────────────────────────────────────── */
.th-gs .gsfb{margin-top:.2rem}
.th-gs .gsfb__stars{display:flex;gap:clamp(8px,1.8vw,14px);flex-wrap:wrap}
.th-gs .gsfb__star{appearance:none;-webkit-appearance:none;margin:0;padding:0;cursor:pointer;
  width:clamp(52px,13vw,66px);height:clamp(52px,13vw,66px);border-radius:18px;
  display:grid;place-items:center;background:#fff;border:1px solid var(--line-ink-2);
  color:rgba(4,36,25,.22);transition:transform .3s var(--e-back),color .2s,border-color .2s,background .2s}
.th-gs .gsfb__star svg{width:56%;height:56%;fill:currentColor}
.th-gs .gsfb__star:hover{transform:translateY(-2px)}
.th-gs .gsfb__star.is-on{color:var(--emerald-ink);border-color:var(--emerald-ink);background:rgba(79,216,166,.18)}
.th-gs .gsfb__star:focus-visible{outline:3px solid var(--emerald-ink);outline-offset:3px}
.th-gs .gsfb__word{margin:.9rem 0 1.5rem;min-height:1.4em;font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;
  font-weight:900;font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.02em;color:var(--on-paper)}
.th-gs .gsfb.is-sent .gsfb__word{color:var(--emerald-ink)}
.th-gs .gsfb__why textarea{min-height:110px;resize:vertical}
.th-gs .gsfb.is-low .gsfb__why textarea{border-color:rgba(180,35,24,.5)}
.th-gs .gsfb__err{margin:.9rem 0 0;padding:.75rem 1rem;border-radius:12px;font-size:.92rem;line-height:1.5;
  color:#8A1C1C;background:rgba(180,35,24,.08);border:1px solid rgba(180,35,24,.3)}
.th-gs .gsfb__nav{align-items:center}
.th-gs .gsfb__note{font-size:.84rem;line-height:1.5;color:rgba(4,36,25,.62);max-width:30ch}
@media (max-width:560px){
  .th-gs .gsfb__nav{flex-direction:column-reverse;align-items:stretch;gap:.9rem}
  .th-gs .gsfb__note{max-width:none;text-align:center}
}
@media (prefers-reduced-motion:reduce){.th-gs .gsfb__star{transition:none}.th-gs .gsfb__star:hover{transform:none}}

/* ── §2 the products checkout ────────────────────────────────── */
.th-gs .gshp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.th-gs .spplan__meta{display:flex;flex-direction:column;gap:.25rem;margin:.9rem 0 .2rem;font-size:.9rem;color:var(--paper-soft)}
.th-gs .spplan__meta b{color:var(--on-paper)}
.th-gs .spnote{display:flex;gap:1rem;align-items:flex-start;margin-top:1.4rem;padding:1.1rem 1.2rem;border-radius:18px;
  background:rgba(79,216,166,.12);border:1px solid rgba(11,128,89,.3)}
.th-gs .spnote__ic{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--emerald-ink)}
.th-gs .spnote b{display:block;color:var(--on-paper);margin-bottom:.25rem}
.th-gs .spnote p{margin:0;font-size:.92rem;line-height:1.55;color:var(--paper-soft)}
.th-gs .spacks{display:flex;flex-direction:column;gap:.7rem;margin:1.4rem 0 .4rem}
.th-gs .gsaccept__t small{display:block;margin-top:.3rem;font-size:.86rem;line-height:1.5;color:rgba(4,36,25,.62);font-weight:400}
.th-gs .spresume{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center;margin:0 auto 1.2rem;max-width:880px;
  padding:1rem 1.2rem;border-radius:18px;background:#fff;border:1px solid rgba(11,128,89,.35);
  box-shadow:0 24px 60px -40px rgba(2,36,25,.35);color:var(--on-paper);font-size:.95rem}
.th-gs .spresume span{flex:1 1 260px}
.th-gs .spresume[hidden],.th-gs .gsfb__err[hidden]{display:none !important}

/* ── §3 /app-install ─────────────────────────────────────────── */
.th-gs .spbuild{border-radius:22px;border:1px solid var(--line-ink);background:#fff;padding:clamp(18px,3vw,28px)}
.th-gs .spbuild__rail{display:grid;gap:1px;background:var(--line-ink);border-radius:14px;overflow:hidden;margin-top:1.2rem}
.th-gs .spbuild__s{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;font-size:.95rem;color:rgba(4,36,25,.62)}
.th-gs .spbuild__s i{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:rgba(2,36,25,.16)}
.th-gs .spbuild__s.on{color:var(--on-paper);font-weight:600}
.th-gs .spbuild__s.on i{background:var(--mint);box-shadow:0 0 0 4px rgba(79,216,166,.2)}
.th-gs .spbuild__s.done i{background:var(--emerald-ink)}
.th-gs .spbuild__spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(2,36,25,.15);border-top-color:var(--emerald-ink);
  display:inline-block;vertical-align:-2px;margin-left:6px;animation:spspin .8s linear infinite}
@keyframes spspin{to{transform:rotate(360deg)}}
.th-gs .spbuild__promise{margin-top:1.2rem;padding:1rem 1.2rem;border-radius:16px;background:rgba(79,216,166,.14);border:1px solid rgba(11,128,89,.28)}
.th-gs .spbuild__promise span{display:block;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--emerald-ink)}
.th-gs .spbuild__promise b{display:block;margin-top:.35rem;font-family:'Cabinet','Satoshi',sans-serif;font-weight:900;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.03em;color:var(--on-paper)}
.th-gs .spbuild__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.3rem}
.th-gs .spbuild__note{margin:1rem 0 0;font-size:.9rem;line-height:1.6;color:rgba(4,36,25,.62)}
/* R18 · the sign-in details on /app-install, key shown once (built by th-install.js) */
.th-gs .spcred{margin-top:1.2rem}
.th-gs .spcred__h{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--emerald-ink)}
.th-gs .spcred__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem;padding:.8rem 0;border-bottom:1px solid var(--line-ink)}
.th-gs .spcred__row span{font-size:.9rem;color:rgba(4,36,25,.62)}
.th-gs .spcred__row code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;font-weight:600;letter-spacing:.04em;color:var(--on-paper);word-break:break-all;user-select:all}
.th-gs .spcred__copy{margin-top:.9rem;min-height:44px;padding:0 1.2rem;border-radius:999px;border:1px solid var(--on-paper);background:transparent;color:var(--on-paper);font-family:inherit;font-size:.92rem;font-weight:600;cursor:pointer}
.th-gs .spcred__copy:focus-visible{outline:3px solid var(--emerald-ink);outline-offset:3px}
.th-gs .spcred__warn{margin:.8rem 0 0;font-size:.92rem;line-height:1.55;color:var(--on-paper)}
/* DDAI-PINCHOOSE-V1 2026-09-26 — "Choose your PIN" in the sign-in details (th-install.js) */
.th-gs .spcred__h--pin{margin-top:1.6rem}
.th-gs .spcred__pin{display:grid;gap:.9rem;max-width:26rem;margin-top:.9rem}
.th-gs .spcred__pin .spcred__copy{justify-self:start;margin-top:.2rem}
.th-gs .hide{display:none !important}
@media (prefers-reduced-motion:reduce){.th-gs .spbuild__spin{animation:none}}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   §4 · PHONE — the 12px floor, on the screens the audit had never opened  (2026-09-23)
   Duval: *"every single line of text … must be mobile friendly"*. mobileaudit.js reveals the
   wizard's later steps and /app-install's feedback card, and measured three labels below the
   12px floor th-gs.css sets for every other label on the page. A `small` inside a label is the
   easy one to miss: the label itself is 12.2px and `small` multiplies it down to 10.1px.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.th-gs .gsf__l small{font-size:1em;opacity:.72}
.th-gs .gspay__brand{font-size:.76rem}
.th-gs .spbuild__promise span{font-size:.76rem}
.th-gs .gsfb__note{font-size:.86rem}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   §5 · PHONE, ROUND 2 — the rest of what the revealed pass measured  (2026-09-23)
   PASS B of mobileaudit.js opens every wizard screen the way the page's own JS does and
   measures what is on it. /get-started-v2 came back with 42 findings; these close them. Sizes
   are phone-only where the desktop look matters, and unconditional where the element only
   exists on the small screen. Nothing here moves a layout — every tap fix uses §41.2's trick
   (the box grows, a negative margin gives the row its height back).
   ⛔ NOT FIXED HERE, deliberately: `.dd-sub` (11.5px) and the `.dd-watermark` credit (9.0px,
      97×11) inside the preview. Those belong to the CHAT WIDGET, whose CSS ships in the
      /w/<KEY>.js bundle that every client site loads — changing them is a product release, not
      a page fix. th.css §46.7 scopes the one that hurts a visitor (the 13px input) to our pages.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* 2026-09-27 V12 S4: and on any touch-first device wider than a phone (a tablet, a phone on its side) - th.css 46.15 */
@media (max-width:760px),(hover:none) and (pointer:coarse){
  /* the plan/lock labels the accordions carry: 9.3–9.6px, and they are what says which tier a
     feature belongs to — the single most commercially important word on the screen */
  .th-gs .gstplc__m i,.th-gs .gslock b,.th-gs .gsfeat__t em,.th-gs .gsacc__tier{font-size:.76rem;letter-spacing:.14em}
  /* the agreement's own summary table: PRODUCT · PLAN · SETUP FEE · MONTHLY · BILLING TERM ·
     EFFECTIVE DATE were 9.9px on the screen where somebody signs */
  .th-gs .gscontract__deal span{font-size:.76rem;letter-spacing:.1em}
  .th-gs .gsfx li{font-size:.78rem}
  .th-gs .gsprev__bar em{font-size:.76rem}
  .th-gs .gspal__t{font-size:.78rem;min-height:40px;padding-inline:.7rem}
  /* 38px is not 40, and this is the control that switches the live preview */
  .th-gs .gsseg--prev button{min-height:40px}
  /* the clause links under the agreement were 18px tall */
  .th-gs .gsclause a[href]{display:inline-block;padding:.62rem 0;margin:-.62rem 0}
  /* the range thumb was a 26px box. A 40px thumb on a 4px rail is the native pattern. */
  .th-gs input[type=range].gsrange{min-height:40px}
  .th-gs input[type=range].gsrange::-webkit-slider-thumb{width:28px;height:28px}
  /* iOS zooms the page in on any field under 16px and never zooms back */
  .th-gs .pinput:not(.pinput--code),.th-gs input[type=text],.th-gs input[type=email],
  .th-gs input[type=tel],.th-gs input[type=url],.th-gs input[type=search],.th-gs textarea,
  .th-gs select{font-size:16px}
}

/* ── §6 the design step = the app's Customise bot (DDAI-GS-LOOK-V2, 2026-09-30) ─────────────
   The eight v2 looks as option cards (plan-gated like the app's Look screen) and the v2 preview page in an
   iframe, fitted to the frame by th-gs.js. Locked looks stay visible, dimmed, naming the plan that unlocks them. */
.th-gs .gslook{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@media(max-width:520px){.th-gs .gslook{grid-template-columns:1fr}}
.th-gs .gslook__i{position:relative;padding:.8rem .95rem}
.th-gs .gslook__i.is-locked{opacity:.5;cursor:pointer}
.th-gs .gslook__i[data-lock]::after{content:attr(data-lock);position:absolute;top:.55rem;right:.6rem;
  padding:.12rem .5rem;border-radius:99px;font-size:.72rem;font-weight:600;letter-spacing:.04em;
  color:var(--emerald-ink);border:1px solid rgba(11,128,89,.5)}
.th-gs .gsprev--v2{aspect-ratio:auto;height:600px;max-height:none;background:var(--paper-2)}
.th-gs .gsprev__frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:transparent}
/* phones: the sticky preview keeps the V9 budget (min(46vh,392px), th-gs.css) and sits on paper, not the V9 dark panel —
   the v2 frame is paper, and a dark band round it showed as black corners */
@media(max-width:980px){.th-gs .gsdesign__prev .gsprev--v2{height:min(46vh,392px)}
  .th-gs .gsdesign__prev:has(.gsprev--v2){background:var(--paper);box-shadow:0 14px 16px -14px rgba(4,36,26,.35)}}
/* ── §S21c (2026-10-03, the overhaul's novice walk of the Books signup at 390): a flex <li> made every <strong> its own
   column (one word per line); the trial note's button pushed its text past the card. Spine checkouts only (#spPlans,
   #spTrial) — the chatbot wizard's lists carry .tick spans and keep their flex row. */
.th-gs #spPlans .gsplan__f li{display:block}
.th-gs .spnote>div{min-width:0}
@media(max-width:560px){.th-gs #spTrial .btn{white-space:normal;height:auto;min-height:44px;padding-top:.55rem;padding-bottom:.55rem;border-radius:22px;text-align:left}}