/* Titan — dark inverted theme.
   Loaded after styles.css on every page. Visual inversion only:
   no content, structure, links, or images are changed.
   Accent: ember-coral #ff7d67 (Titan Command dashboard accent), harmonized
   with the original site's red brand (#b91c1c, retained for filled buttons,
   where white-on-coral would fail contrast). */

:root{
  color-scheme:dark;
  --ink:#f2f2f2;          /* primary text on near-black */
  --muted:#aeb4bc;        /* secondary text — ~9.4:1 on --bg */
  --accent:#ff7d67;       /* ember-coral — eyebrows, emphasis, numerals */
  --accent-dark:#ff9d87;  /* link color on dark (light coral) */
  --gold:#d9b23a;         /* brightened gold — stars, quote rules */
  --bg:#070708;           /* page background, near-black */
  --panel:#101013;        /* cards, footer, table headers */
  --line:#26262c;         /* hairlines on black */
}

body{background:var(--bg);color:var(--ink)}

/* Sticky header was hard-coded translucent white in styles.css */
.site-header{background:rgba(7,7,8,.92);border-bottom-color:var(--line)}
.site-nav a{color:var(--ink)}

/* Filled buttons keep the original brand red: white text on ember-coral
   would be ~2.4:1; white on #b91c1c is ~6.5:1. */
.btn{background:#b91c1c;color:#fff!important}
.btn:hover{background:#8f1616}
.btn.gold{background:var(--gold);color:#16181d!important}

/* Badge pill used the (now light) accent as its fill — keep brand red */
.badge{background:#b91c1c;color:#fff}

/* Pricing cards were hard-coded white */
.plan{background:var(--panel);border-color:var(--line)}
.plan.popular{border-color:var(--accent)}

/* The CTA band was already dark in the light theme; lift it one step
   above the page so it still reads as a distinct band on black */
.cta-band{background:#141417;border:1px solid var(--line)}
.cta-band h2{color:#fff}
.cta-band p{color:#c9ccd1}

.card,.quote{background:var(--panel);border-color:var(--line)}
article th{background:#17171b}
article blockquote{color:var(--muted)}

.site-footer{background:var(--panel);border-top-color:var(--line)}
.site-footer a{color:var(--ink)}

.hero-img{border-color:var(--line)}

/* The "Built for Shopify" badge artwork is a pale plate with dark text;
   rounding its corners keeps it looking intentional on black. */
.badge-img{border-radius:.5rem}

::selection{background:#b91c1c;color:#fff}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- 2026-11-10 update: modern type, T logo tile, mobile header fix ---- */

/* Font pairing: Space Grotesk for headings/wordmark, Inter for body.
   Loaded via Google Fonts <link> tags in every page's <head>. */
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3,h4,h5,h6,.brand,.eyebrow,.price{font-family:"Space Grotesk","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:-.015em}
.hero h1{letter-spacing:-.025em}

/* Logo: Campbell's red "T" artwork as a rounded app-icon tile beside the
   TITAN wordmark, deliberate against the near-black sticky header. */
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand-logo{width:42px;height:42px;object-fit:cover;border-radius:24%;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 2px 10px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.25);
  flex:0 0 auto}

/* Mobile header: compact bar and tile; nav wraps onto its own full-width
   row so every link + the trial button stay reachable with no horizontal
   overflow and no hamburger JS. */
@media (max-width:640px){
  .site-header .wrap{padding:.55rem 1rem;gap:.5rem .8rem}
  .brand{font-size:1.05rem;gap:.5rem}
  .brand-logo{width:34px;height:34px}
  .site-nav{flex-basis:100%;margin-left:0;gap:.4rem 1rem;align-items:center}
  .site-nav a{font-size:.92rem}
  .site-nav .btn{padding:.45rem .85rem;font-size:.88rem}
}


/* === Campbell fixes — Nov 10, 2026 (round 2) === */
/* Start-trial buttons: red gradient everywhere (incl. former gold variant) */
.btn,.btn.gold{background:linear-gradient(135deg,#f04438 0%,#d92d20 48%,#8f1d14 100%);color:#fff!important;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 22px rgba(217,45,32,.35),inset 0 1px 0 rgba(255,255,255,.28);transition:filter .15s ease,transform .15s ease}
.btn:hover,.btn.gold:hover{background:linear-gradient(135deg,#f04438 0%,#d92d20 48%,#8f1d14 100%);filter:brightness(1.1);transform:translateY(-1px)}
/* FAQ: questions red gradient, answers stay light */
.faq-title ~ h3{color:#ff5a4d}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .faq-title ~ h3{background:linear-gradient(90deg,#ff7d67,#e53224);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
/* Final CTA band: richer panel */
.cta-band{border:1px solid rgba(255,125,103,.35);background:radial-gradient(130% 170% at 50% 0%,rgba(217,45,32,.25),rgba(217,45,32,.06) 48%,rgba(255,255,255,.02));border-radius:20px;padding:3.2rem 1.5rem;text-align:center;box-shadow:0 24px 55px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07)}
.cta-band h2{font-size:clamp(2.1rem,5.2vw,3.1rem);line-height:1.12}
.cta-band h2 em{background:linear-gradient(90deg,#ff8a75,#e53224);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.cta-band .btn{font-size:1.05rem;padding:.85rem 1.9rem}
/* Mobile: hero eyebrow (pre-heading line) must wrap, not overflow */
@media (max-width:640px){
  .eyebrow{font-size:.66rem;letter-spacing:.13em;line-height:1.7;white-space:normal;text-align:center;max-width:34ch;margin-left:auto;margin-right:auto}
  .brand-logo{width:38px;height:38px}
}

/* ---- 2026-11-10 update 2: Campbell's live-review fixes ---- */

/* Start-trial buttons: red gradient (was flat brand red) */
.btn{background:linear-gradient(135deg,#e5322d 0%,#c11111 52%,#8f1616 100%);
  box-shadow:0 6px 18px rgba(185,28,28,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.btn:hover{background:linear-gradient(135deg,#f0443a 0%,#cf1a1a 52%,#a11a1a 100%)}
/* The closing CTA button trades its gold fill for the same red gradient */
.cta-band .btn.gold{background:linear-gradient(135deg,#e5322d 0%,#c11111 52%,#8f1616 100%);color:#fff!important;
  box-shadow:0 8px 24px rgba(185,28,28,.45),inset 0 1px 0 rgba(255,255,255,.2)}

/* Mobile: the hero eyebrow (pre-heading line) wraps instead of overflowing */
@media (max-width:640px){
  .eyebrow{white-space:normal;letter-spacing:.07em;font-size:.74rem;line-height:1.5;overflow-wrap:break-word}
}

/* FAQ: questions in a red gradient, answers stay white */
.faq h3{color:#f0443a}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .faq h3{background:linear-gradient(92deg,#ff6a4d 0%,#e5322d 60%,#c11111 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
}
.faq p{color:var(--ink)}

/* Closing CTA band ("Your next store builds itself."): ember glow, larger
   type, deeper padding — a proper finale instead of a plain panel */
.cta-band{background:radial-gradient(130% 170% at 50% 0%,#2b1216 0%,#141417 58%);
  border:1px solid #402327;border-radius:1.25rem;text-align:center;
  padding:3.75rem 2.5rem;margin:3.5rem 0;
  box-shadow:0 24px 70px rgba(185,28,28,.16),inset 0 1px 0 rgba(255,255,255,.05)}
.cta-band h2{font-size:clamp(2.1rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.02em}
.cta-band p{font-size:1.06rem}
.cta-band .eyebrow{font-size:.8rem}


/* === Campbell fixes — Nov 10, 2026 (round 3: mobile + heading + showcase) === */
/* Hero heading: bigger, deeper red (less pink) */
.hero h1{font-size:clamp(2.7rem,8.5vw,4.3rem);background:linear-gradient(94deg,#ff4633 5%,#d92d20 55%,#9e150c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Showcase gallery */
.showcase{text-align:center}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.6rem}
.showcase-grid figure{margin:0}
.showcase-grid img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.showcase-grid figcaption{margin-top:.55rem;font-size:.9rem;color:#c9c9ce}
@media (max-width:760px){.showcase-grid{grid-template-columns:1fr}}
@media (max-width:640px){
  /* Single-row header: icon left of Home, nothing wraps to a new row */
  .site-header .wrap{flex-wrap:nowrap;padding:.55rem .9rem;gap:.7rem}
  .brand-logo{width:34px;height:34px}
  .site-nav{display:flex;flex-wrap:nowrap;align-items:center;width:auto;gap:.85rem;font-size:.86rem}
  .site-nav .btn{padding:.38rem .62rem;font-size:.78rem;white-space:nowrap}
  /* Hero: heading, description and button centered */
  .hero{text-align:center}
  .hero h1{font-size:2.85rem;line-height:1.06}
  .hero p{margin-left:auto;margin-right:auto}
  .hero .btn{display:inline-block}
  .hero-img{margin-left:auto;margin-right:auto}
}

/* === Campbell fixes — Nov 10, 2026 (round 4: hero type tuning) === */
.hero .eyebrow{color:#fff!important;-webkit-text-fill-color:#fff}
.hero h1{letter-spacing:-.025em;font-size:clamp(2.9rem,9vw,4.6rem)}
.hero p:not(.eyebrow){font-size:.97rem}
@media (max-width:640px){
  .hero h1{font-size:3.05rem;letter-spacing:-.03em}
  .hero p:not(.eyebrow){font-size:.94rem}
}

/* ---- 2026-11-10 update 3: hero type pass + mobile centering/header ---- */

/* Main headline: bigger, tighter tracking, and a true red accent —
   the coral read pink on mobile */
.hero h1{font-size:clamp(3rem,13vw,4.3rem);letter-spacing:-.035em;line-height:1.04}
.hero h1 em{font-style:normal;color:#e02424}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em{background:linear-gradient(94deg,#f43a2e 0%,#d31616 55%,#a80f0f 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
}
/* Description a touch smaller; the pre-heading line above it goes white */
.hero .lede{font-size:1.08rem}
.hero .eyebrow{color:#fff}

@media (max-width:640px){
  /* Hero content centered on mobile: eyebrow, headline, description, button */
  .hero{text-align:center}
  .hero .lede{margin-left:auto;margin-right:auto}
  .hero .stats{justify-content:center}
  /* Header stays on ONE row: icon left of Home, no second nav row */
  .site-header .wrap{flex-wrap:nowrap;align-items:center;padding:.5rem .9rem;gap:.6rem}
  .brand-logo{width:32px;height:32px}
  .site-nav{flex-basis:auto;margin-left:auto;flex-wrap:nowrap;gap:.3rem .75rem}
  .site-nav a{font-size:.86rem;white-space:nowrap}
  .site-nav .btn{padding:.38rem .65rem;font-size:.8rem}
}

/* === Campbell fixes — Nov 10, 2026 (round 5: stats blocks + showcase heading) === */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:1.9rem}
.stats>div{background:linear-gradient(165deg,rgba(217,45,32,.20),rgba(217,45,32,.05) 55%,rgba(255,255,255,.03));border:1px solid rgba(255,125,103,.38);border-left:1px solid rgba(255,125,103,.38);border-radius:14px;padding:1rem .5rem;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.35)}
.stats strong{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.6rem;line-height:1.1;background:linear-gradient(92deg,#ff6a55,#e53224);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stats span{display:block;margin-top:.3rem;font-size:.78rem;line-height:1.4;color:#cfcfd4}
.showcase h2{font-size:clamp(2.15rem,6.5vw,3.05rem);letter-spacing:-.02em}
@media (max-width:640px){
  .stats{gap:.5rem;margin-top:1.5rem}
  .stats>div{padding:.75rem .25rem;border-radius:12px}
  .stats strong{font-size:1.12rem}
  .stats span{font-size:.6rem;line-height:1.35}
}