/* ==========================================================================
   mimo · web v2 — production stylesheet, ported from design/web-v2/source/web-v2.css
   (placeholder styles removed, stray brace fixed, fonts as Latin-subset woff2; site additions at the end)
   Tokens mirror the brandbook v1 + the printable system (/workspace/mimo/system)
   ========================================================================== */
@font-face { font-family: "Fraunces Mimo"; src: url(../fonts/fraunces-display-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fraunces Mimo Text"; src: url(../fonts/fraunces-text-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Mimo"; src: url(../fonts/inter-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Mimo"; src: url(../fonts/inter-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Mimo"; src: url(../fonts/inter-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Mimo"; src: url(../fonts/inter-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat Mimo"; src: url(../fonts/caveat-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* brand colour — Crema + Tinta carry ~80% of every screen */
  --crema: #FAF6F0;  --tinta: #26241F;
  --coral: #E8836F;  /* LIFE pillar · the ONE CTA / "listo" moment per screen */
  --lavanda: #A9A3D2; --salvia: #9CAF97; --ambar: #F0BE5C;
  --arena: #E5D9C5;  --terracota: #C25B4E; /* alerts only */
  /* derived (mixes of the above, no new hues) */
  --tinta-2: #5E5A52;      /* secondary text on Crema: 6.4:1 */
  --tinta-3: #736E66;      /* tertiary / meta (counts): 4.7:1 on Crema */
  --line: rgba(38,36,31,.14);
  --line-strong: rgba(38,36,31,.28);
  --arena-soft: #F1EADF;   /* Arena 45% on Crema: soft cards + alt sections */
  --crema-on-tinta: rgba(250,246,240,.74);
  --life-20: #F6DFD6; --health-28: #E6EAE0; --business-28: #ECEAF3;

  /* type */
  --f-display: "Fraunces Mimo", Georgia, serif;
  --f-head: "Fraunces Mimo Text", Georgia, serif;
  --f-body: "Inter Mimo", system-ui, sans-serif;
  --f-hand: "Caveat Mimo", cursive;

  /* spacing (4-pt base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;
  --section: 152px;   /* vertical padding of a section (desktop) */
  --gutter: 24px; --margin: 80px; --maxw: 1280px;

  /* radii */
  --r-chip: 6px; --r-btn: 10px; --r-card: 16px; --r-photo: 20px;

  /* elevation (warm, Tinta-based) */
  --sh-1: 0 1px 0 rgba(38,36,31,.05), 0 10px 28px -18px rgba(38,36,31,.30);
  --sh-2: 0 1px 0 rgba(38,36,31,.05), 0 24px 48px -24px rgba(38,36,31,.38);
  --sh-paper: 0 2px 3px rgba(38,36,31,.10), 0 18px 40px -20px rgba(38,36,31,.35);

  /* motion: ONE signature motion, two sizes (SPECS.md §4, Founder decision Oct 7):
     nav / small = v1 tile snap, 400 ms · large ("listo", #paper tick) = snap & fill with a pencil stroke, 600 ms */
  --snap-dur: 400ms;
  --pencil-dur: 600ms;
  --snap-ease: cubic-bezier(.6, 0, .2, 1.32);      /* "magnetic": slow pull, fast snap, small settle */
  --ui-ease: cubic-bezier(.2, .7, .2, 1); --ui-dur: 180ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--crema); color: var(--tinta); font-family: var(--f-body);
  font-size: 17px; line-height: 1.65; font-feature-settings: "ss01" 0; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------- type scale ---------------- */
.display { font-family: var(--f-display); font-weight: 600; font-size: 124px; line-height: .96; letter-spacing: -.035em; margin: 0; }
.h2 { font-family: var(--f-display); font-weight: 600; font-size: 60px; line-height: 1.04; letter-spacing: -.025em; margin: 0; }
.h3 { font-family: var(--f-head); font-weight: 600; font-size: 28px; line-height: 1.18; letter-spacing: -.012em; margin: 0; }
.h4 { font-family: var(--f-head); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -.005em; margin: 0; }
.lead { font-size: 21px; line-height: 1.6; color: var(--tinta-2); margin: 0; }
.body-s { font-size: 15px; line-height: 1.6; }
.eyebrow { font-size: 12.5px; line-height: 1.5; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); margin: 0; }
.hand { font-family: var(--f-hand); font-weight: 500; font-size: 30px; line-height: 1; color: var(--tinta); }

/* ---------------- buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px;
  border-radius: var(--r-btn); font: 600 16px/1 var(--f-body); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  transition: transform var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease), background var(--ui-dur); }
.btn-coral { background: var(--coral); color: var(--tinta); box-shadow: inset 0 -2px 0 rgba(38,36,31,.12); }
.btn-tinta { background: var(--tinta); color: var(--crema); }
.btn-ghost { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.btn-crema { background: var(--crema); color: var(--tinta); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14.5px; }
.btn .arrow { font-family: var(--f-body); transition: transform var(--ui-dur) var(--ui-ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------------- logo + nav ---------------- */
.site-header { position: relative; z-index: 5; }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.logo { display: block; width: 144px; }            /* logo v7-B wordmark (4.74:1): 144 px = 30 px tall */
.logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo-svg .snap-cut { fill: var(--logo-bg, var(--crema)); }   /* the fold shows the surface behind the logo */
.nav { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; font-size: 15.5px; font-weight: 500; }
.nav a { text-decoration: none; padding: 6px 0; background: linear-gradient(var(--tinta),var(--tinta)) left bottom / 0 1.5px no-repeat; transition: background-size var(--ui-dur) var(--ui-ease); }
.nav a:hover, .nav a[aria-current] { background-size: 100% 1.5px; }
.nav-cta { display: flex; align-items: center; gap: 20px; font-size: 15px; }
.menu-btn { display: none; }

/* ONE signature motion, two sizes (SPECS.md §4). Both play only with .play; at rest = the exact logo.
   A · .snap-v1 — nav logo and anything < 48 px. 400 ms (brandbook):
       0–320 ms tile spins in (-90° → 0°) from its cell's outer corner and snaps, magnetic · 0–80 ms fade · 300–400 ms the cut lands
   B · .snap-pencil — large only: "listo" after payment (96 px+) and the #paper tick. 600 ms:
       0–60 ms fade · 0–260 ms outline spins in and snaps · 200–500 ms pencil stroke fills the tile (dashoffset)
       460–560 ms solid fill lands · 500–600 ms the cut.   Reduced motion = final state, no animation.          */
.snap-v1.play .snap-tile { transform-box: fill-box; transform-origin: 50% 50%;
  animation: tile-snap var(--snap-dur) linear both, tile-fade var(--snap-dur) linear both; animation-delay: var(--snap-delay, 120ms); }
.snap-v1.play .snap-cut  { transform-box: fill-box; transform-origin: 100% 0%;
  animation: tile-cut var(--snap-dur) linear both; animation-delay: var(--snap-delay, 120ms); }
@keyframes tile-snap {
  0%   { transform: translate(55%, 55%) rotate(-90deg) scale(.55); animation-timing-function: cubic-bezier(.6, 0, .2, 1.32); }
  80%, 100% { transform: none; }
}
@keyframes tile-fade { 0% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes tile-cut  { 0%, 75% { transform: scale(0); animation-timing-function: cubic-bezier(.2, .8, .2, 1); } 100% { transform: scale(1); } }

.snap-pencil .snap-stroke { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.snap-pencil .snap-ink { opacity: 0; }                   /* logo at rest: solid fill only */
.snap-g .snap-ink { opacity: 1; }                        /* graphite tick at rest: filled box */
.snap-pencil.play .snap-tile { transform-box: fill-box; transform-origin: 50% 50%;
  animation: snap-in var(--pencil-dur) linear both, snap-fade var(--pencil-dur) linear both; animation-delay: var(--snap-delay, 120ms); }
.snap-pencil.play .snap-stroke { animation: snap-stroke var(--pencil-dur) linear both; animation-delay: var(--snap-delay, 120ms); }
.snap-pencil.play .snap-ink { animation: snap-ink var(--pencil-dur) linear both; animation-delay: var(--snap-delay, 120ms); }
.snap-pencil.play .snap-fill { animation: snap-fill var(--pencil-dur) linear both; animation-delay: var(--snap-delay, 120ms); }
.snap-pencil.play .snap-cut { transform-box: fill-box; transform-origin: 100% 0%; animation: snap-cut var(--pencil-dur) linear both; animation-delay: var(--snap-delay, 120ms); }
.snap-g.play .snap-ink { animation: none; opacity: 1; }
.snap-g.armed .snap-tile { opacity: 0; }
@keyframes snap-in {
  0%   { transform: translate(55%, 55%) rotate(-90deg) scale(.55); animation-timing-function: cubic-bezier(.6, 0, .2, 1.32); }
  43.33%, 100% { transform: none; }
}
@keyframes snap-fade { 0% { opacity: 0; } 10%, 100% { opacity: 1; } }
@keyframes snap-stroke { 0%, 33.33% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.45, .05, .55, .95); } 83.33%, 100% { stroke-dashoffset: 0; } }
@keyframes snap-ink  { 0%, 93.33% { opacity: 1; } 100% { opacity: 0; } }
@keyframes snap-fill { 0%, 76.67% { opacity: 0; } 93.33%, 100% { opacity: 1; } }
@keyframes snap-cut  { 0%, 83.33% { transform: scale(0); animation-timing-function: cubic-bezier(.2, .8, .2, 1); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .snap.play .snap-tile, .snap.play .snap-stroke, .snap.play .snap-ink, .snap.play .snap-fill, .snap.play .snap-cut { animation: none; }
  .snap-g.armed .snap-tile { opacity: 1; }
}

/* ---------------- HERO ---------------- */
.hero { padding: 40px 0 0; }
.hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; }
.hero-copy { grid-column: 1 / span 6; padding: 24px 0 56px; }
.hero-copy .eyebrow { margin-bottom: 28px; display: flex; align-items: center; gap: 12px; }
.hero-copy .eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--tinta); }
.hero-copy .display { margin-bottom: 36px; }
.hero-copy .lead { max-width: 30em; margin-bottom: 44px; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-facts { display: flex; gap: 28px; margin: 40px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--tinta-2); }
.hero-facts li { display: flex; align-items: center; gap: 9px; }
.tick { width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--tinta); position: relative; flex: none; }
.tick::after { content: ""; position: absolute; left: 4.6px; top: 2.2px; width: 4px; height: 7px; border: solid var(--tinta); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.hero-figure { grid-column: 7 / span 6; margin: 0; position: relative; }
.hero-figure .photo { border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 6 / 7; box-shadow: var(--sh-2); }
.hero-figure .photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure figcaption { position: absolute; right: calc(100% - 6px); bottom: -40px; display: flex; align-items: flex-end; gap: 6px; white-space: nowrap; }
.hero-figure figcaption .hand { order: 1; }
.hero-figure figcaption svg { order: 2; width: 54px; height: 36px; margin-bottom: 16px; }
.photo-cred { position: absolute; right: 18px; bottom: 16px; padding: 6px 10px; border-radius: 6px; background: rgba(250,246,240,.86);
  font-size: 12px; line-height: 1.2; color: var(--tinta); backdrop-filter: blur(4px); }

/* proof strip under the hero */
.strip { margin-top: 120px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip ul { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.strip li { padding: 26px 0 26px 28px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.strip li:first-child { border-left: 0; padding-left: 0; }
.strip strong { font: 600 19px/1.3 var(--f-head); }
.strip span { font-size: 14.5px; color: var(--tinta-2); }

/* ---------------- sections ---------------- */
.section { padding: var(--section) 0; }
.section-alt { background: var(--arena-soft); }
.section-dark { background: var(--tinta); color: var(--crema); }
.section-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; margin-bottom: 72px; }
.section-head .h2 { grid-column: 1 / span 6; }
.section-head .lead { grid-column: 8 / span 5; }
.section-head .eyebrow { grid-column: 1 / -1; margin-bottom: 20px; }

/* ---------------- product cards ---------------- */
.filters { display: flex; gap: 10px; margin: -28px 0 44px; }
.chip { height: 38px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-size: 14.5px; font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line-strong); background: transparent; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--crema); box-shadow: none; }
.chip .count { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .count { color: var(--crema-on-tinta); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px var(--gutter); list-style: none; margin: 0; padding: 0; }
.card { position: relative; display: flex; flex-direction: column; }
.card-media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--arena-soft);
  box-shadow: var(--sh-1); transition: transform 240ms var(--ui-ease), box-shadow 240ms var(--ui-ease); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ui-ease); }
.card:hover .card-media { transform: translateY(-4px); box-shadow: var(--sh-2); }
.card:hover .card-media img { transform: scale(1.03); }
.card-badges { position: absolute; left: 16px; top: 16px; display: flex; gap: 8px; }
.badge { height: 28px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: var(--r-chip); background: rgba(250,246,240,.92);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--tinta); }
.badge-dark { background: var(--tinta); color: var(--crema); }
.card-body { padding: 24px 2px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-pillar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-2); margin: 0; }
.card-pillar i { width: 9px; height: 9px; border-radius: 2.5px; box-shadow: inset 0 0 0 1.4px var(--tinta); }
.card h3 { margin: 0; }
.card h3 a { text-decoration: none; }
.card p.short { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tinta-2); max-width: 34em; }
.card-meta { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.card-meta .price { font: 600 18px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.card-meta .facts { font-size: 13.5px; color: var(--tinta-2); }
.card-meta .go { font-size: 14.5px; font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; }
.card-feature { grid-column: span 2; }
.card-feature .card-media { aspect-ratio: auto; height: 100%; min-height: 0; }
.card-feature-inner { display: grid; grid-template-columns: 1.45fr 1fr; gap: 40px; height: 100%; }
.card-feature .card-body { padding: 8px 0 0; justify-content: center; gap: 14px; }
.card-feature h3 { font-size: 40px; line-height: 1.08; font-family: var(--f-display); letter-spacing: -.02em; }
.card-feature .incl { list-style: none; margin: 4px 0 0; padding: 0; font-size: 15px; }
.card-feature .incl li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line-strong); color: var(--tinta-2); }
.card-feature .incl li b { font-weight: 500; color: var(--tinta); }
.card-feature .price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.price-big { font: 600 40px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.was { font-size: 14.5px; color: var(--tinta-2); }
.cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; background:
  linear-gradient(var(--arena-soft), var(--arena-soft)); }
.cover .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 92px; }
.cover .tiles i { aspect-ratio: 1; border-radius: 9px; box-shadow: inset 0 0 0 2px var(--tinta); }
.cover .title { font: 600 38px/1.04 var(--f-display); letter-spacing: -.02em; }
.cover .sub { font-size: 14px; color: var(--tinta-2); }
.card-next { border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line-strong); padding: 30px 28px; }
.card-next .nw-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.card-next ul { list-style: none; margin: 0; padding: 0; }
.card-next li { padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.card-next li:last-child { border-bottom: 0; padding-bottom: 0; }
.card-next li p { margin: 0; font-size: 15px; color: var(--tinta-2); }
.card-next li .card-pillar { font-size: 11.5px; }
.card-next .nw-meta { font-weight: 600; color: var(--tinta) !important; }
.next-wave { margin-top: 96px; display: grid; grid-template-columns: 200px 1fr 1fr; gap: var(--gutter); align-items: stretch; }
.next-wave .h4 { padding-top: 22px; }
.nw-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); }
.nw-item p { margin: 4px 0 0; font-size: 14.5px; color: var(--tinta-2); }
.nw-item .right { text-align: right; flex: none; }

/* ---------------- how it works ---------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { padding-top: 28px; border-top: 1.5px solid var(--tinta); }
.steps .n { font: 600 64px/1 var(--f-display); letter-spacing: -.03em; display: block; margin-bottom: 40px; font-variant-numeric: lining-nums; }
.steps .h4 { margin-bottom: 10px; }
.steps p { margin: 0; color: var(--tinta-2); font-size: 16px; }
.how-photo { margin-top: 88px; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; }
.how-photo .ph-img { grid-column: 1 / span 7; border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--sh-1); }
.how-photo .ph-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.how-photo blockquote { grid-column: 9 / span 4; margin: 0; }
.how-photo blockquote p { font: 600 34px/1.18 var(--f-display); letter-spacing: -.018em; margin: 0 0 22px; }

/* ---------------- bundle band (Tinta) ---------------- */
.bundle-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; }
.bundle-photo { grid-column: 1 / span 7; border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 3 / 2; }
.bundle-photo img { width: 100%; height: 100%; object-fit: cover; }
.bundle-copy { grid-column: 9 / span 4; }
.section-dark .eyebrow { color: var(--crema-on-tinta); }
.section-dark .lead { color: var(--crema-on-tinta); }
.bundle-copy .h2 { margin: 20px 0 18px; }
.bundle-list { list-style: none; margin: 32px 0; padding: 0; font-size: 15.5px; }
.bundle-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; padding: 12px 0; border-top: 1px solid rgba(250,246,240,.16); }
.bundle-list li:last-child { border-bottom: 1px solid rgba(250,246,240,.16); }
.bundle-list span { color: var(--crema-on-tinta); font-variant-numeric: tabular-nums; }
.bundle-list s { color: var(--crema-on-tinta); }
.section-dark .was { color: var(--crema-on-tinta); }
.cap { font-size: 13px; color: var(--crema-on-tinta); margin-top: 14px; }

/* ---------------- why mimo ---------------- */
.why-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; }
.why-photo { grid-column: 1 / span 5; border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--sh-1); }
.why-photo img { width: 100%; height: 100%; object-fit: cover; }
.why-copy { grid-column: 7 / span 6; }
.why-copy .h2 em { font-style: normal; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--arena); }
.why-copy p { font-size: 19px; line-height: 1.65; color: var(--tinta-2); margin: 28px 0 0; max-width: 34em; }
.why-copy p strong { color: var(--tinta); font-weight: 600; }
.system-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.sys { padding: 22px 20px; border-radius: var(--r-card); background: var(--arena-soft); }
.sys svg { width: 40px; height: 40px; display: block; margin-bottom: 16px; }
.sys b { display: block; font: 600 17px/1.3 var(--f-head); }
.sys p { margin: 6px 0 0 !important; font-size: 14.5px !important; line-height: 1.5 !important; color: var(--tinta-2); }

/* ---------------- faq ---------------- */
.faq-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); }
.faq-grid > .head { grid-column: 1 / span 4; }
.faq-grid > .head p { color: var(--tinta-2); margin: 20px 0 0; }
.faq-list { grid-column: 6 / span 7; }
.faq-list details { border-top: 1px solid var(--line-strong); }
.faq-list details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 26px 0; font: 600 21px/1.3 var(--f-head); cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font: 400 26px/1 var(--f-body); color: var(--tinta-2); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: -6px 0 28px; max-width: 38em; color: var(--tinta-2); }

/* ---------------- footer ---------------- */
.pre-footer { padding: 120px 0; text-align: center; border-top: 1px solid var(--line); }
.pre-footer .h2 { font-size: 72px; margin-bottom: 36px; }
.site-footer { background: var(--arena-soft); padding: 72px 0 40px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); }
.footer-brand { grid-column: 1 / span 4; }
.footer-brand .logo { width: 220px; margin-bottom: 18px; }   /* lockup v7-B with descriptor (3.43:1): 64 px tall, min 60 px */
.site-footer { --logo-bg: var(--arena-soft); }
.footer-col { grid-column: span 2; }
.footer-col h2 { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { text-decoration: none; }
.fine { grid-column: 1 / -1; margin: 64px 0 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 13px; color: var(--tinta-2); }

/* ======================= PRODUCT PAGE ======================= */
.crumbs { font-size: 14px; color: var(--tinta-2); padding: 8px 0 28px; display: flex; gap: 10px; }
.crumbs a { text-decoration: none; }
.crumbs span[aria-current] { color: var(--tinta); font-weight: 500; }
.pdp { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.gallery { grid-column: 1 / span 7; display: grid; grid-template-columns: 88px 1fr; gap: 16px; }
.thumbs { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.thumbs li { aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); position: relative; }
.thumbs li img { width: 100%; height: 100%; object-fit: cover; }
.thumbs li.on { box-shadow: 0 0 0 2px var(--crema), 0 0 0 3.5px var(--tinta); }
.thumbs li.flat { background: var(--arena-soft); display: grid; place-items: center; }
.thumbs li.flat img { width: 70%; height: auto; box-shadow: 0 1px 2px rgba(38,36,31,.2); }
.main-photo { border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 4 / 5; position: relative; box-shadow: var(--sh-1); }
.main-photo img { width: 100%; height: 100%; object-fit: cover; }
.gallery-cap { grid-column: 2; margin: 2px 0 0; font-size: 13.5px; color: var(--tinta-2); display: flex; justify-content: space-between; }
.buy { grid-column: 9 / span 4; position: sticky; top: 24px; padding-top: 8px; }
.pillar-tab { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 13px 0 11px; border-radius: var(--r-chip); background: var(--life-20);
  font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 24px; }
.pillar-tab i { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.buy h1 { font-family: var(--f-display); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -.03em; margin: 0 0 22px; }
.buy .lead { font-size: 19px; margin-bottom: 30px; }
.price-line { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 0; border-top: 1px solid var(--line-strong); }
.price-line .price-big { font-size: 48px; }
.price-line .per { font-size: 14px; color: var(--tinta-2); }
.buy .btn { width: 100%; height: 60px; font-size: 17px; }
.buy-note { font-size: 13.5px; color: var(--tinta-2); margin: 14px 0 0; text-align: center; }
.facts-list { list-style: none; margin: 30px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.facts-list li { display: flex; align-items: center; gap: 10px; padding: 14px 0; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.facts-list li:nth-child(odd) { padding-right: 12px; }
.desc { color: var(--tinta-2); font-size: 16px; margin: 0; }
.buy .hand { display: block; margin-top: 20px; font-size: 32px; transform: rotate(-2deg); transform-origin: left; }

.inside-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; }
.inside-page { grid-column: 1 / span 6; position: relative; padding: 56px; border-radius: var(--r-photo); background: var(--arena-soft); }
.inside-page .sheet { position: relative; box-shadow: var(--sh-paper); }
.inside-page .sheet img { width: 100%; }
.pin { position: absolute; width: 30px; height: 30px; border-radius: 8px; background: var(--tinta); color: var(--crema); display: grid; place-items: center;
  font: 600 14px/1 var(--f-body); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px rgba(250,246,240,.9); transform: translate(-50%, -50%); }
.inside-list { grid-column: 8 / span 5; list-style: none; margin: 0; padding: 0; }
.inside-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line-strong); }
.inside-list li:last-child { border-bottom: 1px solid var(--line-strong); }
.inside-list .pin-s { width: 30px; height: 30px; border-radius: 8px; background: var(--tinta); color: var(--crema); display: grid; place-items: center; font: 600 14px/1 var(--f-body); }
.inside-list b { font: 600 20px/1.3 var(--f-head); display: block; }
.inside-list p { margin: 4px 0 0; font-size: 15px; color: var(--tinta-2); }
.inside-src { margin-top: 28px; font-size: 14.5px; color: var(--tinta-2); }
.inside-src b { color: var(--tinta); font-weight: 600; }

.scenes-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--gutter); }
.scenes-row figure { margin: 0; }
.scenes-row .img { border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: var(--sh-1); }
.scenes-row img { width: 100%; height: 100%; object-fit: cover; }
.scenes-row figcaption { font-size: 14.5px; color: var(--tinta-2); margin-top: 14px; }

.crosssell { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; padding: 40px; border-radius: 24px; background: var(--arena-soft); }
.crosssell .img { grid-column: 1 / span 5; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3 / 2; }
.crosssell .img img { width: 100%; height: 100%; object-fit: cover; }
.crosssell .txt { grid-column: 7 / span 5; }
.crosssell .h2 { font-size: 48px; margin: 16px 0 14px; }
.crosssell p { color: var(--tinta-2); margin: 0 0 28px; font-size: 18px; }

.good { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); list-style: none; margin: 0; padding: 0; }
.good li { padding-top: 22px; border-top: 1.5px solid var(--tinta); font-size: 15.5px; color: var(--tinta-2); }
.good b { display: block; font: 600 20px/1.3 var(--f-head); color: var(--tinta); margin-bottom: 8px; }
.good a { color: var(--tinta); }

/* ---------------- #paper · pencil on paper (Arena-soft, no Coral, no Caveat) ---------------- */
.paper-photo { margin: 0; }
.paper-photo picture, .paper-photo img { display: block; width: 100%; }
.paper-photo img { aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-photo); box-shadow: var(--sh-1); }
.paper-photo figcaption { margin-top: 14px; font-size: 14px; color: var(--tinta-2); }
.paper-notes { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.paper-notes li { padding-top: 22px; border-top: 1.5px solid var(--tinta); display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; align-items: start; }
.paper-notes .paper-ill { grid-row: span 2; width: 52px; height: 52px; display: block; }
.paper-notes .paper-ill svg { width: 100%; height: 100%; display: block; overflow: visible; }
.paper-notes .h4 { margin: 2px 0 6px; }
.paper-notes p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
.tick-demo { display: block; width: 100%; height: 100%; }
.tick-demo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.paper-cta { margin: 48px 0 0; }

/* ---------------- product page · states + bundle ---------------- */
.btn-soon { background: var(--arena); color: var(--tinta-2); cursor: not-allowed; }
.was-line { margin: -6px 0 18px; font-size: 14px; color: var(--tinta-2); }
.was-line s { color: var(--tinta-2); }
.buy .note { margin: 14px 0 0; font-size: 13.5px; color: var(--tinta-2); }
.main-photo .card-badges { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.badge-line { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.bundle-items { list-style: none; margin: 0; padding: 0; counter-reset: bi; }
.bundle-items li { display: grid; grid-template-columns: 112px 1fr 220px; gap: 28px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line-strong); }
.bundle-items li:last-child { border-bottom: 1px solid var(--line-strong); }
.bi-thumb { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; box-shadow: var(--sh-1); background: var(--arena-soft); }
.bi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bi-main .h4 { margin: 4px 0 6px; }
.bi-main p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
.bi-main .card-pillar { margin: 0; }
.bi-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 15px; color: var(--tinta-2); }
.bi-meta .price { font-weight: 600; color: var(--tinta); font-size: 17px; }
.bi-meta s { font-size: 20px; }
.bundle-items .bi-total { padding: 18px 0; }
.bundle-items .bi-total b { font: 600 20px/1.3 var(--f-head); }
.bundle-items .bi-total-b { border-top: 1.5px solid var(--tinta); }
.bundle-items .bi-total-b .price-big { font-size: 40px; color: var(--tinta); }
.cover-s { padding: 10px; gap: 8px; }
.cover-s .tiles { width: 34px; gap: 4px; }
.cover-s .tiles i { border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.cover-s .title { font-size: 13px !important; line-height: 1.15; }
.cover-s .sub { display: none; }
/* =========================== RESPONSIVE =========================== */
@media (max-width: 1199px) {
  :root { --margin: 48px; --section: 120px; }
  .display { font-size: 96px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card-feature { grid-column: span 2; }
}
@media (max-width: 767px) {
  :root { --margin: 20px; --gutter: 16px; --section: 88px; }
  body { font-size: 16px; }
  .display { font-size: 58px; line-height: .98; letter-spacing: -.03em; }
  .h2 { font-size: 38px; line-height: 1.08; }
  .h3 { font-size: 24px; }
  .lead { font-size: 18px; }
  .nav-row { height: 68px; }
  .logo { width: 120px; }   /* 25 px tall: above the 24 px wordmark minimum */
  .nav, .nav-cta .link { display: none; }
  .menu-btn { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-strong); }
  .menu-btn i { display: block; width: 18px; height: 1.5px; background: var(--tinta); box-shadow: 0 -5px 0 var(--tinta), 0 5px 0 var(--tinta); }
  .nav-cta .btn { display: none; }
  .hero { padding-top: 12px; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; }
  .hero-copy { padding: 16px 0 36px; }
  .hero-copy .eyebrow { margin-bottom: 20px; }
  .hero-copy .display { margin-bottom: 22px; }
  .hero-copy .lead { margin-bottom: 30px; }
  .ctas { flex-direction: column; }
  .ctas .btn { width: 100%; }
  .hero-facts { flex-direction: column; gap: 10px; margin-top: 28px; }
  .hero-figure .photo { aspect-ratio: 5 / 6; }
  .hero-figure .photo-cred { top: 16px; bottom: auto; }   /* mobile: top-right over the blurred sofa, same 18/16 px inset as desktop */
  .hero-figure figcaption { right: auto; left: 2px; bottom: -50px; align-items: flex-end; }
  .hero-figure figcaption .hand { order: 2; }
  .hero-figure figcaption svg { order: 1; margin: 0 0 8px; }
  .hero-figure figcaption .hand { font-size: 26px; }
  .hero-figure figcaption svg { width: 44px; height: 30px; margin-bottom: 8px; }
  .card-next { padding: 24px 20px; }
  .strip { margin-top: 84px; }
  .strip ul { grid-template-columns: 1fr 1fr; }
  .strip li { padding: 18px 0 18px 16px; }
  .strip li:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .strip li:nth-child(4) { border-top: 1px solid var(--line); }
  .strip strong { font-size: 16.5px; }
  .strip span { font-size: 13.5px; }
  .section-head { display: block; margin-bottom: 40px; }
  .section-head .lead { margin-top: 16px; }
  .filters { margin: -12px 0 28px; overflow: hidden; flex-wrap: nowrap; }
  .chip { flex: none; }
  .grid { grid-template-columns: 1fr; gap: 48px; }
  .card-feature { grid-column: auto; }
  .card-feature-inner { grid-template-columns: 1fr; gap: 0; }
  .card-feature .card-media { aspect-ratio: 5 / 4; height: auto; }
  .card-feature .card-body { padding-top: 24px; }
  .card-feature h3 { font-size: 32px; }
  .cover .title { font-size: 34px; }
.next-wave { grid-template-columns: 1fr; margin-top: 64px; gap: 12px; }
  .next-wave .h4 { padding: 0 0 6px; }
  .nw-item { flex-wrap: wrap; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { display: grid; grid-template-columns: 64px 1fr; padding: 22px 0 26px; }
  .steps .n { font-size: 34px; margin: 0; grid-row: span 2; }
  .how-photo { display: block; margin-top: 48px; }
  .how-photo blockquote { margin-top: 28px; }
  .how-photo blockquote p { font-size: 26px; }
  .bundle-grid, .why-grid, .faq-grid, .inside-grid { display: block; }
  .bundle-photo { aspect-ratio: 3 / 2; margin-bottom: 36px; }
  .why-photo { aspect-ratio: 1 / 1; margin-bottom: 40px; }
  .why-copy p { font-size: 17px; }
  .system-row { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
  .sys { display: flex; align-items: center; gap: 16px; padding: 16px; }
  .sys svg { margin: 0; width: 34px; height: 34px; flex: none; }
  .faq-list { margin-top: 32px; }
  .faq-list summary { font-size: 18px; padding: 20px 0; }
  .pre-footer { padding: 80px 0; }
  .pre-footer .h2 { font-size: 46px; }
  .footer-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col { grid-column: span 1; }
  .fine { flex-direction: column; gap: 6px; margin-top: 16px; }
  /* product */
  .crumbs { padding: 4px 0 18px; }
  .card-media.is-cover { aspect-ratio: 16 / 10; }
  .cover { padding: 20px; }
  .cover .tiles { width: 64px; gap: 7px; }
  .cover .tiles i { border-radius: 6px; }
  .gallery { display: flex; flex-direction: column; }
  .main-photo { order: 1; }
  .gallery .thumbs { order: 2; }
  .gallery-cap { order: 3; }
  .gallery-cap span:last-child { display: none; }
  .pdp { display: block; }
  .thumbs { flex-direction: row; margin-top: 12px; }
  .thumbs li { width: calc((100% - 36px) / 4); }
  .gallery-cap { margin-top: 10px; }
  .buy { position: static; margin-top: 36px; }
  .buy h1 { font-size: 46px; }
  .buy .lead { font-size: 17px; }
  .price-line .price-big { font-size: 40px; }
  .facts-list li { font-size: 13.5px; }
  .inside-page { padding: 24px; margin-bottom: 32px; }
  .pin { width: 22px; height: 22px; font-size: 11.5px; border-radius: 6px; box-shadow: 0 0 0 3px rgba(250,246,240,.9); }
  .inside-page { padding: 24px 28px; }
  .scenes-row { grid-template-columns: 1fr; gap: 28px; }
  .crosssell { display: block; padding: 20px; }
  .crosssell .img { margin-bottom: 24px; }
  .crosssell .h2 { font-size: 34px; }
  .good { grid-template-columns: 1fr; gap: 24px; }
  .paper-photo img { aspect-ratio: 4 / 5; }
  .paper-notes { grid-template-columns: 1fr; gap: 26px; margin-top: 36px; }
  .paper-notes li { grid-template-columns: 44px 1fr; column-gap: 16px; padding-top: 18px; }
  .paper-notes .paper-ill { width: 48px; height: 48px; }
  .paper-cta { margin-top: 32px; } .paper-cta .btn { width: 100%; }
  .bundle-items li { grid-template-columns: 72px 1fr; gap: 16px; }
  .bundle-items .bi-meta { grid-column: 2; flex-direction: row; align-items: baseline; gap: 12px; }
  .bundle-items .bi-total { grid-template-columns: 1fr auto; }
  .bundle-items .bi-total > span:first-child { display: none; }
  .bundle-items .bi-total .bi-meta { grid-column: auto; }
  .bundle-items .bi-total-b .price-big { font-size: 32px; }
}

/* ---------------- v2 fixes ---------------- */
.card-media:has(.badge) .cover { padding-top: 64px; }
.how-photo blockquote p.eyebrow { font: 600 12px/1.5 var(--f-body); letter-spacing: .14em; }
#paper .section-head .h2 { grid-column: 1 / span 7; }
.pillar-tab { height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; line-height: 1.4; }
.scenes-row.wide { grid-template-columns: 1fr 1fr; }
.scenes-row.wide .img { aspect-ratio: 3 / 2; }
.scenes-row.mixed { grid-template-columns: 1.875fr 1fr; }          /* 3:2 + 4:5 at equal height, nothing cropped */
.scenes-row.mixed figure:first-child .img { aspect-ratio: 3 / 2; }
.scenes-row.mixed figure:last-child .img { aspect-ratio: 4 / 5; }
@media (max-width: 767px) { .scenes-row.mixed, .scenes-row.wide { grid-template-columns: 1fr; } }
#paper .h2 { text-wrap: balance; }

/* Next wave: coffee-table thumbs once the PDF exists (release stays in products.json) */
.card-next li.has-thumb { grid-template-columns: 84px 1fr; column-gap: 18px; align-items: start; }
.card-next .nw-txt { display: grid; gap: 6px; }
.nw-thumb { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; box-shadow: var(--sh-1); background: var(--arena-soft); }
.nw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) { .card-next li.has-thumb { grid-template-columns: 72px 1fr; column-gap: 14px; } }

/* ==========================================================================
   SITE ADDITIONS (production): CSP-safe replacements for the mock's inline styles,
   interactive states (menu sheet, filters, gallery, buy bar), download / legal / 404 pages.
   ========================================================================== */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--r-btn); background: var(--tinta); color: var(--crema); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; border-radius: var(--r-btn); }
.section-dark :focus-visible { outline-color: var(--crema); }
.logo { text-decoration: none; }
.logo-svg { display: block; }
.logo-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.h1 { font-family: var(--f-display); font-weight: 600; font-size: 64px; line-height: 1.02; letter-spacing: -.03em; margin: 0; }
.btn-soon { box-shadow: none; }
.badge-arena { background: var(--arena); }
.feature-cta { margin: 10px 0 0; }
.card-feature .short { font-size: 17px; }
.card h3 a:hover, .bi-main a:hover, .nw-txt a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.card-next h4 a, .bi-main h3 a { text-decoration: none; }
.card-next .card-pillar .card-lang { letter-spacing: .04em; text-transform: none; font-weight: 500; }
.card-lang { color: var(--tinta-2); }

/* nav: mid widths + mobile sheet (SPECS: "links move to a sheet") */
.menu-btn { border: 0; background: transparent; padding: 0; cursor: pointer; }
@media (max-width: 1199px) { .nav { gap: 26px; } }
@media (max-width: 1023px) { .nav-cta .btn { display: none; } }
@media (max-width: 767px) {
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--crema); border-bottom: 1px solid var(--line); box-shadow: var(--sh-1); }
  .nav-open .main-nav { display: block; }
  .nav-open .nav { display: grid; gap: 0; padding: 4px var(--margin) 16px; font-size: 17px; }
  .nav-open .nav li { border-top: 1px solid var(--line); }
  .nav-open .nav a { display: block; padding: 14px 0; background: none; }
  .nav-open .nav a[aria-current] { font-weight: 600; }
  .menu-btn[aria-expanded="true"] i { background: transparent; box-shadow: none; position: relative; }
  .menu-btn[aria-expanded="true"] i::before, .menu-btn[aria-expanded="true"] i::after { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 1.5px; background: var(--tinta); transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] i::after { transform: rotate(-45deg); }
}
.chip { border: 0; cursor: pointer; color: var(--tinta); }
.card.is-hidden { display: none; }

/* product page: pillar tint (only on its own page), Spanish label, gallery thumbs as buttons */
.tab-life { background: var(--life-20); }
.tab-health { background: var(--health-28); }
.tab-business { background: var(--business-28); }
.lang-row { margin: -10px 0 22px; }
.lang-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: var(--r-chip); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.thumbs li { aspect-ratio: auto; overflow: visible; box-shadow: none; }
.thumb { display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--arena-soft); box-shadow: inset 0 0 0 1px var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.on { box-shadow: 0 0 0 2px var(--crema), 0 0 0 3.5px var(--tinta); }
.thumb.flat { display: grid; place-items: center; }
.thumb.flat img { width: 70%; height: auto; box-shadow: 0 1px 2px rgba(38,36,31,.2); }
.main-photo.is-flat { background: var(--arena-soft); display: grid; place-items: center; }
.main-photo.is-flat img { width: 74%; height: auto; box-shadow: var(--sh-paper); }
.main-photo.is-cover { background: var(--arena-soft); }
.gallery-cap .gal-n { margin-left: 6px; font-variant-numeric: tabular-nums; }
.buy .btn-soon { cursor: not-allowed; }
.facts-list li span[lang] { display: contents; }
.section-inside { padding-top: var(--s11); }
.section-cross { padding-bottom: var(--s9); }

/* what's inside: single page with margin pins (SPECS §3) or the sheets of a multi-page mimo */
.inside-list-wrap { grid-column: 8 / span 5; }
.inside-list-wrap .inside-list { grid-column: auto; }
.inside-grid.no-sheet .inside-list-wrap { grid-column: 1 / span 8; }
.pin-1 { left: -4.5%; top: 36%; } .pin-2 { left: -4.5%; top: 65%; } .pin-3 { left: -4.5%; top: 80%; } .pin-4 { left: 104.5%; top: 80%; }
.inside-multi { align-items: start; }
.inside-multi .inside-page { padding: 40px; }
.sheets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.sheets.n1 { grid-template-columns: 1fr; }
.sheets.n5, .sheets.n6, .sheets.n7 { grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
.sheet-s { position: relative; box-shadow: var(--sh-paper); background: #fff; }
.sheet-s img { width: 100%; height: auto; }
.sheet-s .pin { left: 0; top: 0; width: 34px; height: 26px; border-radius: 7px; font-size: 12.5px; }
.inside-list .pin-s.num { width: auto; min-width: 30px; padding: 0 7px; font-size: 13px; }
.inside-list li { grid-template-columns: 64px 1fr; }
.pl-gloss { font: 400 15px/1.4 var(--f-body); color: var(--tinta-2); }
.inside-list b + .pl-gloss { display: block; margin-top: 2px; }
.pl-section { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.pl-section .pl-gloss { font-size: 12px; letter-spacing: 0; text-transform: none; }
.inside-get { margin: 22px 0 0; font-size: 14.5px; color: var(--tinta-2); }
.inside-src + .inside-get { margin-top: 8px; }

/* where it lives: two scenes at equal height, nothing cropped (column widths = aspect ratios) */
.scenes-row.hs { grid-template-columns: 1.5fr 1fr; }
.scenes-row.hs figure:first-child .img { aspect-ratio: 3 / 2; } .scenes-row.hs figure:last-child .img { aspect-ratio: 1 / 1; }
.scenes-row.ps { grid-template-columns: .8fr 1fr; }
.scenes-row.ps figure:first-child .img { aspect-ratio: 4 / 5; } .scenes-row.ps figure:last-child .img { aspect-ratio: 1 / 1; }
@media (max-width: 767px) { .scenes-row.hs, .scenes-row.ps { grid-template-columns: 1fr; } }

/* sticky buy bar (mobile, only rendered when the mimo is live) */
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--crema); border-top: 1px solid var(--line); box-shadow: 0 -10px 28px -18px rgba(38,36,31,.3); padding: 10px 0; }
.buy-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 768px) { .buy-bar { display: none !important; } }

/* signature motion · large "listo" (download page) */
.listo { width: 104px; margin: 0 0 28px; }
.listo .logo-svg svg { width: 100%; height: auto; }

/* download page */
.wrap.narrow { max-width: calc(760px + 2 * var(--margin)); }
.dl-page main { padding: 40px 0 120px; }
.thanks .eyebrow { margin-bottom: 14px; }
.thanks .h1 { margin-bottom: 18px; }
.thanks .lead { max-width: 34em; }
.thanks .hand { display: block; margin-top: 18px; transform: rotate(-2deg); transform-origin: left; }
.dl-box { margin-top: 48px; padding: 36px; border-radius: 24px; background: var(--arena-soft); }
.dl-group + .dl-group, .dl-or + .dl-group { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.dl-group .h4 { margin: 4px 0 14px; }
.dl-sub { margin: -8px 0 14px; font-size: 14.5px; color: var(--tinta-2); }
.dl-or { margin: 28px 0 0; font-size: 14.5px; font-weight: 600; color: var(--tinta-2); }
.dl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.dl-list li { display: flex; flex-direction: column; gap: 6px; }
.dl-missing { font-size: 13.5px; color: var(--tinta-2); }
.dl-tips, .share { margin-top: 56px; }
.dl-tips .h4, .share .h4 { margin-bottom: 14px; }
.dl-tips ul { margin: 0; padding-left: 1.2em; color: var(--tinta-2); }
.dl-tips li + li { margin-top: 6px; }
.dl-tips strong { color: var(--tinta); }
.share p { color: var(--tinta-2); margin: 0 0 16px; }
.help { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; color: var(--tinta-2); }
.help a, .dl-tips a, .share a:not(.btn) { color: var(--tinta); }

/* legal + 404 */
.legal, .notfound { padding: 40px var(--margin) 128px; }
.legal .eyebrow, .notfound .eyebrow { margin-bottom: 14px; }
.legal .h1 { margin-bottom: 28px; }
.legal .lead { margin-bottom: 12px; }
.legal h2 { font: 600 24px/1.25 var(--f-head); margin: 44px 0 10px; }
.legal p, .legal li { color: var(--tinta-2); max-width: 40em; }
.legal ul { padding-left: 1.2em; }
.legal a, .notfound a:not(.btn) { color: var(--tinta); }
.notfound .lead { margin: 18px 0 32px; }

@media (max-width: 767px) {
  .h1 { font-size: 44px; }
  .listo { width: 96px; }
  .dl-box { padding: 22px; }
  .dl-list .btn { width: 100%; }
  .dl-list, .dl-list li { width: 100%; }
  .inside-multi .inside-page { padding: 20px; }
  .sheets, .sheets.n5, .sheets.n6, .sheets.n7 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sheet-s .pin { width: 28px; height: 22px; font-size: 11px; }
  .inside-list li { grid-template-columns: 56px 1fr; }
  .lang-row { margin-top: -8px; }
  .has-buy-bar .site-footer { padding-bottom: 110px; }
  .inside-grid.no-sheet .inside-list-wrap { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arrow, .card-media, .card-media img, .nav a { transition: none; }
  .card:hover .card-media, .card:hover .card-media img { transform: none; }
}

/* fixes after the first screenshot pass */
img { height: auto; }                                   /* width/height attributes are for layout only */
.display { font-size: min(124px, 8vw); text-wrap: balance; }
@media (max-width: 1199px) { .display { font-size: min(96px, 8vw); } }
@media (max-width: 767px) { .display { font-size: 58px; } }
.bundle-copy .price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 26px; }
.section-good { padding-top: var(--s8); }
.section-good .h3 { margin-bottom: 32px; }
.pillar-tab i { flex: none; }
.why-copy p.eyebrow { font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); margin: 0 0 20px; max-width: none; }
@media (max-width: 767px) { .filters { overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--margin)); margin-right: calc(-1 * var(--margin)); padding: 2px var(--margin); } .filters::-webkit-scrollbar { display: none; } }
.lang-chip { display: inline-block; height: auto; line-height: 28px; }
.crosssell p.eyebrow { font-size: 12.5px; margin: 0; }
.section:not(.section-alt):not(.section-dark) + .section-cross { padding-top: 0; }

/* ---------------- #kit · The Kit (home, Amazon Associate picks) · ported from design/web-v2/source/web-v2.css
   After #paper (Arena-soft), before #faq, plain Crema. Photo LEFT (4:5, sticky >= 980 px) · lead + list RIGHT.
   Caveat: "beautifully" in the H2 (with the hero's "everything in its place": 2 accents, Founder Oct 8). No Coral.
   Only rendered when products.json site.show_kit is true. ---------------- */
#kit .section-head { margin-bottom: 48px; }
#kit .section-head .h2 { grid-column: 1 / span 10; }
#kit .h2 .hand {
  font-family: var(--f-hand); font-weight: 500; font-style: normal;
  font-size: 0.92em; letter-spacing: 0; line-height: 1; color: inherit;
  display: inline-block; transform: rotate(-2deg); transform-origin: center;
  margin: 0 0.06em;
}
.kit-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px 48px; align-items: start; }
.kit-grid.no-photo { grid-template-columns: 1fr; }
.kit-photo { margin: 0; position: sticky; top: 28px; align-self: start; }
.kit-photo picture { display: block; }
.kit-photo img { width: 100%; height: auto; display: block; border-radius: var(--r-photo); box-shadow: var(--sh-1); aspect-ratio: 4 / 5; object-fit: cover; }
.kit-side { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.kit-lead { margin: 0 0 28px; max-width: none; }
.kit-list { list-style: none; margin: 0; padding: 0; }
.kit-row { display: grid; grid-template-columns: 104px 1fr; gap: 16px 20px; padding: 22px 0; border-top: 1px solid var(--line); align-items: start; }
.kit-row.no-thumb { grid-template-columns: 1fr; }
.kit-row:first-child { border-top: 0; padding-top: 0; }
.kit-thumb { display: block; width: 104px; height: 104px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--crema); flex: none; }
.kit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-row-body { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.kit-row-body h3 { margin: 0; }
.kit-row-body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.kit-link { font: 600 15px/1.4 var(--f-body); color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.2px; }
.kit-link:hover { text-decoration-thickness: 2px; }
.kit-link .arrow { text-decoration: none; display: inline-block; transition: transform var(--ui-dur) var(--ui-ease); }
.kit-link:hover .arrow { transform: translateX(3px); }
.kit-disclosure { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); max-width: 36em; }
@media (max-width: 979px) {
  .kit-grid { grid-template-columns: 1fr; gap: 36px; }
  .kit-photo { position: static; }
}
@media (max-width: 767px) {
  #kit .section-head { margin-bottom: 32px; }
  .kit-row { grid-template-columns: 72px 1fr; gap: 14px; padding: 18px 0; }
  .kit-thumb { width: 72px; height: 72px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .kit-link .arrow { transition: none; } }