/* Self-hosted fonts (Inter + JetBrains Mono, OFL licensed). No third-party Google
   Fonts request. The critical latin files are <link rel=preload>-ed from functions.php;
   latin-ext is unicode-range gated, so it only downloads if an accented glyph appears. */

/* Self-hosted fonts (Inter + JetBrains Mono, OFL). Latin + latin-ext, variable. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jbmono-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jbmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* Clickt Studio = Division 02 (Plum / Mauve). Values from the brand guide's
         Studio ramp + shared Ember master accent. Own accent = Mauve (studio-300);
         Ember is used sparingly, never as a ground. */
      --ink: #181221;        /* studio-900 Plum-black — the ground */
      --cream: #ECE8F1;      /* studio-50 Surface — primary text on dark */
      --offwhite: #EEF1F3;   /* shared offwhite */
      --peach: #C7BDD5;      /* studio-100 — light tint (browser bar) */
      --pink: #897B9E;       /* Mauve / studio-300 — own accent (ink text on fills, 4.7:1) */
      --mauve: #897B9E;      /* alias of --pink */
      --purple: #4E4060;     /* studio-500 — brand surfaces (offwhite text 8.3:1) */
      --plum: #4E4060;       /* alias of --purple */
      --plum-deep: #2B2236;  /* studio-700 — deep surfaces / cards */
      --orange: #F86B3C;     /* Ember — shared MASTER accent. Sparingly; never a ground. */
      --accent-ink: #4E4060; /* plum — accent text on light cards */
      --lilac: #C7BDD5;      /* studio-100 — light labels / emphasis on dark (10:1) */
      --lime: #897B9E;       /* Mauve — positive marks on dark */
      --yellow: #C7BDD5;     /* studio-100 tint */
      --teal: #4E4060;       /* studio-500 — "included" badge text */
    }
    html { scroll-behavior: smooth; }
    body {
      background: var(--ink);
      color: var(--cream);
      font-family: "Inter", -apple-system, sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    ::selection { background: var(--pink); color: var(--cream); }
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.04;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    @keyframes bob { 0%,100%{transform:translateY(0) rotate(var(--r,0deg))} 50%{transform:translateY(-10px) rotate(var(--r,0deg))} }
    @keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
    @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* NAV */
    header {
      position: sticky; top: 0; z-index: 200;
      background: rgba(43,34,54,0.88);
      backdrop-filter: saturate(140%) blur(8px);
      -webkit-backdrop-filter: saturate(140%) blur(8px);
      border-bottom: 1px solid rgba(236,232,241,0.14);
    }
    .nav-inner { max-width:1320px;margin:0 auto;padding:14px clamp(18px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:20px; }
    .logo { text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;font-family:"Inter",sans-serif;line-height:1;white-space:nowrap; }
    .logo-word { display:flex;align-items:flex-end;font-weight:700;font-size:26px;letter-spacing:-0.04em;line-height:1; }
    .logo-word .pink { color:#FF8FA3; }
    .logo-dot { position:relative;display:inline-block;width:0.84em;height:0.84em; }
    .logo-dot .ring { position:absolute;inset:0;border-radius:50%;border:0.07em solid #7ECBA1; }
    .logo-dot .center { position:absolute;top:50%;left:50%;width:0.24em;height:0.24em;background:#FFD66B;border-radius:50%;transform:translate(-50%,-50%); }
    .logo-sub { font-size:9px;font-weight:500;letter-spacing:0.5em;text-transform:uppercase;color:#bdb6ab;margin-top:3px; }
    nav { display:flex;align-items:center;gap:clamp(12px,2.2vw,30px); }
    nav a { text-decoration:none;color:var(--cream);font-size:14.5px;font-weight:600;white-space:nowrap;transition:color .15s; }
    nav a:hover { color:var(--lilac); }
    .nav-cta { background:var(--pink)!important;color:var(--ink)!important;padding:9px 20px!important;border-radius:999px!important;border:1px solid rgba(43,34,54,0.12)!important;box-shadow:0 10px 22px -14px rgba(43,34,54,0.28)!important;transition:transform .15s,box-shadow .15s!important; }
    .nav-cta:hover { transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(43,34,54,0.42)!important; }
    .nav-mobile-toggle { display:none;background:none;border:none;cursor:pointer;padding:4px; }
    .nav-mobile-toggle span { display:block;width:22px;height:2px;background:var(--cream);margin:4px 0;border-radius:2px; }

    /* PAGE HERO */
    .page-hero {
      position: relative;
      max-width: 1320px;
      margin: 0 auto;
      padding: clamp(52px,7vw,96px) clamp(18px,4vw,56px) clamp(40px,5vw,72px);
      overflow: hidden;
    }
    .hero-eyebrow { font-weight:800;font-size:clamp(14px,1.6vw,18px);letter-spacing:0.2em;text-transform:uppercase;color:var(--lilac);margin:0 0 18px; }
    h1 { font-family:"Inter", system-ui, sans-serif;font-weight:400;font-size:clamp(48px,7vw,96px);line-height:1.0;letter-spacing:-0.01em;margin:0 0 22px;max-width:14ch; }
    h1 em { font-style:italic;color:var(--orange); }
    .hero-sub { font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:rgba(236,232,241,0.75);max-width:46ch;font-weight:500;margin:0 0 36px; }

    /* MARQUEE */
    .marquee-band { background:var(--plum);border-top:1px solid rgba(43,34,54,0.14);border-bottom:1px solid rgba(43,34,54,0.14);overflow:hidden;padding:14px 0; }
    .marquee-track { display:flex;gap:0;width:max-content;animation:marquee 34s linear infinite;font-family:"JetBrains Mono", ui-monospace, monospace;font-size:clamp(12px,1.4vw,16px);font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:rgba(236,232,241,0.92);white-space:nowrap; }
    .marquee-track span { padding:0 clamp(16px,2.2vw,28px); }
    .marquee-track .sep { color:var(--lilac);opacity:0.55;padding:0; }

    /* CALCULATOR */
    .calc-section { max-width:1320px;margin:0 auto;padding:clamp(52px,7vw,88px) clamp(18px,4vw,56px) 0; }
    .calc-section h2 { font-family:"Inter", system-ui, sans-serif;font-weight:400;font-size:clamp(30px,3.8vw,52px);margin:0 0 clamp(24px,3vw,40px); }
    .calc-section h2 em { font-style:italic;color:var(--pink); }
    .calc-grid { display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:start; }
    .calc-controls { display:flex;flex-direction:column;gap:20px; }
    .calc-row { display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(236,232,241,0.06);border:1px solid rgba(236,232,241,0.12);border-radius:14px;padding:18px 22px; }
    .calc-row--fixed { background:rgba(248,107,60,0.09);border-color:rgba(248,107,60,0.30); }
    .calc-fixed-price { font-family:"Inter",system-ui,sans-serif;font-size:22px;line-height:1;color:var(--cream);white-space:nowrap; }
    .calc-label { font-size:15px;font-weight:600; }
    .calc-label small { display:block;font-size:12px;color:rgba(236,232,241,0.5);font-weight:400;margin-top:2px; }
    .calc-stepper { display:flex;align-items:center;gap:12px; }
    .calc-stepper button { width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(236,232,241,0.3);background:none;color:var(--cream);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s; }
    .calc-stepper button:hover { background:rgba(236,232,241,0.1);border-color:rgba(236,232,241,0.6); }
    .calc-stepper .count { font-family:"Inter", system-ui, sans-serif;font-size:28px;line-height:1;min-width:32px;text-align:center; }
    .calc-select { background:none;border:1.5px solid rgba(236,232,241,0.3);border-radius:10px;color:var(--cream);font-size:14px;font-weight:600;padding:8px 12px;font-family:"Inter",sans-serif;cursor:pointer;outline:none; }
    .calc-select option { background:var(--ink);color:var(--cream); }
    .calc-result {
      position:sticky;top:20px;align-self:start;
      background:var(--cream);color:var(--ink);
      border:1px solid rgba(43,34,54,0.14);box-shadow:0 24px 48px -24px rgba(43,34,54,0.4);
      border-radius:22px;padding:clamp(28px,3vw,40px);
    }
    .calc-result-label { font-weight:700;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--pink);margin:0 0 8px; }
    .calc-total { font-family:"Inter", system-ui, sans-serif;font-size:clamp(52px,7vw,80px);line-height:0.9;color:var(--ink);margin:0 0 6px; }
    .calc-breakdown { font-size:13.5px;color:rgba(43,34,54,0.6);margin:0 0 24px;font-weight:500; }
    .calc-line { display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px solid rgba(43,34,54,0.1);font-size:14px; }
    .calc-line .lname { color:rgba(43,34,54,0.7);font-weight:500; }
    .calc-line .lval { font-weight:700;color:var(--ink); }
    .calc-line.total-line { border-top:2px solid rgba(43,34,54,0.2);margin-top:4px; }
    .calc-line.total-line .lname { font-weight:700;color:var(--ink); }
    .calc-line.total-line .lval { font-family:"Inter", system-ui, sans-serif;font-size:20px; }
    .calc-cta { display:block;width:100%;cursor:pointer;font-family:"Inter",system-ui,sans-serif;text-decoration:none;background:var(--pink);color:var(--ink);font-size:15px;font-weight:700;padding:14px 24px;border-radius:999px;text-align:center;margin-top:22px;border:1px solid rgba(43,34,54,0.1);box-shadow:0 12px 28px -14px rgba(78,64,96,0.5);transition:transform .15s,box-shadow .15s; }
    .calc-cta:hover { transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(78,64,96,0.6); }
    .calc-cta:disabled { opacity:0.6;cursor:not-allowed;transform:none; }
    /* Quote email form now lives in the left (dark) column — themed accordingly. */
    .calc-quote-form { margin-top:2px; }
    .calc-quote-form .calc-cta { margin-top:12px; }
    .calc-quote-label { display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(236,232,241,0.55);margin-bottom:8px; }
    .calc-quote-email { width:100%;font-family:"Inter",sans-serif;font-size:15px;color:var(--cream);background:rgba(236,232,241,0.06);border:1.5px solid rgba(236,232,241,0.22);border-radius:12px;padding:13px 16px;outline:none;transition:border-color .15s,box-shadow .15s; }
    .calc-quote-email::placeholder { color:rgba(236,232,241,0.4); }
    .calc-quote-email:focus { border-color:rgba(236,232,241,0.5);box-shadow:0 0 0 3px rgba(236,232,241,0.1); }
    .calc-quote-status { font-size:13px;font-weight:600;margin-top:10px;min-height:18px;text-align:center;color:rgba(236,232,241,0.65); }
    .calc-quote-status.success { color:#7ED9A6; }
    .calc-quote-status.error { color:#F3A0A9; }
    .calc-note { font-size:12px;color:rgba(43,34,54,0.5);text-align:center;margin-top:12px; }

    /* FULL PRICING TABLE */
    .pricing-section { max-width:1320px;margin:0 auto;padding:clamp(52px,7vw,88px) clamp(18px,4vw,56px); }
    .section-eyebrow { font-weight:700;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:var(--lilac);margin:0 0 16px; }
    h2.section-h2 { font-family:"Inter", system-ui, sans-serif;font-weight:400;font-size:clamp(34px,4.2vw,58px);line-height:1.02;margin:0 0 clamp(36px,5vw,56px); }
    h2.section-h2 em { font-style:italic;color:var(--pink); }

    .pricing-cards { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);margin-bottom:clamp(18px,2.4vw,28px); }
    /* Discovery + Project initiation span the full row; Standard + E-commerce sit side by side. */
    .pricing-cards > .price-card:nth-child(1),
    .pricing-cards > .price-card:nth-child(2) { grid-column:1 / -1; }
    @media (min-width:700px){
      .pricing-cards > .price-card:nth-child(1),
      .pricing-cards > .price-card:nth-child(2){ display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.5fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(28px,4vw,60px); }
      .pricing-cards > .price-card:nth-child(1) > .price-card-type,
      .pricing-cards > .price-card:nth-child(2) > .price-card-type{ grid-column:1;grid-row:1; }
      .pricing-cards > .price-card:nth-child(1) > .price-amount,
      .pricing-cards > .price-card:nth-child(2) > .price-amount{ grid-column:1;grid-row:2; }
      .pricing-cards > .price-card:nth-child(1) > .price-desc,
      .pricing-cards > .price-card:nth-child(2) > .price-desc{ grid-column:1;grid-row:3; }
      .pricing-cards > .price-card:nth-child(1) > .price-includes,
      .pricing-cards > .price-card:nth-child(2) > .price-includes{ grid-column:2;grid-row:1 / 5;align-self:center;margin-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px; }
    }
    @media (max-width:699px){ .pricing-cards { grid-template-columns:1fr; } }
    .price-card { position:relative;background:#fff;border:1px solid rgba(43,34,54,0.14);box-shadow:0 18px 38px -22px rgba(43,34,54,0.38);border-radius:20px;padding:clamp(28px,3vw,40px);overflow:hidden;color:var(--ink); }
    .price-card-top { position:absolute;top:0;left:0;right:0;height:6px; }
    .price-card-type { font-weight:700;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin:6px 0 14px; }
    .price-amount { display:flex;align-items:baseline;gap:8px; }
    .price-big { font-family:"Inter", system-ui, sans-serif;font-size:clamp(48px,6vw,72px);line-height:0.9;color:var(--ink); }
    .price-per { font-size:16px;font-weight:600;color:rgba(43,34,54,0.55); }
    .price-desc { font-size:15.5px;line-height:1.55;color:rgba(43,34,54,0.78);margin:16px 0 0; }
    .price-includes { margin:20px 0 0;display:flex;flex-direction:column;gap:8px; }
    .price-includes li { display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(43,34,54,0.75);font-weight:500;list-style:none; }
    .check { width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none; }
    .check svg { display:block; }

    .extras-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(18px,2.4vw,28px); }
    .extra-card { background:var(--cream);color:var(--ink);border:1px solid rgba(43,34,54,0.14);box-shadow:0 14px 30px -18px rgba(43,34,54,0.32);border-radius:16px;padding:clamp(24px,2.6vw,32px); }
    .extra-card h3 { font-family:"Inter", system-ui, sans-serif;font-weight:400;font-size:24px;margin:0 0 8px; }
    .extra-card p { font-size:13.5px;color:rgba(43,34,54,0.6);margin:0 0 16px;font-weight:500; }
    .extra-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid rgba(43,34,54,0.12); }
    .extra-name { font-size:15.5px;font-weight:600; }
    .badge-included { font-size:13px;font-weight:700;color:var(--teal);background:rgba(137,123,158,0.20);padding:5px 12px;border-radius:999px; }
    .extra-price { font-family:"Inter", system-ui, sans-serif;font-size:22px;color:var(--ink); }
    .extra-rate { font-size:14px;font-weight:600;color:rgba(43,34,54,0.55); }
    .extra-note { font-size:13px;line-height:1.5;color:rgba(43,34,54,0.6);margin:8px 0 0; }

    /* WHAT'S INCLUDED */
    .included-section {
      padding: clamp(40px,5vw,72px) clamp(14px,3vw,40px);
    }
    .included-box {
      max-width:1320px;margin:0 auto;
      background:radial-gradient(120% 140% at 0% 0%, #2B2236 0%, #4E4060 100%);
      border:1px solid rgba(43,34,54,0.14);box-shadow:0 28px 56px -30px rgba(43,34,54,0.45);
      border-radius:28px;padding:clamp(34px,5vw,72px) clamp(24px,4vw,64px);color:var(--cream);
    }
    .included-eyebrow { font-weight:700;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:var(--lilac);margin:0 0 16px; }
    .included-box h2 { color:var(--cream);margin:0 0 clamp(32px,4vw,48px);max-width:18ch; }
    .included-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,3vw,36px); }
    .included-item { display:flex;flex-direction:column;gap:12px; }
    .included-icon { width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center; }
    .included-item h4 { font-family:"Inter", system-ui, sans-serif;font-weight:400;font-size:20px;margin:0;color:var(--cream); }
    .included-item p { font-size:14.5px;line-height:1.55;color:rgba(236,232,241,0.72);margin:0; }

    /* COMPARISON TABLE */
    .compare-section { max-width:1320px;margin:0 auto;padding:clamp(52px,7vw,88px) clamp(18px,4vw,56px); }
    .compare-table { width:100%;border-collapse:collapse;margin-top:clamp(28px,3.5vw,44px); }
    .compare-table th { text-align:left;padding:14px 18px;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(236,232,241,0.5);font-weight:700;border-bottom:1px solid rgba(236,232,241,0.15); }
    .compare-table th:not(:first-child) { text-align:center; }
    .compare-table td { padding:16px 18px;font-size:15px;border-bottom:1px solid rgba(236,232,241,0.08);vertical-align:middle; }
    .compare-table td:not(:first-child) { text-align:center; }
    .compare-table tr:last-child td { border-bottom:none; }
    .compare-table .feature-name { font-weight:600;color:rgba(236,232,241,0.85); }
    .compare-table .col-us { background:rgba(137,123,158,0.14); }
    .compare-table th.col-us { color:var(--lilac);background:rgba(107,79,176,0.14);border-radius:12px 12px 0 0; }
    .yes { color:var(--lime);font-size:18px;font-weight:700; }
    .no { color:rgba(236,232,241,0.55);font-size:18px; }
    .sometimes { color:var(--yellow);font-size:13px;font-weight:600; }

    /* CTA */
    #quote { padding:clamp(40px,5vw,72px) clamp(14px,3vw,40px) clamp(52px,7vw,104px); }
    .cta-box { max-width:1320px;margin:0 auto;background:var(--plum);border:1px solid rgba(43,34,54,0.14);box-shadow:0 28px 56px -30px rgba(43,34,54,0.45);border-radius:28px;padding:clamp(56px,8vw,120px) clamp(24px,4vw,64px);text-align:center;position:relative;overflow:hidden; }
    .cta-eyebrow { font-weight:700;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:var(--lilac);margin:0 0 18px; }
    .cta-box h2 { font-family:"Inter", system-ui, sans-serif;font-weight:400;font-size:clamp(38px,6vw,84px);line-height:1.0;margin:0 auto;max-width:18ch;color:var(--offwhite); }
    .cta-box h2 em { font-style:italic;color:var(--orange); }
    .cta-sub { font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:rgba(236,232,241,0.85);max-width:48ch;margin:22px auto 0;font-weight:500; }
    .cta-btns { display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:34px; }
    .btn-dark { text-decoration:none;background:var(--ink);color:#fff;font-size:15px;font-weight:700;padding:15px 34px;border-radius:999px;border:1px solid rgba(43,34,54,0.14);box-shadow:0 16px 34px -18px rgba(43,34,54,0.55);transition:transform .15s;display:inline-block; }
    .btn-dark:hover { transform:translateY(-3px); }
    .btn-white { text-decoration:none;background:#fff;color:var(--ink);font-size:15px;font-weight:700;padding:15px 30px;border-radius:999px;border:1px solid rgba(43,34,54,0.14);box-shadow:0 14px 30px -18px rgba(43,34,54,0.32);transition:transform .15s;display:inline-block;cursor:pointer; }
    .btn-white:hover { transform:translateY(-3px); }

    /* CONTACT FORM */
    .contact-form { max-width:560px;margin:34px auto 0;text-align:left; }
    .form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px; }
    .form-field { display:flex;flex-direction:column;gap:6px;margin-bottom:14px; }
    .form-field label { font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink); }
    .form-field input, .form-field textarea {
      width:100%;font-family:"Inter",sans-serif;font-size:15px;color:var(--ink);
      background:rgba(255,255,255,0.92);border:1.5px solid rgba(43,34,54,0.2);border-radius:12px;
      padding:13px 16px;outline:none;transition:border-color .15s,box-shadow .15s;
    }
    .form-field input::placeholder, .form-field textarea::placeholder { color:rgba(43,34,54,0.4); }
    .form-field input:focus, .form-field textarea:focus { border-color:var(--ink);box-shadow:0 0 0 3px rgba(43,34,54,0.12); }
    .form-field textarea { resize:vertical;min-height:110px; }
    .form-submit {
      width:100%;background:var(--ink);color:#fff;font-family:"Inter",sans-serif;font-size:15px;font-weight:700;
      padding:16px 30px;border:1px solid rgba(43,34,54,0.14);border-radius:999px;cursor:pointer;
      box-shadow:0 16px 34px -18px rgba(43,34,54,0.55);transition:transform .15s;margin-top:6px;
    }
    .form-submit:hover { transform:translateY(-3px); }
    .form-submit:disabled { opacity:0.6;cursor:not-allowed;transform:none; }
    .form-status { font-size:14px;font-weight:600;margin-top:14px;min-height:20px;color:var(--ink); }
    .form-status.success { color:#0a6e3b; }
    .form-status.error { color:#9c1b2e; }
    .form-alt { font-size:13px;color:rgba(43,34,54,0.7);text-align:center;margin-top:16px; }
    .form-alt a { color:var(--ink);font-weight:700; }
    @media (max-width:520px) { .form-row { grid-template-columns:1fr; } }

    /* FOOTER */
    footer { background:var(--ink);color:var(--cream); }
    .footer-inner { max-width:1320px;margin:0 auto;padding:clamp(44px,6vw,68px) clamp(18px,4vw,56px); }
    .footer-top { display:flex;flex-wrap:wrap;justify-content:space-between;gap:34px;padding-bottom:36px;border-bottom:2px solid rgba(236,232,241,0.22); }
    .footer-brand { max-width:32ch; }
    .footer-logo { display:flex;align-items:flex-end;margin-bottom:14px;font-family:"Inter",sans-serif;font-weight:700;font-size:30px;line-height:1;letter-spacing:-0.04em; }
    .footer-tagline { font-size:15px;line-height:1.55;color:rgba(236,232,241,0.62);margin:0; }
    .footer-links { display:flex;gap:clamp(36px,6vw,84px);flex-wrap:wrap; }
    .footer-col { display:flex;flex-direction:column;gap:11px; }
    .footer-col-title { font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(236,232,241,0.45);font-weight:700; }
    .footer-col a { text-decoration:none;color:var(--cream);font-size:15px;font-weight:500;transition:color .15s; }
    .footer-col a:hover { color:var(--yellow); }
    .footer-bottom { display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;font-size:13px;color:rgba(236,232,241,0.5); }
    .footer-tagline-end { font-family:"Inter", system-ui, sans-serif;font-style:italic;font-size:18px;color:rgba(236,232,241,0.85); }

    @media (max-width: 800px) {
      .calc-grid { grid-template-columns: 1fr; }
      .calc-result { position: static; }
      nav { display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(43,34,54,0.97);padding:16px clamp(18px,4vw,56px);gap:14px;border-bottom:1px solid rgba(236,232,241,0.14); }
      nav.open { display:flex; }
      .nav-mobile-toggle { display:block; }
      .compare-table { font-size:13px; }
      .compare-table td, .compare-table th { padding:12px 10px; }
    }
  
/* --- Clickt Studio brand type layer --- */
.hero-title,.section-title,[class*="-title"],[class*="headline"],h1,h2,h3{font-weight:800;letter-spacing:-0.04em;}
.hero-eyebrow,.section-eyebrow,.cta-eyebrow,.included-eyebrow,.calc-label,.calc-result-label,.badge-included,.footer-tagline,.footer-tagline-end,.label,.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;}

/* --- Clickt Studio: recolor template SVGs to brand --- */
[fill="#ED3F8C"]{fill:#897B9E;} [stroke="#ED3F8C"]{stroke:#897B9E;}
[fill="#F26321"]{fill:#F86B3C;} [stroke="#F26321"]{stroke:#F86B3C;}
[fill="#FFC23C"]{fill:#C7BDD5;} [stroke="#FFC23C"]{stroke:#C7BDD5;}
[fill="#BCE05A"]{fill:#897B9E;} [stroke="#BCE05A"]{stroke:#897B9E;}
[fill="#6B4FB0"]{fill:#4E4060;} [stroke="#6B4FB0"]{stroke:#4E4060;}
[fill="#1FA98C"]{fill:#4E4060;} [stroke="#1FA98C"]{stroke:#4E4060;}

/* --- Clickt logo lockup (brand guide: duotone c-mark + wordmark + division name).
   Colours are passed per-instance via --lk-front/back/word/div. --- */
.lockup { display:inline-flex; align-items:baseline; gap:0; line-height:1; white-space:nowrap; font-family:"Inter",sans-serif; }
.lockup .mark { position:relative; display:inline-block; font-weight:900; }
.lockup .mark .back { color:var(--lk-back); }
.lockup .mark .front { position:absolute; left:-0.15em; top:0.052em; color:var(--lk-front); }
.lockup .word { font-weight:900; letter-spacing:-0.055em; color:var(--lk-word); margin-left:0.30em; }
.lockup .sep { width:1px; align-self:stretch; background:var(--lk-div); opacity:0.5; margin:0.14em 0.58em; }
.lockup .divname { font-weight:500; letter-spacing:-0.01em; color:var(--lk-div); }
.lockup.stacked { flex-direction:column; align-items:center; text-align:center; }
.lockup.stacked .word { margin-left:0; margin-top:0.14em; }
.lockup.stacked .divname { margin-top:0.42em; font-size:0.30em; letter-spacing:0.14em; text-transform:uppercase; }

/* Respect reduced-motion: stop the always-on marquee scroll. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}


/* --- Pricing overhaul additions --- */
/* Calculator: flat template / add-on toggle switch + add-ons subhead */
.calc-toggle { position:relative; display:inline-flex; flex:none; cursor:pointer; }
.calc-toggle input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.calc-toggle-track { width:46px; height:26px; border-radius:999px; background:rgba(236,232,241,0.12); border:1.5px solid rgba(236,232,241,0.3); position:relative; transition:background .18s,border-color .18s; }
.calc-toggle-track::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--cream); transition:transform .18s; }
.calc-toggle input:checked + .calc-toggle-track { background:var(--pink); border-color:var(--pink); }
.calc-toggle input:checked + .calc-toggle-track::after { transform:translateX(20px); }
.calc-toggle input:focus-visible + .calc-toggle-track { box-shadow:0 0 0 3px rgba(236,232,241,0.25); }
.calc-subhead { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(236,232,241,0.5); margin:6px 2px -6px; }
/* Extra-card sub-line (WooCommerce base / integration descriptions) */
.extra-name small { display:block; font-size:12px; font-weight:400; color:rgba(43,34,54,0.5); margin-top:3px; line-height:1.35; }
/* CAD / tax footnote */
.pricing-note { font-size:13px; color:rgba(236,232,241,0.5); margin:clamp(20px,2.4vw,28px) 0 0; }
/* Payment schedule */
.payment-schedule { margin-top:clamp(28px,3.4vw,44px); background:rgba(236,232,241,0.05); border:1px solid rgba(236,232,241,0.12); border-radius:20px; padding:clamp(24px,3vw,36px); }
.payment-schedule h3 { font-family:"Inter",system-ui,sans-serif; font-weight:400; font-size:clamp(22px,2.6vw,30px); margin:0 0 clamp(18px,2.2vw,26px); color:var(--cream); }
.pay-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px); }
@media (max-width:700px){ .pay-steps { grid-template-columns:1fr; } }
.pay-steps li { display:flex; gap:14px; align-items:flex-start; }
.pay-num { flex:none; width:34px; height:34px; border-radius:50%; background:var(--orange); color:var(--ink); font-family:"Inter",system-ui,sans-serif; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; }
.pay-body { display:flex; flex-direction:column; gap:3px; }
.pay-body strong { font-size:15.5px; font-weight:700; color:var(--cream); }
.pay-body span { font-size:13.5px; color:rgba(236,232,241,0.6); }