/* ============================================================================
   GrowthSanity tool pages: redesign layer (mockup, 22 Oct 2026)
   ----------------------------------------------------------------------------
   Applies the homepage's visual language to the two live tools without
   touching their logic. Everything is scoped under body.rd, loads after the
   tool's own styles and the brand token layer, and only adds wrappers around
   the live markup: every id and class a script reads is unchanged.

   Patterns borrowed from the homepage, and where they land:
     chip with a dark segment ...... hero chip ("Tool 01 · ...")
     tilted sticky notes ........... two hero notes, wide screens only
     hand-drawn underline .......... the italic accent words
     "Sanity Desk" window .......... wraps the whole tool
     dark telemetry tool card ...... results panels (stays dark in light mode)
     seat card + "the fix" box ..... input cards, insights, principles
     gradient member card .......... what the unlock gets you
   ========================================================================== */

/* ---- telemetry tokens: the homepage's dark tool cards stay dark in light
   mode, so these take the table's dark values in both themes ------------- */
:root{
  --gs-tele-bg:#141825; --gs-tele-raise:#1A1D2B; --gs-tele-ink:#EDEFF5; --gs-tele-ink-2:#9AA2B8;
  --gs-tele-rule:rgba(255,255,255,.10); --gs-tele-track:rgba(255,255,255,.12);
  --gs-tele-green:#35BD6B; --gs-tele-indigo:#7D8BDE; --gs-tele-red:#FF7A70;
}
:root[data-theme="dark"]{ --gs-tele-bg:#0E1018; --gs-tele-raise:#141825; }

.rd main.wrap{max-width:72rem}
.rd .dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:1px;transform:rotate(45deg);background:var(--gs-green)}
.rd .dot-i{background:var(--gs-indigo)}
.rd .dot-r{background:var(--gs-red-fill)}

/* ---- hero ---------------------------------------------------------------- */
.rd-hero{position:relative;padding:2.6rem 0 2.4rem;text-align:center}
.rd-chip{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.2rem;padding:4px 14px 4px 4px;border:1px solid var(--gs-rule-2);
  border-radius:999px;background:var(--gs-raised);font-family:var(--gs-ui);font-size:13.5px;font-weight:500;color:var(--gs-ink-2)}
.rd-chip .chip-k{padding:3px 11px;border-radius:999px;background:var(--gs-ink);color:var(--gs-ground);font-family:var(--gs-mono);font-size:11.5px;font-weight:500;letter-spacing:.04em}
.rd .rd-hero h1{margin:0 auto;max-width:19ch;font-family:var(--gs-head);font-weight:700;font-size:clamp(34px,6vw,64px);line-height:1.04;letter-spacing:-0.035em;color:var(--gs-ink);text-wrap:balance}
.rd .rd-hero h1 em{font-family:var(--gs-accent);font-style:italic;font-weight:400;letter-spacing:-0.02em;padding-right:.05em;text-decoration:none;background:none;border:0}
.rd .rd-hero h1 em.paid,.rd .rd-hero h1 em.accent-indigo{color:var(--gs-paid,var(--gs-indigo))}
.rd .rd-hero h1 em.accent-indigo{color:var(--gs-indigo)}
.rd .rd-hero h1 em.organic,.rd .rd-hero h1 em.accent-green{color:var(--gs-green)}
/* hand-drawn underline: a mask, so its colour stays a token in both themes */
.rd em.u{position:relative;display:inline-block}
.rd em.u::after{content:"";position:absolute;left:0;right:-.05em;bottom:-.08em;height:.17em;background:currentColor;opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C42 4 98 2.5 197 6.5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C42 4 98 2.5 197 6.5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.rd .rd-hero .lede,.rd .rd-hero .subhead{margin:1.1rem auto 0;max-width:36rem;font-size:17px;line-height:1.55;color:var(--gs-ink-2);text-wrap:balance}
.rd .rd-hero .positioning{margin:.6rem auto 0;max-width:36rem;font-size:14px;color:var(--gs-ink-3)}
.rd-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.4rem 0 0;padding:0;list-style:none}
.rd-proof li{display:inline-flex;align-items:center;gap:.5rem;padding:5px 12px;border-radius:999px;border:1px solid var(--gs-rule);background:var(--gs-raised);
  font-family:var(--gs-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gs-ink-2)}
.rd-proof li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gs-green)}

/* sticky notes: decorative, tilted, only where there is room beside the headline */
.rd-note{display:none}
@media (min-width:1180px){
  .rd-note{display:block;position:absolute;top:2.2rem;width:15rem;padding:.9rem 1rem 1rem;border-radius:12px;text-align:left;
    background:var(--gs-raised);border:1px solid var(--gs-rule);box-shadow:var(--gs-shadow)}
  .rd-note-l{left:-1rem;transform:rotate(-3deg);border-top:3px solid var(--gs-red-fill)}
  .rd-note-r{right:-1rem;top:6.5rem;transform:rotate(2.5deg);border-left:3px solid var(--gs-green)}
  .rd-note p{margin:0}
  .rd-note-k{display:flex;align-items:center;gap:.55rem;font-family:var(--gs-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gs-ink-3)}
  .rd-note-t{margin-top:.45rem!important;font-family:var(--gs-ui);font-size:16px;font-weight:600;line-height:1.3;color:var(--gs-ink)}
  .rd-note-s{margin-top:.2rem!important;font-family:var(--gs-ui);font-size:13.5px;color:var(--gs-ink-2)}
}

/* ---- the desk: one window around the whole tool -------------------------- */
.rd-desk{margin:0 0 3rem;border-radius:22px;border:1px solid var(--gs-rule);background:var(--gs-surface);box-shadow:var(--gs-shadow);overflow:hidden}
.rd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--gs-rule);background:var(--gs-raised)}
.rd-dots{display:inline-flex;gap:6px;flex:none}
.rd-dots i{width:11px;height:11px;border-radius:50%;background:var(--gs-rule-2)}
.rd-dots i:first-child{background:var(--gs-red-fill)}
.rd-dots i:last-child{background:var(--gs-green)}
.rd-title{font-family:var(--gs-ui);font-size:15px;color:var(--gs-ink-2);white-space:nowrap}
.rd-title b{font-weight:600;color:var(--gs-ink)}
.rd-bar-r{margin-left:auto}
.rd-body{padding:1.1rem 1.1rem 1.4rem}
@media (min-width:760px){.rd-body{padding:1.4rem 1.6rem 1.8rem}}

/* the basis control and the auditor's settings sit in the bar, as compact pills */
.rd .rd-bar .basis{margin:0;flex-direction:row;align-items:center;gap:.7rem}
.rd .rd-bar .basis .label,.rd .rd-settings .metric-label{font-family:var(--gs-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gs-ink-3);white-space:nowrap}
.rd .rd-settings{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:0;padding:.75rem 1.1rem;border-bottom:1px solid var(--gs-rule);background:var(--gs-raised)}
.rd .rd-settings .toggle-row{margin:0;display:flex;align-items:center;gap:.6rem}

/* steps: mono tabs with numbered badges; the current one is an ink pill */
.rd .steps,.rd .tabs{margin:0 0 1.2rem;padding:0;overflow-x:auto;border:0}
.rd .steps > div,.rd .tabs{display:flex;gap:6px;min-width:max-content;border:0}
.rd .steps button,.rd .tabs .tab{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .85rem .45rem .45rem;border:1px solid var(--gs-rule);
  border-radius:999px;background:var(--gs-raised);font-family:var(--gs-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gs-ink-2)}
.rd .steps .n,.rd .tabs .num{display:inline-grid;place-items:center;width:20px;height:20px;margin:0;border-radius:50%;opacity:1;
  background:var(--gs-surface-2);color:var(--gs-ink-2);font-size:10.5px}
.rd .steps button[aria-current="step"],.rd .tabs .tab.active{background:var(--gs-ink);border-color:var(--gs-ink);color:var(--gs-ground)}
.rd .steps button[aria-current="step"] .n,.rd .tabs .tab.active .num{background:var(--gs-ground);color:var(--gs-ink)}
.rd .steps button:disabled,.rd .tabs .tab.locked{opacity:.55}
.rd .steps .dot{display:none}

/* ---- cards: raised, with the seat card's mono header row ----------------- */
.rd .card{border-radius:18px;border:1px solid var(--gs-rule);background:var(--gs-raised);box-shadow:none}
.rd-cardtop{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin:0 0 .9rem;
  font-family:var(--gs-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gs-ink-3)}
.rd-cardtop > span:first-child{display:inline-flex;align-items:center;gap:.6rem;color:var(--gs-ink-2)}
.rd .card-title{font-family:var(--gs-head);font-weight:700;letter-spacing:-0.03em}
.rd .label,.rd .metric-label{font-family:var(--gs-mono);letter-spacing:.12em}
/* mono labels run wider than the live face, so long ones wrap instead of colliding */
.rd .field.nowrap{white-space:normal}
.rd .field .label{letter-spacing:.1em;line-height:1.4}

/* inputs: recessed troughs, as the token table describes surface-2 */
.rd .field input,.rd textarea,.rd input[type="text"],.rd input[type="email"]{background:var(--gs-surface-2);border-color:transparent;border-radius:12px}
.rd .field input:focus,.rd textarea:focus,.rd input[type="text"]:focus,.rd input[type="email"]:focus{background:var(--gs-raised);border-color:var(--gs-rule-2)}

/* buttons: the homepage's gradient pill with an arrow */
.rd main .btn,.rd main .btn-dl{border-radius:999px;border:0;background:var(--gs-cta-gradient);color:var(--gs-on-accent);font-family:var(--gs-ui);font-weight:600}
.rd main .btn::after{content:"\2192";margin-left:.55rem}

/* ---- telemetry: results panels, dark in both themes ---------------------- */
.rd .tele{background:var(--gs-tele-bg);border-color:var(--gs-tele-rule);color:var(--gs-tele-ink);
  --ink:var(--gs-tele-ink); --ink-soft:var(--gs-tele-ink-2); --ink-muted:var(--gs-tele-ink-2); --ink-faint:var(--gs-tele-ink-2);
  --line:var(--gs-tele-rule); --border:var(--gs-tele-rule); --track:var(--gs-tele-track); --surface:var(--gs-tele-raise); --card-bg:var(--gs-tele-bg);
  --paid:var(--gs-tele-indigo); --organic:var(--gs-tele-green); --pos:var(--gs-tele-green); --neg:var(--gs-tele-red);
  --green:var(--gs-tele-green); --green-text:var(--gs-tele-green); --indigo:var(--gs-tele-indigo); --indigo-text:var(--gs-tele-indigo); --red:var(--gs-tele-red);
  --gs-ink:var(--gs-tele-ink); --gs-ink-2:var(--gs-tele-ink-2); --gs-ink-3:var(--gs-tele-ink-2); --gs-rule:var(--gs-tele-rule);
  --gs-green:var(--gs-tele-green); --gs-green-text:var(--gs-tele-green); --gs-indigo:var(--gs-tele-indigo); --gs-red:var(--gs-tele-red); --gs-track:var(--gs-tele-track);
  --gs-paid:var(--gs-tele-indigo); --gs-organic:var(--gs-tele-green); --gs-pos:var(--gs-tele-green); --gs-neg:var(--gs-tele-red)}
.rd .tele .rd-cardtop,.rd .tele .rd-cardtop > span:first-child{color:var(--gs-tele-ink-2)}
.rd .tele .live{display:inline-flex;align-items:center;gap:.45rem;color:var(--gs-tele-ink)}
.rd .tele .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gs-tele-green)}
.rd .tele .card-title{color:var(--gs-tele-ink)}
.rd .tele .stat .v,.rd .tele .metric-value{color:var(--gs-tele-ink)}
.rd .tele table th,.rd .tele table td{border-color:var(--gs-tele-rule)}

/* the derived CPL/CVR row on each input card: a small telemetry strip */
.rd .derived{margin-top:1.2rem;padding:.9rem 1rem;border:0;border-radius:14px;background:var(--gs-tele-bg);
  --ink:var(--gs-tele-ink); --ink-soft:var(--gs-tele-ink-2); --paid:var(--gs-tele-indigo); --organic:var(--gs-tele-green)}
.rd .derived .label{color:var(--gs-tele-ink-2)}

/* the read / context note: the homepage's "the fix" box */
.rd .ctx-note,.rd .headroom-note{border-radius:14px;border:1px solid color-mix(in srgb,var(--gs-green-text) 24%,transparent);
  border-left:3px solid var(--gs-green-text);background:color-mix(in srgb,var(--gs-green-text) 8%,var(--gs-raised))}
.rd .tele .headroom-note{background:color-mix(in srgb,var(--gs-tele-green) 10%,var(--gs-tele-bg));border-color:color-mix(in srgb,var(--gs-tele-green) 30%,transparent);border-left-color:var(--gs-tele-green)}
.rd .ctx-k{font-family:var(--gs-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gs-green-text)}
.rd .ctx-k::before{content:"\2713  "}

/* ---- unlock: the form beside a gradient member card of what you get ------- */
.rd-unlock{display:grid;gap:16px;align-items:stretch}
@media (min-width:1000px){.rd-unlock{grid-template-columns:1.25fr 1fr}}
.rd .rd-unlock .unlock,.rd .rd-unlock .gate{margin:0;max-width:none}
.rd-member{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:1.4rem 1.4rem 1.5rem;border-radius:20px;
  background-image:var(--gs-cta-gradient);color:var(--gs-on-accent);overflow:hidden}
.rd-member p{margin:0}
.rd-member-k{font-family:var(--gs-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.rd-member-t{font-family:var(--gs-accent);font-style:italic;font-size:30px;line-height:1.1;letter-spacing:-0.02em}
.rd-member ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.rd-member li{display:flex;align-items:center;gap:.6rem;font-family:var(--gs-ui);font-size:15px;font-weight:500}
.rd-member li::before{content:"\2713";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:color-mix(in srgb,var(--gs-on-accent) 18%,transparent);font-size:11px}
.rd-member-s{margin-top:auto!important;font-family:var(--gs-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}

/* ---- breakdown -------------------------------------------------------------- */
.rd .insight .tag,.rd .pr .n{font-family:var(--gs-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gs-ink-3)}
.rd .insight .tag::before{content:"";display:inline-block;width:7px;height:7px;margin-right:.6rem;border-radius:1px;transform:rotate(45deg);vertical-align:1px;background:var(--gs-red-fill)}
.rd .insight h3,.rd .pr h4,.rd .check-card h3{font-family:var(--gs-head);font-weight:700;letter-spacing:-0.025em;color:var(--gs-ink)}
.rd .cta-card{border:0;background-image:var(--gs-cta-gradient);color:var(--gs-on-accent);--ink:var(--gs-on-accent);--ink-soft:var(--gs-on-accent)}
.rd .cta-card .card-title,.rd .cta-card h3,.rd .cta-card p{color:var(--gs-on-accent)}
.rd .cta-card .btn{background:var(--gs-raised);color:var(--gs-ink)}

/* locked previews: frosted over the raised card */
.rd .locked .overlay,.rd .locked-overlay{background:var(--gs-overlay)}

/* ---- phones ---------------------------------------------------------------
   The basis control takes its own row under the window bar, and the step
   tabs collapse to numbered badges: only the current step keeps its words,
   so all four fit without a sideways scroll. */
@media (max-width:640px){
  .rd .rd-bar-r{margin-left:0;width:100%}
  .rd .rd-bar .basis{flex-wrap:wrap}
  .rd .seg button{white-space:nowrap}
  .rd .steps button:not([aria-current="step"]),.rd .tabs .tab:not(.active){font-size:0;gap:0;padding:.35rem}
  .rd .steps button:not([aria-current="step"]) .n,.rd .tabs .tab:not(.active) .num{font-size:10.5px}
  .rd .steps .wide,.rd .tabs .wide{display:none}
  .rd .steps button[aria-current="step"] .narrow,.rd .tabs .tab.active .narrow{display:inline}
  .rd .rd-settings{gap:.6rem}
  .rd .rd-settings .toggle-row{flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){.rd-note{transform:none!important}}

/* ============================================================================
   v5 (27 Oct 2026): aligned to the /home-lab system
   ----------------------------------------------------------------------------
   Same tools, same wrappers. These override the v4 look above with the
   homepage's own patterns, copied from Lovable's gs-lab.css:
     eyebrow pill ............. hero chip
     Notes widget ............. the two hero notes (amber edge, white card)
     browser window (.lw) ..... the desk: macOS dots, tab pill, 28px corners
     inbox card ............... input cards, 3px accent bar per channel
     workbench screen ......... telemetry panels, indigo-to-green gradient
   ========================================================================== */

/* hero */
.rd-chip{gap:.5rem;padding:6px 12px;border-color:var(--gs-rule-2);background:color-mix(in srgb,var(--gs-ground) 80%,transparent);
  font:500 11px/1 var(--gs-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gs-ink-2)}
.rd-chip .chip-k{display:inline-flex;align-items:center;gap:.5rem;padding:0;border-radius:0;background:none;color:var(--gs-ink);font:inherit;letter-spacing:inherit}
.rd-chip .chip-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gs-green)}
.rd-chip .chip-k::after{content:"\00B7";color:var(--gs-ink-3)}
.rd .rd-hero h1{font-size:clamp(34px,5vw,56px)}
.rd em.u::after{display:none}

/* notes: the homepage's Notes widget */
@media (min-width:1180px){
  .rd-note,.rd-note-l,.rd-note-r{border:1px solid var(--gs-rule);border-left:3px solid #E5A93C;border-radius:16px;padding:.7rem .9rem .8rem;
    box-shadow:0 18px 40px -24px rgba(17,19,28,.35)}
  .rd-note-k .dot{width:8px;height:8px;border-radius:2px;transform:none;background:#E5A93C}
  .rd-note-t{font:700 14px/1.3 var(--gs-head)}
  .rd-note-s{font:400 12.5px/1.4 var(--gs-ui)}
}

/* the desk: the homepage's browser window */
.rd-desk{border-radius:28px;background:var(--gs-raised);box-shadow:0 30px 60px -40px rgba(27,30,44,.35)}
.rd-bar{padding:10px 16px;background:var(--gs-surface)}
:root[data-theme="dark"] .rd-bar{background:rgba(255,255,255,.04)}
.rd-dots i{width:10px;height:10px}
.rd-dots i:nth-child(1){background:#FF5F56}
.rd-dots i:nth-child(2){background:#FFBD2E}
.rd-dots i:nth-child(3){background:#27C93F}
.rd-title{padding:7px 12px;border:1px solid var(--gs-rule);border-radius:9px;background:var(--gs-raised);font:500 12px/1 var(--gs-ui)}
.rd-title b{font-weight:700}
@media (max-width:640px){.rd-desk{border-radius:20px}}

/* inbox cards: a 3px bar on the left edge, in the channel's colour
   (brand rule: paid = indigo, organic = green), and the meta row in it too */
.rd .rd-body .card:not(.tele){position:relative;overflow:hidden;border-radius:16px}
.rd .rd-body .card:not(.tele)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:color-mix(in srgb,var(--rd-acc,var(--gs-ink)) 24%,transparent)}
.rd .card:has(> .rd-cardtop .dot-i){--rd-acc:var(--gs-indigo)}
.rd .card:has(> .rd-cardtop .dot:not(.dot-i)){--rd-acc:var(--gs-green-text)}
.rd .card:has(> .rd-cardtop .dot)::before{background:var(--rd-acc)}
.rd .card:has(> .rd-cardtop .dot) > .rd-cardtop > span:first-child{color:var(--rd-acc);font-weight:600}

/* telemetry: the homepage workbench screen */
.rd .tele{background:linear-gradient(135deg,#1E2B4D 0%,#112D20 100%);border-color:rgba(255,255,255,.08)}
.rd .tele .stat .v,.rd .tele .metric-value{font-family:var(--gs-ui);font-weight:700;font-variant-numeric:tabular-nums}

/* the unlock's member card: the homepage's 28px corners */
.rd-member{border-radius:28px}