/* ═══════════════════════════════════════════════════════════════
   OVANA DESIGN SYSTEM v1.0
   Every value below is a token. Nothing outside :root should
   introduce a raw hex, font size, or spacing value.
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme: light;

  /* ── PALETTE: raw ramps (reference only — use semantic tokens) ── */
  --pink-050:#FDF1F6;
  --pink-100:#FADDE9;
  --pink-200:#F5BED4;
  --pink-300:#EE8FB6;
  --pink-500:#D63F80;   /* vivid — decoration, on-dark accents */
  --pink-600:#C43370;   /* interactive fill — AA on white */
  --pink-700:#9E2757;   /* hover / pressed */

  --jade-050:#E9F1EC;
  --jade-100:#D7E5DE;
  --jade-300:#7FA89C;
  --jade-500:#2F7A67;
  --jade-700:#1E5548;
  --jade-800:#123B31;
  --jade-900:#0E3028;

  --sand-050:#FBF9F4;
  --sand-100:#F7F5EF;
  --sand-200:#EFEBE0;
  --sand-300:#DDD6C8;

  --ink-900:#17231F;
  --ink-600:#566560;
  --ink-400:#8A958F;

  /* ── SEMANTIC: surfaces ── */
  --color-bg:            var(--sand-100);
  --color-surface:       #FFFFFF;
  --color-surface-alt:   var(--sand-200);
  --color-surface-tint:  var(--pink-050);   /* pink-washed band */
  --color-surface-deep:  var(--jade-900);
  --color-surface-sunk:  var(--jade-100);

  /* ── SEMANTIC: text ── */
  --color-text-primary:   var(--ink-900);
  --color-text-secondary: var(--ink-600);
  --color-text-muted:     var(--ink-400);
  --color-text-inverse:   #F2F6F3;
  --color-text-on-deep:   #A9C3BA;

  /* ── SEMANTIC: brand roles ──
     primary  = pink   → every action the user should take
     secondary = jade  → structure, authority, dark surfaces      */
  --color-primary:        var(--pink-600);
  --color-primary-hover:  var(--pink-700);
  --color-primary-vivid:  var(--pink-500);
  --color-primary-light:  var(--pink-300);
  --color-primary-soft:   var(--pink-100);
  --color-primary-tint:   var(--pink-050);

  --color-secondary:       var(--jade-900);
  --color-secondary-hover: var(--jade-700);
  --color-secondary-mid:   var(--jade-500);
  --color-secondary-soft:  var(--jade-100);

  /* ── SEMANTIC: lines & status ── */
  --color-border:          var(--sand-300);
  --color-border-strong:   var(--ink-900);
  --color-border-inverse:  rgba(255,255,255,.18);
  --color-focus:           var(--pink-500);
  --color-success:         #2F7A67;
  --color-warning:         #B5730C;

  /* ── GRADIENTS ── */
  --gradient-hero: linear-gradient(168deg, var(--pink-050) 0%, #F4F3EC 44%, var(--sand-100) 100%);
  --gradient-glow: radial-gradient(circle, rgba(214,63,128,.20) 0%, rgba(214,63,128,0) 68%);

  /* ── TYPOGRAPHY ── */
  --font-display: "Faustina", Georgia, "Times New Roman", serif;
  --font-ui:      "Archivo", -apple-system, system-ui, "Helvetica Neue", sans-serif;

  --fs-display: clamp(2.75rem, 6vw, 4.5rem);
  --fs-h1:      clamp(2.25rem, 4.6vw, 3.4rem);
  --fs-h2:      clamp(1.85rem, 3.4vw, 2.7rem);
  --fs-h3:      1.3rem;
  --fs-h4:      1.1rem;
  --fs-figure:  clamp(2.4rem, 4.4vw, 3.4rem);
  --fs-body-lg: 1.15rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-label:   0.75rem;

  --lh-display: 1.03;
  --lh-heading: 1.14;
  --lh-snug:    1.35;
  --lh-body:    1.62;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --ls-display: -0.022em;
  --ls-heading: -0.014em;
  --ls-label:   0.1em;

  /* ── SPACING (4px base) ── */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* ── LAYOUT ── */
  --max-width:   1140px;
  --max-narrow:  760px;
  --max-measure: 60ch;
  --gutter:      26px;
  --section-y:   clamp(60px, 7.5vw, 104px);
  --header-h:    74px;

  /* ── SHAPE ── */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;
  --border-hair: 1px solid var(--color-border);
  --border-rule: 1.5px solid var(--color-border-strong);

  --shadow-xs: 0 1px 2px rgba(23,35,31,.05);
  --shadow-sm: 0 4px 12px -6px rgba(23,35,31,.16);
  --shadow-md: 0 16px 36px -22px rgba(23,35,31,.30);
  --shadow-lg: 0 30px 70px -40px rgba(23,35,31,.45);
  --shadow-pink: 0 10px 26px -14px rgba(196,51,112,.55);

  /* ── MOTION ── */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;
}

/* ═══════════════════════════════════════════════ RESET & BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--color-bg);color:var(--color-text-primary);
  font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--color-primary-soft);color:var(--color-primary-hover)}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-xs)}

h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:var(--fw-medium);margin:0;
  letter-spacing:var(--ls-heading);line-height:var(--lh-heading);
}
h1{font-size:var(--fs-h1);letter-spacing:var(--ls-display);line-height:var(--lh-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-snug)}
h4{font-size:var(--fs-h4);line-height:var(--lh-snug)}
p{margin:0 0 1.05em}

.u-skip{position:absolute;left:-9999px}
.u-skip:focus{left:var(--space-sm);top:var(--space-sm);z-index:100;
  background:var(--color-primary);color:#fff;padding:10px 18px;border-radius:var(--radius-sm)}

/* ═══════════════════════════════════════════════ LAYOUT */
.l-wrap{max-width:var(--max-width);margin-inline:auto;padding-inline:var(--gutter)}
.l-narrow{max-width:var(--max-narrow)}
.l-measure{max-width:var(--max-measure)}
.l-section{padding-block:var(--section-y)}
.l-section--tight{padding-block:calc(var(--section-y) * .62)}
.l-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px)}
.l-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
.l-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}
.l-stack-lg > * + *{margin-top:var(--space-lg)}

/* surface modifiers */
.s-alt{background:var(--color-surface-alt)}
.s-tint{background:var(--color-surface-tint)}
.s-deep{background:var(--color-surface-deep);color:var(--color-text-inverse)}
.s-deep h2,.s-deep h3{color:#fff}
.s-deep .c-lede{color:var(--color-text-on-deep)}
.s-deep .c-card{box-shadow:var(--shadow-lg)}
.s-deep .c-card h3{color:var(--color-secondary)}
.s-deep .c-card p{color:var(--color-text-secondary)}

/* ═══════════════════════════════════════════════ TYPE UTILITIES */
.c-eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:var(--fw-semibold);color:var(--color-primary);margin-bottom:var(--space-sm);
}
.c-eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--color-primary)}
.s-deep .c-eyebrow{color:var(--color-primary-light)}
.s-deep .c-eyebrow::before{background:var(--color-primary-light)}

.c-lede{font-size:var(--fs-body-lg);color:var(--color-text-secondary);line-height:1.58;max-width:56ch}
.c-head{margin-bottom:var(--space-xl)}
.c-head .c-lede{margin-top:var(--space-sm)}
.c-legal{font-size:var(--fs-caption);line-height:1.55;color:var(--color-text-muted)}
.c-serif-em{font-family:var(--font-display);font-style:italic;color:var(--color-primary)}

/* ═══════════════════════════════════════════════ BUTTONS */
.c-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);
  font-size:var(--fs-small);font-weight:var(--fw-medium);text-decoration:none;
  padding:14px 26px;border-radius:var(--radius-pill);border:1.5px solid transparent;
  transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.c-btn:hover{transform:translateY(-1px)}
.c-btn:active{transform:translateY(0)}
.c-btn--primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-pink)}
.c-btn--primary:hover{background:var(--color-primary-hover);box-shadow:0 14px 30px -14px rgba(158,39,87,.6)}
.c-btn--secondary{background:transparent;color:var(--color-secondary);border-color:var(--color-secondary)}
.c-btn--secondary:hover{background:var(--color-secondary);color:var(--color-text-inverse)}
.c-btn--quiet{background:transparent;color:var(--color-primary);border-color:var(--color-primary-soft)}
.c-btn--quiet:hover{background:var(--color-primary-tint);border-color:var(--color-primary)}
.c-btn--inverse{background:var(--color-primary);color:#fff;border-color:transparent}
.c-btn--inverse:hover{background:var(--color-primary-vivid)}
.c-btn--outline-inverse{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.c-btn--outline-inverse:hover{background:#fff;color:var(--color-secondary)}
.c-btn--sm{padding:9px 18px;font-size:var(--fs-caption)}
.c-btn--block{width:100%}

.c-link{
  display:inline;text-decoration:none;
  color:var(--color-primary);font-weight:var(--fw-medium);border-bottom:1.5px solid var(--color-primary-soft);
  padding-bottom:2px;transition:border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease);
}
.c-link:hover{border-bottom-color:var(--color-primary);color:var(--color-primary-hover)}

/* ═══════════════════════════════════════════════ BADGE */
.c-badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-pill);
  font-size:var(--fs-caption);font-weight:var(--fw-medium);
  background:var(--color-primary-soft);color:var(--color-primary-hover);
}
.c-badge--jade{background:var(--color-secondary-soft);color:var(--color-secondary)}
.c-badge--outline{background:transparent;border:var(--border-hair);color:var(--color-text-secondary)}

/* ═══════════════════════════════════════════════ HEADER */
.c-header{
  position:sticky;top:0;z-index:50;background:rgba(247,245,239,.9);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:var(--border-hair);
}
.c-header__inner{display:flex;align-items:center;gap:var(--space-md);height:var(--header-h);
  max-width:var(--max-width);margin-inline:auto;padding-inline:var(--gutter)}
.c-logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.c-logo__word{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.02em;
  line-height:1;color:var(--color-secondary)}
.c-nav{display:flex;gap:var(--space-md);align-items:center}
.c-nav a{
  text-decoration:none;font-size:var(--fs-small);color:var(--color-text-secondary);
  padding-bottom:4px;border-bottom:1.5px solid transparent;
  transition:color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.c-nav a:hover{color:var(--color-primary)}
.c-nav a.is-active{color:var(--color-secondary);border-bottom-color:var(--color-primary)}
.c-header__actions{display:flex;align-items:center;gap:var(--space-2xs)}
.c-menu-toggle{display:none;background:transparent;border:1.5px solid var(--color-border);
  border-radius:var(--radius-pill);padding:8px 16px;color:var(--color-secondary);font-size:var(--fs-caption)}

/* ═══════════════════════════════════════════════ HERO */
.c-hero{position:relative;overflow:hidden;background:var(--gradient-hero);
  padding-block:clamp(56px,7vw,92px) var(--section-y)}
.c-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4.5vw,56px);align-items:center;position:relative;z-index:1}
.c-hero h1{color:var(--color-secondary);font-size:var(--fs-display);max-width:12ch}
.c-hero .c-lede{margin-top:var(--space-md);max-width:48ch}
.c-hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-lg)}
.c-hero__proof{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);
  margin-top:var(--space-lg);font-size:var(--fs-caption);color:var(--color-text-secondary)}
.c-hero__proof span{display:flex;align-items:center;gap:var(--space-2xs)}
.c-dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--color-primary);flex:none}

.c-rings{width:100%;max-width:440px;margin-left:auto;aspect-ratio:1}
.c-ring{transform-origin:center;opacity:0;animation:bloom 13s var(--ease-out) infinite}
.c-ring:nth-of-type(1){animation-delay:0s}
.c-ring:nth-of-type(2){animation-delay:2.2s}
.c-ring:nth-of-type(3){animation-delay:4.4s}
.c-ring:nth-of-type(4){animation-delay:6.6s}
.c-ring:nth-of-type(5){animation-delay:8.8s}
.c-ring:nth-of-type(6){animation-delay:11s}
.c-core{transform-origin:center;animation:breathe 7.5s ease-in-out infinite}
@keyframes bloom{
  0%{transform:scale(.22);opacity:0}
  18%{opacity:.9}
  70%{opacity:.3}
  100%{transform:scale(1);opacity:0}
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ═══════════════════════════════════════════════ FEATURE / STEP */
.c-feature__icon{margin-bottom:var(--space-sm)}
.c-feature h3{color:var(--color-secondary);margin-bottom:var(--space-2xs)}
.c-feature p{color:var(--color-text-secondary);font-size:var(--fs-small);margin:0}
.c-feature__price{font-size:var(--fs-caption);color:var(--color-primary);
  font-weight:var(--fw-medium);margin-top:var(--space-xs)}

.c-step{border-top:2px solid var(--color-primary);padding-top:var(--space-sm)}
.c-step__index{font-family:var(--font-display);font-style:italic;font-size:var(--fs-small);
  color:var(--color-primary);display:block;margin-bottom:var(--space-3xs)}
.c-step h3{font-size:1.12rem;margin-bottom:var(--space-3xs);color:var(--color-secondary)}
.c-step p{font-size:var(--fs-small);color:var(--color-text-secondary);margin:0}

/* ═══════════════════════════════════════════════ TIMELINE */
.c-timeline{border-left:2px solid var(--color-primary-soft);padding-left:var(--space-lg);
  max-width:var(--max-narrow)}
.c-timeline__item{position:relative;padding-bottom:var(--space-xl)}
.c-timeline__item:last-child{padding-bottom:0}
.c-timeline__item::before{
  content:"";position:absolute;left:calc(-1 * var(--space-lg) - 8px);top:7px;
  width:14px;height:14px;border-radius:50%;background:var(--color-primary);
  box-shadow:0 0 0 4px var(--color-bg);
}
.c-timeline__when{font-size:var(--fs-caption);color:var(--color-primary);
  font-weight:var(--fw-medium);margin-bottom:var(--space-3xs)}
.c-timeline__item h3{color:var(--color-secondary);margin-bottom:var(--space-2xs)}
.c-timeline__item p{color:var(--color-text-secondary);margin:0}

/* ═══════════════════════════════════════════════ ROWS / LISTS */
.c-rows{border-top:var(--border-rule)}
.c-row{display:flex;justify-content:space-between;gap:var(--space-md);align-items:baseline;
  padding-block:var(--space-sm);border-bottom:var(--border-hair)}
.c-row dt,.c-row b{font-weight:var(--fw-medium)}
.c-row dd,.c-row span{margin:0;color:var(--color-text-secondary);
  font-size:var(--fs-small);text-align:right}

.c-checklist{list-style:none;padding:0;margin:0}
.c-checklist li{position:relative;padding:11px 0 11px 30px;border-bottom:var(--border-hair);
  font-size:var(--fs-small)}
.c-checklist li::before{
  content:"";position:absolute;left:2px;top:18px;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--color-primary);
}

/* ═══════════════════════════════════════════════ CARDS */
.c-card{background:var(--color-surface);border:var(--border-hair);border-radius:var(--radius-md);
  padding:var(--space-md);box-shadow:var(--shadow-xs);
  transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease)}
.c-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--color-primary-light)}

/* ═══════════════════════════════════════════════ QUOTE */
.c-quote{max-width:820px;margin-inline:auto;text-align:center}
.c-quote blockquote{
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.55rem,3.2vw,2.3rem);
  line-height:1.32;margin:0;color:var(--color-secondary)}
.c-quote blockquote::before{content:"";display:block;width:46px;height:3px;border-radius:2px;
  background:var(--color-primary);margin:0 auto var(--space-md)}
.c-quote cite{display:block;margin-top:var(--space-md);font-style:normal;
  font-size:var(--fs-caption);color:var(--color-text-secondary)}

/* ═══════════════════════════════════════════════ HONESTY BLOCK */
.c-honest{list-style:none;padding:0;margin:0}
.c-honest li{padding-block:var(--space-sm);border-top:1px solid var(--color-border-inverse);
  font-size:var(--fs-small);color:var(--color-text-on-deep)}
.c-honest li b{display:block;margin-bottom:var(--space-3xs);font-family:var(--font-display);
  font-size:1.1rem;font-weight:var(--fw-medium);color:#fff}

/* ═══════════════════════════════════════════════ BLOG */
.c-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}
.c-post{
  background:var(--color-surface);border:var(--border-hair);border-radius:var(--radius-md);
  overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;width:100%;
  text-decoration:none;color:inherit;
  transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease);
}
.c-post:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--color-primary-light)}
.c-post__thumb{display:block;height:148px}
.c-post__body{display:block;padding:var(--space-md)}
.c-post__tag{font-size:var(--fs-caption);color:var(--color-primary);
  font-weight:var(--fw-medium);margin-bottom:var(--space-2xs)}
.c-post h3{color:var(--color-secondary);font-size:1.2rem;margin-bottom:var(--space-2xs)}
.c-post p{font-size:var(--fs-small);color:var(--color-text-secondary);margin:0}
.c-post__meta{display:block;font-size:var(--fs-caption);color:var(--color-text-muted);margin-top:var(--space-sm)}

.c-back{background:none;border:none;padding:0;color:var(--color-primary);
  font-size:var(--fs-small);margin-bottom:var(--space-md)}
.c-article{max-width:680px}
.c-article h1{color:var(--color-secondary);margin-bottom:var(--space-sm)}
.c-article h2{font-size:1.45rem;margin:var(--space-xl) 0 var(--space-xs);color:var(--color-secondary)}
.c-article p{font-size:var(--fs-body-lg);line-height:1.72}
.c-article .c-post__meta{margin:0 0 var(--space-lg)}
.c-article blockquote{
  border-left:3px solid var(--color-primary);margin:var(--space-lg) 0;
  padding:var(--space-3xs) 0 var(--space-3xs) var(--space-md);
  font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--color-secondary)}

/* ═══════════════════════════════════════════════ FAQ */
.c-faq{border-top:var(--border-rule);max-width:820px}
.c-faq details{border-bottom:var(--border-hair)}
.c-faq summary{
  list-style:none;cursor:pointer;position:relative;padding:var(--space-md) 44px var(--space-md) 0;
  font-family:var(--font-display);font-size:1.22rem;color:var(--color-secondary);
  transition:color var(--dur-base) var(--ease);
}
.c-faq summary:hover{color:var(--color-primary)}
.c-faq summary::-webkit-details-marker{display:none}
.c-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:15px;height:2px;
  border-radius:2px;background:var(--color-primary)}
.c-faq summary::before{content:"";position:absolute;right:14.5px;top:50%;width:2px;height:15px;
  margin-top:-6.5px;border-radius:2px;background:var(--color-primary);
  transition:transform var(--dur-base) var(--ease)}
.c-faq details[open] summary::before{transform:scaleY(0)}
.c-faq__answer{padding:0 52px var(--space-md) 0;color:var(--color-text-secondary);font-size:var(--fs-small)}
.c-faq details[open] .c-faq__answer{animation:reveal var(--dur-slow) var(--ease)}
@keyframes reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════ CTA BAND */
.c-cta{text-align:center}
.c-cta h2{max-width:17ch;margin:0 auto var(--space-sm)}
.c-cta .c-lede{margin:0 auto var(--space-lg)}

/* ═══════════════════════════════════════════════ FOOTER */
.c-footer{background:var(--color-surface-deep);color:var(--color-text-on-deep);
  padding-block:var(--space-3xl) var(--space-lg);font-size:var(--fs-small)}
.c-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-lg)}
.c-footer h4{font-family:var(--font-ui);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;font-weight:var(--fw-semibold);color:#fff;margin:0 0 var(--space-sm)}
.c-footer ul{list-style:none;padding:0;margin:0}
.c-footer li{margin-bottom:9px}
.c-footer a{text-decoration:none;transition:color var(--dur-base) var(--ease)}
.c-footer a:hover{color:var(--color-primary-light)}
.c-footer .c-logo__word{color:#fff}
.c-footer__legal{margin-top:var(--space-2xl);padding-top:var(--space-md);
  border-top:1px solid var(--color-border-inverse);font-size:var(--fs-caption);
  line-height:1.6;color:var(--jade-300);max-width:90ch}

/* ═══════════════════════════════════════════════ MODAL */
.c-scrim{position:fixed;inset:0;background:rgba(14,48,40,.6);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:var(--space-md);z-index:80}
.c-scrim[data-open="true"]{display:flex;animation:fade var(--dur-base) var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.c-modal{background:var(--color-bg);border-radius:var(--radius-lg);max-width:420px;width:100%;
  padding:var(--space-xl) var(--space-lg) var(--space-lg);position:relative;box-shadow:var(--shadow-lg)}
.c-modal h2{font-size:1.75rem;color:var(--color-secondary);margin-bottom:var(--space-3xs)}
.c-modal__close{position:absolute;top:14px;right:16px;background:none;border:none;
  font-size:1.5rem;line-height:1;color:var(--color-text-muted);padding:6px}
.c-input-group{margin-top:var(--space-sm)}
.c-input-group label{display:block;font-size:var(--fs-caption);
  color:var(--color-text-secondary);margin-bottom:6px}
.c-input{width:100%;padding:13px 15px;border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);background:var(--color-surface);font:inherit;
  font-size:var(--fs-small);color:var(--color-text-primary);
  transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.c-input:focus{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-soft)}
.c-notice{display:none;margin-top:var(--space-sm);padding:13px 15px;border-radius:var(--radius-sm);
  background:var(--color-primary-soft);font-size:var(--fs-caption);color:var(--color-primary-hover)}
.c-notice[data-open="true"]{display:block}

/* ═══════════════════════════════════════════════ RESPONSIVE */
@media (max-width:940px){
  .c-hero__grid,.l-grid-2{grid-template-columns:1fr}
  .c-rings{max-width:320px;margin:0 auto;order:-1}
  .l-grid-3,.l-grid-4,.c-posts{grid-template-columns:1fr 1fr}
  .c-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  :root{--gutter:20px;--fs-body:1rem}
  .c-nav{
    display:none;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--color-bg);border-bottom:var(--border-hair);
    padding:var(--space-2xs) var(--gutter) var(--space-sm);
  }
  .c-nav[data-open="true"]{display:flex}
  .c-nav a{padding-block:13px;border-bottom:var(--border-hair)}
  .c-nav a.is-active{border-bottom-color:var(--color-border)}
  .c-menu-toggle{display:block}
  .c-header__actions .c-btn--secondary{display:none}
  .l-grid-3,.l-grid-4,.c-posts,.c-footer__grid{grid-template-columns:1fr}
  .c-faq summary{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .c-ring{opacity:.42}
}

/* ═══════════════════════════════════════════════ BREADCRUMB */
.c-breadcrumb{font-size:var(--fs-caption);color:var(--color-text-muted);margin-bottom:var(--space-sm)}
.c-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2xs);padding:0;margin:0}
.c-breadcrumb li:not(:last-child)::after{content:"/";margin-left:var(--space-2xs);color:var(--color-border)}
.c-breadcrumb a{color:var(--color-primary);text-decoration:none}
.c-breadcrumb a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════ PROSE */
.c-prose{max-width:var(--max-measure)}
.l-narrow .c-prose{max-width:none}
.c-prose h2{font-size:1.5rem;margin:var(--space-xl) 0 var(--space-xs);color:var(--color-secondary)}
.c-prose h3{margin:var(--space-lg) 0 var(--space-2xs);color:var(--color-secondary)}
.c-prose > h2:first-child{margin-top:0}
.c-prose p{font-size:var(--fs-body-lg);line-height:1.72}
.c-prose ul{padding-left:1.1em;margin:0 0 1.05em}
.c-prose li{margin-bottom:var(--space-2xs);font-size:var(--fs-body-lg);line-height:1.6}
.c-prose blockquote{border-left:3px solid var(--color-primary);margin:var(--space-lg) 0;
  padding:var(--space-3xs) 0 var(--space-3xs) var(--space-md);font-family:var(--font-display);
  font-style:italic;font-size:1.32rem;color:var(--color-secondary)}

/* ═══════════════════════════════════════════════ FORM PAGE */
.c-form{background:var(--color-surface);border:var(--border-hair);border-radius:var(--radius-md);
  padding:var(--space-lg);box-shadow:var(--shadow-xs)}
.c-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.c-form__status{margin-top:var(--space-sm);padding:13px 15px;border-radius:var(--radius-sm);
  font-size:var(--fs-caption);display:none}
.c-form__status[data-state]{display:block;background:var(--color-primary-soft);
  color:var(--color-primary-hover)}

/* ═══════════════════════════════════════════════ POST NAV */
.c-postnav{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);
  border-top:var(--border-hair);padding-top:var(--space-lg);margin-top:var(--space-2xl)}
.c-postnav a{text-decoration:none;display:block}
.c-postnav span{display:block;font-size:var(--fs-caption);color:var(--color-text-muted);
  margin-bottom:var(--space-3xs)}
.c-postnav strong{font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:1.05rem;color:var(--color-secondary)}
.c-postnav a:hover strong{color:var(--color-primary)}
.c-postnav > :last-child{text-align:right}

/* ═══════════════════════════════════════════════ ERROR PAGE */
.c-error{min-height:58vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center}
.c-error__code{font-family:var(--font-display);font-size:clamp(4rem,12vw,7rem);line-height:1;
  color:var(--color-primary);margin-bottom:var(--space-sm)}

/* ═══════════════════════════════════════════════ RESPONSIVE (additions) */
@media (max-width:680px){
  .c-form__row,.c-postnav{grid-template-columns:1fr}
  .c-postnav > :last-child{text-align:left}
}