/* ===== casma.io sales page =====
   Built from the draft Julia edited. Her own settings for size and width
   are the defaults below; the sliders that produced them do not ship.
   This file is loaded by the sales page alone, so the bare element rules
   below reach nothing else.
   ===== */

  /* Julia's tokens, copied from brand.css so the draft and the app cannot
     drift apart. The page commits to one visual world: warm paper, red, gold.
     casma.io has no dark mode, so every colour is painted explicitly. */
  :root {
    --paper: #faf7f2; --white: #ffffff;
    --red: #ae3736; --red-dark: #8f2c2b;
    --gold: #cba403; --gold-dark: #b59203;
    --ink: #1b1b1b; --ink-surface: #34302b;
    --line: #e7ddd0; --soft: #4a443d; --muted: #8a8178;
    --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
    --font-accent: 'Special Elite', 'Courier Prime', 'Courier New', monospace;
    --font-body: 'Arimo', 'Inter', Arial, sans-serif;
    --radius: 3px; --radius-lg: 4px;

    /* Everything the panel can move, all of it in pixels so one slider is
       comparable with the next. Defaults are the brand's. */
    --h1-size: 75px;
    --h2-size: 45px;
    --head-lh: 1.14;
    --body-size: 20px;
    --lede-size: 20px;
    --body-lh: 1.68;
    --measure: 750px;   /* paragraphs, lists, the FAQ */
    --head-w: 900px;    /* headlines and the lines that sit with them */
    --page-w: 1260px;   /* the page itself */
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh);
    text-align: center; -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: var(--page-w); margin: 0 auto; padding: 0 24px; }
  /* A page that scrolls sideways on a phone is a broken page. */
  .sp { overflow-x: hidden; }
  p { margin: 0 auto 20px; max-width: var(--measure); }
  img { max-width: 100%; height: auto; display: block; margin-inline: auto; }

  .eyebrow {
    font-family: var(--font-accent); font-size: .95rem; letter-spacing: .1em;
    line-height: 1.7; text-transform: none; color: var(--gold-dark);
    margin: 0 auto 26px; max-width: var(--head-w);
  }
  /* Anton is a tall, tight face. At 1.06 the lines touch and a three-line
     headline reads as a block rather than as words. */
  h1, h2, h3 {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    letter-spacing: .012em; line-height: var(--head-lh); text-wrap: balance;
    /* A headline needs air under it. The old rule only reached lead
       paragraphs, so an ordinary one started against the baseline. */
    margin: 0 auto 30px;
  }
  h1 { font-size: clamp(42px, 7vw, var(--h1-size)); max-width: var(--head-w); }
  h2 { font-size: clamp(30px, 4.6vw, var(--h2-size)); max-width: var(--head-w); }
  .tier-name, .foot-name { line-height: 1.18; }
  .rd { color: var(--red); } .gd { color: var(--gold); }
  .lede { font-size: var(--lede-size); color: var(--soft); line-height: calc(var(--body-lh) + .04); }
  /* The tier cards size themselves to the column they sit in, so the text
     measure must not reach inside them. */
  .tier p, .tier li { max-width: none; }
  .say { font-family: var(--font-accent); font-size: 1.15rem; color: var(--red); max-width: var(--head-w); }

  .site-head { border-bottom: 1.5px solid var(--line); background: var(--paper); }
  .site-head .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding-block: 18px;
  }
  .logo { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .02em;
          color: var(--ink); text-decoration: none; }
  .logo span { color: var(--gold); }
  .btn-login {
    font-family: var(--font-accent); font-size: .8rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink); text-decoration: none;
    border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 8px 18px;
  }

  section { padding-block: 70px; }
  @media (max-width: 720px) {
    section { padding-block: 52px; }
    /* Half the side margin: on a phone every pixel of width is text. */
    .wrap { padding: 0 12px; }
    /* The portraits are 1080x1350, so at full width they fill a phone screen
       on their own and push everything else below the fold. */
    .shot-sm { max-width: min(260px, 100%); }
    .shot { margin: 6px auto 22px; }
    .video-slot { max-width: none; }
    .tier { padding: 30px 18px 24px; }
    .tier-name { font-size: 26px; }
  }
  .on-white { background: var(--white); border-block: 1.5px solid var(--line); }
  .rule-gold { width: 54px; height: 3px; background: var(--gold); margin: 0 auto 24px; }

  .hero { padding-top: 64px; padding-bottom: 60px; }
  /* Special Elite is a typewriter face, so the headline typing itself in is
     the brand rather than an effect laid over it. A hidden copy underneath
     holds the height so nothing below moves while it runs. */
  .type-wrap { position: relative; margin: 0 auto 30px; max-width: var(--head-w); }
  .type-ghost { visibility: hidden; }
  .type-live { position: absolute; inset: 0; }
  .caret { font-family: var(--font-accent); color: var(--red); font-size: .7em;
           animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  /* min(), not a plain cap. A class beats the bare img rule on specificity,
     so max-width: 860px let the picture out past a 375px screen and the
     right-hand side simply fell off. */
  .shot { margin: 10px auto 30px; max-width: min(860px, 100%); }
  .shot-sm { max-width: min(420px, 100%); border-radius: var(--radius-lg); }

  .cta { margin-top: 32px; }
  .btn {
    display: inline-block; font-family: var(--font-accent); font-size: 1rem;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
    border-radius: var(--radius); padding: 15px 30px; border: 1.5px solid transparent;
    transition: transform .16s ease, background .18s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--red); color: var(--white); }
  .btn-primary:hover { background: var(--red-dark); }
  .btn-secondary { background: var(--gold); color: var(--ink); }
  .btn-secondary:hover { background: var(--gold-dark); }
  .cta-note { font-family: var(--font-accent); font-size: .84rem; color: var(--muted);
              margin: 13px auto 0; }

  /* The headline already carries the gap below it. */
  .steps { display: flex; flex-direction: column; gap: 6px; margin-top: 0; }
  .steps p { color: var(--soft); }

  .turn { background: var(--ink-surface); color: var(--paper); }
  .turn .eyebrow { color: var(--gold); }
  .turn h2 { color: var(--paper); }
  .turn h2 .gd { color: var(--gold); }
  .turn p { color: #d8d2c8; margin-top: 0; }

  /* A tick says "this is you" where a rule between rows only said "these are
     separate". The list is left-aligned inside a centred block: with a mark
     at the front, ragged left edges read as a mistake. */
  .fits { list-style: none; margin: 0 auto; padding: 0; max-width: var(--measure);
          text-align: left; }
  .fits li { display: grid; grid-template-columns: 26px 1fr; gap: 12px;
             align-items: start; padding: 11px 0; color: var(--soft); }
  .tick {
    width: 21px; height: 21px; margin-top: 5px; flex: none;
    fill: none; stroke: var(--gold-dark); stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* What only the bigger tier has. Filled, red, and a different shape, so
     the eye sorts the two lists without reading them. */
  .tick.is-plus { fill: var(--red); stroke: none; }

  .tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 22px; margin-top: 40px; align-items: start; }
  @media (max-width: 880px) { .tiers { grid-template-columns: 1fr; } }
  .tier {
    position: relative; background: var(--white); border: 1.5px solid var(--line);
    border-radius: var(--radius-lg); padding: 34px 28px 28px;
    display: flex; flex-direction: column; gap: 20px;
  }
  .tier.is-full { border-color: var(--gold); }
  .badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-family: var(--font-accent); font-size: .71rem;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--gold); color: var(--ink); border-radius: 999px; padding: 5px 15px;
  }
  .tier-price { font-family: var(--font-display); font-size: 2.7rem; line-height: 1; color: var(--red); }
  /* The price left the card: the two names say which is which, and a number
     at the top made the reader compare before reading either. */
  .tier-name { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 32px);
               text-transform: uppercase; letter-spacing: .01em; }
  .tier-say { font-size: .97rem; color: var(--soft); margin: 0 auto;
              padding-bottom: 18px; border-bottom: 1.5px solid var(--line); }
  .tier ul { list-style: none; margin: 0; padding: 0; text-align: left; }
  .tier li { display: grid; grid-template-columns: 24px 1fr; gap: 11px;
             align-items: start; font-size: .97rem; color: var(--soft);
             padding: 10px 0; }
  .tier .tick { width: 19px; height: 19px; margin-top: 4px; }
  .tier li b { color: var(--ink); }
  .tier .btn { margin-top: auto; }

  .video-slot {
    border: 1.5px dashed var(--line); border-radius: var(--radius-lg);
    background: var(--white); aspect-ratio: 16 / 9;
    width: 100%; max-width: 820px; margin: 30px auto 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; color: var(--muted);
  }
  .video-slot svg { width: 44px; height: 44px; fill: none; stroke: var(--gold);
                    stroke-width: 1.6; stroke-linejoin: round; }
  .video-slot p { font-family: var(--font-accent); font-size: .86rem;
                  letter-spacing: .06em; margin: 0; }

  .faq-list { max-width: var(--measure); margin: 32px auto 0; text-align: left; }
  details { border-bottom: 1.5px solid var(--line); padding: 4px 0; }
  summary { cursor: pointer; list-style: none; font-family: var(--font-body);
            font-weight: 700; padding: 17px 34px 17px 0; position: relative; }
  summary::-webkit-details-marker { display: none; }
  summary::after {
    content: "+"; position: absolute; right: 4px; top: 15px;
    font-family: var(--font-accent); color: var(--red); font-size: 1.3rem;
  }
  details[open] summary::after { content: "\2212"; }
  details p { margin: 0 0 18px; color: var(--soft); max-width: none; }


  /* ===== The offer, and what is left of it ===== */
  .offer {
    background: var(--white); border: 2px solid var(--gold);
    border-radius: var(--radius-lg); padding: 40px 30px;
    max-width: 820px; margin: 0 auto;
  }
  .price-row { display: flex; align-items: baseline; justify-content: center;
               gap: 16px; flex-wrap: wrap; margin: 24px 0 6px; }
  .price-was { font-family: var(--font-accent); font-size: 1.3rem; color: var(--muted);
               text-decoration: line-through; }
  .price-now { font-family: var(--font-display); font-size: clamp(48px, 9vw, 86px);
               line-height: 1; color: var(--red); }
  .price-per { font-family: var(--font-accent); font-size: 1rem; color: var(--muted); }

  .clock { display: flex; justify-content: center; gap: 10px; margin: 26px 0 30px; }
  .clock-part {
    min-width: 78px; padding: 12px 8px;
    background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
  }
  .clock-part b {
    display: block; font-family: var(--font-display); font-weight: 400;
    font-size: 2.1rem; line-height: 1; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .clock-part span {
    display: block; margin-top: 6px;
    font-family: var(--font-accent); font-size: .68rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
  }
  .clock.is-close .clock-part b { color: var(--red); }

  .offer .inside { margin: 0 auto 30px; max-width: 640px; }
  .offer .btn { font-size: 1.05rem; padding: 17px 34px; }

  .inside { list-style: none; padding: 0; text-align: left; }
  .inside li { display: grid; grid-template-columns: 26px 1fr; gap: 12px;
               align-items: start; padding: 11px 0; color: var(--soft); font-size: .97rem; }
  .inside li b { color: var(--ink); }

  /* The newest thing in the list, and the one nobody is looking for yet. A
     third mark, because the tick says "you get this" and the star says
     "casmaAI does it", and neither of those is what a connection is. */
  .tick.is-link { stroke: var(--red); fill: none; }
  .inside li.is-new { color: var(--ink); }
  .new-tag {
    display: inline-block;
    font-family: var(--font-accent, 'Special Elite', 'Courier Prime', monospace);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--white, #fff);
    background: var(--red);
    border-radius: 3px;
    padding: 3px 8px;
    margin-right: 10px;
    vertical-align: 2px;
  }

  @media (max-width: 720px) {
    .offer { padding: 30px 16px; }
    .clock { gap: 6px; }
    .clock-part { min-width: 0; flex: 1; padding: 10px 4px; }
    .clock-part b { font-size: 1.6rem; }
    .clock-part span { font-size: .6rem; letter-spacing: .06em; }
  }

  /* ===== Footer — Julia's own, dropped in as given ===== */
  .site-footer { width: 100%; background: #000; padding: 60px 40px 40px; text-align: center !important; }
  .footer-inner { max-width: 800px; margin: 0 auto; text-align: center !important;
                  display: flex; flex-direction: column; align-items: center; }
  .footer-name { font-family: 'Anton', Impact, sans-serif; font-weight: 400;
                 font-size: clamp(24px, 3vw, 32px); letter-spacing: .02em;
                 text-transform: uppercase; color: #fff; margin-bottom: 16px; width: 100%; }
  .footer-social { margin-bottom: 24px; display: flex; gap: 12px; justify-content: center; }
  .footer-social-link { display: inline-flex; align-items: center; justify-content: center;
                        width: 44px; height: 44px; border-radius: 50%; color: #fff;
                        transition: all .2s; }
  .footer-social-link.youtube { background: #ae3736; }
  .footer-social-link.youtube:hover { background: #8f2c2b; transform: translateY(-2px); }
  .footer-social-link.instagram { background: #cba403; color: #1b1b1b; }
  .footer-social-link.instagram:hover { background: #b59203; transform: translateY(-2px); }
  .footer-link-row { margin-bottom: 0; text-align: center !important; width: 100%; }
  .footer-link-row a { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                       text-transform: uppercase; letter-spacing: 1.5px; color: #fff;
                       text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
  .footer-link-row a:hover { color: #cba403; }
  .footer-link-row span { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                          color: rgba(255,255,255,.3); margin: 0 8px; }
  .footer-link-row.secondary a { font-size: 10px; letter-spacing: 1.2px; opacity: .75; }
  .footer-link-row.secondary a:hover { opacity: 1; }
  .footer-link-row.secondary span { font-size: 10px; margin: 0 6px; }
  .footer-spacer { height: 20px; }
  .footer-address { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                    line-height: 1.8; color: rgba(255,255,255,.6); margin-bottom: 8px; width: 100%; }
  .footer-address a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .footer-address a:hover { color: #cba403; }
  .footer-divider { width: 60px; height: 1px; background: rgba(255,255,255,.15); margin: 28px auto; }
  .footer-support { font-family: 'Special Elite', 'Courier New', monospace; font-size: 10px;
                    text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.55);
                    line-height: 1.8; margin-bottom: 24px; }
  .footer-support a { color: #cba403; text-decoration: none; }
  .footer-support a:hover { color: #fff; }
  .footer-disclaimer { font-family: var(--font-body); font-size: 9px; letter-spacing: .3px;
                       color: rgba(255,255,255,.35); line-height: 1.8; max-width: 700px;
                       margin: 0 auto 20px; }
  .footer-facebook { font-family: var(--font-body); font-size: 9px; text-transform: uppercase;
                     letter-spacing: .8px; color: rgba(255,255,255,.35); line-height: 1.8;
                     max-width: 600px; margin: 0 auto; }
  @media (max-width: 768px) {
    .site-footer { padding: 48px 24px 32px; }
    .footer-link-row a { font-size: 10px; letter-spacing: 1px; }
    .footer-link-row span { margin: 0 4px; }
    .footer-link-row.secondary a { font-size: 9px; }
  }


  /* ===== Footer — Julia's own, dropped in as given ===== */
  .site-footer { width: 100%; background: #000; padding: 60px 40px 40px; text-align: center !important; }
  .footer-inner { max-width: 800px; margin: 0 auto; text-align: center !important;
                  display: flex; flex-direction: column; align-items: center; }
  .footer-name { font-family: 'Anton', Impact, sans-serif; font-weight: 400;
                 font-size: clamp(24px, 3vw, 32px); letter-spacing: .02em;
                 text-transform: uppercase; color: #fff; margin-bottom: 16px; width: 100%; }
  .footer-social { margin-bottom: 24px; display: flex; gap: 12px; justify-content: center; }
  .footer-social-link { display: inline-flex; align-items: center; justify-content: center;
                        width: 44px; height: 44px; border-radius: 50%; color: #fff;
                        transition: all .2s; }
  .footer-social-link.youtube { background: #ae3736; }
  .footer-social-link.youtube:hover { background: #8f2c2b; transform: translateY(-2px); }
  .footer-social-link.instagram { background: #cba403; color: #1b1b1b; }
  .footer-social-link.instagram:hover { background: #b59203; transform: translateY(-2px); }
  .footer-link-row { margin-bottom: 0; text-align: center !important; width: 100%; }
  .footer-link-row a { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                       text-transform: uppercase; letter-spacing: 1.5px; color: #fff;
                       text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
  .footer-link-row a:hover { color: #cba403; }
  .footer-link-row span { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                          color: rgba(255,255,255,.3); margin: 0 8px; }
  .footer-link-row.secondary a { font-size: 10px; letter-spacing: 1.2px; opacity: .75; }
  .footer-link-row.secondary a:hover { opacity: 1; }
  .footer-link-row.secondary span { font-size: 10px; margin: 0 6px; }
  .footer-spacer { height: 20px; }
  .footer-address { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                    line-height: 1.8; color: rgba(255,255,255,.6); margin-bottom: 8px; width: 100%; }
  .footer-address a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .footer-address a:hover { color: #cba403; }
  .footer-divider { width: 60px; height: 1px; background: rgba(255,255,255,.15); margin: 28px auto; }
  .footer-support { font-family: 'Special Elite', 'Courier New', monospace; font-size: 10px;
                    text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.55);
                    line-height: 1.8; margin-bottom: 24px; }
  .footer-support a { color: #cba403; text-decoration: none; }
  .footer-support a:hover { color: #fff; }
  .footer-disclaimer { font-family: var(--font-body); font-size: 9px; letter-spacing: .3px;
                       color: rgba(255,255,255,.35); line-height: 1.8; max-width: 700px;
                       margin: 0 auto 20px; }
  .footer-facebook { font-family: var(--font-body); font-size: 9px; text-transform: uppercase;
                     letter-spacing: .8px; color: rgba(255,255,255,.35); line-height: 1.8;
                     max-width: 600px; margin: 0 auto; }
  @media (max-width: 768px) {
    .site-footer { padding: 48px 24px 32px; }
    .footer-link-row a { font-size: 10px; letter-spacing: 1px; }
    .footer-link-row span { margin: 0 4px; }
    .footer-link-row.secondary a { font-size: 9px; }
  }


  /* ===== The design panel =====
     Sliders, not a rebuild each time: every one writes a CSS variable, so
     the page reflows live and nothing is guessed from a description. */
  .panel {
    position: fixed; right: 18px; top: 18px; bottom: 18px; width: 300px; z-index: 60;
    background: var(--white); border: 1.5px solid var(--line); border-radius: 6px;
    box-shadow: 0 18px 50px -20px rgba(0,0,0,.4);
    overflow-y: auto; padding: 20px 20px 26px; text-align: left;
  }
  .panel[hidden] { display: none; }
  .panel h3 {
    font-family: var(--font-accent); font-size: .74rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold-dark); margin: 22px 0 10px;
    text-align: left;
  }
  .panel h3:first-child { margin-top: 0; }
  .ctl { margin-bottom: 14px; }
  .ctl label {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    font-family: var(--font-body); font-size: .8rem; color: var(--soft); margin-bottom: 5px;
  }
  .ctl label b { font-family: var(--font-accent); font-weight: 400;
                 font-size: .76rem; color: var(--ink); }
  .ctl input[type=range] { width: 100%; accent-color: var(--red); margin: 0; }
  .ctl select {
    width: 100%; font-family: var(--font-body); font-size: .84rem;
    padding: 7px 9px; border: 1.5px solid var(--line); border-radius: 4px;
    background: #fff; color: var(--ink);
  }
  .panel-foot { display: flex; gap: 8px; margin-top: 20px; }
  .panel-foot button {
    flex: 1; font-family: var(--font-accent); font-size: .74rem; letter-spacing: .07em;
    text-transform: uppercase; padding: 9px 10px; border-radius: 4px; cursor: pointer;
    border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  }
  .panel-foot button:hover { border-color: var(--red); color: var(--red); }
  @media (max-width: 900px) {
    .panel { left: 18px; right: 18px; width: auto; top: auto; height: 60vh; }
  }


  /* ===== Footer — Julia's own, dropped in as given ===== */
  .site-footer { width: 100%; background: #000; padding: 60px 40px 40px; text-align: center !important; }
  .footer-inner { max-width: 800px; margin: 0 auto; text-align: center !important;
                  display: flex; flex-direction: column; align-items: center; }
  .footer-name { font-family: 'Anton', Impact, sans-serif; font-weight: 400;
                 font-size: clamp(24px, 3vw, 32px); letter-spacing: .02em;
                 text-transform: uppercase; color: #fff; margin-bottom: 16px; width: 100%; }
  .footer-social { margin-bottom: 24px; display: flex; gap: 12px; justify-content: center; }
  .footer-social-link { display: inline-flex; align-items: center; justify-content: center;
                        width: 44px; height: 44px; border-radius: 50%; color: #fff;
                        transition: all .2s; }
  .footer-social-link.youtube { background: #ae3736; }
  .footer-social-link.youtube:hover { background: #8f2c2b; transform: translateY(-2px); }
  .footer-social-link.instagram { background: #cba403; color: #1b1b1b; }
  .footer-social-link.instagram:hover { background: #b59203; transform: translateY(-2px); }
  .footer-link-row { margin-bottom: 0; text-align: center !important; width: 100%; }
  .footer-link-row a { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                       text-transform: uppercase; letter-spacing: 1.5px; color: #fff;
                       text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
  .footer-link-row a:hover { color: #cba403; }
  .footer-link-row span { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                          color: rgba(255,255,255,.3); margin: 0 8px; }
  .footer-link-row.secondary a { font-size: 10px; letter-spacing: 1.2px; opacity: .75; }
  .footer-link-row.secondary a:hover { opacity: 1; }
  .footer-link-row.secondary span { font-size: 10px; margin: 0 6px; }
  .footer-spacer { height: 20px; }
  .footer-address { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                    line-height: 1.8; color: rgba(255,255,255,.6); margin-bottom: 8px; width: 100%; }
  .footer-address a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .footer-address a:hover { color: #cba403; }
  .footer-divider { width: 60px; height: 1px; background: rgba(255,255,255,.15); margin: 28px auto; }
  .footer-support { font-family: 'Special Elite', 'Courier New', monospace; font-size: 10px;
                    text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.55);
                    line-height: 1.8; margin-bottom: 24px; }
  .footer-support a { color: #cba403; text-decoration: none; }
  .footer-support a:hover { color: #fff; }
  .footer-disclaimer { font-family: var(--font-body); font-size: 9px; letter-spacing: .3px;
                       color: rgba(255,255,255,.35); line-height: 1.8; max-width: 700px;
                       margin: 0 auto 20px; }
  .footer-facebook { font-family: var(--font-body); font-size: 9px; text-transform: uppercase;
                     letter-spacing: .8px; color: rgba(255,255,255,.35); line-height: 1.8;
                     max-width: 600px; margin: 0 auto; }
  @media (max-width: 768px) {
    .site-footer { padding: 48px 24px 32px; }
    .footer-link-row a { font-size: 10px; letter-spacing: 1px; }
    .footer-link-row span { margin: 0 4px; }
    .footer-link-row.secondary a { font-size: 9px; }
  }


  /* ===== Footer — Julia's own, dropped in as given ===== */
  .site-footer { width: 100%; background: #000; padding: 60px 40px 40px; text-align: center !important; }
  .footer-inner { max-width: 800px; margin: 0 auto; text-align: center !important;
                  display: flex; flex-direction: column; align-items: center; }
  .footer-name { font-family: 'Anton', Impact, sans-serif; font-weight: 400;
                 font-size: clamp(24px, 3vw, 32px); letter-spacing: .02em;
                 text-transform: uppercase; color: #fff; margin-bottom: 16px; width: 100%; }
  .footer-social { margin-bottom: 24px; display: flex; gap: 12px; justify-content: center; }
  .footer-social-link { display: inline-flex; align-items: center; justify-content: center;
                        width: 44px; height: 44px; border-radius: 50%; color: #fff;
                        transition: all .2s; }
  .footer-social-link.youtube { background: #ae3736; }
  .footer-social-link.youtube:hover { background: #8f2c2b; transform: translateY(-2px); }
  .footer-social-link.instagram { background: #cba403; color: #1b1b1b; }
  .footer-social-link.instagram:hover { background: #b59203; transform: translateY(-2px); }
  .footer-link-row { margin-bottom: 0; text-align: center !important; width: 100%; }
  .footer-link-row a { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                       text-transform: uppercase; letter-spacing: 1.5px; color: #fff;
                       text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
  .footer-link-row a:hover { color: #cba403; }
  .footer-link-row span { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                          color: rgba(255,255,255,.3); margin: 0 8px; }
  .footer-link-row.secondary a { font-size: 10px; letter-spacing: 1.2px; opacity: .75; }
  .footer-link-row.secondary a:hover { opacity: 1; }
  .footer-link-row.secondary span { font-size: 10px; margin: 0 6px; }
  .footer-spacer { height: 20px; }
  .footer-address { font-family: 'Special Elite', 'Courier New', monospace; font-size: 11px;
                    line-height: 1.8; color: rgba(255,255,255,.6); margin-bottom: 8px; width: 100%; }
  .footer-address a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .footer-address a:hover { color: #cba403; }
  .footer-divider { width: 60px; height: 1px; background: rgba(255,255,255,.15); margin: 28px auto; }
  .footer-support { font-family: 'Special Elite', 'Courier New', monospace; font-size: 10px;
                    text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.55);
                    line-height: 1.8; margin-bottom: 24px; }
  .footer-support a { color: #cba403; text-decoration: none; }
  .footer-support a:hover { color: #fff; }
  .footer-disclaimer { font-family: var(--font-body); font-size: 9px; letter-spacing: .3px;
                       color: rgba(255,255,255,.35); line-height: 1.8; max-width: 700px;
                       margin: 0 auto 20px; }
  .footer-facebook { font-family: var(--font-body); font-size: 9px; text-transform: uppercase;
                     letter-spacing: .8px; color: rgba(255,255,255,.35); line-height: 1.8;
                     max-width: 600px; margin: 0 auto; }
  @media (max-width: 768px) {
    .site-footer { padding: 48px 24px 32px; }
    .footer-link-row a { font-size: 10px; letter-spacing: 1px; }
    .footer-link-row span { margin: 0 4px; }
    .footer-link-row.secondary a { font-size: 9px; }
  }


  /* ===== The design panel =====
     Sliders, not a rebuild each time: every one writes a CSS variable, so
     the page reflows live and nothing is guessed from a description. */
  .panel {
    position: fixed; right: 18px; top: 18px; bottom: 18px; width: 300px; z-index: 60;
    background: var(--white); border: 1.5px solid var(--line); border-radius: 6px;
    box-shadow: 0 18px 50px -20px rgba(0,0,0,.4);
    overflow-y: auto; padding: 20px 20px 26px; text-align: left;
  }
  .panel[hidden] { display: none; }
  .panel h3 {
    font-family: var(--font-accent); font-size: .74rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold-dark); margin: 22px 0 10px;
    text-align: left;
  }
  .panel h3:first-child { margin-top: 0; }
  .ctl { margin-bottom: 14px; }
  .ctl label {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    font-family: var(--font-body); font-size: .8rem; color: var(--soft); margin-bottom: 5px;
  }
  .ctl label b { font-family: var(--font-accent); font-weight: 400;
                 font-size: .76rem; color: var(--ink); }
  .ctl input[type=range] { width: 100%; accent-color: var(--red); margin: 0; }
  .ctl select {
    width: 100%; font-family: var(--font-body); font-size: .84rem;
    padding: 7px 9px; border: 1.5px solid var(--line); border-radius: 4px;
    background: #fff; color: var(--ink);
  }
  .panel-foot { display: flex; gap: 8px; margin-top: 20px; }
  .panel-foot button {
    flex: 1; font-family: var(--font-accent); font-size: .74rem; letter-spacing: .07em;
    text-transform: uppercase; padding: 9px 10px; border-radius: 4px; cursor: pointer;
    border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  }
  .panel-foot button:hover { border-color: var(--red); color: var(--red); }
  @media (max-width: 900px) {
    .panel { left: 18px; right: 18px; width: auto; top: auto; height: 60vh; }
  }

  /* ===== Editing =====
     Every piece of copy is its own field. Nothing about the page changes
     when it is not being edited: the outline only appears on hover, so what
     Julia is looking at is the page as a reader will see it. */
  [data-k] { outline: 1.5px dashed transparent; outline-offset: 5px; border-radius: 2px; }
  body.editing [data-k]:hover { outline-color: #d9c98f; cursor: text; }
  body.editing [data-k]:focus { outline: 1.5px solid var(--gold); outline-offset: 5px; }
  [data-k]:focus { background: #fffdf3; }

  .bar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 50;
    display: flex; align-items: center; gap: 14px;
    background: var(--ink-surface); color: var(--paper);
    border-radius: 999px; padding: 10px 20px;
    font-family: var(--font-accent); font-size: .78rem; letter-spacing: .06em;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
  }
  .bar b { color: var(--gold); font-weight: 400; }
  .bar button {
    font: inherit; color: var(--paper); background: none;
    border: 1.5px solid rgba(250,247,242,.4); border-radius: 999px;
    padding: 5px 14px; cursor: pointer;
  }
  .bar button:hover { border-color: var(--gold); color: var(--gold); }
  .bar.is-off { background: #6a6258; }

  /* ===== The sale bar =====
     Stands where the logo and the login link were. On a page that exists for
     three days, what is left of them is the thing worth saying at the top.
     Sticky, because the deadline is the argument and it should not scroll
     away from it. */
  .salebar {
    position: sticky; top: 0; z-index: 40;
    background: var(--red); color: #fff;
    padding: 10px 16px;
  }
  .salebar-in {
    max-width: var(--page-w); margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 10px 22px; flex-wrap: wrap;
  }
  .salebar-say {
    font-family: var(--font-accent); font-size: .92rem; letter-spacing: .06em;
    text-transform: uppercase;
  }
  .salebar-say b { color: #f3dd8a; font-weight: 400; }

  .clock.is-bar { display: flex; gap: 6px; margin: 0; }
  .clock.is-bar .clock-part {
    min-width: 0; background: rgba(0, 0, 0, .18); border: 0;
    border-radius: var(--radius); padding: 4px 9px;
  }
  .clock.is-bar .clock-part b { font-size: 1.15rem; color: #fff; }
  .clock.is-bar .clock-part span {
    margin-top: 1px; font-size: .58rem; color: rgba(255, 255, 255, .72);
  }
  .clock.is-bar.is-close .clock-part b { color: #f3dd8a; }

  @media (max-width: 720px) {
    .salebar { padding: 8px 10px; }
    .salebar-say { font-size: .78rem; letter-spacing: .04em; width: 100%; text-align: center; }
    .clock.is-bar .clock-part { padding: 3px 7px; }
    .clock.is-bar .clock-part b { font-size: 1rem; }
  }

  /* The list is what the offer is. The heading over it says so, and what it
     costs sits under the button, where somebody is already deciding. */
  .offer-h {
    font-size: clamp(22px, 3vw, 28px); margin: 30px auto 18px;
  }
  .cta-note-big {
    font-size: .95rem; color: var(--soft); line-height: 1.7;
    margin-top: 16px; max-width: 48ch;
  }
  .cta-note-big + .cta-note { margin-top: 10px; }