/* ------------------------------------------------------------------
   SOFReady — the signup + checkout flow's OWN styles.

   Extracted from signup.html (Brief 300) so /signup and /badge render
   the one flow that /signup-flow.js owns. Include on any page that
   mounts the flow:

     <link rel="stylesheet" href="/signup-flow.css">

   Every rule is scoped under .sofr-flow, the class each mount carries,
   so none of this leaks into the page around it and the page's own
   styles can't accidentally restyle the money path.

   THEMING. The flow reads the page's palette through the same custom
   properties /signup has always used (--olive, --black, --surface,
   --border, ...), inherited from wherever the page sets them. A page
   that wants the flow in different colors redeclares them ON ITS
   MOUNTS (see badge.html) and touches nothing here. The two literals
   that used to be hardcoded olive — the CTA hover and the "best
   value" chip's ink — are tokens with the old values as defaults, and
   the olive-tinted rgba() fills became color-mix() on var(--olive) so
   they re-tint with the accent automatically.

   PRICES LIVE IN /signup-flow.js (the plan cards and PLAN_COPY), not
   here. A price change edits that one file.
------------------------------------------------------------------ */

.sofr-flow {
  --flow-accent-hover: #d8bb82;
  --flow-accent-ink: #101307;
}

/* ---------- error banner ---------- */
.sofr-flow .err-msg{display:none;border-left:3px solid var(--red);background:rgba(192,57,43,0.08);padding:0.85rem 1rem;margin-bottom:1.25rem;font-size:14px;color:var(--text);line-height:1.6;}
.sofr-flow .err-msg.show{display:block;}
.sofr-flow .err-msg a{color:var(--olive);}

/* ---------- the account card ---------- */
.sofr-flow .card{border:0.5px solid var(--border);background:var(--surface);padding:1.75rem 1.5rem;}
.sofr-flow .field{margin-bottom:1.15rem;}
.sofr-flow label{display:block;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--olive);margin-bottom:0.5rem;}
.sofr-flow input{width:100%;background:var(--black);border:0.5px solid var(--border);color:var(--text);font-family:'Barlow',sans-serif;font-size:16px;font-weight:300;padding:0.9rem 1rem;outline:none;transition:border-color 0.2s;-webkit-appearance:none;border-radius:0;}
.sofr-flow input:focus{border-color:var(--olive);}
.sofr-flow input::placeholder{color:var(--text-dim);}
.sofr-flow input[aria-invalid="true"]{border-color:var(--red);}
.sofr-flow .hint{font-size:12px;color:var(--text-dim);margin-top:0.4rem;line-height:1.5;}
.sofr-flow .fmsg{display:none;font-size:12.5px;line-height:1.5;margin-top:0.45rem;}
.sofr-flow .fmsg.show{display:block;}
.sofr-flow .fmsg.bad{color:#E08C7F;}
.sofr-flow .fmsg.ok{color:var(--green);}
.sofr-flow .fmsg button{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--olive);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.sofr-flow .pwbar{display:flex;gap:4px;margin-top:0.5rem;}
.sofr-flow .pwbar i{flex:1;height:3px;background:color-mix(in srgb, var(--olive) 14%, transparent);transition:background 0.25s;}
.sofr-flow .pwbar.s1 i:nth-child(1){background:#C0392B;}
.sofr-flow .pwbar.s2 i:nth-child(-n+2){background:#C8873E;}
.sofr-flow .pwbar.s3 i:nth-child(-n+3){background:var(--olive);}
.sofr-flow .pwbar.s4 i{background:var(--green);}
.sofr-flow .pw-wrap{position:relative;}
.sofr-flow .pw-toggle{position:absolute;right:0;top:0;height:100%;padding:0 0.9rem;background:none;border:none;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-dim);}
.sofr-flow .pw-toggle:hover{color:var(--olive);}

/* ---------- zero-today line + plan picker + the two CTAs ---------- */
.sofr-flow .zero-today{font-family:'Teko',sans-serif;font-size:clamp(22px,5.4vw,28px);font-weight:600;
  letter-spacing:.03em;color:var(--olive);text-align:center;margin:1.6rem 0 .9rem;line-height:1.25}
.sofr-flow .plan-pick{margin:4px 0 16px}
.sofr-flow .plan-pick-lbl{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.sofr-flow .plan-row{display:grid;grid-template-columns:1fr;gap:8px;align-items:stretch}
@media(min-width:440px){.sofr-flow .plan-row{grid-template-columns:repeat(3,1fr)}}
.sofr-flow .pbtn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px;padding:14px 10px;height:100%;min-height:118px;background:transparent;border:1px solid var(--line,#34332F);border-radius:3px;cursor:pointer;color:inherit;font-family:inherit}
@media(min-width:440px){.sofr-flow .pbtn{display:block;text-align:center;padding:12px 8px}}
.sofr-flow .pbtn:hover{border-color:var(--text-muted)}
.sofr-flow .pbtn.on{border-color:var(--olive);background:color-mix(in srgb, var(--olive) 8%, transparent)}
.sofr-flow .pbtn b{font-family:'Teko',sans-serif;font-size:24px;font-weight:600;line-height:1;color:var(--text)}
.sofr-flow .pbtn span{display:block;font-size:12.5px;color:var(--text-muted)}
@media(min-width:440px){.sofr-flow .pbtn span{margin-top:3px}}
.sofr-flow .pbtn.on b{color:var(--olive)}
.sofr-flow .pname{display:block;font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.sofr-flow .pbtn.on .pname{color:var(--olive)}
.sofr-flow .pbtn .pthen{font-size:12.5px;color:var(--text-muted);line-height:1.35}
/* Per-month equivalent and the saving. Monthly deliberately has
   neither: it IS the per-month price and there is no saving to claim,
   and inventing a line for symmetry would be the card lying to look
   tidy. Grid items stretch, so the shorter card still matches height. */
.sofr-flow .pbtn .peq{font-size:11.5px;color:var(--text-muted);letter-spacing:.01em;margin-top:2px}
.sofr-flow .pbtn .pbonus{font-size:11.5px;color:var(--olive);font-weight:500;margin-top:2px}
/* Scoped under .pbtn deliberately. `.pbtn span` is more specific than a
   bare `.ptag`, so without the prefix the generic span rule won and the
   tag rendered muted grey on a solid accent chip. */
.sofr-flow .pbtn .ptag{background:var(--olive);color:var(--flow-accent-ink);font-family:'Barlow Condensed',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px;margin-bottom:6px;line-height:1}
@media(min-width:460px){.sofr-flow .pbtn .ptag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  margin-bottom:0}}

.sofr-flow .btn{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--black);background:var(--olive);border:none;padding:1.05rem 2rem;cursor:pointer;transition:background 0.2s;width:100%;margin-top:0.4rem;}
.sofr-flow .btn:hover{background:var(--flow-accent-hover);}
.sofr-flow .btn:disabled{opacity:0.45;cursor:not-allowed;}

.sofr-flow .btn-fine{font-size:13px;color:var(--text-muted);text-align:center;margin:10px 0 0;line-height:1.55}
.sofr-flow .btn-fine.alt{margin-bottom:0}
.sofr-flow .btn-fine a{color:var(--olive)}
/* The implied-consent line is fine print, same as .btn-fine. Without
   this it inherited body type and the default link colour and shouted
   louder than the CTA it sits under. */
.sofr-flow .implied{font-size:12px;color:var(--text-dim,var(--text-muted));text-align:center;
  margin:8px 0 0;line-height:1.5;font-family:'Barlow',sans-serif;font-weight:300;
  letter-spacing:normal;text-transform:none;opacity:.85}
.sofr-flow .implied a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
.sofr-flow .implied a:hover{color:var(--olive)}

.sofr-flow .btn-alt{display:block;width:100%;margin:20px 0 0;background:transparent;
  border:1px solid var(--line,#34332F);border-radius:3px;color:var(--text);
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:13px;cursor:pointer}
.sofr-flow .btn-alt:hover:not(:disabled){border-color:var(--text-muted)}
.sofr-flow .btn-alt:disabled{opacity:.45;cursor:not-allowed}
.sofr-flow .btn-alt.as-link{background:none;border:none;padding:.35rem 0;margin-top:.5rem;
  width:auto;display:block;font-family:'Barlow',sans-serif;font-size:13px;font-weight:300;
  letter-spacing:normal;text-transform:none;color:var(--text-muted);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:0}
.sofr-flow .btn-alt.as-link:hover:not([disabled]){color:var(--text)}
.sofr-flow .btn-alt.as-link[disabled]{opacity:.45;cursor:default}

/* ---------- embedded checkout view ---------- */
.sofr-flow #pay-view{display:none}
.sofr-flow #pay-view.show{display:block}
.sofr-flow .pay-wrap{max-width:620px;margin:0 auto;padding:34px 1.5rem 40px}
.sofr-flow .pay-kicker{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--olive);margin:0 0 10px;text-align:center}
.sofr-flow .pay-h{font-family:'Teko',sans-serif;font-size:clamp(32px,8vw,46px);font-weight:600;
  text-transform:uppercase;line-height:1;margin:0;text-align:center;color:var(--text)}
.sofr-flow .pay-h .accent{color:var(--olive)}
.sofr-flow .pay-sub{text-align:center;color:var(--text-muted);font-size:15.5px;margin:12px 0 22px}
.sofr-flow .pay-box{border:1px solid var(--line,#34332F);border-radius:4px;padding:14px;background:rgba(255,255,255,.015)}
.sofr-flow #signup-checkout{min-height:300px}
.sofr-flow .pay-loading{text-align:center;color:var(--text-muted);font-size:14.5px;padding:40px 0;margin:0}
.sofr-flow .pay-note{text-align:center;font-size:12.5px;color:var(--text-muted);margin:14px 0 0}
.sofr-flow .pay-skip{display:block;margin:18px auto 0;background:none;border:none;
  color:var(--text-muted);font-family:inherit;font-size:13.5px;text-decoration:underline;cursor:pointer}
.sofr-flow .pay-skip:hover{color:var(--text)}

/* "Signed in as x — use a different account". Shown on the checkout
   and done views once a resumed or reused session is driving them, so
   a shared device never becomes a trap. Deliberately quiet: it is an
   escape hatch, not an offer. */
.sofr-flow .acct-swap{text-align:center;font-size:12.5px;color:var(--text-muted);
  margin:22px 0 0}
.sofr-flow .acct-swap b{color:var(--text);font-weight:600}
.sofr-flow .acct-swap-btn{background:none;border:none;padding:0;
  color:var(--text-muted);font-family:inherit;font-size:12.5px;
  text-decoration:underline;cursor:pointer}
.sofr-flow .acct-swap-btn:hover{color:var(--text)}

/* ---------- the "You're in" screen ---------- */
.sofr-flow .done{display:none;}
.sofr-flow .done.show{display:block;}
.sofr-flow .done-mark{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.25em;text-transform:uppercase;color:var(--green);margin-bottom:0.9rem;}
/* The done view's own heading and lede, so the flow does not depend on
   whatever h1 the host page styles for its hero. Values are /signup's. */
.sofr-flow .done h1{font-family:'Teko',sans-serif;font-size:clamp(40px,9vw,56px);font-weight:700;line-height:0.95;letter-spacing:0.02em;text-transform:uppercase;color:var(--text);margin:0 0 0.8rem;}
.sofr-flow .done h1 .accent{color:var(--olive);}
.sofr-flow .done .lede{font-size:15px;color:var(--text-muted);line-height:1.7;margin-bottom:2rem;}
.sofr-flow .steps{border:0.5px solid var(--border);background:var(--surface);padding:1.5rem;margin:1.5rem 0;}
.sofr-flow .step{display:flex;gap:14px;padding:0.85rem 0;border-bottom:0.5px solid var(--border);}
.sofr-flow .step:last-child{border-bottom:none;padding-bottom:0;}
.sofr-flow .step:first-child{padding-top:0;}
.sofr-flow .step-n{font-family:'Teko',sans-serif;font-size:22px;line-height:1;color:var(--olive);min-width:20px;}
.sofr-flow .step-t{font-size:14px;color:var(--text);line-height:1.6;}
.sofr-flow .step-t strong{font-weight:600;}
.sofr-flow .step-t code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--olive);word-break:break-all;}
/* Statement descriptor. Small but visible, and on every surface a
   customer might check after paying: Managed Payments makes Link the
   merchant of record, so the charge reads LINK.COM* and an
   unrecognised line item is what a chargeback starts as. */
.sofr-flow .stmt{font-size:12px;color:var(--text-muted);margin:12px 0 0;
  padding-top:10px;border-top:1px solid var(--line,#34332F)}
.sofr-flow .stmt b{color:var(--text);font-weight:600}

.sofr-flow .stores{display:flex;flex-direction:column;gap:12px;margin-top:1.5rem;}
.sofr-flow .store-btn{display:flex;align-items:center;gap:14px;padding:15px 22px;text-decoration:none;border:1px solid var(--olive);background:color-mix(in srgb, var(--olive) 6%, transparent);transition:background 0.2s;}
.sofr-flow .store-btn:hover{background:color-mix(in srgb, var(--olive) 14%, transparent);}
.sofr-flow .store-icon{width:26px;height:26px;fill:var(--olive);flex-shrink:0;}
.sofr-flow .store-txt{display:flex;flex-direction:column;line-height:1.15;}
.sofr-flow .store-line1{font-size:10px;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
.sofr-flow .store-line2{font-family:'Teko',sans-serif;font-size:20px;font-weight:600;letter-spacing:0.04em;color:var(--text);}

/* ---------- partner offer on the success screen ---------- */
.sofr-flow .tg-offer{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--border);text-align:left}
.sofr-flow .tg-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.sofr-flow .tg-head img{width:56px;height:auto;flex-shrink:0;opacity:.92}
.sofr-flow .tg-k{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--olive);margin:0 0 .25rem}
.sofr-flow .tg-h{font-family:'Teko',sans-serif;font-size:26px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;line-height:1.05;margin:0;color:var(--text)}
.sofr-flow .tg-p{font-size:14.5px;line-height:1.7;color:var(--text-muted);margin:0 0 1rem}
.sofr-flow .tg-p strong{color:var(--text);font-weight:500}
.sofr-flow .tg-list{list-style:none;margin:0 0 1.35rem;padding:0}
.sofr-flow .tg-list li{font-size:14px;color:var(--text-muted);line-height:1.6;padding-left:1.2rem;
  position:relative;margin-bottom:.5rem}
.sofr-flow .tg-list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--olive)}
.sofr-flow .tg-list strong{color:var(--text);font-weight:500}
.sofr-flow .tg-cta{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text);border:1px solid var(--border-strong);
  padding:.9rem 1.6rem;text-decoration:none}
.sofr-flow .tg-cta:hover{color:var(--olive);border-color:var(--olive)}
.sofr-flow .tg-disc{font-size:12px;color:var(--text-dim);line-height:1.65;margin:.9rem 0 0}
@media(max-width:520px){.sofr-flow .tg-cta{display:block;text-align:center}.sofr-flow .tg-h{font-size:23px}}