/* Bella Coterie — Amazon insert-card email-capture LP
   Palette + type matched to the printed insert card (charcoal silk / champagne
   gold / blush cream), on the brand scaffolding in brand/root.css + BRAND.md §7.
   Grammar (scale / spacing / motion) per design-laws. Single accent: champagne gold. */

:root{
  /* Insert-card palette (matched to the printed card, 2026-08-04) */
  --gold:#C3A96E;         /* champagne gold — the card's display type + wordmark */
  --gold-deep:#A88F52;    /* deeper gold for hairlines, hover, small accents */
  --charcoal:#24221F;     /* the card's dark silk panel */
  --charcoal-soft:#3A3733;
  --cream:#F8E9DC;        /* the card's blush-cream panel */
  --cream-deep:#F1DDCC;   /* slightly deeper cream for the collection band */

  /* Brand scaffolding (locked, still in play for text + states) */
  --primary:#C3A96E;      /* accent now reads gold, not terracotta */
  --primary-deep:#A88F52;
  --blush:#E5CCBD;
  --sage:#7A8471;
  --sage-deep:#5A6653;
  --ink:#1D2330;
  --bg:#FBFAF9;
  --surface2:#F1DDCC;
  --line:#E0CDB9;         /* warm cream-tinted hairline */
  --muted:#6B7280;
  --success:#5A7A4E;
  --error:#B85450;

  /* Type */
  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Modular scale (1.25) */
  --t-eyebrow:.78rem;
  --t-body:1.0625rem;
  --t-lg:1.25rem;
  --t-h3:1.5rem;
  --t-h2:2rem;
  --t-h1:clamp(2.4rem, 5.2vw, 3.9rem);
  --t-stat:clamp(3.4rem, 9vw, 6rem);

  /* Spacing (8-pt) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  --radius:4px;           /* the insert card is a crisp rectangle, not a soft app card */
  --radius-pill:999px;
  --shadow:0 24px 60px -20px rgba(20,18,16,.55);
  --shadow-soft:0 2px 10px rgba(29,35,48,.06);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- shared atoms ---------- */
/* Card treatment: wide-tracked uppercase, no dot/dash prefix — matches
   "A WELCOME GIFT" on the printed insert. */
.eyebrow{
  font-size:var(--t-eyebrow);
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink);
  display:block;
}
h1,.h1{
  font-family:var(--display);
  font-weight:600;
  font-size:var(--t-h1);
  line-height:1.05;
  letter-spacing:-.02em;
}
.h1 em{font-style:italic;color:var(--gold-deep)}
.lead{font-size:var(--t-lg);color:#4a423b;line-height:1.5}
.logo{height:34px;width:auto}
.logo-foot{height:26px;width:auto;opacity:.85}

/* gold hairline rule — the card's divider */
.hair{
  border:none;height:1px;background:var(--gold);
  width:min(280px,70%);margin:var(--s3) auto;opacity:.75;
}

/* offer chip */
.offer{
  display:inline-flex;align-items:baseline;gap:10px;
  font-family:var(--display);
}
.offer b{font-size:1.9rem;font-weight:700;color:var(--gold-deep);letter-spacing:-.01em}
.offer span{font-size:1rem;color:var(--muted);font-family:var(--sans)}

/* ---------- form ---------- */
.capture{margin-top:var(--s3);max-width:440px}
.field{
  display:flex;gap:10px;flex-wrap:wrap;
}
/* stacked layout: email + phone + button each full-width, one per row.
   Override the row-layout flex-basis (220px would become a HEIGHT in a column). */
.field.stacked{flex-direction:column;flex-wrap:nowrap}
.field.stacked input[type=email],
.field.stacked input[type=tel],
.field.stacked .btn{flex:0 0 auto;width:100%}
.field input[type=email],
.field input[type=tel]{
  flex:1 1 220px;
  min-width:0;
  font-family:var(--sans);
  font-size:1rem;
  padding:16px 18px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;
  color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.capture.on-photo .field input[type=email],
.capture.on-photo .field input[type=tel]{background:rgba(255,255,255,.96)}
.field input[type=email]::placeholder,
.field input[type=tel]::placeholder{color:#a89c90}
.field input[type=email]:focus,
.field input[type=tel]:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(195,169,110,.24);
}
.field input.invalid{border-color:var(--error)}
.btn{
  appearance:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:.95rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:17px 28px;
  border-radius:var(--radius-pill);
  background:var(--charcoal);color:var(--cream);
  white-space:nowrap;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(168,143,82,.65)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn[disabled]{opacity:.7;cursor:default;transform:none}
.field-note{margin-top:12px;font-size:.85rem;color:#7a6f65}
.field-note a{color:var(--gold-deep);text-decoration:underline}
/* Consent disclosure. Sized down to 0.72rem (~11.5px) at Ray's request 2026-08-04.
   That is the floor — the legal standard is "clear and conspicuous," so if this
   shrinks further it stops reading as disclosed. Contrast is deliberately HELD at
   ~5.4:1 and links stay full-contrast ink: small AND grey is what gets consent
   thrown out, so the size came down without the color going pale. */
.consent{
  margin-top:16px;font-size:.72rem;line-height:1.5;color:#5A524A;
  max-width:400px;margin-left:auto;margin-right:auto;text-align:center;
}
.consent a{color:var(--charcoal);text-decoration:underline;font-weight:600}
.consent a:hover{color:var(--gold-deep)}
.err{color:var(--error);font-size:.85rem;margin-top:10px;display:none}
.err.show{display:block}

/* success state */
.success{display:none}
.success.show{display:block;animation:rise .5s var(--ease) both}
.capture.is-done .form-live{display:none}
.code-card{
  margin-top:var(--s3);
  border:1.5px dashed var(--gold);
  background:rgba(255,255,255,.6);
  border-radius:var(--radius);
  padding:20px 24px;
  text-align:center;
}
.code-card .label{font-size:var(--t-eyebrow);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);font-weight:700}
.code-card .code{
  font-family:var(--display);font-size:2.1rem;font-weight:700;
  letter-spacing:.12em;color:var(--gold-deep);margin:8px 0 4px;
}
.code-card .meta{font-size:.85rem;color:#7a6f65}
.copy-code{
  margin-top:12px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-deep);
  background:none;border:1.5px solid var(--line);border-radius:var(--radius-pill);
  padding:9px 18px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.copy-code:hover{border-color:var(--gold);color:var(--charcoal);background:#fff}
/* visit-website CTA (shown after conversion) */
.btn-visit{display:inline-block;text-decoration:none;text-align:center;margin-top:var(--s3)}

/* ====================================================================
   "Your Reward" — centered minimal, stat-hero on silk (the live page)
   The stage is the card's DARK silk panel; the card is its CREAM panel.
   ==================================================================== */
.v-c{background:var(--charcoal)}
.v-c .stage{
  position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--s5) var(--s3);
  /* Two declarations on purpose: browsers that don't understand image-set(...type())
     ignore the second and take the JPEG. Modern browsers take the WebP (64KB vs 378KB).
     The silk sits under a .74-.90 charcoal wash, so the compression is invisible —
     measured SSIM 1.000 against the 6192px original once the overlay is applied. */
  background-image:linear-gradient(180deg, rgba(36,34,31,.74), rgba(36,34,31,.90)), url('assets/silk-champagne.jpg');
  background-image:linear-gradient(180deg, rgba(36,34,31,.74), rgba(36,34,31,.90)),
                   image-set(url('assets/silk-champagne.webp') type('image/webp'),
                             url('assets/silk-champagne.jpg') type('image/jpeg'));
  background-size:cover;background-position:center;
}
.v-c .card{
  width:100%;max-width:560px;text-align:center;
  background:var(--cream);
  border-radius:var(--radius);
  padding:clamp(var(--s4),4vw,var(--s6)) clamp(var(--s4),5vw,var(--s6));
  box-shadow:var(--shadow);
}
.v-c .logo{margin:0 auto var(--s4)}
.v-c .eyebrow{margin-bottom:var(--s1)}
.v-c .stat{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.7rem,6.5vw,4.6rem);line-height:.9;color:var(--gold-deep);
  letter-spacing:-.02em;margin-bottom:var(--s2);
}
.v-c .stat small{display:block;font-family:var(--sans);font-weight:700;font-size:.78rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--charcoal-soft);margin-top:12px}
.v-c h1{font-size:clamp(1.7rem,3.4vw,2.2rem);margin-bottom:var(--s2);color:var(--charcoal)}
.v-c .lead{font-size:1.0625rem;margin-bottom:var(--s3)}
.v-c .capture{margin-left:auto;margin-right:auto}
.v-c .field{justify-content:center}
.v-c .success{text-align:center}

/* C — "your code works on everything" reassurance band (below the hero) */
.collection{background:var(--cream-deep);padding:var(--s7) var(--s3)}
.collection-inner{
  max-width:640px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
}
.collection .eyebrow{margin:0;color:var(--gold-deep)}
.collection-lead{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.35;color:var(--charcoal);
}
.ghost-link{
  font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-deep);text-decoration:none;
  border-bottom:1.5px solid var(--gold);padding-bottom:5px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.ghost-link:hover{color:var(--charcoal);border-color:var(--charcoal)}
.collection-note{font-size:.98rem;color:#6f6459;max-width:520px;line-height:1.6}

/* Trust signals (5,000+ reviews + OEKO-TEX badge) were removed from this page
   on 2026-08-04 at the client's request — the styles went with them. */

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .v-c .card{margin:0 auto}
}
@media (max-width:480px){
  .field input[type=email],.btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}