/* ==========================================================================
   TieredOrders design system
   Patisserie elegant: sugar white, butter cream, a raspberry ribbon.
   Gilda Display over Raleway. Tiered layered cards, piped border details.
   ========================================================================== */

:root{
  /* --- brief palette --- */
  --sugar:      #FDF9F6;
  --surface:    #FFFFFF;
  --ink:        #2A1E23;
  --raspberry:  #A63A5A;
  --butter:     #EFC9A6;
  --muted:      #7A6A6E;

  /* --- derived tints and shades --- */
  --raspberry-deep: #7C2941;
  --raspberry-mid:  #BE5473;
  --raspberry-soft: #D68DA2;
  --raspberry-wash: #F7E7EC;
  --butter-deep:    #D9A470;
  --butter-mid:     #F3D8BC;
  --butter-wash:    #FBF0E5;
  --crumb:          #EFE3DA;
  --crumb-deep:     #E2D2C6;
  --ink-soft:       #4A3840;
  --cream-panel:    #FBF4EE;

  /* --- spacing scale --- */
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 6.5rem;

  /* --- radii --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --- shadows, stacked like cake tiers --- */
  --shadow-plate: 0 1px 0 var(--crumb), 0 10px 30px -22px rgba(42,30,35,.55);
  --shadow-tier: 0 0 0 1px var(--crumb),
                 0 10px 0 -4px var(--butter-wash),
                 0 11px 0 -4px var(--crumb),
                 0 22px 40px -30px rgba(42,30,35,.65);
  --shadow-lift: 0 0 0 1px var(--crumb-deep),
                 0 12px 0 -4px var(--raspberry-wash),
                 0 13px 0 -4px var(--crumb-deep),
                 0 34px 60px -38px rgba(124,41,65,.6);
  --shadow-soft: 0 18px 44px -34px rgba(42,30,35,.7);

  /* --- type --- */
  --font-display: "Gilda Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-xs:   .78rem;
  --t-sm:   .875rem;
  --t-base: 1.02rem;
  --t-md:   1.12rem;
  --t-lg:   clamp(1.2rem, 1.05rem + .5vw, 1.42rem);
  --t-xl:   clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --t-2xl:  clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
  --t-3xl:  clamp(2.3rem, 1.5rem + 3.2vw, 3.6rem);
  --t-4xl:  clamp(2.9rem, 1.7rem + 4.6vw, 4.6rem);

  --wrap: 1180px;
  --ring: 0 0 0 3px var(--sugar), 0 0 0 6px var(--raspberry);
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background-color:var(--sugar);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--t-base);
  line-height:1.68;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* sugar dusting: a very faint lace of dots over the whole page */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    radial-gradient(circle at 3px 3px, rgba(166,58,90,.055) 1px, transparent 1.4px),
    radial-gradient(circle at 14px 14px, rgba(217,164,112,.07) 1px, transparent 1.4px);
  background-size:22px 22px, 22px 22px;
  opacity:.9;
}

body > *{ position:relative; z-index:1; }

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

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--ink);
  margin:0 0 var(--s4);
}

h1{ font-size:var(--t-4xl); }
h2{ font-size:var(--t-3xl); }
h3{ font-size:var(--t-lg); line-height:1.24; }
h4{ font-size:var(--t-md); }

p{ margin:0 0 var(--s4); }
p:last-child{ margin-bottom:0; }

a{ color:var(--raspberry-deep); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--raspberry); }

ul,ol{ margin:0 0 var(--s4); padding-left:1.15rem; }
li{ margin-bottom:var(--s2); }

strong{ font-weight:700; color:var(--ink); }

hr{ border:0; height:1px; background:var(--crumb); margin:var(--s6) 0; }

:focus-visible{
  outline:3px solid var(--raspberry);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2.5rem);
}

.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{
  position:absolute;
  left:var(--s4);
  top:-64px;
  z-index:200;
  background:var(--raspberry);
  color:#fff;
  padding:.7rem 1.2rem;
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:var(--t-sm);
  text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{ top:var(--s3); color:#fff; }

/* ==========================================================================
   Motif helpers: piping, scallops, ribbons
   ========================================================================== */

/* a row of piped pearls hanging from the top edge of a card */
.piped-top{ position:relative; }
.piped-top::before{
  content:"";
  position:absolute;
  left:10px; right:10px; top:0;
  height:9px;
  background-image:radial-gradient(circle at 7px 9px, var(--butter) 4.4px, transparent 4.9px);
  background-size:14px 9px;
  background-repeat:repeat-x;
  pointer-events:none;
}

/* the same piping, in raspberry, along a bottom edge */
.piped-bottom{ position:relative; }
.piped-bottom::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:9px;
  background-image:radial-gradient(circle at 8px 0, var(--raspberry-wash) 4.6px, transparent 5.1px);
  background-size:16px 9px;
  background-repeat:repeat-x;
  pointer-events:none;
}

/* raspberry ribbon underline that draws itself when the block is revealed.
   Painted as a background so it follows the phrase across wrapped lines. */
.ribbon{
  display:inline;
  padding-bottom:.08em;
  background-image:linear-gradient(90deg, var(--raspberry-deep), var(--raspberry) 55%, var(--raspberry-soft));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 .26rem;
  transition:background-size 1.05s cubic-bezier(.22,.61,.36,1) .18s;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.is-visible .ribbon,
.ribbon.is-visible{ background-size:100% .26rem; }
/* the ribbon knot: a small raspberry diamond that lands once the line is drawn */
.ribbon::after{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:.3em; height:.3em;
  margin-left:.36em;
  border-radius:1px;
  background:var(--raspberry);
  transform:rotate(45deg) scale(0);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) .95s;
}
.is-visible .ribbon::after,
.ribbon.is-visible::after{ transform:rotate(45deg) scale(1); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--raspberry);
  margin:0 0 var(--s3);
}
.eyebrow::before{
  content:"";
  width:34px; height:7px;
  background-image:radial-gradient(circle at 3.5px 3.5px, var(--butter-deep) 3px, transparent 3.4px);
  background-size:7px 7px;
  background-repeat:repeat-x;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:var(--font-body);
  font-size:var(--t-sm);
  font-weight:700;
  letter-spacing:.03em;
  line-height:1;
  padding:1rem 1.6rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.btn-primary{
  background:var(--raspberry);
  color:#FFF8FA;
  box-shadow:0 8px 0 -3px var(--raspberry-wash), 0 9px 0 -3px var(--raspberry-soft), 0 20px 30px -22px rgba(124,41,65,.9);
}
.btn-primary:hover{
  background:var(--raspberry-deep);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 0 -3px var(--raspberry-wash), 0 11px 0 -3px var(--raspberry-soft), 0 26px 34px -24px rgba(124,41,65,.95);
}

.btn-ghost{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--crumb-deep);
  box-shadow:0 6px 0 -3px var(--butter-wash), 0 7px 0 -3px var(--crumb);
}
.btn-ghost:hover{
  color:var(--raspberry-deep);
  border-color:var(--butter-deep);
  transform:translateY(-2px);
}

.btn-block{ width:100%; }

.btn-quiet{
  background:transparent;
  color:var(--raspberry-deep);
  border-color:var(--raspberry-soft);
}
.btn-quiet:hover{ background:var(--raspberry-wash); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(253,249,246,.86);
  backdrop-filter:blur(9px);
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:9px;
  background-image:radial-gradient(circle at 9px 0, var(--butter-mid) 5px, transparent 5.5px);
  background-size:18px 9px;
  background-repeat:repeat-x;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.site-header.is-stuck{
  background:rgba(255,255,255,.95);
  border-bottom-color:var(--crumb);
  box-shadow:0 10px 30px -28px rgba(42,30,35,.9);
}
.site-header.is-stuck::after{ opacity:1; }

.header-inner{
  display:flex;
  align-items:center;
  gap:var(--s4);
  min-height:76px;
  padding-block:.7rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--ink);
  margin-right:auto;
}
.brand-mark{
  width:40px; height:40px;
  display:grid;
  place-items:center;
  border-radius:var(--r-md);
  background:linear-gradient(160deg, var(--raspberry) 0%, var(--raspberry-deep) 100%);
  box-shadow:0 5px 0 -2px var(--butter-mid), 0 6px 0 -2px var(--crumb-deep);
  flex:0 0 auto;
}
.brand-mark svg{ width:26px; height:26px; }
.brand-name{
  font-family:var(--font-display);
  font-size:1.34rem;
  letter-spacing:.005em;
}
.brand-name b{ font-weight:400; color:var(--raspberry); }

.primary-nav ul{
  display:flex;
  align-items:center;
  gap:clamp(.8rem, 1.6vw, 1.7rem);
  list-style:none;
  margin:0; padding:0;
}
.primary-nav li{ margin:0; }
.primary-nav a{
  position:relative;
  color:var(--ink-soft);
  text-decoration:none;
  font-size:var(--t-sm);
  font-weight:600;
  padding:.4rem 0;
}
.primary-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--raspberry);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.primary-nav a:hover{ color:var(--raspberry-deep); }
.primary-nav a:hover::after{ transform:scaleX(1); }

.header-cta{ padding:.8rem 1.25rem; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:var(--r-md);
  border:1px solid var(--crumb-deep);
  background:var(--surface);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  display:block;
  width:19px; height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .3s ease, opacity .2s ease;
}
.nav-toggle span{ position:relative; }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Sections
   ========================================================================== */

main{ display:block; }

.section{ padding-block:clamp(3.6rem, 7vw, 6.4rem); position:relative; }
.section-cream{
  background:
    linear-gradient(180deg, var(--cream-panel) 0%, var(--butter-wash) 100%);
  border-block:1px solid var(--crumb);
}
.section-white{ background:var(--surface); border-block:1px solid var(--crumb); }

.section-head{ max-width:44rem; margin-bottom:clamp(2rem, 4vw, 3.2rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head p{ color:var(--muted); font-size:var(--t-md); }

.lede{ font-size:var(--t-md); color:var(--ink-soft); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  padding-top:clamp(2.4rem, 5vw, 4.2rem);
  padding-bottom:clamp(3rem, 6vw, 5.2rem);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-160px; right:-140px;
  width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(239,201,166,.55), rgba(239,201,166,0) 66%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  left:-120px; bottom:-180px;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle at 60% 40%, rgba(166,58,90,.14), rgba(166,58,90,0) 68%);
  pointer-events:none;
}

.hero-grid{
  display:grid;
  gap:clamp(2.2rem, 5vw, 3.6rem);
  align-items:center;
}

.hero-title{ margin-bottom:var(--s5); }
.hero-title .accent{ color:var(--raspberry-deep); font-style:italic; }

.hero-lede{
  font-size:clamp(1.05rem, .98rem + .35vw, 1.22rem);
  color:var(--ink-soft);
  max-width:34rem;
  margin-bottom:var(--s6);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin-bottom:var(--s6);
}

.hero-proof{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s3) var(--s5);
  list-style:none;
  margin:0; padding:var(--s4) 0 0;
  border-top:1px dashed var(--crumb-deep);
}
.hero-proof li{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0;
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--ink-soft);
}
.hero-proof li::before{
  content:"";
  width:11px; height:11px;
  border-radius:50%;
  background:var(--butter);
  box-shadow:0 0 0 3px var(--butter-wash), inset 0 -2px 0 var(--butter-deep);
  flex:0 0 auto;
}

/* the hero photograph sits on a cake stand */
.cake-stand{ position:relative; padding-bottom:34px; }
.stand-photo{
  position:relative;
  border-radius:var(--r-xl) var(--r-xl) 6px 6px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 0 0 9px var(--surface), 0 0 0 10px var(--crumb), 0 40px 60px -46px rgba(42,30,35,.9);
}
.stand-photo img{ width:100%; aspect-ratio:16/12; object-fit:cover; }
.stand-photo::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:16px;
  background-image:radial-gradient(circle at 12px 0, var(--surface) 10.6px, transparent 11.1px);
  background-size:24px 16px;
  background-repeat:repeat-x;
}
.stand-plate{
  position:absolute;
  left:12%; right:12%; bottom:14px;
  height:12px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg, var(--butter-mid), var(--butter-deep));
  box-shadow:0 12px 22px -16px rgba(42,30,35,.8);
}
.stand-plate::before{
  content:"";
  position:absolute;
  left:50%; top:-16px;
  transform:translateX(-50%);
  width:34%; height:18px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--butter-wash), var(--butter-mid));
}

.stand-tag{
  position:absolute;
  left:-6px; bottom:64px;
  background:var(--surface);
  border:1px solid var(--crumb);
  border-radius:var(--r-md);
  padding:.75rem .95rem;
  box-shadow:var(--shadow-plate);
  max-width:15.5rem;
}
.stand-tag .tag-line{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:var(--t-xs);
  color:var(--muted);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:0 0 .3rem;
}
.stand-tag .tag-value{
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--ink);
  margin:0;
}
.stand-tag .tag-paid{
  display:inline-block;
  margin-top:.4rem;
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--raspberry-deep);
  background:var(--raspberry-wash);
  border-radius:var(--r-pill);
  padding:.2rem .65rem;
}

/* ==========================================================================
   Problem: order slips pinned to the rail
   ========================================================================== */

.slip-grid{
  display:grid;
  gap:var(--s5);
  grid-template-columns:1fr;
}
.slip{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-md);
  padding:2rem 1.6rem 1.6rem;
  box-shadow:var(--shadow-tier);
}
.slip h3{ margin-bottom:.6rem; font-size:1.22rem; }
.slip p{ color:var(--muted); font-size:var(--t-sm); line-height:1.72; }
.cost-chip{
  display:inline-block;
  margin-top:var(--s4);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.05em;
  color:var(--raspberry-deep);
  background:var(--raspberry-wash);
  border:1px solid var(--raspberry-soft);
  border-radius:var(--r-pill);
  padding:.35rem .8rem;
}
.slip-note{
  margin-top:var(--s6);
  padding:var(--s5);
  border-radius:var(--r-md);
  border:1px dashed var(--raspberry-soft);
  background:var(--raspberry-wash);
  font-size:var(--t-md);
  color:var(--ink-soft);
}

/* ==========================================================================
   Solution: the tier ladder
   ========================================================================== */

.solution-grid{ display:grid; gap:clamp(2rem, 5vw, 3.4rem); align-items:start; }

.tier-ladder{ list-style:none; margin:0; padding:0; counter-reset:tier; }
.tier-ladder li{
  position:relative;
  counter-increment:tier;
  background:var(--surface);
  border-radius:var(--r-md);
  padding:1.5rem 1.5rem 1.5rem 4.4rem;
  margin:0 0 1.35rem;
  box-shadow:var(--shadow-tier);
}
.tier-ladder li::before{
  content:counter(tier);
  position:absolute;
  left:1.15rem; top:1.35rem;
  width:2.35rem; height:2.35rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-family:var(--font-display);
  font-size:1.15rem;
  color:#fff;
  background:linear-gradient(160deg, var(--raspberry-mid), var(--raspberry-deep));
  box-shadow:0 0 0 4px var(--raspberry-wash);
}
.tier-ladder li h3{ margin-bottom:.45rem; font-size:1.18rem; }
.tier-ladder li p{ color:var(--muted); font-size:var(--t-sm); }
/* each rung a little narrower, so the stack reads as tiers */
.tier-ladder li:nth-child(2){ margin-inline:.9rem 0; }
.tier-ladder li:nth-child(3){ margin-inline:1.8rem 0; }
.tier-ladder li:nth-child(4){ margin-inline:2.7rem 0; }

.photo-frame{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface);
  padding:10px;
  box-shadow:var(--shadow-tier);
}
.photo-frame img{
  border-radius:var(--r-md);
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.photo-caption{
  margin:0;
  padding:.9rem .4rem .3rem;
  font-size:var(--t-sm);
  color:var(--muted);
}
.photo-caption b{ color:var(--raspberry-deep); font-weight:700; }

/* ==========================================================================
   Features
   ========================================================================== */

.feature-grid{ display:grid; gap:var(--s5); }
.feature{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-md);
  padding:2rem 1.5rem 1.6rem;
  box-shadow:var(--shadow-tier);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.f-icon{
  width:56px; height:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--butter-wash);
  border:1px solid var(--butter-mid);
  box-shadow:inset 0 -3px 0 var(--butter-mid);
  margin-bottom:var(--s4);
}
.f-icon svg{ width:28px; height:28px; }
.feature h3{ margin-bottom:.5rem; font-size:1.16rem; }
.feature p{ color:var(--muted); font-size:var(--t-sm); margin:0; }

/* ==========================================================================
   Outcomes
   ========================================================================== */

.outcome-grid{ display:grid; gap:var(--s5); }
.outcome{
  padding:var(--s5) var(--s5) var(--s5) var(--s6);
  border-left:3px solid var(--butter);
  position:relative;
}
.outcome::before{
  content:"";
  position:absolute;
  left:-8px; top:var(--s5);
  width:13px; height:13px;
  border-radius:50%;
  background:var(--raspberry);
  box-shadow:0 0 0 4px var(--raspberry-wash);
}
.outcome-figure{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem);
  line-height:1;
  color:var(--raspberry-deep);
  display:block;
  margin-bottom:.35rem;
}
.outcome h3{ font-family:var(--font-body); font-size:var(--t-sm); font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); margin-bottom:.65rem; }
.outcome p{ color:var(--muted); font-size:var(--t-sm); margin:0; }

/* ==========================================================================
   Testimonials and results
   ========================================================================== */

.voice-grid{ display:grid; gap:var(--s5); }
.testimonial{
  position:relative;
  margin:0;
  background:var(--surface);
  border-radius:var(--r-md);
  padding:2.4rem 1.6rem 1.5rem;
  box-shadow:var(--shadow-tier);
}
.testimonial::after{
  content:"";
  position:absolute;
  left:1.6rem; top:1.15rem;
  width:44px; height:8px;
  background-image:radial-gradient(circle at 4px 4px, var(--raspberry-soft) 3.4px, transparent 3.9px);
  background-size:8px 8px;
  background-repeat:repeat-x;
}
.testimonial p{
  font-family:var(--font-display);
  font-size:1.1rem;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:var(--s4);
}
.testimonial footer{
  border-top:1px solid var(--crumb);
  padding-top:var(--s3);
  font-size:var(--t-sm);
}
.voice-name{ display:block; font-weight:700; color:var(--ink); }
.voice-role{ display:block; color:var(--muted); font-size:var(--t-xs); letter-spacing:.03em; }

.results{
  display:grid;
  gap:var(--s4);
  margin-top:var(--s7);
  padding:var(--s5);
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--crumb);
  box-shadow:var(--shadow-soft);
}
.result{ text-align:center; padding:var(--s3) var(--s2); }
.result b{
  display:block;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
  color:var(--raspberry-deep);
  line-height:1.1;
}
.result span{ display:block; font-size:var(--t-xs); color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-top:.3rem; }

/* ==========================================================================
   Pricing: three cakes, one, two and three tiers
   ========================================================================== */

.pricing-grid{ display:grid; gap:var(--s5); align-items:end; }
.plan{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:2.6rem 1.6rem 1.9rem;
  box-shadow:var(--shadow-tier);
  display:flex;
  flex-direction:column;
}
.plan--pick{
  box-shadow:var(--shadow-lift);
  border:1px solid var(--raspberry-soft);
  padding-top:3.1rem;
}
.plan-flag{
  position:absolute;
  top:-14px; left:50%;
  transform:translateX(-50%);
  background:var(--raspberry);
  color:#fff;
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:.4rem 1rem;
  border-radius:var(--r-pill);
  white-space:nowrap;
  box-shadow:0 8px 18px -12px rgba(124,41,65,.9);
}
.tiermark{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:var(--s4); }
.tiermark i{
  display:block;
  height:8px;
  border-radius:3px;
  background:var(--butter-mid);
  border-bottom:2px solid var(--butter-deep);
}
.tiermark i:nth-child(1){ width:26px; }
.tiermark i:nth-child(2){ width:40px; }
.tiermark i:nth-child(3){ width:54px; }
.plan--pick .tiermark i{ background:var(--raspberry-soft); border-bottom-color:var(--raspberry); }

.plan-name{ font-size:1.4rem; margin-bottom:.2rem; text-align:center; }
.plan-for{ text-align:center; color:var(--muted); font-size:var(--t-xs); letter-spacing:.05em; text-transform:uppercase; margin-bottom:var(--s4); }
.plan-price{
  text-align:center;
  font-family:var(--font-display);
  font-size:2.9rem;
  line-height:1;
  color:var(--ink);
  margin-bottom:.2rem;
}
.plan-price sub{ font-family:var(--font-body); font-size:.9rem; font-weight:600; color:var(--muted); bottom:0; }
.plan-cadence{ text-align:center; font-size:var(--t-xs); color:var(--muted); margin-bottom:var(--s5); }
.plan ul{ list-style:none; margin:0 0 var(--s5); padding:0; flex:1 1 auto; }
.plan li{
  position:relative;
  padding-left:1.7rem;
  font-size:var(--t-sm);
  color:var(--ink-soft);
  margin-bottom:.7rem;
}
.plan li::before{
  content:"";
  position:absolute;
  left:0; top:.5em;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--butter);
  box-shadow:inset 0 -2px 0 var(--butter-deep);
}
.plan--pick li::before{ background:var(--raspberry-soft); box-shadow:inset 0 -2px 0 var(--raspberry); }

.billing-note{
  margin-top:var(--s5);
  text-align:center;
  font-size:var(--t-sm);
  color:var(--muted);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-list{ max-width:52rem; margin-inline:auto; }
.faq-item{
  border-bottom:1px solid var(--crumb-deep);
  background:var(--surface);
  border-radius:var(--r-sm);
  margin-bottom:.7rem;
  box-shadow:0 1px 0 var(--crumb), 0 12px 26px -26px rgba(42,30,35,.8);
}
.faq-q{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  text-align:left;
  background:none;
  border:0;
  cursor:pointer;
  padding:1.25rem 1.2rem;
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--ink);
  line-height:1.35;
}
.faq-q:hover{ color:var(--raspberry-deep); }
.faq-sign{
  position:relative;
  flex:0 0 auto;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--raspberry-wash);
  border:1px solid var(--raspberry-soft);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.faq-sign::before,
.faq-sign::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  background:var(--raspberry-deep);
  border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq-sign::before{ width:11px; height:2px; }
.faq-sign::after{ width:2px; height:11px; transition:opacity .25s ease; }
.faq-q[aria-expanded="true"] .faq-sign{ transform:rotate(180deg); background:var(--raspberry); }
.faq-q[aria-expanded="true"] .faq-sign::before{ background:#fff; }
.faq-q[aria-expanded="true"] .faq-sign::after{ opacity:0; }
.faq-a{ padding:0 1.2rem 1.35rem; color:var(--muted); font-size:var(--t-sm); line-height:1.75; }
.faq-a p{ margin:0; max-width:44rem; }
.faq-a[hidden]{ display:none; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid{ display:grid; gap:clamp(2rem, 4vw, 3rem); align-items:start; }

.contact-form{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:2.4rem 1.5rem 1.8rem;
  box-shadow:var(--shadow-tier);
}
.field{ margin-bottom:var(--s4); }
.field-row{ display:grid; gap:var(--s4); }
.field label{
  display:block;
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.4rem;
}
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:var(--t-base);
  color:var(--ink);
  background:var(--sugar);
  border:1px solid var(--crumb-deep);
  border-radius:var(--r-sm);
  padding:.8rem .9rem;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.6; }
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--raspberry) 50%), linear-gradient(135deg, var(--raspberry) 50%, transparent 50%); background-position:calc(100% - 19px) 1.2rem, calc(100% - 13px) 1.2rem; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:2.6rem; }
.field input:focus,
.field select:focus,
.field textarea:focus{ background:var(--surface); border-color:var(--raspberry); box-shadow:0 0 0 3px var(--raspberry-wash); outline:none; }
.field [aria-invalid="true"]{ border-color:var(--raspberry-deep); background:#FDF2F5; }
.error-text{
  display:block;
  margin-top:.35rem;
  font-size:var(--t-xs);
  font-weight:600;
  color:var(--raspberry-deep);
}
.error-text:empty{ display:none; }

.consent{ display:flex; align-items:flex-start; gap:.65rem; margin-bottom:var(--s5); }
.consent input{ width:20px; height:20px; margin-top:.2rem; flex:0 0 auto; accent-color:var(--raspberry); }
.consent label{
  font-size:var(--t-sm);
  text-transform:none;
  letter-spacing:0;
  font-weight:500;
  color:var(--muted);
  margin:0;
}

.form-foot{ margin-top:var(--s4); font-size:var(--t-sm); color:var(--muted); }

.aside-card{
  background:var(--surface);
  border:1px solid var(--crumb);
  border-radius:var(--r-md);
  padding:var(--s5);
  box-shadow:var(--shadow-soft);
  margin-bottom:var(--s4);
}
.aside-card h3{ font-size:1.15rem; margin-bottom:.6rem; }
.aside-card p{ color:var(--muted); font-size:var(--t-sm); }
.aside-list{ list-style:none; margin:0; padding:0; }
.aside-list li{
  position:relative;
  padding-left:1.6rem;
  font-size:var(--t-sm);
  color:var(--ink-soft);
  margin-bottom:.6rem;
}
.aside-list li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--raspberry-soft);
}

/* ==========================================================================
   Author byline
   ========================================================================== */

.byline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s4);
  max-width:52rem;
  margin:var(--s7) auto 0;
  padding:var(--s5);
  border-radius:var(--r-md);
  background:var(--cream-panel);
  border:1px solid var(--crumb);
}
.byline-mark{
  width:46px; height:46px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--raspberry-mid), var(--raspberry-deep));
  display:grid; place-items:center;
  flex:0 0 auto;
}
.byline-mark svg{ width:24px; height:24px; }
.byline p{ margin:0; font-size:var(--t-sm); color:var(--muted); flex:1 1 16rem; }
.byline b{ color:var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  position:relative;
  background:linear-gradient(180deg, var(--butter-wash) 0%, var(--cream-panel) 100%);
  border-top:1px solid var(--crumb-deep);
  padding-top:clamp(3rem, 6vw, 4.6rem);
  margin-top:0;
}
.site-footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:11px;
  background-image:radial-gradient(circle at 10px 0, var(--surface) 6px, transparent 6.5px);
  background-size:20px 11px;
  background-repeat:repeat-x;
}
.foot-grid{ display:grid; gap:var(--s6); padding-bottom:var(--s6); }
.foot-col h4{
  font-family:var(--font-body);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--raspberry-deep);
  margin-bottom:var(--s4);
}
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin-bottom:.55rem; }
.foot-col a{ color:var(--ink-soft); text-decoration:none; font-size:var(--t-sm); }
.foot-col a:hover{ color:var(--raspberry); text-decoration:underline; }
.foot-tag{ color:var(--muted); font-size:var(--t-sm); max-width:24rem; margin:var(--s3) 0 var(--s4); }
.foot-publisher{ font-size:var(--t-xs); color:var(--muted); margin-top:var(--s3); }

.social{ display:flex; gap:.55rem; flex-wrap:wrap; }
.social a{
  width:38px; height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--crumb-deep);
  color:var(--raspberry-deep);
  transition:transform .25s ease, background-color .25s ease, color .25s ease;
}
.social a:hover{ background:var(--raspberry); color:#fff; transform:translateY(-2px); }
.social svg{ width:17px; height:17px; }

.foot-base{
  border-top:1px solid var(--crumb-deep);
  padding-block:var(--s4) var(--s5);
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3) var(--s5);
  justify-content:space-between;
  font-size:var(--t-xs);
  color:var(--muted);
}
.foot-base a{ color:var(--raspberry-deep); }

/* ==========================================================================
   Inner pages: prose, site map, thanks, 404
   ========================================================================== */

.page-head{
  padding-block:clamp(2.6rem, 6vw, 4.4rem) clamp(1.6rem, 3vw, 2.4rem);
  background:linear-gradient(180deg, var(--cream-panel), var(--sugar));
  border-bottom:1px solid var(--crumb);
}
.page-head p{ color:var(--muted); max-width:44rem; font-size:var(--t-md); }

.prose{ max-width:47rem; margin-inline:auto; padding-block:clamp(2.4rem, 5vw, 4rem); }
.prose h2{
  font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-top:var(--s7);
  padding-top:var(--s5);
  border-top:1px solid var(--crumb);
}
.prose h2:first-of-type{ margin-top:var(--s5); }
.prose h3{ margin-top:var(--s5); }
.prose p,.prose li{ color:var(--ink-soft); }
.prose dl{ margin:0 0 var(--s5); }
.prose dt{ font-weight:700; color:var(--ink); margin-top:var(--s3); }
.prose dd{ margin:0 0 .4rem; color:var(--ink-soft); }
.updated{
  display:inline-block;
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--raspberry-deep);
  background:var(--raspberry-wash);
  border-radius:var(--r-pill);
  padding:.35rem .85rem;
}

.map-grid{ display:grid; gap:var(--s5); }
.map-group{
  background:var(--surface);
  border-radius:var(--r-md);
  padding:1.8rem 1.5rem 1.4rem;
  box-shadow:var(--shadow-tier);
}
.map-group h2{ font-size:1.25rem; margin-bottom:var(--s4); }
.map-group ul{ list-style:none; margin:0; padding:0; }
.map-group li{ padding-bottom:.75rem; margin-bottom:.75rem; border-bottom:1px dashed var(--crumb-deep); }
.map-group li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.map-group a{ font-weight:700; text-decoration:none; }
.map-group span{ display:block; font-size:var(--t-sm); color:var(--muted); }

.mini{
  text-align:center;
  max-width:40rem;
  margin-inline:auto;
  padding-block:clamp(3rem, 8vw, 6rem);
}
.mini .big{
  font-family:var(--font-display);
  font-size:clamp(3.4rem, 2rem + 7vw, 6rem);
  line-height:1;
  color:var(--raspberry-deep);
  margin-bottom:var(--s4);
  display:block;
}
.mini .hero-actions{ justify-content:center; }

/* ==========================================================================
   Reveal motion: layers stacking like cake tiers
   ========================================================================== */

.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-visible{
  opacity:1;
  transform:none;
  transition:opacity .75s ease, transform .85s cubic-bezier(.19,.72,.28,1);
}
.stagger > *{ opacity:0; transform:translateY(30px) scale(.988); }
.stagger.is-visible > *{
  opacity:1;
  transform:none;
  transition:opacity .62s ease, transform .8s cubic-bezier(.19,.72,.28,1);
}
.stagger.is-visible > *:nth-child(2){ transition-delay:.09s; }
.stagger.is-visible > *:nth-child(3){ transition-delay:.18s; }
.stagger.is-visible > *:nth-child(4){ transition-delay:.27s; }
.stagger.is-visible > *:nth-child(5){ transition-delay:.36s; }
.stagger.is-visible > *:nth-child(6){ transition-delay:.45s; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 899px){
  .nav-toggle{ display:inline-flex; }
  .primary-nav{
    position:absolute;
    left:0; right:0; top:100%;
    background:var(--surface);
    border-bottom:1px solid var(--crumb-deep);
    box-shadow:0 22px 40px -34px rgba(42,30,35,.9);
    padding:var(--s4) clamp(1.1rem, 4vw, 2.5rem) var(--s5);
    display:none;
  }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:.2rem; }
  .primary-nav a{ display:block; padding:.7rem 0; width:100%; border-bottom:1px dashed var(--crumb); }
  .header-cta{ display:none; }
  .stand-tag{ position:static; margin-top:var(--s4); max-width:none; }
  .tier-ladder li:nth-child(2),
  .tier-ladder li:nth-child(3),
  .tier-ladder li:nth-child(4){ margin-inline:0; }
}

@media (min-width: 560px){
  .slip-grid{ grid-template-columns:repeat(2, 1fr); }
  .results{ grid-template-columns:repeat(3, 1fr); }
  .field-row{ grid-template-columns:1fr 1fr; }
  .contact-form{ padding:2.6rem 2.2rem 2rem; }
  .slip{ padding:2.2rem 1.9rem 1.8rem; }
  .feature{ padding:2.1rem 1.9rem 1.8rem; }
  .testimonial{ padding:2.6rem 1.9rem 1.6rem; }
  .plan{ padding:2.8rem 1.9rem 2rem; }
}

@media (min-width: 760px){
  .feature-grid{ grid-template-columns:repeat(2, 1fr); }
  .outcome-grid{ grid-template-columns:repeat(2, 1fr); }
  .voice-grid{ grid-template-columns:repeat(2, 1fr); }
  .foot-grid{ grid-template-columns:repeat(2, 1fr); }
  .map-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (min-width: 900px){
  .header-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .primary-nav{ display:block !important; position:static; padding:0; border:0; box-shadow:none; background:none; }
  .hero-grid{ grid-template-columns:1.02fr .98fr; }
  .solution-grid{ grid-template-columns:1.08fr .92fr; }
  .contact-grid{ grid-template-columns:1.25fr .75fr; }
  .voice-grid{ grid-template-columns:repeat(3, 1fr); }
  .pricing-grid{ grid-template-columns:repeat(3, 1fr); }
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; }
}

@media (min-width: 1080px){
  .feature-grid{ grid-template-columns:repeat(3, 1fr); }
  .outcome-grid{ grid-template-columns:repeat(4, 1fr); }
  .slip-grid{ grid-template-columns:repeat(4, 1fr); }
}

@media (min-width: 1400px){
  :root{ --wrap: 1240px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,
  .stagger > *{ opacity:1 !important; transform:none !important; }
  .ribbon{ background-size:100% .26rem !important; }
  .ribbon::after{ transform:rotate(45deg) scale(1) !important; }
}

/* end of TieredOrders stylesheet */

/* small hint text under a form control */
.hint{
  display:block;
  margin-top:.4rem;
  font-size:var(--t-xs);
  color:var(--muted);
  line-height:1.55;
}

/* ==========================================================================
   The Cake Board: the magazine
   Same tokens, same typefaces. Cards are stacked tiers, headings carry piping,
   and the article measure stays inside a comfortable line length.
   ========================================================================== */

.primary-nav a{ white-space:nowrap; }
.primary-nav a[aria-current="page"]{ color:var(--raspberry-deep); }
.primary-nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* --- breadcrumb ribbon --------------------------------------------------- */
.mag-crumbs{
  background:var(--cream-panel);
  border-bottom:1px solid var(--crumb);
}
.mag-crumbs ol{
  list-style:none;
  margin:0; padding:.85rem 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem .55rem;
  font-size:var(--t-xs);
  letter-spacing:.03em;
  color:var(--muted);
}
.mag-crumbs li{ margin:0; display:flex; align-items:center; gap:.55rem; }
.mag-crumbs li + li::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:var(--butter-deep);
  flex:0 0 auto;
}
.mag-crumbs a{ color:var(--ink-soft); text-decoration:none; font-weight:600; }
.mag-crumbs a:hover{ color:var(--raspberry-deep); text-decoration:underline; }
.mag-crumbs li:last-child span{
  color:var(--muted);
  display:block;
  max-width:32ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- shared bits --------------------------------------------------------- */
.mag-dot{
  display:inline-block;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--butter-deep);
  margin:0 .6rem;
  vertical-align:middle;
}
.mag-standfirst{
  font-family:var(--font-body);
  font-size:var(--t-md);
  line-height:1.66;
  color:var(--ink-soft);
  max-width:38rem;
}

/* --- magazine masthead --------------------------------------------------- */
.mag-masthead{
  padding-block:clamp(2.6rem, 6vw, 4.6rem) clamp(1.8rem, 4vw, 2.8rem);
  background:
    radial-gradient(120% 130% at 88% -10%, var(--butter-wash) 0%, transparent 58%),
    var(--sugar);
  border-bottom:1px solid var(--crumb);
}
.mag-masthead h1{ margin-bottom:var(--s4); max-width:20ch; }
.mag-masthead-facts{
  list-style:none;
  margin:var(--s5) 0 0;
  padding:0;
  display:grid;
  gap:.55rem;
  max-width:42rem;
}
.mag-masthead-facts li{
  position:relative;
  padding-left:1.6rem;
  margin:0;
  font-size:var(--t-sm);
  color:var(--muted);
}
.mag-masthead-facts li::before{
  content:"";
  position:absolute;
  left:0; top:.55rem;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--butter);
  box-shadow:inset 0 -2px 0 var(--butter-deep);
}

/* --- the index grid ------------------------------------------------------ */
.mag-index{ padding-block:clamp(2.6rem, 6vw, 4.6rem); }
.mag-grid{
  display:grid;
  gap:var(--s5);
  grid-template-columns:1fr;
}

.mag-card{
  background:var(--surface);
  border:1px solid var(--crumb);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-tier);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.mag-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }

.mag-card-media{ position:relative; background:var(--cream-panel); }
.mag-card-media img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}
.mag-card-media::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:0;
  height:9px;
  background-image:radial-gradient(circle at 7px 0, var(--surface) 4.4px, transparent 4.9px);
  background-size:14px 9px;
  background-repeat:repeat-x;
  pointer-events:none;
}
.mag-card-angle{
  position:absolute;
  left:var(--s4); top:var(--s4);
  background:var(--sugar);
  color:var(--raspberry-deep);
  border:1px solid var(--crumb-deep);
  border-radius:var(--r-pill);
  padding:.3rem .8rem;
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.mag-card-body{
  padding:1.5rem 1.35rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  flex:1 1 auto;
}
.mag-card-title{
  font-family:var(--font-display);
  font-size:1.28rem;
  line-height:1.22;
  margin:0;
}
.mag-card-title a{ color:var(--ink); text-decoration:none; }
.mag-card-title a:hover{ color:var(--raspberry-deep); text-decoration:underline; text-decoration-color:var(--raspberry-soft); }
.mag-card-dek{
  margin:0;
  color:var(--muted);
  font-size:var(--t-sm);
  line-height:1.72;
  flex:1 1 auto;
}
.mag-card-meta{
  margin:0;
  padding-top:.85rem;
  border-top:1px dashed var(--crumb-deep);
  font-size:var(--t-xs);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}

/* the lead card sits across the grid and reads larger */
.mag-card.lead{ box-shadow:var(--shadow-lift); border-color:var(--crumb-deep); }
.mag-card.lead .mag-card-media img{ aspect-ratio:16/10; }
.mag-card.lead .mag-card-title{ font-size:clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); }
.mag-card.lead .mag-card-dek{ font-size:var(--t-base); color:var(--ink-soft); }
.mag-card.lead .mag-card-angle{ background:var(--raspberry-wash); border-color:var(--raspberry-soft); }

/* --- article header ------------------------------------------------------ */
.mag-article{ display:block; }
.mag-head{
  padding-block:clamp(2.4rem, 5.5vw, 4rem) clamp(1.4rem, 3vw, 2.2rem);
  background:
    radial-gradient(110% 130% at 10% -20%, var(--raspberry-wash) 0%, transparent 55%),
    var(--sugar);
}
.mag-head-inner{ max-width:44rem; }
.mag-head h1{
  font-size:var(--t-3xl);
  margin-bottom:var(--s4);
}
.mag-byline{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px solid var(--crumb-deep);
}
.mag-byline-mark{
  width:38px; height:38px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:var(--r-md);
  background:linear-gradient(160deg, var(--raspberry) 0%, var(--raspberry-deep) 100%);
  box-shadow:0 4px 0 -2px var(--butter-mid), 0 5px 0 -2px var(--crumb-deep);
}
.mag-byline-mark svg{ width:21px; height:21px; }
.mag-byline-text{
  margin:0;
  font-size:var(--t-xs);
  letter-spacing:.03em;
  color:var(--muted);
  line-height:1.9;
}
.mag-byline-text a{ font-weight:700; color:var(--raspberry-deep); text-decoration:none; }
.mag-byline-text a:hover{ text-decoration:underline; }
.mag-byline-text time{ color:var(--ink-soft); }

/* --- featured photograph ------------------------------------------------- */
.mag-figure{ margin:0; padding-block:clamp(1.4rem, 3vw, 2.2rem); }
.mag-figure-frame{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--crumb-deep);
  box-shadow:var(--shadow-tier);
  background:var(--cream-panel);
}
.mag-figure-frame img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.mag-figure figcaption{
  margin-top:.85rem;
  font-size:var(--t-xs);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}

/* --- article body -------------------------------------------------------- */
.mag-body{
  max-width:68ch;
  margin-inline:auto;
  padding-block:clamp(1.2rem, 3vw, 2rem) clamp(1.6rem, 4vw, 2.6rem);
  font-size:1.06rem;
  line-height:1.78;
  color:var(--ink-soft);
}
.mag-body > p{ margin:0 0 1.35rem; }
.mag-body > p:last-child{ margin-bottom:0; }
.mag-body h2{
  font-size:var(--t-xl);
  line-height:1.2;
  color:var(--ink);
  margin:2.9rem 0 1rem;
  padding-top:1.4rem;
  position:relative;
}
.mag-body h2::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:74px; height:9px;
  background-image:radial-gradient(circle at 7px 9px, var(--butter) 4.4px, transparent 4.9px);
  background-size:14px 9px;
  background-repeat:repeat-x;
}
.mag-body h2:first-child{ margin-top:1rem; }
.mag-body h3{
  font-size:var(--t-lg);
  color:var(--ink);
  margin:2rem 0 .7rem;
}
.mag-body ul,
.mag-body ol{ margin:0 0 1.35rem; padding-left:0; list-style:none; }
.mag-body ol{ counter-reset:magstep; }
.mag-body li{
  position:relative;
  padding-left:1.7rem;
  margin-bottom:.7rem;
}
.mag-body ul > li::before{
  content:"";
  position:absolute;
  left:.15rem; top:.68rem;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--butter);
  box-shadow:inset 0 -2px 0 var(--butter-deep);
}
.mag-body ol > li::before{
  counter-increment:magstep;
  content:counter(magstep);
  position:absolute;
  left:0; top:.15rem;
  font-family:var(--font-display);
  font-size:.95rem;
  color:var(--raspberry-deep);
}
.mag-body blockquote{
  margin:1.8rem 0;
  padding:1.3rem 1.4rem;
  background:var(--cream-panel);
  border-left:3px solid var(--raspberry);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--font-display);
  font-size:var(--t-lg);
  line-height:1.42;
  color:var(--ink);
}
.mag-body blockquote p:last-child{ margin-bottom:0; }
.mag-body table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.6rem;
  font-size:var(--t-sm);
}
.mag-body th,
.mag-body td{
  text-align:left;
  padding:.65rem .7rem;
  border-bottom:1px solid var(--crumb);
}
.mag-body th{
  font-family:var(--font-body);
  font-weight:700;
  color:var(--ink);
  background:var(--butter-wash);
}
.mag-body a{ color:var(--raspberry-deep); text-decoration-color:var(--raspberry-soft); }

/* contextual links dropped between sections */
.mag-body .inline-read{
  margin:1.8rem 0;
  padding:.95rem 1.15rem .95rem 1.25rem;
  background:var(--butter-wash);
  border-left:3px solid var(--butter-deep);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:var(--t-sm);
  line-height:1.6;
  color:var(--muted);
  font-weight:600;
}
.mag-body .inline-read a{
  color:var(--raspberry-deep);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--raspberry-soft);
}
.mag-body .inline-read a:hover{ border-bottom-color:var(--raspberry); color:var(--raspberry); }

/* --- call to action ------------------------------------------------------ */
.mag-cta{
  max-width:68ch;
  margin:clamp(2rem, 4vw, 3rem) auto 0;
  background:var(--surface);
  border:1px solid var(--crumb-deep);
  border-radius:var(--r-lg);
  padding:2.1rem 1.4rem 1.8rem;
  text-align:center;
  box-shadow:var(--shadow-tier);
}
.mag-cta h2{
  font-size:var(--t-xl);
  margin:0 0 .85rem;
}
.mag-cta p{
  color:var(--muted);
  font-size:var(--t-sm);
  line-height:1.75;
  max-width:44ch;
  margin:0 auto 1.5rem;
}
.mag-cta-tiers{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin-bottom:1.1rem;
}
.mag-cta-tiers i{
  display:block;
  height:7px;
  border-radius:3px;
  background:var(--butter-mid);
  border-bottom:2px solid var(--butter-deep);
}
.mag-cta-tiers i:nth-child(1){ width:26px; }
.mag-cta-tiers i:nth-child(2){ width:40px; }
.mag-cta-tiers i:nth-child(3){ width:54px; }

/* --- author box ---------------------------------------------------------- */
.mag-author{
  max-width:68ch;
  margin:var(--s5) auto 0;
  background:var(--cream-panel);
  border:1px solid var(--crumb);
  border-radius:var(--r-lg);
  padding:1.6rem 1.4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.1rem;
}
.mag-author-photo{
  width:96px; height:96px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  box-shadow:0 0 0 6px var(--surface), 0 0 0 7px var(--crumb-deep);
}
.mag-author-name{
  font-family:var(--font-display);
  font-size:1.22rem;
  color:var(--ink);
  margin:0 0 .45rem;
}
.mag-author-text p{
  color:var(--muted);
  font-size:var(--t-sm);
  line-height:1.72;
  margin:0 0 .7rem;
}
.mag-author-link a{ font-weight:700; text-decoration:none; border-bottom:2px solid var(--raspberry-soft); }
.mag-author-link a:hover{ border-bottom-color:var(--raspberry); }

/* --- read also ----------------------------------------------------------- */
.mag-related{
  padding-block:clamp(2.6rem, 6vw, 4.4rem);
  background:var(--surface);
  border-top:1px solid var(--crumb);
}
.mag-related-title{
  font-size:var(--t-2xl);
  margin-bottom:var(--s5);
  position:relative;
  padding-top:1.2rem;
}
.mag-related-title::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:88px; height:9px;
  background-image:radial-gradient(circle at 7px 9px, var(--raspberry-soft) 4.4px, transparent 4.9px);
  background-size:14px 9px;
  background-repeat:repeat-x;
}
.mag-related-grid{
  display:grid;
  gap:var(--s5);
  grid-template-columns:1fr;
}
.mag-rel{
  background:var(--sugar);
  border:1px solid var(--crumb);
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-plate);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.mag-rel:hover{ transform:translateY(-4px); box-shadow:var(--shadow-tier); }
.mag-rel-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.mag-rel-body{ padding:1.15rem 1.1rem 1.25rem; display:flex; flex-direction:column; gap:.55rem; flex:1 1 auto; }
.mag-rel-title{
  font-size:1.08rem;
  line-height:1.28;
  margin:0;
}
.mag-rel-title a{ color:var(--ink); text-decoration:none; }
.mag-rel-title a:hover{ color:var(--raspberry-deep); text-decoration:underline; }
.mag-rel-dek{
  margin:0;
  font-size:var(--t-xs);
  line-height:1.7;
  color:var(--muted);
  flex:1 1 auto;
}
.mag-rel-date{
  margin:0;
  font-size:var(--t-xs);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}
.mag-related-more{
  margin:var(--s5) 0 0;
  font-size:var(--t-sm);
}
.mag-related-more a{ font-weight:700; text-decoration:none; border-bottom:2px solid var(--raspberry-soft); }
.mag-related-more a:hover{ border-bottom-color:var(--raspberry); }

/* --- the magazine block on the home page --------------------------------- */
.mag-home-grid{
  display:grid;
  gap:var(--s5);
  grid-template-columns:1fr;
}
.mag-home-more{
  margin-top:var(--s6);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s4);
}
.mag-home-more p{
  margin:0;
  color:var(--muted);
  font-size:var(--t-sm);
  max-width:34rem;
}

/* --- author page article list -------------------------------------------- */
.mag-list{ list-style:none; margin:0; padding:0; }
.mag-list li{
  padding:0 0 .85rem;
  margin-bottom:.85rem;
  border-bottom:1px dashed var(--crumb-deep);
}
.mag-list li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.mag-list a{ font-weight:700; text-decoration:none; }
.mag-list a:hover{ text-decoration:underline; }
.mag-list time{
  display:block;
  font-size:var(--t-xs);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.2rem;
}

/* --- magazine responsive -------------------------------------------------- */
@media (min-width: 560px){
  .mag-card-body{ padding:1.7rem 1.6rem 1.8rem; }
  .mag-cta{ padding:2.6rem 2.2rem 2.2rem; }
  .mag-author{
    flex-direction:row;
    align-items:flex-start;
    text-align:left;
    padding:1.8rem 1.7rem;
    gap:1.5rem;
  }
  .mag-author-photo{ width:112px; height:112px; }
}

@media (min-width: 760px){
  .mag-grid{ grid-template-columns:repeat(2, 1fr); }
  .mag-related-grid{ grid-template-columns:repeat(3, 1fr); }
  .mag-home-grid{ grid-template-columns:repeat(3, 1fr); }
  .mag-card.lead{ grid-column:1 / -1; flex-direction:row; }
  .mag-card.lead .mag-card-media{ flex:0 0 52%; }
  .mag-card.lead .mag-card-media img{ height:100%; aspect-ratio:auto; min-height:300px; }
  .mag-card.lead .mag-card-media::after{
    left:auto; right:0; top:10px; bottom:10px;
    width:9px; height:auto;
    background-image:radial-gradient(circle at 0 7px, var(--surface) 4.4px, transparent 4.9px);
    background-size:9px 14px;
    background-repeat:repeat-y;
  }
  .mag-card.lead .mag-card-body{ padding:2.2rem 2rem; justify-content:center; }
}

@media (min-width: 1080px){
  .mag-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* end of the magazine section */

/* long, descriptive anchors need to wrap inside a pill button */
.mag-cta .btn,
.mag-home-more .btn{
  line-height:1.32;
  text-align:center;
  max-width:100%;
  padding-inline:1.3rem;
}

/* keep the magazine comfortable on a 360 pixel phone */
@media (max-width: 420px){
  .mag-card-angle{ font-size:.7rem; padding:.26rem .6rem; letter-spacing:.06em; }
  .mag-byline{ gap:.7rem; }
  .mag-byline-text{ line-height:2; }
  .mag-crumbs li:last-child span{ max-width:20ch; }
  .mag-body{ font-size:1.02rem; }
  .mag-body h2{ margin-top:2.4rem; }
  .mag-masthead-facts li{ padding-left:1.4rem; }
}

/* the magazine adds a sixth nav item, so the bar tightens on narrow laptops */
@media (min-width: 900px) and (max-width: 1079px){
  .primary-nav ul{ gap:.8rem; }
  .primary-nav a{ font-size:.82rem; }
  .header-cta{ padding:.8rem 1.05rem; }
}



/* Network strip: five sibling products, rotated so every site is linked the same
   number of times. Spans the full footer grid rather than adding a fifth column,
   because each footer declares a fixed column count and a fifth item would wrap. */
.site-network { grid-column: 1 / -1; flex-basis: 100%; width: 100%;
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.site-network h2 { font: inherit; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 0.7rem; opacity: 0.72; }
.site-network ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-network li + li { margin-top: 0; }
.site-network a { font-size: 0.86rem; text-decoration: none; opacity: 0.9;
  border-bottom: 1px solid transparent; }
.site-network a:hover, .site-network a:focus-visible { opacity: 1; border-bottom-color: currentColor; }
@media (max-width: 620px) { .site-network ul { gap: 0.45rem 1.1rem; } }


/* Decorative bleed guard. Several sections intentionally hang a rotated or offset
   pseudo element past the viewport edge. overflow-x: clip contains them without
   creating a scroll container, so position: sticky keeps working, unlike overflow
   hidden. Genuine content overflow is still reported by the element level check in
   the browser pass. */
html { overflow-x: clip; }
body { overflow-x: clip; }


/* Wide content on phones. Class names for the prose wrapper differ from site to site,
   so this targets tables and pre blocks directly: they scroll inside their own box
   rather than pushing cells past the right edge, per the build contract. */
@media (max-width: 700px) {
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { overflow-wrap: anywhere; }
  pre { overflow-x: auto; max-width: 100%; }
}