/* rede.life, in Familio's design (familio-ios/Design/brand.html): warm paper, ink, the system's rounded face,
   soft corners, the family colours as stickers. No web fonts, no third-party requests. */
:root {
  --paper: #fbf9f6; --paper-2: #f3efe9; --card: #ffffff; --ink: #2e2c2a; --ink-2: #6f6a64; --line: #e8e2da;
  --accent: #c8236c; --accent-on-ink: #ff70b3; --coral: #f2603f; --amber: #e0950c; --green: #22a95a; --indigo: #6159e8; --pink: #f0579a; --blue: #2f8dff;
  /* Cards: a hairline and a short, soft lift (Peter, 2026-10-26: the old 44-px shadow at 30 % was too much). */
  --shadow: 0 0 0 1px rgba(46,44,42,.04), 0 1px 2px rgba(46,44,42,.04), 0 10px 24px -16px rgba(46,44,42,.16);
  /* The same, as filters, for a card with cut-outs (the price ticket): a box-shadow's hairline would cross them. */
  --shadow-drop: drop-shadow(0 0 .5px rgba(46,44,42,.1)) drop-shadow(0 1px 1px rgba(46,44,42,.04)) drop-shadow(0 6px 5px rgba(46,44,42,.06));
  --round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.19, 1, .22, 1); --term: #26221e;
  /* The price ticket: blush (the launch screen's) by day, berry by night; grey text darker on it for contrast. */
  --blush: #ffe1ee; --blush-ink-2: #5e5650; --stub: #ffffff; --perf: rgba(200,35,108,.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1d1a17; --paper-2: #2b2723; --card: #2a2622; --ink: #f6f1ea; --ink-2: #b3aa9f; --line: #3a3530;
    --accent: #ff70b3; --accent-on-ink: #c8236c; --term: #12100e; --shadow: 0 0 0 1px rgba(255,255,255,.05), 0 10px 24px -16px rgba(0,0,0,.55); color-scheme: dark;
    --shadow-drop: drop-shadow(0 0 .5px rgba(255,255,255,.08)) drop-shadow(0 6px 5px rgba(0,0,0,.3));
    --blush: #3a1e2c; --blush-ink-2: #d6c3cc; --stub: #2a2622; --perf: rgba(246,241,234,.25); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--round); font-weight: 500; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) max(18px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(18px, env(safe-area-inset-left)); }
main { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 96px; padding-bottom: 40px; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.04; }
h3 { font-size: 21px; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; }
a:focus-visible, summary:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- header ---------- */
.top { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 18px 0; }
.brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 20px; text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0; }
/* The mark is a sticker, like the ones on the page: white edge, soft shadow. */
.brand img { filter: drop-shadow(0 4px 6px rgba(46,44,42,.18)); }
.pill { font-weight: 800; font-size: 14px; padding: 9px 15px; border-radius: 999px; }
.soon { background: var(--ink); color: var(--paper); white-space: nowrap; }

/* The menus: a label that links on, and a card that opens under it on hover or keyboard focus. */
.top { position: relative; z-index: 20; }
.menus { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu { position: relative; }
.menu-top { display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px; border-radius: 999px; text-decoration: none;
  font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: background .15s, color .15s; }
.menu-top .caret { opacity: .6; transition: transform .25s var(--ease); }
.menu:hover > .menu-top, .menu:focus-within > .menu-top, .menu-top.plain:hover { color: var(--ink); background: var(--paper-2); }
.menu:hover > .menu-top .caret, .menu:focus-within > .menu-top .caret { transform: rotate(180deg); }
/* The panel hangs from an invisible bridge (padding-top), so the pointer can travel down to it without closing it. */
.menu-panel { position: absolute; top: 100%; left: 50%; padding-top: 10px; translate: -55% 6px; opacity: 0; visibility: hidden;
  transition: opacity .18s ease, translate .25s var(--ease), visibility 0s .18s; }
.menu:hover > .menu-panel, .menu:focus-within > .menu-panel { opacity: 1; visibility: visible; translate: -55% 0; transition-delay: 0s; }
.menu-panel > * { background: var(--card); border-radius: 26px; box-shadow: 0 0 0 1px var(--line), 0 16px 34px -20px rgba(46,44,42,.24); }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 10px; width: 580px; }
.menu-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 18px; text-decoration: none; color: var(--ink); }
.menu-item:hover, .menu-item:focus-visible { background: var(--paper-2); }
.menu-item .mini { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 6px rgba(46,44,42,.16)); }
.menu-item span { display: grid; gap: 2px; }
.menu-item b { font-weight: 800; font-size: 15px; line-height: 1.25; }
.menu-item small { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); font-weight: 600; }
.menu-toggle { display: none; border: 0; background: var(--paper-2); color: var(--ink); width: 40px; height: 40px; border-radius: 50%;
  place-items: center; cursor: pointer; flex: none; }
.menu-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Phones: the button opens the menu and the price as one list under the header. Above 720 px the header fits in every
   language and the menu's card, under its label (a little to the left, since the label sits near the right edge), stays on the page. */
@media (max-width: 720px) {
  .top { flex-wrap: wrap; }
  .top .soon { margin-left: auto; }
  .menu-toggle { display: grid; }
  .menus { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 6px; margin: 4px 0 8px;
    background: var(--card); border-radius: 26px; box-shadow: var(--shadow), 0 0 0 1px var(--line); padding: 10px; }
  .top.open .menus { display: flex; }
  .menu-top { justify-content: space-between; font-size: 18px; color: var(--ink); padding: 12px; }
  .menu-top .caret { display: none; }
  .menu:hover > .menu-top, .menu:focus-within > .menu-top { background: none; }
  .menu-panel { position: static; translate: none !important; opacity: 1; visibility: visible; padding: 0; transition: none; }
  .menu-panel > * { box-shadow: none; border-radius: 0; background: none; }
  .menu-grid { grid-template-columns: minmax(0, 1fr); padding: 0 0 6px; width: auto; }
  .menu-item { padding: 8px 12px; }
}
/* The brand and the longest "coming soon" (sv, nb, da) side by side with the menu button on a phone. "Rede" keeps its
   normal size from 375 pt; on a 360-pt phone the Swedish header is 2 px short, so the brand is smaller there. */
@media (max-width: 430px) { .top { gap: 10px; } .top .soon { font-size: 13px; padding: 8px 12px; } }
@media (max-width: 374px) { .top .brand { font-size: 18px; gap: 6px; } .top .brand img { width: 32px; height: 32px; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 800; font-size: 17px; border: 0; border-radius: 999px;
  padding: 15px 24px; text-decoration: none; cursor: pointer; transition: transform .12s ease; }
.btn:active { transform: scale(.96); }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.soft { background: var(--paper-2); color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--card); border-radius: 44px; box-shadow: var(--shadow);
  padding: clamp(64px, 10vw, 120px) 24px clamp(64px, 10vw, 120px); text-align: center; display: grid; justify-items: center; gap: 20px; margin-top: 8px; }
.hero h1 { font-size: clamp(46px, 8.4vw, 96px); line-height: .96; letter-spacing: -0.05em; max-width: 11ch; position: relative; z-index: 1; }
.hero .lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink-2); max-width: 34ch; position: relative; z-index: 1; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; margin-top: 6px; }
.trial { color: var(--ink-2); font-size: 15px; font-weight: 600; position: relative; z-index: 1; }
.sticker { position: absolute; width: clamp(54px, 7vw, 92px); height: auto; filter: drop-shadow(0 10px 12px rgba(46,44,42,.16));
  transform: rotate(var(--r, 0deg)); animation: bob 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.sticker.inline { position: static; width: 84px; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 760px) { .sticker.far { display: none; } .sticker { width: 48px; } }

/* ---------- inside ---------- */
.inside, .promises, .faq, .final { display: grid; gap: 18px; }
.section-lead { font-size: 19px; color: var(--ink-2); max-width: 56ch; }
.features { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.feature { background: var(--card); border-radius: 32px; box-shadow: var(--shadow); padding: 26px; display: grid; gap: 22px; align-content: space-between;
  grid-column: span 2; min-width: 0; }
.feature.chat, .feature.photos { grid-column: span 3; }
.feature .copy { display: grid; gap: 8px; }
.feature p { color: var(--ink-2); }
@media (max-width: 900px) { .features { grid-template-columns: minmax(0, 1fr); } .feature, .feature.chat, .feature.photos { grid-column: auto; } }

/* The app's own screens (public/media/<lang>/, from the demo family): a phone, still or a muted clip that loops. */
.phone { --w: 250px; position: relative; width: var(--w); flex: none; padding: calc(var(--w) * .032); background: #141414;
  border-radius: calc(var(--w) * .165); box-shadow: inset 0 0 0 1.5px #3b3b3b, 0 2px 0 rgba(0,0,0,.06), 0 26px 44px -30px rgba(46,44,42,.38); }
.phone img, .phone video { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1305; border-radius: calc(var(--w) * .135); background: #fbf9f6; }
.phone::after { content: ""; position: absolute; left: 50%; top: calc(var(--w) * .062); width: calc(var(--w) * .3); height: calc(var(--w) * .088);
  translate: -50% 0; background: #000; border-radius: 999px; }
.feature { padding-bottom: 0; overflow: hidden; position: relative; }
.shot { position: relative; height: 330px; display: flex; justify-content: center; margin: 0 -26px;
  background: linear-gradient(to bottom, transparent 10%, var(--tint)); }
.shot .phone { --w: 236px; margin-top: 18px; height: fit-content; }
.feature.chat .shot, .feature.photos .shot { height: 400px; }
.feature.chat .shot .phone, .feature.photos .shot .phone { --w: 270px; }
.feature.chat { --tint: color-mix(in srgb, var(--blue) 16%, transparent); }
.feature.photos { --tint: color-mix(in srgb, var(--indigo) 16%, transparent); }
.feature.calendar { --tint: color-mix(in srgb, var(--coral) 16%, transparent); }
.feature.map { --tint: color-mix(in srgb, var(--green) 16%, transparent); }
.feature.inbox { --tint: color-mix(in srgb, var(--pink) 18%, transparent); }
/* A part of the screen lifted out of the phone, a little bigger, like a sticker. */
.lift { position: absolute; z-index: 2; width: 236px; height: auto; left: 50%; top: 205px; translate: -50% 0; rotate: -4deg; border-radius: 18px;
  box-shadow: 0 0 0 4px #fff, 0 12px 22px -14px rgba(46,44,42,.32); }

/* ---------- hero phones ---------- */
.hero { padding-bottom: 0; gap: 18px; }
.stage { position: relative; z-index: 1; width: 100%; max-width: 900px; height: clamp(360px, 46vw, 520px); margin-top: 26px; }
.stage .phone { position: absolute; left: 50%; top: 0; }
.stage .mid { --w: clamp(220px, 25vw, 290px); translate: -50% 0; z-index: 3; }
.stage .left, .stage .right { --w: clamp(190px, 21vw, 250px); z-index: 2; }
.stage .left { translate: -136% 74px; rotate: -9deg; }
.stage .right { translate: 36% 74px; rotate: 9deg; }
.chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: var(--card); color: var(--ink);
  font-weight: 800; font-size: 15px; padding: 10px 15px; border-radius: 999px; box-shadow: 0 0 0 4px var(--card), 0 10px 18px -12px rgba(46,44,42,.28);
  rotate: var(--r, 0deg); white-space: nowrap; animation: bob 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.chip i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 14px; background: var(--c); }
.chip.one { left: 9%; top: 4%; --r: -6deg; --d: -1s; --c: var(--pink); }
.chip.two { right: 6%; top: 8%; --r: 5deg; --d: -3s; --c: #2a8f86; }
.chip.three { left: 30%; bottom: 14%; --r: 4deg; --d: -2s; --c: var(--indigo); }
@media (max-width: 760px) {
  .stage { height: 400px; }
  .stage .mid { --w: 210px; }
  .stage .left, .stage .right { --w: 170px; }
  .stage .left { translate: -112% 60px; }
  .stage .right { translate: 12% 60px; }
  .chip { font-size: 13px; padding: 8px 12px; }
  .chip.one, .chip.two { display: none; }
  .chip.three { left: 50%; translate: -50% 0; }
  .hero > .sticker { display: none; }
}

/* ---------- promises ---------- */
.promise-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.promise { background: var(--card); border-radius: 28px; box-shadow: var(--shadow); padding: 26px; display: grid; gap: 8px; align-content: start; }
.promise p { color: var(--ink-2); }
@media (max-width: 860px) { .promise-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- price ---------- */
.price-card { background: var(--ink); color: var(--paper); border-radius: 44px; padding: clamp(36px, 6vw, 64px); display: grid; gap: 12px; justify-items: center; text-align: center; }
.price-card h2 { max-width: 16ch; }
.amount { font-size: clamp(56px, 9vw, 92px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin-top: 10px; }
.once { opacity: .75; font-weight: 700; }
.price-card ul { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; gap: 10px; text-align: left; }
.price-card li { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.price-card li svg { color: var(--accent-on-ink); flex: none; }
.price-card .note { opacity: .75; max-width: 46ch; font-size: 15px; }
/* One purchase against five years of a subscription, on one scale. */
.compare { width: min(100%, 560px); display: grid; gap: 14px; margin: 18px 0 4px; text-align: left; }
.compare .row { display: grid; gap: 6px; }
.compare .label { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 15px; }
.compare .label span { opacity: .7; font-variant-numeric: tabular-nums; text-align: right; }
.compare .bar { height: 26px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden; }
.compare .bar b { display: block; height: 100%; border-radius: inherit; background: var(--accent-on-ink); }
.compare .bar b.years { width: 100%; background: repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 50%, transparent) 0 calc(20% - 3px), transparent calc(20% - 3px) 20%); }
.compare .source { font-size: 13px; opacity: .6; }

/* The price as a ticket (B2, Peter 2026-10-28): blush with the headline, a tilted ONCE and why it matters; a tear line
   with notches cut out (masks, so the page shows through); the price and the trial on a white stub. Below on phones, to the right from 900 px. Full width like the other cards; the
   shadow is the shared one as filters, so it follows the cuts. */
.ticket { border-radius: 44px; overflow: hidden; display: grid; filter: var(--shadow-drop); }
.ticket-top { container-type: inline-size; background: var(--blush); padding: clamp(44px, 7vw, 56px) clamp(22px, 6vw, 56px) clamp(44px, 6vw, 52px);
  display: grid; justify-items: center; align-content: center; text-align: center; }
.ticket-top h2 { font-size: clamp(28px, 5vw, 38px); line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; }
.ticket-top h2 .line { display: block; }
.ticket-top :is(h2, p):lang(ja) { word-break: auto-phrase; }
.once-big { margin: 30px 0 0; display: grid; justify-items: center; color: var(--accent); rotate: -3deg; }
/* Lowercase in the page, so screen readers and search say the word; capitals on screen.
   Sized to fit the card: --letters is the word's width in letters (set per language by the build). */
.once-big span { font-size: min(124px, 128cqi / var(--letters, 4)); line-height: .82; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.once-big svg { width: min(360px, 82%); height: auto; margin-top: 8px; }
.not-sub { margin: 32px 0 0; font-size: 24px; line-height: 1.3; font-weight: 900; }
.not-sub .not { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.nothing { margin: 4px 0 0; font-size: 18px; font-weight: 800; color: var(--blush-ink-2); }
.ticket-stub { container-type: inline-size; position: relative; background: var(--stub); padding: 44px clamp(22px, 5vw, 36px) 48px;
  display: grid; gap: 28px; align-content: center; text-align: center; }
/* The price: a big whole number with the currency and cents raised small, like a price tag. --price-w is its width in
   ems (set by the build), so it fills the stub in every currency. */
.ticket-stub .amount { margin: 0; display: flex; justify-content: center; align-items: flex-start; font-size: min(112px, 94cqi / var(--price-w, 2.6));
  line-height: .84; font-weight: 900; letter-spacing: -0.04em; white-space: nowrap; }
.amount .cur, .amount .cents { font-size: .4em; line-height: 1; margin-top: .1em; letter-spacing: -0.02em; }
.amount .cur { margin-right: .08em; }
.amount .cur.after { margin: .1em 0 0 .14em; }
.amount .cents { margin-left: .03em; }
.ticket-stub .btn { justify-content: center; padding: 17px 16px; border-radius: 26px; font-size: 16px; line-height: 1.25; font-weight: 900; white-space: normal; text-wrap: balance; cursor: default; }
.ticket-stub .btn:active { transform: none; }
/* Phones: the stub below, the tear line across, notches at its ends. */
.ticket-top {
  -webkit-mask: radial-gradient(circle at 0 100%, transparent 18px, #000 18.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 100%, transparent 18px, #000 18.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 100%, transparent 18px, #000 18.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 100%, transparent 18px, #000 18.5px) right / 51% 100% no-repeat; }
.ticket-stub {
  -webkit-mask: radial-gradient(circle at 0 0, transparent 18px, #000 18.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 0, transparent 18px, #000 18.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent 18px, #000 18.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 0, transparent 18px, #000 18.5px) right / 51% 100% no-repeat; }
.ticket-stub::before { content: ""; position: absolute; top: 0; left: 30px; right: 30px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--perf) 0 9px, transparent 9px 16px); }
/* Wide screens: the stub to the right, the tear line down, notches at its top and bottom. */
@media (min-width: 900px) {
  .ticket { grid-template-columns: minmax(0, 1fr) minmax(340px, 34%); }
  .ticket-top {
    -webkit-mask: radial-gradient(circle at 100% 0, transparent 18px, #000 18.5px) top / 100% 51% no-repeat,
                  radial-gradient(circle at 100% 100%, transparent 18px, #000 18.5px) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle at 100% 0, transparent 18px, #000 18.5px) top / 100% 51% no-repeat,
                  radial-gradient(circle at 100% 100%, transparent 18px, #000 18.5px) bottom / 100% 51% no-repeat; }
  .ticket-stub {
    -webkit-mask: radial-gradient(circle at 0 0, transparent 18px, #000 18.5px) top / 100% 51% no-repeat,
                  radial-gradient(circle at 0 100%, transparent 18px, #000 18.5px) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle at 0 0, transparent 18px, #000 18.5px) top / 100% 51% no-repeat,
                  radial-gradient(circle at 0 100%, transparent 18px, #000 18.5px) bottom / 100% 51% no-repeat; }
  .ticket-stub::before { top: 30px; bottom: 30px; left: 0; right: auto; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--perf) 0 9px, transparent 9px 16px); }
}
.ticket-top p, .ticket-stub p, .price-points, .price-fine { text-wrap: balance; }
.price-points { margin: 24px auto 0; max-width: 72ch; padding: 0 16px; text-align: center; font-size: 15px; line-height: 1.7; font-weight: 800; color: var(--ink-2); }
.price-fine { margin: 6px auto 0; max-width: 560px; padding: 0 16px; text-align: center; font-size: 13px; color: var(--ink-2); }
.ticket-stub .btn:active { transform: none; }
.ticket-stub .keep { margin: -8px 0 0; font-size: 14px; font-weight: 800; color: var(--ink-2); }
.price-points { margin: 24px auto 0; max-width: 72ch; padding: 0 16px; text-align: center; font-size: 15px; line-height: 1.7; font-weight: 800; color: var(--ink-2); }
.price-fine { margin: 6px auto 0; max-width: 560px; padding: 0 16px; text-align: center; font-size: 13px; color: var(--ink-2); }

/* ---------- faq ---------- */
.faq details { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 4px 22px; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 18px; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--ink-2); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); padding-bottom: 18px; max-width: 64ch; }

/* ---------- final ---------- */
.final { justify-items: center; text-align: center; padding: 20px 0; }
.final p { color: var(--ink-2); font-size: 19px; }
/* What the name means, under the last line of the front page. */
.final .name-note { font-size: 16px; margin-top: -8px; max-width: 34em; }

/* ---------- documents (support, privacy, 404) ---------- */
.doc { max-width: 720px; display: grid; gap: 16px; padding-top: 24px; }
.doc.center { justify-items: center; text-align: center; margin: 0 auto; padding: 12vh 0; }
.doc h1 { font-size: clamp(42px, 7vw, 64px); line-height: 1; letter-spacing: -0.045em; }
.doc h2 { font-size: 24px; margin-top: 18px; }
.doc p { color: var(--ink-2); max-width: 64ch; }
.doc .lead { font-size: 19px; }
.doc .updated { font-weight: 700; }
.doc .faq { display: grid; gap: 10px; margin-top: 8px; }
.doc a { color: var(--accent); font-weight: 700; }

/* ---------- footer (layout B) ---------- */
.foot { max-width: 1080px; margin: 40px auto 0; padding: 32px 0 40px; display: flex; justify-content: space-between; gap: 24px; color: var(--ink-2); font-size: 15px; }
.foot-left { display: grid; gap: 6px; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.foot-brand img { filter: grayscale(1); opacity: .5; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); transition: filter .2s, opacity .2s; }
.foot-brand:hover img { filter: none; opacity: 1; }
/* The product is Rede, the site and the address are rede.life. */
.foot-domain { font-weight: 600; }
.foot-domain::before { content: "·"; margin-right: 8px; }
.foot-left a:not(.foot-brand) { text-decoration: none; }
.foot-left a:not(.foot-brand):hover, .foot-left a:not(.foot-brand):focus-visible { text-decoration: underline; color: var(--ink); }
.foot-right { display: grid; justify-items: end; gap: 10px; align-content: start; }
.foot-right nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-right nav a { text-decoration: none; font-weight: 700; }
.foot-right nav a:hover { color: var(--ink); }
.language { position: relative; }
.language summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--paper-2); }
.language summary::-webkit-details-marker { display: none; }
.language ul { position: absolute; right: 0; bottom: calc(100% + 8px); list-style: none; margin: 0; padding: 6px; background: var(--card); border-radius: 18px;
  box-shadow: var(--shadow), 0 0 0 1px var(--line); min-width: 170px; z-index: 5; }
.language li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 600; }
.language li a:hover { background: var(--paper-2); }
@media (max-width: 760px) { .foot { flex-direction: column; } .foot-right { justify-items: start; } .language ul { left: 0; right: auto; } }

/* ---------- invite page (rendered by the Worker) ---------- */
.invite { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: start; padding: 20px 0 40px; }
.invite .intro { display: grid; gap: 14px; }
.invite h1 { font-size: clamp(44px, 8vw, 76px); line-height: .98; letter-spacing: -0.05em; }
.invite .lead { color: var(--ink-2); font-size: 19px; max-width: 40ch; }
.codecard { background: var(--card); border-radius: 36px; box-shadow: var(--shadow); padding: 28px 24px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.codecard .label { font-weight: 800; font-size: 14px; color: var(--accent); }
.codecard .code { font-size: clamp(36px, 11vw, 60px); font-weight: 900; letter-spacing: .05em; white-space: nowrap; font-variant-numeric: tabular-nums; user-select: all; }
.codecard .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.howto { background: var(--card); border-radius: 28px; box-shadow: var(--shadow); padding: 22px 24px; display: grid; gap: 10px; }
.howto ol { margin: 0; padding-left: 22px; color: var(--ink-2); display: grid; gap: 4px; }
.howto .soon-note { color: var(--ink-2); font-size: 15px; }
.qr { background: var(--card); border-radius: 32px; box-shadow: var(--shadow); padding: 24px; display: grid; gap: 12px; justify-items: center; text-align: center; width: 280px; }
.qr svg { width: 200px; height: 200px; }
.qr svg path { fill: var(--ink); }
.qr p { color: var(--ink-2); font-weight: 700; font-size: 15px; }
.invite .side { display: grid; gap: 16px; }
@media (max-width: 860px), (pointer: coarse) { .invite { grid-template-columns: minmax(0, 1fr); } .qr { display: none; } }

/* ---------- AI agents (/agents, and the band on the front page) and the rede command (/cli) ---------- */
.agents-band-card { background: var(--card); border-radius: 36px; box-shadow: var(--shadow); padding: clamp(28px, 5vw, 48px); display: grid; gap: 14px; justify-items: start; }
.agents-band-card p { color: var(--ink-2); font-size: 19px; max-width: 52ch; }
.agents-hero { padding-bottom: 0; }
.agents-hero .lead, .cli-hero .lead { max-width: 40ch; }
.cli-hero { padding-bottom: clamp(36px, 6vw, 64px); }
.cli-hero h1 { max-width: 12ch; }

/* Icons on a tint of their colour. */
.tile { --c: var(--ink); flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 15px;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.tile.coral { --c: var(--coral); } .tile.green { --c: var(--green); } .tile.indigo { --c: var(--indigo); } .tile.blue { --c: var(--blue); }
.tile.pink { --c: var(--pink); } .tile.amber { --c: var(--amber); }
.sticker.icon { position: static; width: 46px; height: 46px; animation: none; transform: rotate(-4deg); filter: drop-shadow(0 4px 6px rgba(46,44,42,.14)); }

/* Code: in running text, a value to copy, and a command on its own line. */
.promises code, .hero code, .dev-card code, .scripts-card code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86em; font-weight: 500;
  background: var(--paper-2); color: var(--ink); padding: 2px 6px; border-radius: 8px; overflow-wrap: break-word;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.copyable { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--paper-2); border-radius: 12px; padding: 3px 3px 3px 10px; vertical-align: middle; }
.copyable code { background: none; padding: 0; white-space: nowrap; }
.numbered .copy-btn { padding: 6px; }
.numbered .copy-btn span { display: none; }
.copy-btn { flex: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 9px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line); transition: color .15s, background .15s; }
.copy-btn:hover { background: var(--paper); }
.copy-btn.done { color: var(--green); }
.copy-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cmd { display: flex; align-items: center; gap: 10px; background: var(--term); color: #f6f1ea; border-radius: 14px; padding: 7px 7px 7px 14px; }
.promises .cmd code { flex: 1; min-width: 0; background: none; color: inherit; padding: 0; font-size: 14px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.cmd code::before { content: "$ "; color: #ff70b3; }
.cmd .copy-btn { background: rgba(255,255,255,.1); color: #f6f1ea; box-shadow: none; }
.cmd .copy-btn:hover { background: rgba(255,255,255,.18); }
.cmd .copy-btn.done { color: #6ee7a0; }

/* The hero: someone asks their assistant, and the answer opens Rede's map. */
.assist-stage { position: relative; z-index: 1; width: 100%; max-width: 860px; margin-top: 30px; display: grid; grid-template-columns: minmax(0, 520px) auto;
  justify-content: center; align-items: start; overflow: hidden; }
.assist-stage > .phone { --w: 270px; margin: 0 0 -190px -36px; }
.assist { position: relative; z-index: 2; margin-top: 56px; background: var(--paper); border-radius: 28px; text-align: left; padding: 16px 22px 24px;
  display: grid; gap: 16px; box-shadow: 0 0 0 1px var(--line), 0 26px 44px -30px rgba(46,44,42,.4); }
.assist-bar { display: flex; gap: 6px; align-items: center; }
.assist-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.bubble.you { justify-self: end; max-width: 85%; background: var(--blue); color: #fff; border-radius: 22px 22px 8px 22px; padding: 10px 16px; font-weight: 700; }
.reply { display: flex; gap: 12px; align-items: flex-start; }
.reply > div { display: grid; gap: 10px; justify-items: start; }
.reply p { font-weight: 600; }
.reply .tile, .maplink .tile, .btn .tile { width: 32px; height: 32px; border-radius: 10px; }
.maplink { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 16px; padding: 8px 14px 8px 8px; box-shadow: 0 0 0 1px var(--line); }
.maplink b { display: block; font-size: 15px; line-height: 1.25; }
.maplink small { color: var(--ink-2); font-size: 13px; font-weight: 600; }
@media (max-width: 760px) {
  .assist-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .assist { margin: 0; width: 100%; }
  .assist-stage > .phone { --w: 230px; margin: -18px 0 -200px; }
}

/* What an agent can do: the app's tabs, each with its screen and something to ask. */
.agent-features .feature.calendar { grid-column: span 3; }
.agent-features .feature.photos { grid-column: span 2; }
.agent-features .feature.calendar .shot { height: 400px; }
.agent-features .feature.calendar .shot .phone { --w: 270px; }
.agent-features .feature.photos .shot { height: 330px; }
.agent-features .feature.photos .shot .phone { --w: 236px; }
.agent-features .copy { justify-items: start; }
.agent-features .copy .sticker { margin-bottom: 4px; }
.feature .ask { background: var(--paper-2); color: var(--ink); border-radius: 18px 18px 18px 6px; padding: 8px 14px; font-weight: 700; font-size: 15px; margin-top: 4px; }
@media (max-width: 900px) { .agent-features .feature.calendar, .agent-features .feature.photos { grid-column: auto; } }

/* The demos (AGENT_SCRIPT): what you ask is typed, a spark carries it to the phone, and the app's own recording of the
   change plays there (tools/agent_clips.sh). */
.agent-phone .screen { position: relative; overflow: hidden; border-radius: calc(var(--w) * .135); }
.agent-phone video { border-radius: 0; aspect-ratio: 600 / 1304; }
/* Where it lands: a ring that opens and fades (a tap where a finger does it). */
.agent-phone .landing { position: absolute; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 3px solid var(--accent-on-ink); opacity: 0; pointer-events: none; }
.landed .agent-phone .landing { animation: landing .9s ease-out; }
@keyframes landing { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }
/* The spark that carries the ask: a sparkle on a white chip, flying over the page. */
.spark { position: absolute; z-index: 50; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--coral); pointer-events: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 30%, transparent), 0 8px 18px -6px rgba(46,44,42,.45); }
/* What you ask: typed with a caret, a sparkle in front, tinted once it's sent. */
.ask .ask-mark, .bubble.you .ask-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #fff; color: var(--coral);
  vertical-align: -5px; margin-right: 8px; box-shadow: 0 0 0 1px var(--line); }
.bubble.you .ask-mark { display: none; }
.caret { display: none; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
.typing .caret { display: inline-block; }
.rest { color: transparent; }
@keyframes caret { 50% { opacity: 0; } }
.feature .ask { transition: background .3s, color .3s; min-height: 2.6em; }
.feature.sent .ask { background: color-mix(in srgb, var(--coral) 14%, var(--paper-2)); }
/* The hero: the answer comes once the question is sent, the map then flies to the child. */
.assist-stage .reply { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .5s var(--ease); }
.assist-stage.sent .reply { opacity: 1; transform: none; }
.assist-stage .bubble.you { min-height: 2.6em; }

/* Each phone shows where its change lands: the message and Alfie's card at the bottom, the photo in the middle. */
.agent-features .shot { overflow: hidden; }
.agent-features .feature.chat .shot, .agent-features .feature.map .shot { align-items: flex-end; }
.agent-features .feature.chat .shot .phone, .agent-features .feature.map .shot .phone { margin: 0 0 22px; }
.agent-features .feature.photos .shot { align-items: center; }
.agent-features .feature.photos .shot .phone { margin-top: 0; }
/* Connect it: one card each, numbered steps, then approving it in the app. */
.setup-row { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.setup { background: var(--card); border-radius: 30px; box-shadow: var(--shadow); padding: 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.setup > p { color: var(--ink-2); }
.numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: n; color: var(--ink-2); }
.numbered li { counter-increment: n; position: relative; padding-left: 38px; min-height: 26px; }
.numbered li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink); font-weight: 800; font-size: 13px; }
.setup .more { margin-top: auto; padding-top: 4px; font-weight: 800; color: var(--accent); text-decoration: none; }
.setup .more svg { vertical-align: -4px; margin-left: 4px; }
.setup .more:hover { text-decoration: underline; }
.nw { white-space: nowrap; }
.section-lead.wide { max-width: none; }
.step-rows { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 16px; counter-reset: step; }
.step-row { counter-increment: step; background: var(--card); border-radius: 30px; box-shadow: var(--shadow); padding: 26px 28px;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px 24px; align-items: center; }
.step-row::before { content: counter(step); align-self: start; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-weight: 900; font-size: 18px; }
.step-row .copy { display: grid; gap: 6px; align-self: start; }
.step-row p { color: var(--ink-2); }
.step-row .cmds { display: grid; gap: 8px; }
@media (max-width: 860px) { .step-row { grid-template-columns: 40px minmax(0, 1fr); } .step-row .cmds { grid-column: 1 / -1; } }
.setup-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .setup-row, .setup-row.two { grid-template-columns: minmax(0, 1fr); } }

.approve-card, .safe-card { background: var(--card); border-radius: 36px; box-shadow: var(--shadow); overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin-top: 6px; }
.approve-card { --tint: color-mix(in srgb, var(--indigo) 16%, transparent); align-items: center; }
.approve-card .copy { padding: clamp(28px, 5vw, 48px); display: grid; gap: 12px; justify-items: start; }
.approve-card .copy p { color: var(--ink-2); font-size: 19px; }
.approve-card .shot, .safe-card .shot { margin: 0; height: 100%; min-height: 420px; overflow: hidden; }
.approve-card .shot .phone, .safe-card .shot .phone { --w: 270px; position: absolute; left: 50%; translate: -50% 0; margin: 0; }
.approve-card .shot .phone { bottom: 30px; }
.safe-card { --tint: color-mix(in srgb, var(--amber) 16%, transparent); }
.safe-card .shot .phone { top: 40px; }
.safe-list { list-style: none; margin: 0; padding: clamp(28px, 4vw, 44px); display: grid; gap: 24px; }
.safe-list li { display: flex; gap: 16px; align-items: flex-start; }
.safe-list li > div { display: grid; gap: 4px; }
.safe-list h3 { font-size: 19px; }
.safe-list p { color: var(--ink-2); }
.safe-note { grid-column: 1 / -1; padding: 20px clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15px; }
.safe-note a, .dev-card p a, .scripts-card a { color: var(--accent); font-weight: 700; }
@media (max-width: 860px) {
  .approve-card, .safe-card { grid-template-columns: minmax(0, 1fr); }
  .approve-card .shot { min-height: 400px; }
  .safe-card .shot { min-height: 380px; }
}

/* For developers, and the rede command's safety and source. */
.dev-card, .scripts-card, .cmd-card { background: var(--card); border-radius: 36px; box-shadow: var(--shadow); padding: clamp(28px, 5vw, 48px); }
.dev-card { display: grid; gap: 16px; }
.dev-card p { color: var(--ink-2); font-size: 18px; }
.dev-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.dev-links .copyable { padding: 6px 6px 6px 14px; border-radius: 999px; }
.dev-links .copy-btn { border-radius: 999px; }
.btn.dark .tile { --c: var(--paper); margin-left: -8px; }
.dev-cli { margin-top: 10px; background: var(--paper); border-radius: 26px; padding: clamp(22px, 3vw, 30px); display: grid; gap: 16px; }
.dev-cli-head { display: flex; gap: 14px; align-items: center; }
.dev-cli .numbered { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.dev-cli .more { font-weight: 800; color: var(--accent); text-decoration: none; }
.dev-cli .more svg { vertical-align: -4px; margin-left: 4px; }
@media (max-width: 860px) { .dev-cli .numbered { grid-template-columns: minmax(0, 1fr); } }

/* The terminal: the hero's session and the scripts' example. */
.term { position: relative; z-index: 1; width: 100%; max-width: 780px; background: var(--term); border-radius: 22px; overflow: hidden; text-align: left;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 26px 44px -30px rgba(46,44,42,.45); }
.term .assist-bar { padding: 14px 16px 0; }
.term .assist-bar i { background: rgba(255,255,255,.16); }
.term .assist-bar b { flex: 1; text-align: center; margin-right: 45px; color: rgba(255,255,255,.4); font-size: 13px; font-weight: 700; }
.term pre { margin: 0; padding: 14px 22px 22px; font: 500 14.5px/1.65 ui-monospace, "SF Mono", Menlo, monospace; color: #b3aa9f; white-space: pre-wrap; overflow-wrap: anywhere; }
.term .in { display: block; color: #f6f1ea; }
.term .in::before { content: "$ "; color: #ff70b3; }
.term .out { display: block; margin-bottom: 10px; }
.term .out:last-child { margin-bottom: 0; }
.hero-term { margin-top: 26px; }

.cmd-card { display: grid; padding-top: 8px; padding-bottom: 8px; margin-top: 6px; }
.cmd-group { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px 24px; padding: 24px 0; }
.cmd-group + .cmd-group { border-top: 1px solid var(--line); }
.cmd-group h3 { display: flex; gap: 12px; align-items: center; font-size: 19px; align-self: start; }
.cmd-group h3 .sticker, .cmd-group h3 .tile { width: 40px; height: 40px; border-radius: 12px; }
.cmd-group dl { margin: 0; display: grid; gap: 16px; }
.cmd-group dl > div { display: grid; gap: 4px; }
.cmd-group dd { margin: 0; color: var(--ink-2); }
.cmd-group dt code { font-size: 14.5px; }
@media (max-width: 760px) { .cmd-group { grid-template-columns: minmax(0, 1fr); } }

.scripts-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.scripts-card .copy { display: grid; gap: 14px; }
.scripts-card p { color: var(--ink-2); }
.scripts-card .note { font-size: 15px; font-weight: 600; }
@media (max-width: 860px) { .scripts-card { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Familieavisen (the sample issue's pages in public/paper/, tools/paper_media.py) ---------- */
.sheet { display: block; width: 100%; height: auto; aspect-ratio: 1240 / 1754; background: #fff; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(46,44,42,.06), 0 1px 2px rgba(46,44,42,.06), 0 16px 30px -22px rgba(46,44,42,.32); }
.paper-band-card { background: var(--card); border-radius: 36px; box-shadow: var(--shadow); overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 12px;
  background-image: radial-gradient(120% 90% at 90% 100%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 60%); }
.paper-band-card .copy { padding: clamp(28px, 5vw, 48px); padding-right: 0; display: grid; gap: 14px; justify-items: start; }
.paper-band-card .copy > p { color: var(--ink-2); font-size: 19px; max-width: 46ch; }
.paper-terms { list-style: none; padding: 0; margin: 2px 0 0; display: grid; gap: 8px; }
.paper-terms li { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.paper-terms svg { flex: none; color: var(--accent); }
.paper-note { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.paper-band-card .btn { margin-top: 6px; }
.paper-fan { position: relative; display: block; height: 100%; min-height: 400px; }
.paper-fan .sheet { position: absolute; width: clamp(170px, 21vw, 230px); left: 50%; top: 50%; transition: rotate .5s var(--ease), translate .5s var(--ease); }
.paper-fan .front { translate: -50% -46%; rotate: -2deg; z-index: 3; }
.paper-fan .back-left { translate: -96% -50%; rotate: -11deg; }
.paper-fan .back-right { translate: -6% -42%; rotate: 9deg; }
.paper-band-card:hover .paper-fan .back-left { translate: -104% -52%; rotate: -14deg; }
.paper-band-card:hover .paper-fan .back-right { translate: 2% -42%; rotate: 12deg; }
@media (max-width: 860px) {
  .paper-band-card { grid-template-columns: minmax(0, 1fr); }
  .paper-band-card .copy { padding-right: clamp(28px, 5vw, 48px); padding-bottom: 0; }
  .paper-fan { min-height: 330px; }
  .paper-fan .sheet { width: 170px; }
}

.kicker { font-weight: 800; font-size: 15px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 7px 14px; border-radius: 999px; position: relative; z-index: 1; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; position: relative; z-index: 1; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: var(--paper-2); color: var(--ink); text-decoration: none;
  font-weight: 800; font-size: 16px; padding: 10px 16px; border-radius: 999px; }
.badge svg { color: var(--accent); }
.paper-hero h1 { max-width: 13ch; }
.paper-stage { position: relative; z-index: 1; width: 100%; max-width: 900px; height: clamp(330px, 40vw, 470px); margin-top: 26px; }
.paper-stage .sheet { position: absolute; left: 50%; top: 0; }
.paper-stage .mid { width: clamp(250px, 30vw, 340px); translate: -50% 0; z-index: 3; rotate: -1deg; }
.paper-stage .left, .paper-stage .right { width: clamp(210px, 25vw, 290px); }
.paper-stage .left { translate: -128% 70px; rotate: -8deg; }
.paper-stage .right { translate: 28% 70px; rotate: 8deg; }
@media (max-width: 760px) {
  .paper-stage { height: 360px; }
  .paper-stage .mid { width: 230px; }
  .paper-stage .left, .paper-stage .right { width: 180px; }
  .paper-stage .left { translate: -110% 60px; }
  .paper-stage .right { translate: 10% 60px; }
}

.paper-pages { display: grid; gap: 18px; }
.page-strip { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.page-thumb { all: unset; box-sizing: border-box; cursor: zoom-in; display: grid; gap: 12px; width: 100%; }
.page-thumb .sheet { transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
.page-thumb:hover .sheet { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(46,44,42,.06), 0 1px 2px rgba(46,44,42,.06), 0 22px 36px -22px rgba(46,44,42,.38); }
.page-thumb:focus-visible .sheet { outline: 3px solid var(--accent); outline-offset: 4px; }
.page-thumb span { display: flex; gap: 10px; align-items: baseline; font-weight: 700; }
.page-thumb b { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper-2); font-size: 13px; font-weight: 800; }
@media (max-width: 760px) { .page-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } .page-thumb span { font-size: 15px; } }

.paper-how-card { background: var(--card); border-radius: 36px; box-shadow: var(--shadow); overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; --tint: color-mix(in srgb, var(--amber) 18%, transparent); }
.paper-how-card .copy { padding: clamp(28px, 5vw, 48px); padding-right: 0; display: grid; gap: 20px; align-content: start; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; counter-increment: step; }
.steps li::before { content: counter(step); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-weight: 900; font-size: 18px; }
.steps p { color: var(--ink-2); }
.paper-how-card .shot { height: auto; min-height: 480px; margin: 0; align-items: flex-start; padding-top: 36px; background: linear-gradient(to bottom, transparent 5%, var(--tint)); }
.paper-how-card .shot .phone { --w: 260px; margin-top: 0; }
@media (max-width: 860px) {
  .paper-how-card { grid-template-columns: minmax(0, 1fr); }
  .paper-how-card .copy { padding-right: clamp(28px, 5vw, 48px); padding-bottom: 0; }
  .paper-how-card .shot { min-height: 0; height: 420px; overflow: hidden; }
}

.paper-inside { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.paper-inside .promise { padding: 22px; }
.paper-inside h3 { font-size: 19px; }
@media (max-width: 960px) { .paper-inside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .paper-inside { grid-template-columns: minmax(0, 1fr); } }

.paper-prices { display: grid; gap: 18px; }
.price-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.price-option { background: var(--card); border-radius: 36px; box-shadow: var(--shadow); padding: clamp(28px, 4vw, 40px); display: grid; gap: 6px; align-content: start; }
.price-option h3 { display: flex; gap: 10px; align-items: center; }
.price-option h3 svg { color: var(--accent); width: 22px; height: 22px; }
.price-option .amount { font-size: clamp(44px, 6vw, 64px); margin-top: 8px; }
.price-option .per { color: var(--ink-2); font-weight: 700; }
.price-option ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.price-option li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.price-option li svg { color: var(--green); flex: none; margin-top: 4px; }
.price-option.ink { background: var(--ink); color: var(--paper); }
.price-option.ink h3 svg, .price-option.ink li svg { color: var(--accent-on-ink); }
.price-option.ink .per { color: inherit; opacity: .75; }
.paper-prices .terms a { color: var(--accent); font-weight: 700; }
@media (max-width: 760px) { .price-pair { grid-template-columns: minmax(0, 1fr); } }
.final .btn { margin-top: 8px; }

/* The page viewer. */
.viewer { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; overflow: hidden; }
.viewer::backdrop { background: rgba(20,18,16,.86); }
.viewer[open] { display: grid; place-items: center; }
.viewer figure { margin: 0; display: grid; gap: 12px; justify-items: center; pointer-events: none; }
.viewer img { display: block; width: auto; height: auto; max-width: min(92vw, 820px); max-height: calc(100dvh - 90px); background: #fff; border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); pointer-events: auto; }
.viewer figcaption { color: #fff; font-weight: 700; font-size: 15px; }
.viewer button { position: fixed; border: 0; cursor: pointer; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.14);
  color: #fff; font: inherit; font-size: 30px; line-height: 1; display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.viewer button:hover { background: rgba(255,255,255,.26); }
.viewer button:focus-visible { outline: 3px solid var(--accent-on-ink); outline-offset: 3px; }
.viewer .close { top: max(16px, env(safe-area-inset-top)); right: 16px; }
.viewer .prev { left: 16px; top: 50%; translate: 0 -50%; }
.viewer .next { right: 16px; top: 50%; translate: 0 -50%; }
@media (max-width: 760px) { .viewer .prev, .viewer .next { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); translate: none; } .viewer img { max-height: calc(100dvh - 150px); } }