/* Public pages (welcome, login, redesign request) in the product's own look: Inter, ink navy,
   cobalt for actions, mint as a small accent. Loaded after v2.css and v2-public.css, it remaps
   their tokens to the values in app.css so the website and the app read as one product. */

@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --v2-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --v2-canvas:#F5F7FB;--v2-surface:#FFFFFF;--v2-raised:#FFFFFF;--v2-sunken:#EEF2F8;
  --v2-line:#D8E0EC;--v2-line-strong:#B9C4D6;--v2-muted:#475467;--v2-faint:#5E6A7E;--v2-ink:#182230;
  --v2-success:#18794E;--v2-success-soft:#EAF7EF;--v2-warning:#925B08;--v2-warning-soft:#FFF5DE;
  --v2-danger:#B42318;--v2-danger-soft:#FEECEB;--v2-info:#2E4FD1;--v2-info-soft:#EAF0FF;
  --accent:#3659E3;--accent-hover:#2946C2;--accent-soft:#EAF0FF;--on-accent:#FFFFFF;--v2-accent-text:#2E4FD1;
  --pub-mint:#A7E8D5;--pub-mint-ink:#155A4C;--pub-navy:#101A2B;
  --v2-shadow-1:0 1px 2px rgba(16,24,40,.06);
  --v2-shadow-2:0 1px 2px rgba(16,24,40,.05),0 8px 24px -8px rgba(16,24,40,.16);
  --v2-shadow-3:0 2px 4px rgba(16,24,40,.06),0 28px 60px -18px rgba(16,24,40,.32);
}
:root[data-theme="dark"]{
  --v2-canvas:#0D1421;--v2-surface:#151F30;--v2-raised:#1B2940;--v2-sunken:#0A101B;
  --v2-line:#2A3A52;--v2-line-strong:#3A4D6B;--v2-muted:#C2CDDD;--v2-faint:#98A8BF;--v2-ink:#F0F4FA;
  --v2-success:#7DD3A5;--v2-success-soft:#16382C;--v2-warning:#F3CA77;--v2-warning-soft:#3A2D18;
  --v2-danger:#FFAAA1;--v2-danger-soft:#422523;--v2-info:#A5BAFF;--v2-info-soft:#243455;
  --accent:#A5BAFF;--accent-hover:#BED0FF;--accent-soft:#243455;--on-accent:#111A2B;--v2-accent-text:#A5BAFF;
  --pub-mint-ink:#A7E8D5;--pub-navy:#080E18;
}
body.pub,body{font-family:var(--v2-font)}
.pub h1,.pub h2,.pub h3{font-stretch:100%;letter-spacing:-.02em}
.pub-kicker i{background:var(--pub-mint)!important}

/* Hero compare: real screenshots of a sample before/after. */
.v2-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.v2-compare{aspect-ratio:1440/846}
.v2-compare-label--new{background:var(--accent);color:var(--on-accent)}
.pub-device{display:inline-flex;gap:2px;padding:3px;margin:0 0 12px;border-radius:999px;background:var(--v2-sunken);border:1px solid var(--v2-line)}
.pub-device button{border:0;background:none;padding:7px 16px;border-radius:999px;font:600 13px/1 var(--v2-font);color:var(--v2-muted);cursor:pointer}
.pub-device button.is-on{background:var(--v2-surface);color:var(--v2-ink);box-shadow:var(--v2-shadow-1)}
.pub-device button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pub-phones{display:flex;justify-content:center;gap:clamp(20px,5vw,64px);flex-wrap:wrap}
.pub-phones[hidden]{display:none}
.pub-phones figure{margin:0;display:grid;justify-items:center;gap:12px}
.pub-phone{width:min(260px,40vw);aspect-ratio:390/760;border-radius:34px;padding:10px;background:var(--pub-navy);box-shadow:var(--v2-shadow-3)}
.pub-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:26px;display:block}
.pub-phone.is-new{outline:3px solid var(--pub-mint);outline-offset:4px}
.pub-phones figcaption{font-size:14px;color:var(--v2-muted);text-align:center;max-width:240px}
.pub-phones figcaption b{display:block;color:var(--v2-ink)}
@media (max-width:760px){.v2-compare{aspect-ratio:1440/846}}
@media (max-width:520px){.pub-phone{width:42vw;border-radius:22px;padding:6px}.pub-phone img{border-radius:17px}}

/* The dashboard teaser uses the app's own colors. */
.pub-dash-rail span:first-child{background:var(--accent-soft);color:var(--v2-accent-text)}
.pub-dash-row{background:var(--accent-soft)}
.pub-dash-main p mark{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--pub-mint) 85%,transparent) 0)}

/* Sign-in side panel in navy rather than the old green-black. */
.auth-aside{background:var(--pub-navy)!important;color:#F0F4FA}
.auth-mini{background:#151F30!important;border-color:#2A3A52!important}
.auth-mini div{border-bottom-color:#2A3A52!important}
.auth-mini span.v2-avatar{background:#1B2940!important;color:#C2CDDD!important}
.auth-mini small,.auth-mini em,.auth-mini-cap{color:#98A8BF!important}
/* Room for the Desktop/Phone switch above the compare, so the dashboard teaser clears the caption. */
.pub-stage-wrap{padding-bottom:clamp(200px,20vw,290px)}
.pub-stage-wrap:has(.pub-phones:not([hidden])){padding-bottom:clamp(200px,20vw,290px)}
@media (max-width:760px){.pub-stage-wrap{padding-bottom:340px}}
.pub-stage-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pub-stage-top .pub-device{margin:0}
.pub-stage-note{margin:0;font-size:13px;color:var(--v2-muted)}
@media (max-width:640px){.pub-phones{flex-wrap:nowrap;gap:14px}.pub-phones figcaption{font-size:12px}}