/* ==========================================================================
   NEW WEBSITE THEME (YELLOW) — shared theme layer
   Source of truth: "SellerApp Home Page New Color Palette.html".
   Values are lifted verbatim from that page. Link this file LAST in <head>
   on every website page so these tokens win over legacy page tokens.
   Reference page: "New Website Theme (Yellow).dc.html".
   Typography standard (52px headings, 16px text links): ds/typography.css.
   ========================================================================== */
@import url("typography.css");
@import url("layout.css");
@import url("mobile.css");

/* ---------- 1. Palette + derived constants (theme-independent) ---------- */
:root{
  --pal-blue:#1F44FF;        /* Full Spectrum Blue — primary CTA, links, active   */
  --pal-vanilla:#F8EFA9;     /* Vanilla Custard — soft accents, highlights         */
  --pal-golden:#E3CA67;      /* Golden Yellow — secondary accent, warm callouts    */
  --pal-ivory:#FFFDEC;       /* Ivory — featured sections only                     */
  --pal-light:#FAFAFA;       /* Light Grey — main website canvas                   */
  --pal-white:#FFFFFF;       /* White — cards, tables, panels, product UI          */
  --pal-slate-green:#394F49; /* Dark Slate Grey — secondary text, success          */
  --pal-sky:#C9D6EA;         /* Pale Sky — soft blue surfaces, borders             */
  --pal-slate:#6D708D;       /* Slate Grey — metadata, muted labels                */
  --pal-amethyst:#10092F;    /* Dark Amethyst — dark sections, hero/footer on dark */
  --pal-indigo:#1B1B36;      /* Space Indigo — headings, dark surfaces, nav        */
  --pal-jet:#252C3C;         /* Jet Black — deepest neutral, body copy             */

  --color-primary:var(--pal-blue);
  --color-primary-hover:color-mix(in oklab,var(--pal-blue) 82%,var(--pal-amethyst));
  --color-primary-soft:color-mix(in oklab,var(--pal-sky) 45%,var(--pal-light));
  --color-accent-yellow:var(--pal-golden);
  --color-accent-warm:var(--pal-vanilla);
  --color-surface-light:var(--pal-light);
  --color-surface-product:var(--pal-white);
  --color-surface-feature:var(--pal-ivory);
  --color-surface-subtle:color-mix(in oklab,var(--pal-sky) 14%,var(--pal-light));
  --color-surface-blue:color-mix(in oklab,var(--pal-sky) 45%,var(--pal-light));
  --color-surface-warm:color-mix(in oklab,var(--pal-vanilla) 40%,var(--pal-light));
  --color-surface-dark:var(--pal-amethyst);
  --color-surface-dark-secondary:var(--pal-indigo);
  --color-surface-deepest:var(--pal-jet);
  --color-text-primary:var(--pal-indigo);
  --color-text-secondary:var(--pal-slate-green);
  --color-text-muted:var(--pal-slate);
  --color-text-on-dark:var(--pal-white);
  --color-text-on-dark-muted:var(--pal-sky);
  --color-border:color-mix(in oklab,var(--pal-sky) 55%,var(--pal-light));
  --color-border-strong:var(--pal-sky);
  --color-border-brand:color-mix(in oklab,var(--pal-blue) 16%,var(--pal-light));
  --color-border-brand-strong:color-mix(in oklab,var(--pal-blue) 30%,var(--pal-light));
  --color-border-dark:rgba(201,214,234,.14);
  --color-success:var(--pal-slate-green);
  --color-warning:var(--pal-golden);
  --color-highlight:var(--pal-golden);
  --color-shadow:rgba(16,9,47,.18);
  --color-glow:rgba(31,68,255,.28);
  /* GAP: no approved error/danger colour — legacy reds are left in place and flagged. */
}

/* ---------- 2. Semantic tokens — light ---------- */
:root{
  color-scheme:light;
  --bg:var(--color-surface-light);
  --bg-2:#FAFAFA; /* shared secondary/grey section surface */
  --surface-elevated:var(--color-surface-product);
  --surface-brand:var(--color-surface-blue);
  --surface-feature:var(--color-surface-feature);
  --input-bg:var(--color-surface-product);
  --nav-bg:rgba(246,246,246,0.92);
  --utility-bg:var(--color-surface-dark);
  --utility-fg:var(--color-text-on-dark-muted);
  --footer-bg:var(--color-surface-dark);
  --footer-card:var(--color-surface-dark-secondary);
  --footer-border:var(--color-border-dark);
  --pill-bg:rgba(255,255,255,0.72);
  --pill-border:rgba(255,255,255,0.9);

  --text:var(--color-text-primary);
  --text-2:var(--pal-jet);
  --text-muted:var(--color-text-secondary);
  --text-subtle:var(--color-text-muted);
  --text-disabled:var(--pal-slate);

  --border:var(--color-border);
  --border-strong:var(--color-border-strong);
  --border-brand:var(--color-border-brand);
  --border-brand-strong:var(--color-border-brand-strong);

  --brand:var(--color-primary);
  --brand-hover:var(--color-primary-hover);
  --btn-primary-bg:var(--color-primary);
  --btn-primary-bg-hover:var(--color-primary-hover);
  --btn-primary-fg:var(--color-text-on-dark);
  --btn-ghost-bg:var(--color-surface-product);
  --btn-ghost-border:var(--color-border-strong);
  --hover:var(--color-surface-blue);
  --focus-ring:rgba(31,68,255,0.55);

  --grid:rgba(37,44,60,0.027);
  --grid-size:40px;
  --hero-orb-opacity:.22;
  --three-c1:var(--pal-blue);
  --three-c2:var(--pal-sky);
  --three-c3:var(--pal-indigo);
  --three-c4:var(--pal-golden);
  --screenshot-filter:none;
  --brand-grad:linear-gradient(98.3deg,var(--pal-blue) 0%,color-mix(in oklab,var(--pal-blue) 70%,var(--pal-amethyst)) 60%,var(--pal-indigo) 100%);

  --good:var(--color-success);
  --bad:var(--pal-jet);          /* source value — see error gap above */
  --warn:var(--color-warning);

  --shadow-nav:0 6px 22.5px -13.5px rgba(27,27,54,0.25);
  --shadow-btn:0 1.5px 6px rgba(27,27,54,0.06);
  --shadow-cta:0 .75px 1.5px rgba(31,68,255,0.3),0 7.5px 19.5px -6px rgba(31,68,255,0.55);
  --shadow-card:0 4px 2px color-mix(in oklab,#FFFFFF 70%,#C9D6EA);
  --shadow-float:0 18px 40px -18px rgba(16,9,47,0.28);
  --shadow-mock:0 40px 90px -40px rgba(16,9,47,0.35);
  --shadow-shot:0 30px 70px -40px rgba(16,9,47,0.3);
  --shadow-form-card:0 2px 6px rgba(24,32,68,0.06),0 10px 30px rgba(24,32,68,0.10); /* outer form card only (Form / Standard) */

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Plus Jakarta Sans",system-ui,sans-serif;
  --container:1240px;
  --gutter:100px;
  --radius-pill:999px;--radius-card:16px;--radius-control:8px;--radius-tile:15px;
  --m-fast:200ms;--m-std:340ms;--m-rev:720ms;--m-big:900ms;
  --e-out:cubic-bezier(.22,.61,.36,1);--e-std:cubic-bezier(.4,0,.2,1);

  --surface:var(--surface-elevated);
  --surface-soft:var(--bg-2);
  --surface-muted:var(--hover);
  --surface-dark:var(--utility-bg);
  --surface-darker:var(--footer-bg);
  --surface-dark-card:var(--footer-card);
  --border-dark:var(--footer-border);
  --fg-1:var(--text);
  --fg-2:var(--text-2);
  --fg-3:var(--text-muted);
  --fg-4:var(--text-subtle);
  --fg-on-dark:var(--utility-fg);
  --brand-ink:var(--text);
}

/* ---------- 3. Semantic tokens — dark (palette values only) ---------- */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--pal-amethyst);
  --bg-2:var(--pal-indigo);
  --surface-elevated:var(--pal-jet);
  --surface-brand:var(--pal-jet);
  --surface-feature:var(--pal-indigo);
  --input-bg:var(--pal-indigo);
  --nav-bg:var(--pal-indigo);
  --utility-bg:var(--pal-indigo);
  --utility-fg:var(--pal-sky);
  --footer-bg:var(--pal-amethyst);
  --footer-card:var(--pal-indigo);
  --footer-border:var(--pal-jet);
  --pill-bg:var(--pal-jet);
  --pill-border:var(--pal-slate);
  --text:var(--pal-white);
  --text-2:var(--pal-sky);
  --text-muted:var(--pal-sky);
  --text-subtle:var(--pal-sky);
  --text-disabled:var(--pal-slate);
  --border:var(--pal-jet);
  --border-strong:var(--pal-slate);
  --border-brand:var(--pal-blue);
  --border-brand-strong:var(--pal-blue);
  --brand:var(--pal-sky);
  --brand-hover:var(--pal-white);
  --btn-primary-bg:var(--pal-blue);
  --btn-primary-bg-hover:var(--pal-blue);
  --btn-primary-fg:var(--pal-white);
  --btn-ghost-bg:var(--pal-jet);
  --btn-ghost-border:var(--pal-slate);
  --hover:var(--pal-jet);
  --focus-ring:var(--pal-sky);
  --grid:var(--pal-indigo);
  --hero-orb-opacity:0;
  --three-c1:var(--pal-blue);
  --three-c2:var(--pal-sky);
  --three-c3:var(--pal-sky);
  --three-c4:var(--pal-golden);
  --screenshot-filter:none;
  --brand-grad:linear-gradient(98.3deg,var(--pal-blue) 0%,var(--pal-sky) 100%);
  --good:var(--pal-sky);
  --bad:var(--pal-golden);
  --warn:var(--pal-golden);
  --shadow-nav:0 1px 0 var(--pal-jet);
  --shadow-btn:none;
  --shadow-cta:none;
  --shadow-card:0 0 0 1px var(--pal-jet);
  --shadow-float:0 0 0 1px var(--pal-jet),0 18px 40px -18px var(--pal-amethyst);
  --shadow-mock:0 0 0 1px var(--pal-jet),0 40px 90px -40px var(--pal-amethyst);
  --shadow-shot:0 0 0 1px var(--pal-jet),0 30px 70px -36px var(--pal-amethyst);
  --shadow-form-card:0 2px 6px rgba(0,0,0,0.28),0 10px 30px rgba(0,0,0,0.34);
}

/* ---------- 4. Shared navbar tokens (components/site-navbar.js) ---------- */
.site-header,.site-mobile-nav,.site-nav-backdrop{
  --sn-brand:color-mix(in oklab,#C9D6EA 10%,#1F44FF);
  --sn-brand-hover:color-mix(in oklab,#1F44FF 85%,#1B1B36);
  --sn-nav-bg:rgba(255,255,255,0.92);
  --sn-surface:#FFFFFF;
  --sn-surface-brand:color-mix(in oklab,#FFFFFF 70%,#C9D6EA);
  --sn-hover:color-mix(in oklab,#FFFFFF 85%,#C9D6EA);
  --sn-bg:#FAFAFA;
  --sn-bg-2:color-mix(in oklab,#FAFAFA 95%,#C9D6EA);
  --sn-border:color-mix(in oklab,#FFFFFF 50%,#C9D6EA);
  --sn-border-strong:color-mix(in oklab,#FFFFFF 10%,#C9D6EA);
  --sn-border-brand:color-mix(in oklab,#FFFFFF 45%,#C9D6EA);
  --sn-border-brand-strong:color-mix(in oklab,#FFFFFF 5%,#C9D6EA);
  --sn-text:#10092F;
  --sn-text-2:color-mix(in oklab,#6D708D 10%,#252C3C);
  --sn-text-muted:color-mix(in oklab,#6D708D 80%,#252C3C);
  --sn-text-subtle:#6D708D;
  --sn-shadow-nav:0 6px 22.5px -13.5px rgba(27,27,54,0.25);
  --sn-shadow-btn:0 1.5px 6px rgba(27,27,54,0.06);
  --sn-shadow-cta:0 .75px 1.5px rgba(31,68,255,0.3),0 7.5px 19.5px -6px rgba(31,68,255,0.55);
  --sn-shadow-float:0 18px 40px -18px rgba(16,9,47,0.28);
}
[data-theme="dark"] .site-header,[data-theme="dark"] .site-mobile-nav,[data-theme="dark"] .site-nav-backdrop{
  --sn-brand:var(--pal-sky);
  --sn-brand-hover:var(--pal-white);
  --sn-nav-bg:var(--pal-indigo);
  --sn-surface:var(--pal-jet);
  --sn-surface-brand:var(--pal-jet);
  --sn-hover:var(--pal-jet);
  --sn-bg:var(--pal-amethyst);
  --sn-bg-2:var(--pal-indigo);
  --sn-border:var(--pal-jet);
  --sn-border-strong:var(--pal-slate-green);
  --sn-border-brand:var(--pal-jet);
  --sn-border-brand-strong:var(--pal-jet);
  --sn-text:var(--pal-white);
  --sn-text-2:var(--pal-sky);
  --sn-text-muted:var(--pal-sky);
  --sn-text-subtle:var(--pal-sky);
  --sn-shadow-nav:0 1px 0 var(--pal-jet),0 10px 28px -16px var(--pal-amethyst);
  --sn-shadow-float:inset 0 1px 0 var(--pal-jet),0 20px 44px -18px var(--pal-amethyst);
}
.site-nav__link:focus-visible,.site-nav__trigger:focus-visible{outline-color:var(--focus-ring)}

/* ---------- 5. Shared treatments ---------- */
body{background:var(--bg);color:var(--text)}
a{color:inherit}

/* heading highlight — one phrase per heading, blue hand-drawn underline */
.hl::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9.6C44 4.2 104 2.8 197.5 6.4' stroke='%231F44FF' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] .hl::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9.6C44 4.2 104 2.8 197.5 6.4' stroke='%23C9D6EA' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.grad-text{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--pal-blue)}
[data-theme="dark"] .grad-text{color:var(--pal-sky)}

/* featured section — ivory band that fades in/out of the canvas */
.section--feature{background:linear-gradient(180deg,var(--bg) 0,var(--surface-feature) clamp(96px,14%,220px),var(--surface-feature) calc(100% - clamp(96px,14%,220px)),var(--bg) 100%)}

/* buttons */
.btn--morph{background:linear-gradient(100deg,color-mix(in oklab,#C9D6EA 10%,#1F44FF) 0%,color-mix(in oklab,#C9D6EA 10%,#1F44FF) 52%,#1F44FF 100%);background-size:190% 100%}
.btn--morph::after{background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,0.24) 50%,transparent 78%)}
.btn--morph:hover{box-shadow:0 14px 30px -14px rgba(31,68,255,0.7)}
.btn--morph:active{box-shadow:inset 0 2px 4px rgba(16,9,47,0.18)}
.btn--ghost:hover{background:var(--surface-brand);border-color:var(--border-brand-strong);color:var(--brand)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,68,255,0.28)}
.btn--onDark{background:#FFFFFF;color:#10092F;box-shadow:0 9.83px 23.88px -8.43px rgba(16,9,47,0.45)}
.btn--outlineDark{border-color:rgba(255,255,255,0.55);color:#FFFFFF}
[data-theme="dark"] .btn--ghost:hover{background:var(--pal-jet);border-color:var(--pal-slate-green)}
[data-theme="dark"] .btn--outlineDark{border-color:var(--pal-slate-green)}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline-color:var(--focus-ring)}

/* ambient mesh + section surfaces, palette only */
.mesh__blue{background:radial-gradient(circle at 50% 50%,#1F44FF 0,rgba(31,68,255,0) 68%)}
.mesh__lav{background:radial-gradient(circle at 50% 50%,#C9D6EA 0,rgba(201,214,234,0) 68%)}
.mesh__pink{background:radial-gradient(circle at 50% 50%,#E3CA67 0,rgba(227,202,103,0) 68%)}
.mesh__wash{background:radial-gradient(circle at 50% 50%,#FFFFFF 0,rgba(255,255,255,0) 70%)}
/* source removed hero/testimonial blur glows — mesh fields are off site-wide */
.mesh,.hero__orb,.quote-sec__glow{display:none !important}
.surf__bg::after{background-image:linear-gradient(to right,rgba(37,44,60,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,44,60,.055) 1px,transparent 1px)}
.surf--soft-blue{--surf-wash:radial-gradient(ellipse 62% 46% at 10% -8%,rgba(31,68,255,.085),transparent 66%),linear-gradient(180deg,rgba(31,68,255,.028),transparent 44%)}
.surf--soft-warm{--surf-wash:radial-gradient(ellipse 58% 44% at 88% -6%,rgba(227,202,103,.12),transparent 66%),linear-gradient(180deg,rgba(248,239,169,.18),transparent 40%)}
.surf--soft-violet{--surf-wash:radial-gradient(ellipse 58% 44% at 16% -8%,rgba(201,214,234,.32),transparent 66%),linear-gradient(180deg,rgba(201,214,234,.12),transparent 42%)}
.surf--navy{--surf-wash:radial-gradient(ellipse 64% 48% at 50% -10%,rgba(31,68,255,.085),transparent 68%),linear-gradient(180deg,rgba(16,9,47,.045),transparent 52%)}
.surf--navy .surf__bg::after{background-image:radial-gradient(circle,rgba(37,44,60,.14) 1px,transparent 1.4px)}
[data-theme="dark"] .surf__bg{background:none}
[data-theme="dark"] .surf__bg::after{opacity:0}

/* logos keep their artwork; only pure-black marks flip on dark */
[data-theme="dark"] .site-header__logo img{filter:brightness(0) invert(1)}


/* ==========================================================================
   SHARED CTA — fully rounded pill (default for every .btn)
   Primary: blue fill, white label, arrow; secondary keeps the pill with an outline.
   ========================================================================== */
.btn,.btn--morph,.btn--morph:hover{border-radius:9999px!important}
.btn{gap:10px;padding-inline:clamp(18px,1.6vw,26px);transition:box-shadow .22s ease,transform .18s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.btn--morph:hover{padding-inline:clamp(18px,1.6vw,26px)}
.btn--primary{background:#2F55F4;color:#fff;box-shadow:0 10px 24px -12px rgba(31,68,255,.55)}
.btn--primary:hover{color:#fff;box-shadow:0 16px 34px -14px rgba(31,68,255,.72)}
.btn .btn-chev,.btn:hover .btn-chev{transition:translate .22s cubic-bezier(.22,.61,.36,1)}
.btn:hover .btn-chev{translate:4px 0}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid #1F44FF;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.btn,.btn .btn-chev{transition:none}.btn:hover .btn-chev{translate:0 0}}