/* ==========================================================================
   SEKTIONER
   Bygger enbart pa theme.css. Ingenting har definierar en farg, en radie,
   en varaktighet eller en grad pa nytt — allt hamtas ur skalorna.

   TVA REGLER SOM GALLER OVERALLT I FILEN:

   1. Satter en regel font-size satter den ocksa line-height och
      letter-spacing. De tre hor ihop. En grad som arver brodtextens
      radavstand blir fel sa fort graden andras.

   2. Inget auto-fit. Kolumnantalet foljer annars behallarens bredd, och
      nar ramen vaxer blir ett fyrkolumnsrutnat atta. Ett rutnat har det
      antal kolumner det ar ritat for och byter pa valda brytpunkter.
   ========================================================================== */

/* --- Platshallare for media -----------------------------------------------
   Inga bildfiler. Ytorna ar ritade ur systemets egna roller, sa sidan har
   inga beroenden och inget som kan ladda halvvags. */
.ph {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 78% 12%, rgb(var(--raw-glow) / 0.55), transparent 60%),
    var(--surface-tile);
  overflow: hidden;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 var(--border) var(--line);
  border-radius: inherit;
}
.ph--wide { aspect-ratio: 16 / 10 }
.ph--tall { aspect-ratio: 3 / 4 }
.ph--sq   { aspect-ratio: 1 }

/* --- 1 Avisering ---------------------------------------------------------- */
.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--gutter);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step--1);
  line-height: var(--lh-fine);
  letter-spacing: var(--tr-fine);
}
.announce a { text-decoration: underline; text-underline-offset: 3px }
.announce__x {
  margin-left: var(--space-xs);
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  line-height: 1;
  transition: opacity var(--duration-fast) var(--ease);
}
.announce__x:hover { opacity: 1 }

/* --- 2 Sidhuvud ----------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: 20 }
.site-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  height: 72px;
  border-bottom: var(--border) solid transparent;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    -webkit-backdrop-filter var(--duration-fast) var(--ease),
    backdrop-filter var(--duration-fast) var(--ease);
}
.site-head.is-stuck .site-head__in {
  background: var(--surface);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-glass));
  backdrop-filter: saturate(180%) blur(var(--blur-glass));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head.is-stuck .site-head__in { background: rgb(var(--raw-glass)) }
}
.site-head__mark {
  font-size: var(--step-1);
  font-weight: var(--weight-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-title);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-size: var(--step--1);
  line-height: var(--lh-ui);
}

/* :not(.pill) ar inte kosmetik. `.site-nav a` vager (0,1,1) och `.pill`
   bara (0,1,0), sa utan undantaget vinner navets dampade farg over
   knappens vita — och etiketten blir osynlig pa den svarta plattan. */
.site-nav a:not(.pill) { color: var(--ink-muted); transition: color var(--duration-fast) var(--ease) }
.site-nav a:not(.pill):hover { color: var(--ink) }

/* --- 3 Hjalte ------------------------------------------------------------- */
.hero {
  padding-block: calc(var(--space-3xl) + var(--space-xl)) var(--space-3xl);
  position: relative;
  /* Glodklotet ar bredare an sektionen med flit. Klippningen hor hemma HAR
     och inte pa body: en sida som later sitt yttersta element sticka ut och
     sedan doljer det langst ute far en dokumentbredd som ar storre an
     rutan, och det ar den skillnaden som blir en vagrat scroll. `clip`
     skapar ingen scrollbehallare och ror darmed inte sticky. */
  overflow: clip;
}
.hero__glow {
  position: absolute;
  top: -40%;
  right: -8%;
  width: 58vw;
  height: 58vw;
  max-width: 1200px;
  max-height: 1200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--glow), transparent 62%);
  pointer-events: none;
  z-index: -1;
}
.hero__actions { margin-top: var(--space-xl) }
.hero__meta {
  margin-top: var(--space-3xl);
  display: flex;
  gap: var(--space-3xl);
  flex-wrap: wrap;
}
.hero__meta div { display: grid; gap: var(--space-xs) }
.hero__meta b {
  font-size: var(--step-3);
  font-weight: var(--weight-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
}

/* --- 4 Logotypmoln -------------------------------------------------------- */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl) var(--space-2xl);
}
.logos span {
  font-size: var(--step-1);
  font-weight: var(--weight-base);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-title);
  color: var(--ink-muted);
  transition: color var(--duration) var(--ease);
}
.logos span:hover { color: var(--ink) }

/* --- 5 Funktionsrutnat ---------------------------------------------------- */
.feature { display: grid; gap: var(--space-sm); align-content: start }
.feature__no {
  font-size: var(--step--1);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-fine);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.feature__rule { height: 1px; background: var(--line); margin-block: var(--space-xs) var(--space-sm) }

/* --- 6 Innehallsblock, vaxlande -------------------------------------------
   Tva spalter, alltid tva. Textspalten far inte bli bredare an lasmattet
   aven nar ramen ar 1760 px — sa medieskolumnen tar overskottet. */
.split {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
}
.split--flip > :first-child { order: 2 }
@media (max-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) }
  .split--flip > :first-child { order: 0 }
}

/* --- 7 Siffror ------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) }
.stat { display: grid; gap: var(--space-xs) }
.stat b {
  font-size: var(--step-4);
  font-weight: var(--weight-hair);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums lining-nums;
}
@media (max-width: 68rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 34rem) { .stats { grid-template-columns: minmax(0, 1fr) } }

/* --- 8 Kollektion --------------------------------------------------------- */
.collection { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) }
.collection a { display: grid; gap: var(--space-sm) }
.collection .ph { transition: transform var(--duration-slow) var(--ease) }
.collection a:hover .ph { transform: scale(1.015) }
@media (max-width: 68rem) { .collection { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 34rem) { .collection { grid-template-columns: minmax(0, 1fr) } }

/* --- 9 Produktkort -------------------------------------------------------- */
.product { display: grid; gap: var(--space-sm) }
.product__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md) }
.product__price { font-variant-numeric: tabular-nums lining-nums }
.product .ph { transition: transform var(--duration-slow) var(--ease) }
.product:hover .ph { transform: scale(1.015) }

/* --- 10 Priser ------------------------------------------------------------ */
.plan { display: flex; flex-direction: column; gap: var(--space-md) }
.plan--pick { box-shadow: inset 0 0 0 var(--border) var(--ink) }
.plan__flag {
  font-size: var(--step--1);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-fine);
  color: var(--ink-muted);
  min-height: 1.2em;
}
.plan__price {
  font-size: var(--step-4);
  font-weight: var(--weight-hair);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.plan__price small {
  font-size: var(--step--1);
  font-weight: var(--weight-body);
  letter-spacing: var(--tr-fine);
  color: var(--ink-muted);
}
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; flex: 1 }
.plan li {
  padding-block: var(--space-sm);
  border-top: var(--border) solid var(--line);
  font-size: var(--step--1);
  line-height: var(--lh-fine);
  letter-spacing: var(--tr-fine);
}
.plan li:first-child { border-top: 0 }

/* --- 11 Omdomen ----------------------------------------------------------- */
.quote { display: grid; gap: var(--space-lg); align-content: start }
.quote blockquote {
  margin: 0;
  font-size: var(--step-1);
  font-weight: var(--weight-body);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  max-width: 38ch;
  text-wrap: pretty;
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--step--1);
  line-height: var(--lh-fine);
  letter-spacing: var(--tr-fine);
}
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-tile); flex: none }

/* --- 12 Team -------------------------------------------------------------- */
.member { display: grid; gap: var(--space-sm) }
.member .ph { transition: transform var(--duration-slow) var(--ease) }
.member:hover .ph { transform: scale(1.015) }

/* --- 13 Vanliga fragor ---------------------------------------------------- */
.faq { border-top: var(--border) solid var(--line) }
.faq details { border-bottom: var(--border) solid var(--line) }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: var(--weight-body);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-lead);
  transition: color var(--duration-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none }
.faq summary i {
  font-style: normal;
  flex: none;
  color: var(--ink-muted);
  transition: transform var(--duration) var(--ease);
}
.faq details[open] summary i { transform: rotate(45deg) }
.faq p {
  margin: 0 0 var(--space-md);
  max-width: 62ch;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* --- 14 Artiklar ---------------------------------------------------------- */
.post { display: grid; gap: var(--space-sm) }
.post .ph { transition: transform var(--duration-slow) var(--ease) }
.post:hover .ph { transform: scale(1.015) }
.post__meta {
  font-size: var(--step--1);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-fine);
  color: var(--ink-muted);
}

/* --- 15 Nyhetsbrev -------------------------------------------------------- */
.signup { display: flex; gap: var(--space-sm); flex-wrap: wrap; max-width: 32rem }
.signup .field { flex: 1 1 14rem }

/* --- 16 Omrostning -------------------------------------------------------- */
.poll { display: grid; gap: var(--space-xs); max-width: 36rem }
.poll__opt {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease);
}
.poll__opt:hover { border-color: rgb(var(--raw-ink) / 0.25) }
.poll.is-answered .poll__opt { cursor: default }
.poll.is-answered .poll__opt.is-picked { border-color: var(--ink) }
.poll__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--step--1);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-fine);
}
.poll__pct { opacity: 0; font-variant-numeric: tabular-nums; transition: opacity var(--duration) var(--ease) }
.poll.is-answered .poll__pct { opacity: 1 }
.poll__bar { height: 3px; border-radius: 2px; background: var(--ink-subtle); overflow: hidden }
.poll__bar span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--ink);
  transition: transform var(--duration-slow) var(--ease);
}

/* --- 17 Kontakt -----------------------------------------------------------
   Osymmetrisk med flit. Ett formular och en kontaktlista ar inte lika
   mycket innehall, och tva lika spalter pa 1760 px ger balten som ar for
   breda att sikta pa. */
.contact-grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
}
.form { display: grid; gap: var(--space-md); max-width: 40rem }
.form__two { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)) }
.form .row { margin-top: var(--space-xs) }
.contact-list {
  display: grid;
  gap: var(--space-md);
  font-size: var(--step--1);
  line-height: var(--lh-fine);
  letter-spacing: var(--tr-fine);
}
.contact-list div { display: grid; gap: var(--space-xs) }
.contact-list span:first-child { color: var(--ink-muted) }
@media (max-width: 60rem) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 34rem) {
  .form__two { grid-template-columns: minmax(0, 1fr) }
}

/* --- 18 Uppmaning --------------------------------------------------------- */
.cta {
  position: relative;
  padding: var(--space-3xl) var(--space-2xl);
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--accent-ink);
  overflow: hidden;
}
.cta .lead { margin-top: var(--space-lg); color: rgb(var(--raw-white) / 0.7) }
.cta .row { margin-top: var(--space-xl) }
.cta__glow {
  position: absolute;
  bottom: -60%;
  left: -10%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--raw-glow) / 0.22), transparent 62%);
  pointer-events: none;
}
.cta .pill { background: var(--accent-ink); color: var(--accent) }
.cta .pill__tile { background: var(--accent); color: var(--accent-ink) }
.cta .pill::after { background: linear-gradient(90deg, transparent, rgb(var(--raw-ink) / 0.12), transparent) }

/* --- 19 Varukorg ---------------------------------------------------------- */
.cart { max-width: 36rem; display: grid }
.cart__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-md);
  border-top: var(--border) solid var(--line);
}
.cart__row:first-child { border-top: 0 }
.cart__sum {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: var(--border) solid var(--ink);
  font-weight: var(--weight-base);
  font-variant-numeric: tabular-nums;
}
.cart__note { margin: var(--space-md) 0 var(--space-lg) }

/* --- 20 Tomt lage --------------------------------------------------------- */
.empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-lg);
  border: var(--border) dashed var(--line);
  border-radius: var(--radius-lg);
}
.empty__mark { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--surface-tile) }
.empty .fine { max-width: 34ch }
.empty .pill { margin-top: var(--space-xs) }

/* --- 21 Bard -------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
}
.banner p {
  margin: 0;
  flex: 1 1 18rem;
  font-size: var(--step--1);
  line-height: var(--lh-fine);
  letter-spacing: var(--tr-fine);
}
.banner .announce__x { color: var(--ink) }

/* --- 22 Sidfot ------------------------------------------------------------ */
.site-foot { padding-block: var(--space-2xl) var(--space-xl); border-top: var(--border) solid var(--line) }
.foot-grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(4, minmax(0, 1fr)) }
.foot-col {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  font-size: var(--step--1);
  line-height: var(--lh-fine);
  letter-spacing: var(--tr-fine);
}
.foot-col strong { font-weight: var(--weight-ui) }
.foot-col a { color: var(--ink-muted); transition: color var(--duration-fast) var(--ease) }
.foot-col a:hover { color: var(--ink) }
.foot-base {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--border) solid var(--line);
  font-size: var(--step--1);
  line-height: var(--lh-fine);
  letter-spacing: var(--tr-fine);
  color: var(--ink-muted);
}
@media (max-width: 60rem) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 34rem) { .foot-grid { grid-template-columns: minmax(0, 1fr) } }

@media (max-width: 53.75rem) {
  .site-nav a:not(.pill) { display: none }
  .cta { padding: var(--space-2xl) var(--space-lg) }
}


/* REFINEMENT — established identity, complete section family. */
.site-head { background: var(--bg) }
.site-head__mark { display: inline-flex; align-items: flex-start; gap: .2rem; font-weight: var(--weight-base) }
.site-head__mark > span { font-size: .55em; line-height: 1; letter-spacing: 0 }
.site-nav a:not(.pill) { padding-block: .8rem }
.site-head.is-stuck { background: transparent }
.menu-toggle { display: none }
.announce { position: relative; padding-right: calc(var(--gutter) + 2rem); font-weight: var(--weight-base) }
.announce__x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 1.2rem; letter-spacing: 0 }
.announce > .announce__x { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%) }
.hero { padding-top: var(--space-3xl) }
.hero .display { max-width: 20ch }
.hero__glow { top: -48%; right: -12%; opacity: .65 }
.hero__meta { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--line); gap: var(--space-2xl) }
.hero__meta .fine { max-width: 20ch }
.library-index { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-xl); padding-block: var(--space-lg); border-block: 1px solid var(--line); margin-bottom: var(--space-2xl) }
.library-index__intro { display: grid; align-content: start; gap: var(--space-sm) }
.library-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-lg) }
.library-links a { display: flex; justify-content: space-between; gap: .5rem; align-items: center; min-height: 44px; font-size: var(--step--1); line-height: var(--lh-fine); letter-spacing: var(--tr-fine) }
.library-links a span { color: var(--ink-muted); transition: transform var(--duration) var(--ease) }
.library-links a:hover span { transform: translate(2px,-2px) }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-xl) }
.section-heading .body { max-width: 35ch }
.section-heading .heading:last-child { margin-bottom: calc(0px - var(--trim)) }
.section-band { background: var(--bg-alt) }
.logos { padding-block: var(--space-lg); gap: var(--space-lg); display: grid; grid-template-columns: repeat(6,minmax(0,1fr)) }
.logos span { text-align: center; font-weight: var(--weight-display) }
.logos span:nth-child(2) { letter-spacing: -.035em }
.logos span:nth-child(3) { font-style: italic }
.feature { padding-top: var(--space-xs) }
.product__row { flex-wrap: wrap; gap: var(--space-xs) }
.product__price { white-space: nowrap }
.plan--pick { box-shadow: none; border-color: var(--ink); background: var(--bg-alt) }
.plan__price { font-weight: var(--weight-display); font-size: var(--step-3); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); white-space: nowrap }
.plan__price small { line-height: var(--lh-fine) }
.stat b { font-weight: var(--weight-display) }
.stats { border-block: 1px solid var(--line); padding-block: var(--space-xl) }
.quote { margin: 0; padding-top: var(--space-lg); border-top: 1px solid var(--line) }
.quote blockquote::before { content: '“'; display: block; font-size: var(--step-4); line-height: 1; letter-spacing: var(--tr-display); margin-bottom: var(--space-md); color: var(--ink-muted) }
.avatar { display: grid; place-items: center; font-size: var(--step--1); line-height: 1; letter-spacing: var(--tr-fine) }
.quote:nth-child(1) .avatar::after { content: 'AL' }
.quote:nth-child(2) .avatar::after { content: 'MB' }
.quote:nth-child(3) .avatar::after { content: 'SW' }
.split--flip { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr) }
.split--flip > :first-child { order: 0 }
/* Visual specimens use actual typography and compositional fields. */
.ph { background: var(--bg-alt); padding: var(--space-lg); display: flex; flex-direction: column; justify-content: space-between; color: var(--ink) }
.ph::after { box-shadow: none; border: 1px solid var(--line) }
.art-label, .art-foot { font-size: clamp(.625rem,.58rem + .2vw,.8rem); line-height: 1.3; letter-spacing: .08em; font-weight: var(--weight-base) }
.art-title { font-size: var(--step-3); line-height: var(--lh-heading); letter-spacing: var(--tr-display); font-weight: var(--weight-display); overflow-wrap: anywhere }
.ph--wide .art-title { font-size: var(--step-5); line-height: var(--lh-display); letter-spacing: var(--tr-display) }
.ph[data-art="1"] { background: #dce4e4 }
.ph[data-art="2"] { background: #e6e1d7 }
.ph[data-art="3"] { background: #333d3b; color: #fff }
.ph[data-art="3"]::after { border-color: transparent }
.member .ph { background: #e9ebea; justify-content: center; align-items: center }
.member .art-label, .member .art-foot { display: none }
.member .art-title { font-size: var(--step-6); line-height: var(--lh-display); letter-spacing: var(--tr-wordmark); font-weight: var(--weight-hair); color: #666e6b }
.member:nth-child(even) .ph { background: #e5e0d8 }
.cart__row .ph { padding: .5rem; justify-content: center }
.cart__row .art-label, .cart__row .art-foot { display: none }
.cart__row .art-title { font-size: var(--step--1); line-height: var(--lh-title); letter-spacing: var(--tr-title) }
.collection a { overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0 }
.collection .title { display: flex; justify-content: space-between }
.collection .title::after { content: '↗'; color: var(--ink-muted) }
.collection a:focus-visible { outline-offset: 6px }
/* An editorial project presentation, ready for photography or brand assets. */
.case-stage { display: flex; flex-direction: column; justify-content: space-between; min-height: 38rem; padding: var(--space-xl); background: #e9e5dc; color: #3f4a3c; border-radius: var(--radius-lg); overflow: hidden }
.case-stage__top, .case-stage__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); font-size: var(--step--1); line-height: var(--lh-fine); letter-spacing: var(--tr-fine) }
.case-stage__top > :first-child { font-size: var(--step-2); line-height: var(--lh-title); letter-spacing: var(--tr-title) }
.case-stage__composition { display: flex; align-items: center; justify-content: center; gap: 6%; padding-block: var(--space-xl) }
.case-menu { background: #f8f6ef; width: 34%; padding: var(--space-lg); aspect-ratio: 3/4; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-7deg); transition: transform var(--duration-slow) var(--ease) }
.case-menu > span { font-size: .65rem; line-height: 1.4; letter-spacing: .14em }
.case-menu__title { font-size: var(--step-3); line-height: var(--lh-heading); letter-spacing: var(--tr-heading) }
.case-disc { width: 28%; aspect-ratio: 1; border-radius: 50%; background: #485442; color: #f1eee6; display: grid; place-items: center; font-size: var(--step-6); font-weight: var(--weight-hair); line-height: 1; letter-spacing: var(--tr-wordmark); transform: rotate(8deg); transition: transform var(--duration-slow) var(--ease) }
@media (hover:hover) { .case-stage:hover .case-menu { transform: rotate(-3deg) translateY(-4px) } .case-stage:hover .case-disc { transform: rotate(0) } }
.case-stage__arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: var(--radius); flex: none; font-size: var(--step-1); line-height: 1; letter-spacing: 0 }
.case-caption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); padding-block: var(--space-lg) }
.case-caption .fine { margin-top: var(--space-xs) }
.case-story { border-block: 1px solid var(--line) }
.case-story summary { padding-block: var(--space-md); display: flex; justify-content: space-between; cursor: pointer; list-style: none }
.case-story summary::-webkit-details-marker { display:none }
.case-story[open] summary > span { transform: rotate(45deg) }
.case-story .grid-3 { padding-block: var(--space-lg) }
.case-story .body { margin-top: var(--space-sm) }
/* Process: sequence has meaning; numbers belong to the content. */
.process-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-3xl); align-items: start }
.process-intro { position: sticky; top: 8rem }
.process-intro .link { margin-top: var(--space-lg) }
.process-list { list-style: none; margin: 0; padding: 0 }
.process-list li { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: var(--space-lg); padding-block: var(--space-xl); border-top: 1px solid var(--line) }
.process-list li:first-child { padding-top: 0; border-top: 0 }
.process-list li:last-child { padding-bottom: 0 }
.process-number { font-size: var(--step-1); line-height: var(--lh-title); letter-spacing: var(--tr-title); color: var(--ink-muted) }
.process-list .body { margin-top: var(--space-sm) }
.process-list .fine { display: block; margin-top: var(--space-md) }
/* Service panels progressively enhance to accessible tabs. */
.service-tabs { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--space-2xl) }
.service-tabs__nav { display: flex; flex-direction: column; align-self: start }
.service-tabs__nav button { display: flex; justify-content: space-between; gap: var(--space-md); text-align: left; padding: var(--space-lg) 0; background: none; border: 0; border-bottom: 1px solid var(--line); font-weight: var(--weight-body); font-size: var(--step-1); line-height: var(--lh-title); letter-spacing: var(--tr-title); cursor: pointer; color: var(--ink-muted) }
.service-tabs__nav button:first-child { border-top: 1px solid var(--line) }
.service-tabs__nav button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink) }
.service-tabs__nav button span { transition: transform var(--duration) var(--ease) }
.service-tabs__nav button[aria-selected="true"] span { transform: rotate(45deg) }
.service-panel { grid-column: 2; min-width: 0 }
.service-panel__copy { display: grid; gap: var(--space-sm); padding-top: var(--space-lg) }
.service-panel__copy .link { justify-self: start }
.type-specimen, .content-specimen, .quality-specimen { min-height: 24rem; padding: var(--space-xl); background: var(--bg-alt); border-radius: var(--radius-lg); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg) }
.specimen-small { font-size: var(--step--1); line-height: var(--lh-fine); letter-spacing: var(--tr-fine) }
.specimen-letter { font-size: var(--step-6); font-weight: var(--weight-hair); line-height: 1; letter-spacing: var(--tr-wordmark); text-align: center }
.specimen-alphabet { font-size: var(--step-1); line-height: var(--lh-title); letter-spacing: var(--tr-title); text-align: right }
.content-specimen { background: #e3e8e6 }
.content-specimen > div { display:grid; font-size: var(--step-3); line-height: var(--lh-title); letter-spacing: var(--tr-heading) }
.content-specimen > div > :nth-child(2) { opacity: .65 }
.content-specimen > div > :nth-child(3) { opacity: .5 }
.quality-specimen { background: #e7e3dc }
.quality-specimen > div { display: grid; gap: var(--space-md) }
.quality-specimen > div > span { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: var(--space-sm); font-size: var(--step-1); line-height: var(--lh-title); letter-spacing: var(--tr-title) }
.quality-specimen i { font-style:normal }
@keyframes panel-enter { from { opacity: .25; transform: translateY(8px); filter: blur(3px) } to { opacity: 1; transform: translateY(0); filter: blur(0px) } }
.service-tabs.is-enhanced .service-panel:not([hidden]) { animation: panel-enter var(--duration-slow) var(--ease) }
/* Comparison keeps its table semantics and its own horizontal scroll. */
.comparison-scroll { overflow-x: auto; border-block: 1px solid var(--line) }
.comparison { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--step--1); line-height: var(--lh-fine); letter-spacing: var(--tr-fine) }
.comparison caption { text-align: left; padding-block: var(--space-md); color: var(--ink-muted) }
.comparison th, .comparison td { padding: var(--space-lg) var(--space-md); border-bottom: 1px solid var(--line); font-weight: var(--weight-body) }
.comparison thead th { font-weight: var(--weight-base) }
.comparison th:first-child { padding-left: 0; width: 40% }
.comparison tr > :nth-child(3) { background: var(--bg-alt) }
.comparison tbody tr:last-child > * { border-bottom: 0 }
.comparison-note { margin-top: var(--space-md) }
.statement { max-width: var(--w-mid) }
.statement blockquote { max-width: 22ch; margin-inline: 0; margin-top: .7em; margin-bottom: .65em }
.statement__byline { display: flex; align-items: center; gap: var(--space-md) }
.statement__mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--step-1); line-height: 1; letter-spacing: var(--tr-title) }
.form-status { flex-basis: 100%; margin: 0; max-width: 58ch }
.form-status.is-success { color: var(--ink) }
.poll__top { line-height: var(--lh-fine) }
.poll__opt[aria-pressed="true"] .poll__top > :first-child::before { content: '✓ '; }
.demo-dialog { max-width: min(38rem,calc(100vw - 2.5rem)); max-height: calc(100dvh - 3rem); padding: var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); background: var(--bg) }
.demo-dialog::backdrop { background: rgb(0 0 0 / .35); backdrop-filter: blur(6px) }
.demo-dialog__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-lg) }
.demo-dialog__top button { width:44px; height:44px; background:none; border:0; cursor:pointer; font-size: var(--step-2); line-height:1; letter-spacing:0 }
.demo-dialog > .pill { margin-top:var(--space-lg) }
.cta :focus-visible { outline-color: var(--bg) }
.foot-col a { width: fit-content; min-height: 32px; display:flex; align-items:center }
@media (max-width: 68rem) {
  .library-index { grid-template-columns: 1fr }
  .logos { grid-template-columns: repeat(3,minmax(0,1fr)) }
  .process-layout { gap: var(--space-2xl) }
  .case-stage { min-height: 32rem }
}
@media (max-width: 60rem) {
  .section-heading { align-items: start; flex-direction: column }
  .split--flip { grid-template-columns: minmax(0,1fr) }
  .process-layout { grid-template-columns: 1fr }
  .process-intro { position: static }
  .service-tabs { grid-template-columns: 1fr; gap: var(--space-lg) }
  .service-tabs__nav { flex-direction: row; gap: var(--space-lg) }
  .service-tabs__nav button { flex:1; font-size:var(--step--1); line-height:var(--lh-title); letter-spacing:var(--tr-title); gap:.5rem }
  .service-tabs__nav button:first-child { border-top:0 }
  .service-panel { grid-column: 1 }
}
@media (max-width: 53.75rem) {
  .menu-toggle { display:inline-flex; align-items:center; gap:1rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); padding:.65rem 1rem; min-height:44px; cursor:pointer; font-size:var(--step--1); line-height:var(--lh-ui); letter-spacing:var(--tr-fine) }
  .menu-toggle span { transition:transform var(--duration) var(--ease) }
  .menu-toggle[aria-expanded="true"] span { transform:rotate(45deg) }
  .js .site-nav { display:none; position:absolute; top:100%; left:0; right:0; padding:var(--space-lg) var(--gutter); background:var(--bg); border-bottom:1px solid var(--line); align-items:stretch; gap:var(--space-sm) }
  .js .site-nav.is-open { display:flex; flex-direction:column }
  .js .site-nav a:not(.pill) { display:block; padding-block:.85rem }
  .js .site-nav .pill { align-self:start }
  html:not(.js) .menu-toggle { display:none }
  html:not(.js) .site-head__in { height:auto; padding-block:var(--space-md); flex-wrap:wrap }
  html:not(.js) .site-nav { flex-wrap:wrap; gap:var(--space-md) }
  html:not(.js) .site-nav a:not(.pill) { display:block }
  .announce { justify-content:flex-start; flex-wrap:wrap; gap:.2rem 1rem }
}
@media (max-width: 44rem) {
  .library-links { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hero__meta { gap:var(--space-lg); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) }
  .hero__meta b { font-size:var(--step-2); line-height:var(--lh-heading); letter-spacing:var(--tr-heading) }
  .hero .display { max-width:19ch }
  .logos { gap:var(--space-lg) var(--space-sm) }
  .logos span { font-size:var(--step--1); line-height:var(--lh-title); letter-spacing:var(--tr-title) }
  .case-stage { min-height:25rem; padding:var(--space-lg) }
  .case-stage__composition { padding-block:var(--space-xl); gap:9% }
  .case-menu { width:52%; padding:var(--space-md) }
  .case-menu > span { font-size:.5rem; line-height:1.4; letter-spacing:.08em }
  .case-menu__title { font-size:var(--step-2); line-height:var(--lh-heading); letter-spacing:var(--tr-heading) }
  .case-disc { width:31%; font-size:var(--step-5); line-height:1; letter-spacing:var(--tr-wordmark) }
  .case-stage__top { align-items:start }
  .case-stage__top > :last-child { max-width:10ch; text-align:right }
  .case-caption { flex-direction:column; gap:var(--space-xs) }
  .type-specimen, .content-specimen, .quality-specimen { min-height:20rem; padding:var(--space-lg) }
  .service-tabs__nav { gap:var(--space-md) }
  .service-tabs__nav button span { display:none }
  .comparison { min-width:36rem }
  .comparison-scroll:focus-visible { outline-offset:4px }
  .cart__row { grid-template-columns:3.5rem minmax(0,1fr) }
  .cart__row > .product__price { grid-column:2 }
  .cta .display { max-width:17ch }
}

@media (min-width: 60.001rem) { .grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)) } }
@media (min-width:44.001rem) and (max-width:60rem) { .grid-3 > .plan:last-child { grid-column: 1 / -1 } }

/* Final alignment and transitions. */
.plan .pill { justify-content: space-between }
.section.wrap + .section.wrap { padding-top: var(--space-lg) }
@keyframes menu-enter { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: translateY(0) } }
.js .site-nav.is-open { animation: menu-enter var(--duration) var(--ease) }