/* Eleven2 skin — matches www.eleven2.com, in dark and light.
 *
 * Theme comes from <html data-theme-mode="dark|light|auto">, which index.php sets from the
 * visitor's "e2-theme" cookie (shared with www.eleven2.com), so the right colours are there
 * on first paint with no script. "auto" follows the device via prefers-color-scheme.
 * Dark tokens are the defaults; the light set is declared twice below (explicit light, and
 * auto + device-light) because CSS can't share one block between a selector and a media query.
 */
:root {
  /* shared form tokens (assets/app.css) */
  --accent: #FFB547;
  --accent2: #FF4D6D;
  --bg: #0A0807;
  --bg2: #120E0C;
  --surface: #14100E;
  --surface2: #1D1815;
  --ink: #F2ECE8;
  --ink-2: #B5ACA6;
  --ink-3: #9C928B;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.15);
  --good: #4ADE80;
  --good-bg: rgba(74, 222, 128, .1);
  --bad: #FF6B81;
  --bad-bg: rgba(255, 77, 109, .1);
  --amber: #FFB547;
  --radius: 20px;
  --shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Sora, Inter, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --on-accent: #0A0807;
  --primary-bg: linear-gradient(90deg, #FFB547, #FF4D6D);
  --primary-bg-hover: linear-gradient(90deg, #FFC46B, #FF6680);
  --on-primary: #0A0807;
  --primary-shadow: 0 14px 34px -14px rgba(255, 77, 109, .7);
  --plan-on-bg: linear-gradient(180deg, rgba(255, 181, 71, .07), rgba(255, 255, 255, .02));
  --plan-on-border: rgba(255, 181, 71, .6);
  --plan-on-shadow: 0 0 0 1px rgba(255, 181, 71, .2), 0 30px 70px -30px rgba(255, 77, 109, .5);
  --line-hover: rgba(255, 255, 255, .28);
  --surface-hover: #241E1A;

  /* skin-only tokens */
  --head: #FFFFFF;           /* headings */
  --link: #FFC27A;
  --link-h: #FFDDB0;
  --nav-link: #C4BCB6;
  --hover-bg: rgba(255, 255, 255, .06);
  --glass: rgba(255, 255, 255, .035);
  --glass-2: rgba(255, 255, 255, .02);
  --field: rgba(255, 255, 255, .04);
  --pill-bg: rgba(20, 16, 14, .72);
  --pill-line: rgba(255, 255, 255, .09);
  --kicker: #D6CEC8;
  --kicker-line: rgba(255, 255, 255, .12);
  --logo-ink: #F5EFEA;
  --logo-2: #FFB547;
  --inv-bg: #FFFFFF;
  --inv-fg: #0A0807;
  --grid-line: rgba(255, 255, 255, .04);
  --glow-a: .2;
  --glow-b: .16;
  --summary-bg: #120E0C;
  --summary-ring: rgba(255, 255, 255, .1);
  --summary-glow: 0 30px 80px -40px rgba(255, 77, 109, .55);
  --grad-text: linear-gradient(90deg, #FFB547, #FF4D6D);
  --badge-bg: rgba(74, 222, 128, .12);
  --badge-line: rgba(74, 222, 128, .35);
  --badge-ink: #86EFAC;
  --foot-line: rgba(255, 255, 255, .07);
  --scrim: rgba(10, 8, 7, .78);
  --select-bg: rgba(255, 181, 71, .35);
  color-scheme: dark;
}

/* ---------- light palette (same values as www.eleven2.com light mode) ---------- */
html[data-theme-mode="light"] {
  --accent: #B85500;
  --accent2: #D41E47;
  --bg: #F7F2ED;
  --bg2: #FFFFFF;
  --surface: #FFFFFF;
  --surface2: #F9F5F1;
  --ink: #2B221E;
  --ink-2: #51463F;
  --ink-3: #6B5F58;
  --line: #E6DDD5;
  --line-2: #D2C6BD;
  --good: #15803D;
  --good-bg: rgba(21, 128, 61, .08);
  --bad: #B91C1C;
  --bad-bg: rgba(185, 28, 28, .07);
  --amber: #B85500;
  --shadow: 0 24px 60px -36px rgba(46, 30, 22, .35);
  --on-accent: #FFFFFF;
  --primary-shadow: 0 14px 30px -16px rgba(212, 30, 71, .55);
  --plan-on-bg: linear-gradient(180deg, #FFF6EC, #FFFFFF);
  --plan-on-border: rgba(184, 85, 0, .55);
  --plan-on-shadow: 0 0 0 1px rgba(184, 85, 0, .15), 0 24px 50px -30px rgba(212, 30, 71, .4);
  --line-hover: #BCAFA6;
  --surface-hover: #F3ECE6;
  --head: #17110E;
  --link: #A84D07;
  --link-h: #7A3805;
  --nav-link: #51463F;
  --hover-bg: rgba(46, 30, 22, .06);
  --glass: #FFFFFF;
  --glass-2: #FCFAF8;
  --field: #FFFFFF;
  --pill-bg: rgba(255, 255, 255, .8);
  --pill-line: #E6DDD5;
  --kicker: #3A302B;
  --kicker-line: #D2C6BD;
  --logo-ink: #17110E;
  --logo-2: #D96500;
  --inv-bg: #17110E;
  --inv-fg: #FFFFFF;
  --grid-line: rgba(46, 30, 22, .06);
  --glow-a: .14;
  --glow-b: .1;
  --summary-bg: #FFFFFF;
  --summary-ring: #E6DDD5;
  --summary-glow: 0 24px 60px -36px rgba(212, 30, 71, .35);
  --grad-text: linear-gradient(90deg, #D96500, #DB2350);
  --badge-bg: rgba(21, 128, 61, .08);
  --badge-line: rgba(21, 128, 61, .3);
  --badge-ink: #15803D;
  --foot-line: #E6DDD5;
  --scrim: rgba(46, 30, 22, .35);
  --select-bg: rgba(217, 101, 0, .22);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html[data-theme-mode="auto"] {
    --accent: #B85500;
    --accent2: #D41E47;
    --bg: #F7F2ED;
    --bg2: #FFFFFF;
    --surface: #FFFFFF;
    --surface2: #F9F5F1;
    --ink: #2B221E;
    --ink-2: #51463F;
    --ink-3: #6B5F58;
    --line: #E6DDD5;
    --line-2: #D2C6BD;
    --good: #15803D;
    --good-bg: rgba(21, 128, 61, .08);
    --bad: #B91C1C;
    --bad-bg: rgba(185, 28, 28, .07);
    --amber: #B85500;
    --shadow: 0 24px 60px -36px rgba(46, 30, 22, .35);
    --on-accent: #FFFFFF;
    --primary-shadow: 0 14px 30px -16px rgba(212, 30, 71, .55);
    --plan-on-bg: linear-gradient(180deg, #FFF6EC, #FFFFFF);
    --plan-on-border: rgba(184, 85, 0, .55);
    --plan-on-shadow: 0 0 0 1px rgba(184, 85, 0, .15), 0 24px 50px -30px rgba(212, 30, 71, .4);
    --line-hover: #BCAFA6;
    --surface-hover: #F3ECE6;
    --head: #17110E;
    --link: #A84D07;
    --link-h: #7A3805;
    --nav-link: #51463F;
    --hover-bg: rgba(46, 30, 22, .06);
    --glass: #FFFFFF;
    --glass-2: #FCFAF8;
    --field: #FFFFFF;
    --pill-bg: rgba(255, 255, 255, .8);
    --pill-line: #E6DDD5;
    --kicker: #3A302B;
    --kicker-line: #D2C6BD;
    --logo-ink: #17110E;
    --logo-2: #D96500;
    --inv-bg: #17110E;
    --inv-fg: #FFFFFF;
    --grid-line: rgba(46, 30, 22, .06);
    --glow-a: .14;
    --glow-b: .1;
    --summary-bg: #FFFFFF;
    --summary-ring: #E6DDD5;
    --summary-glow: 0 24px 60px -36px rgba(212, 30, 71, .35);
    --grad-text: linear-gradient(90deg, #D96500, #DB2350);
    --badge-bg: rgba(21, 128, 61, .08);
    --badge-line: rgba(21, 128, 61, .3);
    --badge-ink: #15803D;
    --foot-line: #E6DDD5;
    --scrim: rgba(46, 30, 22, .35);
    --select-bg: rgba(217, 101, 0, .22);
    color-scheme: light;
  }
}

body { font-size: 15.5px; letter-spacing: -0.005em; transition: background-color .35s ease, color .35s ease; }
a { color: var(--link); }
a:hover { color: var(--link-h); }
::selection { background: var(--select-bg); }
.mono { letter-spacing: 0; }

/* ---------- ambient backdrop ---------- */
.e2-backdrop { position: absolute; inset: 0 0 auto 0; height: 900px; overflow: hidden; pointer-events: none; z-index: 0; }
.e2-backdrop__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 10%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 10%, #000 25%, transparent 75%); }
.e2-backdrop__glow { position: absolute; border-radius: 50%; filter: blur(40px); }
.e2-backdrop__glow--a { top: -260px; left: 50%; width: 900px; height: 600px; margin-left: -640px; background: radial-gradient(closest-side, #FFB547, transparent); opacity: var(--glow-a); animation: e2drift1 16s ease-in-out infinite; }
.e2-backdrop__glow--b { top: -100px; left: 50%; width: 760px; height: 560px; margin-left: -40px; background: radial-gradient(closest-side, #FF4D6D, transparent); opacity: var(--glow-b); animation: e2drift2 19s ease-in-out infinite; }
@keyframes e2drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(80px, 40px); } }
@keyframes e2drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-90px, 30px); } }
.e2-nav, .e2-pagehead, .layout, .e2-foot { position: relative; z-index: 1; }

/* ---------- logo (inline SVG colours follow the theme) ---------- */
.e2-logo { display: inline-flex; align-items: center; gap: 8px; }
.e2-logo-mark { display: block; flex: none; }
.e2-logo-mark rect,
.e2-logo-mark circle[r="3"] { fill: var(--logo-ink); }
.e2-wordmark { font-family: Geist, Sora, sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -0.06em; line-height: 1; padding-right: .12em; color: var(--logo-ink); }
.e2-wordmark-2 { color: var(--logo-2); font-size: .58em; vertical-align: top; }
.e2-brand { display: inline-flex; align-items: center; color: inherit; }

/* ---------- header (glass pill, like the site) ---------- */
.e2-nav { position: sticky; top: 0; z-index: 50; padding: 16px 0 0; }
.e2-pill { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 8px 10px 8px 18px; background: var(--pill-bg); border: 1px solid var(--pill-line); border-radius: 999px; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.e2-links { display: flex; gap: 2px; flex-wrap: wrap; }
.e2-links a { padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--nav-link); transition: color .2s, background-color .2s; }
.e2-links a:hover { color: var(--head); background: var(--hover-bg); }
.e2-nav__right { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13.5px; }
.e2-btn-white { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--inv-bg); color: var(--inv-fg); font-size: 14px; font-weight: 600; transition: filter .2s; }
.e2-btn-white:hover { color: var(--inv-fg); filter: brightness(.92); }
.secure { color: var(--ink-3); }
.who { background: var(--field); border-color: var(--line-2); }

/* theme toggle: Dark → Light → Auto, same as the site */
.theme-toggle { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-2); background: var(--hover-bg); color: var(--ink); flex: none; transition: background-color .2s, border-color .2s; }
.theme-toggle:hover { border-color: var(--line-hover); }
.theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: none; }
html[data-theme-mode="dark"] .theme-toggle .ti-dark,
html[data-theme-mode="light"] .theme-toggle .ti-light,
html[data-theme-mode="auto"] .theme-toggle .ti-auto { display: block; }

@media (max-width: 1040px) { .e2-links { display: none; } }
@media (max-width: 560px) {
  .e2-pill { padding: 6px 6px 6px 14px; min-height: 56px; gap: 8px; }
  .e2-wordmark { font-size: 20px; }
  .e2-logo-mark { width: 32px; height: 32px; }
  .e2-btn-white { min-height: 40px; padding: 0 16px; }
  .theme-toggle { width: 40px; height: 40px; }
}

/* ---------- page head ---------- */
.e2-pagehead { padding: 48px 0 6px; }
.e2-kicker { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--kicker-line); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--kicker); }
.e2-pagehead h1 { margin: 16px 0 10px; font-family: var(--font-display); font-size: clamp(34px, 5vw, 56px); line-height: 1.04; font-weight: 600; letter-spacing: -0.045em; color: var(--head); }
.e2-grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.e2-pagehead p { margin: 0; max-width: 560px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }

/* ---------- form components, Eleven2 flavour ---------- */
.step, .loading, .fatal { background: var(--glass); border-color: var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.step__title, .summary__title, .plan__name, .plan__price, .cycle__price, .total strong, .done__card h2, .fatal h2 { color: var(--head); }
.step__title { font-weight: 600; letter-spacing: -0.025em; font-size: 19px; }
.num { border-radius: 50%; font-weight: 500; }
.plan { background: var(--glass-2); border-radius: 16px; }
.plan:hover { border-color: var(--plan-on-border); }
.plan__name { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.plan__price { font-weight: 600; letter-spacing: -0.04em; }
.plan__pick, .btn, .tab, .stepper, .input, .gateway, .choice, .check--card, .cycle { border-radius: 12px; }
.plan__pick, .btn--primary, .btn--dark, .btn--ghost { border-radius: 999px; }
.btn--arrow { border-radius: 14px; }
.btn--primary { font-weight: 600; }
.btn--primary:hover { filter: brightness(1.05); }
.btn--dark { background: var(--hover-bg); }
.cycle { background: var(--glass-2); }
.cycle__price, .total strong { font-weight: 600; }
.badge { background: var(--badge-bg); border-color: var(--badge-line); color: var(--badge-ink); }
.tabs { background: var(--hover-bg); border-radius: 999px; }
@media (max-width: 560px) { .tabs { border-radius: 16px; } }
.tab { border-radius: 999px; }
.tab.is-on { background: linear-gradient(90deg, #FFB547, #FF4D6D); color: #0A0807; box-shadow: none; }
.input { background: var(--field); }
.input:focus { border-color: var(--plan-on-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.note { background: var(--hover-bg); }
.card-fields { background: var(--glass-2); }
.summary__card { border: 1px solid transparent; background: linear-gradient(var(--summary-bg), var(--summary-bg)) padding-box, linear-gradient(160deg, #FFB547, var(--summary-ring) 45%, #FF4D6D) border-box; box-shadow: var(--summary-glow); }
.summary__title { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.addr-list { background: var(--surface2); }
.done { background: var(--scrim); }
.done__card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; }
.spinner { border-top-color: var(--accent); }

/* ---------- footer ---------- */
.e2-foot { border-top: 1px solid var(--foot-line); padding: 64px 0 32px; color: var(--ink-3); font-size: 14px; }
.e2-foot a { color: var(--ink-3); }
.e2-foot a:hover { color: var(--head); }
.e2-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.e2-foot__grid h4 { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--head); }
.e2-foot__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.e2-foot__about address { font-style: normal; margin-top: 14px; line-height: 1.7; }
.e2-foot__bottom { border-top: 1px solid var(--foot-line); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }
@media (max-width: 980px) { .e2-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .e2-foot__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .e2-backdrop__glow { animation: none; } body { transition: none; } }

/* region picker */
.region { border-radius: 14px; background: var(--glass-2); }
.region.is-on { border-color: var(--plan-on-border); background: var(--plan-on-bg); box-shadow: var(--plan-on-shadow); }
.region__name { font-family: var(--font-display); font-weight: 600; color: var(--head); letter-spacing: -0.01em; }
.region__note { font-family: var(--mono); font-size: 11.5px; }

/* single-plan link (e.g. /order/s-100): plan card spans the step, contents centred */
.plans--single { grid-template-columns: minmax(0, 1fr); }
.plans--single .plan { text-align: center; align-items: center; }
.plans--single .plan__feats { align-self: center; text-align: left; flex: none; }
.plans--single .plans__all { justify-self: center; }

/* current step: same gradient ring + glow as the order summary */
.step.is-current { border: 1.5px solid transparent; background: linear-gradient(var(--summary-bg), var(--summary-bg)) padding-box, linear-gradient(160deg, #FFB547, color-mix(in srgb, #FFB547 35%, #FF4D6D) 50%, #FF4D6D) border-box; box-shadow: 0 0 0 4px color-mix(in srgb, #FFB547 10%, transparent), var(--summary-glow); }