/* ==========================================================================
   Brand Workbook Studio — styles.css
   Single shared stylesheet for a static, JavaScript-free storefront site.

   Table of contents
   01. CSS variables (design tokens)
   02. Reset and base styles
   03. Typography
   04. Layout utilities
   05. Announcement bar
   06. Header and navigation
   07. Buttons and links
   08. Hero
   09. Value strip
   10. Product grid
   11. Product cards and CSS-only covers
   12. Content sections (steps, benefits, bundle, testimonials, CTA)
   13. Forms
   14. FAQ / details accordion
   15. Policy and long-form pages
   16. Footer
   17. Accessibility helpers
   18. Responsive breakpoints
   19. Print styles
   ========================================================================== */


/* ==========================================================================
   01. CSS VARIABLES
   ========================================================================== */

:root {
  /* Brand palette */
  --navy: #17213C;
  --navy-soft: #24304f;
  --cream: #F8F5EF;
  --beige: #EDE5D8;
  --terracotta: #C96F4A;        /* decorative accent (rules, covers, marks) */
  --terracotta-strong: #B85B36; /* accessible accent for buttons/white text */
  --terracotta-ink: #93482A;    /* accessible accent for text on light bg */
  --ink: #202020;
  --muted: #666666;
  --white: #FFFFFF;

  /* Functional tokens */
  --bg: var(--cream);
  --surface: var(--white);
  --surface-alt: var(--beige);
  --line: rgba(23, 33, 60, 0.14);
  --line-soft: rgba(23, 33, 60, 0.08);
  --focus: var(--terracotta-strong);

  /* Shadows — soft and restrained */
  --shadow-sm: 0 1px 2px rgba(23, 33, 60, 0.05), 0 6px 16px rgba(23, 33, 60, 0.05);
  --shadow-md: 0 2px 6px rgba(23, 33, 60, 0.06), 0 18px 40px rgba(23, 33, 60, 0.09);
  --shadow-lg: 0 30px 70px rgba(23, 33, 60, 0.16);

  /* Radii — used in moderation */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Layout */
  --maxw: 1200px;
  --maxw-narrow: 760px;
  --gutter: 1.25rem;

  /* Type stacks — system/native only, no external font dependency */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, ui-serif, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}


/* ==========================================================================
   02. RESET AND BASE STYLES
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* keeps in-page anchors clear of the sticky header */
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* guards against accidental horizontal scrolling */
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { padding-left: 1.15rem; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--terracotta);
  color: var(--white);
}


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.18;
  margin: 0 0 var(--space-4);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.1vw, 3.85rem); }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.8vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--space-4); }

p:last-child,
ul:last-child,
ol:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
  margin: 0 0 var(--space-3);
}

.lead {
  font-size: clamp(1.03rem, 0.99rem + 0.25vw, 1.19rem);
  color: var(--muted);
  line-height: 1.7;
}

.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

.small { font-size: 0.88rem; }


/* ==========================================================================
   04. LAYOUT UTILITIES
   ========================================================================== */

.container {
  width: min(100% - (2 * var(--gutter)), var(--maxw));
  margin-inline: auto;
}

.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: clamp(3rem, 1.6rem + 5vw, 6rem); }
.section--tight { padding-block: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); }

.section--cream { background-color: var(--cream); }
.section--white { background-color: var(--white); }
.section--beige { background-color: var(--surface-alt); }

.section--navy {
  background-color: var(--navy);
  color: rgba(255, 255, 255, 0.86);
}
.section--navy h1,
.section--navy h2,
.section--navy h3 { color: var(--white); }
.section--navy .lead,
.section--navy .text-muted { color: rgba(255, 255, 255, 0.75); }
.section--navy .eyebrow { color: #E8A98A; }

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 1.4rem + 1.6vw, 3rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
}

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.stack > * + * { margin-top: var(--space-4); }

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}


/* ==========================================================================
   05. ANNOUNCEMENT BAR
   ========================================================================== */

.announcement {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  padding: 0.6rem var(--gutter);
}

.announcement p {
  margin: 0;
  text-transform: uppercase;
  font-weight: 600;
}

.announcement .announcement__mark { color: #E8A98A; }


/* ==========================================================================
   06. HEADER AND NAVIGATION
   Mobile navigation is permanently visible (no JavaScript toggle):
   the links wrap onto their own row on small screens.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 245, 239, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: 0.75rem;
}

/* Text-based logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.logo__mark {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  border-radius: 8px 8px 8px 2px;
  background: linear-gradient(150deg, var(--navy), #34456f);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset -3px 0 0 rgba(201, 111, 74, 0.9);
}

.logo__text { display: flex; flex-direction: column; }
.logo__name { white-space: nowrap; }
.logo__sub {
  font-family: var(--font-body);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav { flex: 1 1 100%; order: 3; }

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  display: inline-block;
  padding: 0.6rem 0.7rem;      /* comfortable tap target */
  min-height: 44px;
  line-height: 1.85;
  color: var(--navy);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.site-nav__link:hover { background: rgba(23, 33, 60, 0.06); }

.site-nav__link[aria-current="page"] {
  color: var(--terracotta-ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--terracotta);
  border-radius: 0;
}

.site-header__cta { order: 2; }


/* ==========================================================================
   07. BUTTONS AND LINKS
   ========================================================================== */

a { color: var(--terracotta-ink); }
a:hover { color: var(--navy); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--terracotta-strong);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: #A24E2D;
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn--dark {
  background: var(--navy);
  color: var(--white);
}
.btn--dark:hover { background: #0f1729; color: var(--white); }

.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: rgba(23, 33, 60, 0.28);
}
.btn--outline:hover {
  background: rgba(23, 33, 60, 0.05);
  border-color: var(--navy);
  color: var(--navy);
}

.btn--light {
  background: var(--white);
  color: var(--navy);
}
.btn--light:hover { background: var(--beige); color: var(--navy); }

.btn--on-navy {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}
.btn--on-navy:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  border-color: var(--white);
}

.btn--sm { min-height: 42px; padding: 0.55rem 1.05rem; font-size: 0.9rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.btn-row--center { justify-content: center; }

/* Text link with a subtle underline that thickens on hover */
.text-link {
  display: inline-block;
  color: var(--terracotta-ink);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  padding: 0.4rem 0;
  min-height: 32px;
}
.text-link:hover {
  color: var(--navy);
  text-decoration-thickness: 2px;
}

.link-arrow::after { content: " \2192"; }


/* ==========================================================================
   08. HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(201, 111, 74, 0.13), transparent 62%),
    radial-gradient(900px 480px at 92% 8%, rgba(23, 33, 60, 0.10), transparent 60%),
    var(--cream);
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
  border-bottom: 1px solid var(--line-soft);
}

.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

.hero__title { margin-bottom: var(--space-5); text-wrap: balance; }
.hero__copy { max-width: 56ch; }
.hero .lead { margin-bottom: var(--space-6); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.35rem;
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--muted);
}
.hero__meta li { display: flex; align-items: center; gap: 0.45rem; }
.hero__meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* --- CSS-only workbook mockup (no images required) --- */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: var(--space-5) 0;
}

.mockup {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 4 / 5;
  transform: rotate(-3deg);
}

.mockup__book {
  position: absolute;
  inset: 0;
  border-radius: 6px 14px 14px 6px;
  background: linear-gradient(155deg, var(--navy) 0%, #2c3b63 55%, #3b4d7c 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--white);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Book spine */
.mockup__book::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 16px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.07));
}

/* Decorative grid texture on the cover */
.mockup__book::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.mockup__brand {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.mockup__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  line-height: 1.15;
  color: var(--white);
  margin: 0;
}

.mockup__rule {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 3px;
  background: var(--terracotta);
  border-radius: 2px;
  margin: 0.9rem 0 1rem;
}

.mockup__foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Floating strategy cards around the mockup */
.mockup__chip {
  position: absolute;
  z-index: 2;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0.6rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--navy);
  white-space: nowrap;
  transform: rotate(3deg);
}
.mockup__chip span {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
}
.mockup__chip--one { top: 8%; right: -8%; animation: float 7s ease-in-out infinite; }
.mockup__chip--two { bottom: 18%; left: -10%; animation: float 8.5s ease-in-out infinite 0.6s; }
.mockup__chip--three {
  bottom: -4%;
  right: 4%;
  background: var(--beige);
  animation: float 9.5s ease-in-out infinite 1.2s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-9px) rotate(3deg); }
}


/* ==========================================================================
   09. VALUE STRIP
   ========================================================================== */

.value-strip {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.88);
  padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

.value-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--space-4) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.value-strip__item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.95rem;
}

.value-strip__icon {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(232, 169, 138, 0.16);
  border: 1px solid rgba(232, 169, 138, 0.45);
  color: #F0BFA5;
  font-size: 0.95rem;
  font-weight: 700;
}

.value-strip__title {
  display: block;
  color: var(--white);
  font-weight: 650;
}
.value-strip__note {
  display: block;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.68);
}


/* ==========================================================================
   10. PRODUCT GRID
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.collection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.collection-bar__count {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}


/* ==========================================================================
   11. PRODUCT CARDS AND CSS-ONLY COVERS
   ========================================================================== */

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}

.product-card:focus-within {
  border-color: var(--terracotta);
  box-shadow: var(--shadow-md);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-5);
}

.product-card__meta {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
  margin: 0 0 var(--space-2);
}

.product-card__title {
  font-size: 1.16rem;
  margin: 0 0 var(--space-2);
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 var(--space-3);
}

.price__note {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.product-card__desc {
  font-size: 0.93rem;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}

.feature-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0.45rem;
}

.feature-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.89rem;
  color: var(--ink);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 2px solid var(--terracotta);
}

.product-card__actions {
  margin-top: auto;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
}

/* --- CSS-only cover placeholders ---------------------------------------
   Each product gets its own palette + decorative pattern through the
   .cover-1 … .cover-14 modifier classes. No image files are required.
   ---------------------------------------------------------------------- */

.cover {
  --cover-from: #17213C;
  --cover-to: #34456F;
  --cover-ink: #FFFFFF;
  --cover-soft: rgba(255, 255, 255, 0.74);
  --cover-rule: rgba(255, 255, 255, 0.34);
  --cover-accent: #C96F4A;
  --cover-deco: none;

  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  padding: 1.15rem 1.25rem 1.1rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background-image: linear-gradient(155deg, var(--cover-from), var(--cover-to));
  color: var(--cover-ink);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

/* Decorative pattern layer */
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--cover-deco);
  background-size: var(--cover-deco-size, auto);
  opacity: 0.9;
}

/* Spine */
.cover::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 10px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.30), rgba(255, 255, 255, 0.06));
}

.cover__brand {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cover-soft);
}

.cover__cat {
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--cover-rule);
  border-radius: var(--radius-pill);
  color: var(--cover-ink);
  background: rgba(255, 255, 255, 0.08);
}

.cover__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.28rem);
  line-height: 1.2;
  font-weight: 600;
  margin-top: auto;
  color: var(--cover-ink);
  text-wrap: balance;
}

.cover__rule {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--cover-accent);
}

.cover__tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cover-soft);
}

/* Cover palettes and patterns */
.cover-1 {
  --cover-from: #17213C; --cover-to: #34456F;
  --cover-deco:
    repeating-radial-gradient(circle at 88% 12%, transparent 0 22px, var(--cover-rule) 22px 23px);
}
.cover-2 {
  --cover-from: #C96F4A; --cover-to: #9C4E2C;
  --cover-rule: rgba(255, 255, 255, 0.4); --cover-accent: #F8F5EF;
  --cover-deco:
    repeating-linear-gradient(135deg, var(--cover-rule) 0 1px, transparent 1px 14px);
}
.cover-3 {
  --cover-from: #EDE5D8; --cover-to: #D8C9B2;
  --cover-ink: #17213C; --cover-soft: rgba(23, 33, 60, 0.7);
  --cover-rule: rgba(23, 33, 60, 0.24);
  --cover-deco: radial-gradient(var(--cover-rule) 1.2px, transparent 1.6px);
  --cover-deco-size: 15px 15px;
}
.cover-4 {
  --cover-from: #24304F; --cover-to: #16223F;
  --cover-deco:
    linear-gradient(var(--cover-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--cover-rule) 1px, transparent 1px);
  --cover-deco-size: 28px 28px, 28px 28px;
}
.cover-5 {
  --cover-from: #1F3A34; --cover-to: #2F5A4E;
  --cover-accent: #E8A98A;
  --cover-deco:
    linear-gradient(225deg, var(--cover-rule) 0 68px, transparent 68px),
    repeating-linear-gradient(90deg, var(--cover-rule) 0 1px, transparent 1px 32px);
}
.cover-6 {
  --cover-from: #7A3B2E; --cover-to: #C96F4A;
  --cover-rule: rgba(255, 255, 255, 0.38); --cover-accent: #F8F5EF;
  --cover-deco:
    radial-gradient(circle at 20% 85%, var(--cover-rule) 0 1px, transparent 1.5px),
    repeating-radial-gradient(circle at 15% 105%, transparent 0 30px, var(--cover-rule) 30px 31px);
}
.cover-7 {
  --cover-from: #F8F5EF; --cover-to: #EDE5D8;
  --cover-ink: #17213C; --cover-soft: rgba(23, 33, 60, 0.68);
  --cover-rule: rgba(201, 111, 74, 0.45);
  --cover-deco:
    linear-gradient(120deg, rgba(201, 111, 74, 0.22) 0 34%, transparent 34%),
    linear-gradient(300deg, rgba(23, 33, 60, 0.14) 0 26%, transparent 26%);
}
.cover-8 {
  --cover-from: #3A2C4F; --cover-to: #56406F;
  --cover-accent: #E8A98A;
  --cover-deco:
    repeating-linear-gradient(45deg, var(--cover-rule) 0 1px, transparent 1px 18px);
}
.cover-9 {
  --cover-from: #0F1729; --cover-to: #26365E;
  --cover-accent: #C96F4A;
  --cover-deco:
    radial-gradient(circle at 78% 22%, rgba(201, 111, 74, 0.5) 0 46px, transparent 47px),
    linear-gradient(var(--cover-rule) 1px, transparent 1px);
  --cover-deco-size: auto, 100% 24px;
}
.cover-10 {
  --cover-from: #2F5A4E; --cover-to: #17213C;
  --cover-accent: #E8A98A;
  --cover-deco:
    repeating-linear-gradient(0deg, var(--cover-rule) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, var(--cover-rule) 0 1px, transparent 1px 22px);
}
.cover-11 {
  --cover-from: #C96F4A; --cover-to: #17213C;
  --cover-rule: rgba(255, 255, 255, 0.38); --cover-accent: #F8F5EF;
  --cover-deco:
    linear-gradient(90deg, var(--cover-rule) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(90deg, transparent 0 44px, var(--cover-rule) 44px 46px);
}
.cover-12 {
  --cover-from: #1B3A5C; --cover-to: #2E6382;
  --cover-accent: #E8A98A;
  --cover-deco:
    radial-gradient(circle at 25% 30%, var(--cover-rule) 0 12px, transparent 13px),
    radial-gradient(circle at 62% 62%, var(--cover-rule) 0 18px, transparent 19px),
    radial-gradient(circle at 88% 24%, var(--cover-rule) 0 9px, transparent 10px);
}
.cover-13 {
  --cover-from: #EDE5D8; --cover-to: #C7B69B;
  --cover-ink: #17213C; --cover-soft: rgba(23, 33, 60, 0.7);
  --cover-rule: rgba(23, 33, 60, 0.22);
  --cover-deco:
    repeating-linear-gradient(135deg, var(--cover-rule) 0 1px, transparent 1px 11px),
    linear-gradient(200deg, rgba(201, 111, 74, 0.28) 0 40%, transparent 40%);
}
.cover-14 {
  --cover-from: #17213C; --cover-to: #4A3350;
  --cover-accent: #E8A98A;
  --cover-deco:
    linear-gradient(90deg, var(--cover-rule) 1px, transparent 1px),
    linear-gradient(180deg, var(--cover-rule) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(232, 169, 138, 0.35) 0 30px, transparent 31px);
  --cover-deco-size: 40px 40px, 40px 40px, auto;
}


/* ==========================================================================
   12. CONTENT SECTIONS
   ========================================================================== */

/* --- How it works --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-5);
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow: var(--shadow-sm);
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: var(--space-5);
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.step h3 { margin-top: var(--space-2); }
.step p { color: var(--muted); font-size: 0.94rem; margin: 0; }

/* --- Benefits --- */
.benefit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.benefit {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}

.benefit__num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--terracotta-ink);
  font-weight: 700;
  line-height: 1.6;
}

.benefit h3 { font-size: 1.02rem; margin-bottom: 0.25rem; }
.benefit p { font-size: 0.91rem; color: var(--muted); margin: 0; }

/* --- Featured collection / bundle --- */
.feature-panel {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
  align-items: center;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  box-shadow: var(--shadow-md);
  background-image:
    radial-gradient(700px 320px at 90% 0%, rgba(201, 111, 74, 0.28), transparent 65%),
    linear-gradient(160deg, #17213C, #22304f);
}
.feature-panel h2,
.feature-panel h3 { color: var(--white); }

.feature-panel__list {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}
.feature-panel__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.22);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}
.feature-panel__list li span { color: #F0BFA5; font-weight: 650; white-space: nowrap; }

/* --- Testimonials (placeholders) --- */
.testimonial {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px dashed rgba(23, 33, 60, 0.28);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.testimonial__badge {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
  background: rgba(201, 111, 74, 0.12);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.65rem;
  margin-bottom: var(--space-4);
}

.testimonial blockquote {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--navy);
}

.testimonial figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: auto;
}

/* --- Placeholder notice used across the site --- */
.placeholder-note {
  border: 1px dashed rgba(23, 33, 60, 0.3);
  background: rgba(237, 229, 216, 0.55);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: 0.87rem;
  color: var(--muted);
}
.placeholder-note strong { color: var(--navy); }

/* --- Final CTA --- */
.cta-panel {
  text-align: center;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.4rem + 3vw, 4rem);
  background:
    radial-gradient(600px 320px at 50% 0%, rgba(201, 111, 74, 0.16), transparent 70%),
    var(--beige);
  border: 1px solid var(--line-soft);
}
.cta-panel p { margin-inline: auto; max-width: 60ch; }


/* ==========================================================================
   13. FORMS
   ========================================================================== */

.form { display: grid; gap: var(--space-4); }

.form__row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.field { display: grid; gap: 0.35rem; }

.field label {
  font-size: 0.87rem;
  font-weight: 650;
  color: var(--navy);
}

.field .hint {
  font-size: 0.78rem;
  color: var(--muted);
}

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(23, 33, 60, 0.25);
  border-radius: var(--radius-sm);
}

textarea { min-height: 150px; resize: vertical; }

input::placeholder,
textarea::placeholder { color: #9a9a9a; }

input:hover,
select:hover,
textarea:hover { border-color: rgba(23, 33, 60, 0.45); }

/* Newsletter inline form */
.newsletter {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  box-shadow: var(--shadow-sm);
}
.newsletter__form {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  align-items: end;
}


/* ==========================================================================
   14. FAQ / DETAILS ACCORDION (CSS + native HTML, no JavaScript)
   ========================================================================== */

.faq-list { display: grid; gap: var(--space-3); }

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 52px;
  padding: 0.95rem 1.15rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--navy);
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--terracotta-ink);
  font-size: 1.05rem;
  line-height: 1;
}

.faq-item[open] > summary::after { content: "\2013"; }
.faq-item[open] > summary { background: rgba(237, 229, 216, 0.5); }

.faq-item > summary:hover { background: rgba(237, 229, 216, 0.65); }

.faq-item__body {
  padding: 0.25rem 1.15rem 1.15rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.faq-item__body > *:first-child { margin-top: 0.5rem; }


/* ==========================================================================
   15. POLICY AND LONG-FORM PAGES
   ========================================================================== */

.page-header {
  background:
    radial-gradient(800px 380px at 15% 0%, rgba(201, 111, 74, 0.12), transparent 65%),
    var(--beige);
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid var(--line-soft);
}
.page-header p.lead { max-width: 62ch; margin-bottom: 0; }

.breadcrumb {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--navy); }

.doc {
  max-width: 74ch;
  margin-inline: auto;
}
.doc h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}
.doc h2:first-of-type { margin-top: var(--space-5); }
.doc h3 { margin-top: var(--space-5); font-size: 1.08rem; }
.doc p, .doc li { color: #3a3a3a; }
.doc li { margin-bottom: 0.4rem; }
.doc ul, .doc ol { margin-bottom: var(--space-4); }

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  padding: var(--space-4) 0;
  border-block: 1px solid var(--line-soft);
  margin-bottom: var(--space-5);
}

/* Legal template disclaimer — deliberately high-visibility */
.legal-notice {
  border: 1px solid rgba(201, 111, 74, 0.5);
  border-left: 4px solid var(--terracotta);
  background: rgba(201, 111, 74, 0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: 0.92rem;
  color: #3a3a3a;
}
.legal-notice h2,
.legal-notice h3 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  border: 0;
  padding: 0;
  color: var(--terracotta-ink);
}

/* Two-column list used on About / License pages */
.split {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.rule-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.rule-card h3 { margin-top: 0; }
.rule-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.rule-card li { position: relative; padding-left: 1.6rem; font-size: 0.93rem; }
.rule-card li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.rule-card--allow li::before { content: "\2713"; color: #2F5A4E; }
.rule-card--deny li::before { content: "\2715"; color: #A24E2D; }

/* Simple definition rows (contact details, response times) */
.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.info-list dt,
.info-list__term {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.info-list dd { margin: 0; }


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  padding-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  font-size: 0.92rem;
}

.site-footer h2,
.site-footer h3 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-bottom: var(--space-7);
}

.site-footer__brand { max-width: 34ch; }
.site-footer__brand .logo { color: var(--white); margin-bottom: var(--space-4); }
.site-footer__brand .logo__sub { color: rgba(255, 255, 255, 0.6); }

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

.footer-nav a {
  display: inline-block;
  padding: 0.42rem 0;
  min-height: 34px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.footer-nav a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 0.35rem;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.6);
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { color: rgba(255, 255, 255, 0.8); }


/* ==========================================================================
   17. ACCESSIBILITY
   ========================================================================== */

/* Visible, high-contrast focus states for keyboard users */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.section--navy :focus-visible,
.value-strip :focus-visible,
.site-footer :focus-visible,
.feature-panel :focus-visible {
  outline-color: #F0BFA5;
}

/* Screen-reader-only text */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-weight: 650;
}
.skip-link:focus {
  transform: translate(-50%, 0);
  color: var(--white);
}

/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .product-card:hover { transform: none; }
}

/* Slightly stronger borders when the user asks for more contrast */
@media (prefers-contrast: more) {
  :root {
    --line: rgba(23, 33, 60, 0.4);
    --line-soft: rgba(23, 33, 60, 0.3);
    --muted: #545454;
  }
}


/* ==========================================================================
   18. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Small tablets and up */
@media (min-width: 600px) {
  :root { --gutter: 1.75rem; }

  .newsletter__form { grid-template-columns: 1fr auto; }
  .newsletter__form .btn { min-width: 190px; }
}

/* Tablets / small laptops */
@media (min-width: 860px) {
  .site-header__inner {
    flex-wrap: nowrap;
    padding-block: 0.9rem;
    gap: var(--space-5);
  }
  .site-nav {
    flex: 0 1 auto;
    order: 0;
    margin-inline: auto;
  }
  .site-nav__list { flex-wrap: nowrap; gap: 0.15rem; }
  .site-header__cta { order: 0; }

  .logo { font-size: 1.2rem; }

  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }

  .feature-panel { grid-template-columns: 1.1fr 0.9fr; }

  .doc h2 { margin-top: var(--space-8); }
}

/* Laptops */
@media (min-width: 1080px) {
  :root { --gutter: 2.5rem; }

  .site-nav__link { font-size: 0.95rem; padding: 0.6rem 0.9rem; }

  .product-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* Large desktops — cap the reading width, keep generous white space */
@media (min-width: 1500px) {
  :root { --maxw: 1320px; }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   19. PRINT STYLES — optimised for the policy pages
   ========================================================================== */

@media print {
  :root { --maxw: 100%; }

  body {
    background: #fff;
    color: #000;
    font-size: 11.5pt;
    line-height: 1.5;
  }

  .announcement,
  .site-header,
  .site-footer,
  .skip-link,
  .btn,
  .btn-row,
  .newsletter,
  .cta-panel,
  .page-header .breadcrumb { display: none !important; }

  .page-header {
    background: none;
    border: 0;
    padding-block: 0 1rem;
  }

  h1, h2, h3 { color: #000; page-break-after: avoid; }
  h2 { border-top: 1px solid #999; }

  .doc, .container { max-width: 100%; width: 100%; }

  .legal-notice {
    border: 1px solid #666;
    background: none;
    color: #000;
  }

  p, li, blockquote { page-break-inside: avoid; }

  /* Print the destination of links inside long-form documents */
  .doc a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }
}