/* Tablepact: the site's main stylesheet. Shared by every page, and the only stylesheet the shared header and footer
   use (they are served on free pieces too), so their rules live here and nowhere else. */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 900; font-display: swap; src: url("/fonts/schibsted-grotesk-900.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap; src: url("/fonts/schibsted-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-next-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-next-700.woff2") format("woff2"); }

:root {
  --fog: #19181D; --fog2: #2B2A31; --white: #FFFFFF; --tape: #2F93EE; --ash: #B9B7C2; --pencil: #6E6C76;
  --head: "Schibsted Grotesk", "Arial Black", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --bar: 56px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fog); scroll-padding: calc(var(--bar) + 16px) 0 96px; }
body { margin: 0; background: var(--fog); color: var(--white); font: 400 1.0625rem/1.55 var(--body); }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: var(--tape); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--head); font-weight: 900; letter-spacing: -0.02em; line-height: 1.04; margin: 0 0 0.4em; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0 0 0.8em; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 8px; top: 8px; transform: translateY(-200%); z-index: 100; background: var(--white); color: var(--fog); padding: 10px 14px; font-weight: 700; border-radius: 4px; }
.skip:not(:focus) { clip-path: inset(50%); }
.skip:focus { transform: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Buttons: Tape blue with Fog black text, the only filled button. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; min-height: 44px; padding: 0.55em 1.15em;
  background: var(--tape); color: var(--fog); font: 900 1rem/1.1 var(--head); letter-spacing: -0.01em; text-decoration: none; border: 0; border-radius: 4px;
  cursor: pointer; transition: transform 120ms ease, background-color 120ms ease; -webkit-tap-highlight-color: transparent; }
.btn:hover { background: #55a7f2; text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-big { min-height: 54px; font-size: 1.2rem; padding: 0.6em 1.5em; }
.btn-line { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px var(--ash); }
.btn-line:hover { background: var(--fog2); }
.price { font: 900 1.6rem/1 var(--head); letter-spacing: -0.02em; color: var(--white); white-space: nowrap; }
/* The currency sits beside the figure, smaller, so $9 still reads first and nobody wonders whose dollars. */
.price .cur { font: 700 0.46em/1 var(--body); letter-spacing: 0.04em; vertical-align: 0.42em; margin-left: 0.15em; }

/* The note: a white card, 3 px fog outline, one strip of tape across its top edge. */
.note { position: relative; background: var(--white); color: var(--fog); border: 3px solid var(--fog); padding: 18px 18px 14px; max-width: 30rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.note::before { content: ""; position: absolute; left: 22px; top: -11px; width: 84px; height: 20px; background: var(--tape); transform: rotate(-3deg); opacity: 0.96; }
.note .note-from { display: block; font: 400 0.8125rem/1.3 var(--body); color: var(--pencil); margin-bottom: 4px; }
.note h3, .note .note-title { font: 900 1.2rem/1.15 var(--head); margin: 0 0 6px; color: var(--fog); letter-spacing: -0.01em; }
.note p { font-size: 0.98rem; line-height: 1.45; margin: 0 0 6px; }

/* Tape label: Tape blue strip with Fog black text. */
.tape { display: inline-block; background: var(--tape); color: var(--fog); font: 700 0.875rem/1.2 var(--body); padding: 4px 9px 5px; }

/* The shared header. */
.top { position: fixed; z-index: 40; inset: 0 0 auto; height: var(--bar); display: flex; align-items: center; gap: 14px; padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  background: var(--fog); border-bottom: 1px solid rgba(255,255,255,0.06); }
.top-logo { display: block; flex: none; margin-right: auto; }
.top-logo img { width: 124px; height: auto; }
.top-nav { display: flex; gap: 18px; font: 700 0.95rem/1 var(--body); }
.top-nav a { color: var(--white); text-decoration: none; padding: 12px 0; }
.top-nav a:hover { color: var(--tape); }
.top-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--tape); text-decoration-thickness: 3px; text-underline-offset: 0.4em; }
.top-offer { display: flex; align-items: center; gap: 12px; }
.top-offer .top-name { font: 700 0.95rem/1.1 var(--body); color: var(--ash); white-space: nowrap; }
.top-offer .top-name b { color: var(--white); font-family: var(--head); font-weight: 900; margin-left: 6px; }
.top .btn { min-height: 38px; padding: 0.45em 0.95em; font-size: 0.95rem; }
.top .soon-tag { font: 700 0.85rem/1.1 var(--body); color: var(--ash); }
/* The phone's menu: a plain disclosure, so it opens with scripts off. */
.top-menu { display: none; }
@media (max-width: 899px) {
  .top-nav, .top-offer { display: none; }
  .top-menu { display: block; position: relative; }
  .top-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font: 700 0.95rem/1 var(--body); color: var(--white); border-radius: 3px; box-shadow: inset 0 0 0 2px var(--fog2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .top-menu summary::-webkit-details-marker { display: none; }
  .top-menu summary::before { content: ""; width: 16px; height: 8px; background: var(--tape); transform: rotate(-6deg); }
  .top-menu[open] summary { background: var(--fog2); }
  .top-menu nav { position: absolute; right: 0; top: calc(100% + 8px); width: max-content; min-width: min(15rem, calc(100vw - 24px)); max-width: calc(100vw - 24px); display: grid; background: var(--white); border: 3px solid var(--fog); box-shadow: 0 10px 24px rgba(0,0,0,0.5); padding: 6px 0; }
  .top-menu nav::before { content: ""; position: absolute; left: 18px; top: -12px; width: 70px; height: 18px; background: var(--tape); transform: rotate(-3deg); }
  .top-menu nav a { display: block; padding: 13px 18px; color: var(--fog); font: 900 1.1rem/1.1 var(--head); text-decoration: none; }
  .top-menu nav a:hover, .top-menu nav a:focus-visible { background: #eef5fd; }
  .top-menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--tape); text-decoration-thickness: 3px; }
}

/* The shared footer. */
.foot { background: var(--fog); border-top: 1px solid var(--fog2); padding: 40px max(20px, 5vw) calc(40px + env(safe-area-inset-bottom)); color: var(--ash); font-size: 0.95rem; }
.foot-in { max-width: 72rem; margin: 0 auto; display: grid; gap: 24px; grid-template-columns: 1fr; }
.foot-logo img { width: 124px; height: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 2px 22px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); text-decoration: none; }
.foot nav a:hover { color: var(--tape); }
.foot small { display: block; font-size: 0.85rem; color: var(--ash); }
@media (min-width: 900px) { .foot-in { grid-template-columns: auto 1fr auto; align-items: center; } }

/* Words for the living world only (an invitation to tap it), and the plain words that stand in when it is held still. */
.living-only { display: none; }
html.living .living-only { display: inline; }
html.living .still-only { display: none; }

/* Words for one width only. */
.narrow-only { display: none; }
@media (max-width: 899px) { .wide-only { display: none !important; } .narrow-only { display: revert; } span.narrow-only { display: inline; } }

/* The phone's buy bar, on every page that sells. */
:root { --buybar: 0px; }
.buybar { display: none; }
@media (max-width: 899px) {
  body:has(.buybar) { --buybar: calc(66px + env(safe-area-inset-bottom)); padding-bottom: var(--buybar); }
  .buybar { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--fog); border-top: 1px solid var(--fog2); }
  .buybar-name { flex: 1; min-width: 0; line-height: 1.2; }
  .buybar-name b { display: block; font: 900 0.98rem/1.15 var(--head); }
  .buybar-name span { display: block; font-size: 0.8rem; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar .price { font-size: 1.35rem; }
  .buybar .btn { min-height: 46px; padding: 0.5em 0.9em; font-size: 0.95rem; }
}
/* Very large text or zoom: the bar keeps only the price and the button, side by side. */
@media (max-width: 24em) {
  .top { gap: 8px; padding-left: 8px; padding-right: 8px; }
  .top-logo { min-width: 0; flex: 0 1 auto; }
  .top-logo img { width: 96px; }
  .top-menu summary { padding: 0 9px; gap: 6px; }
  .top-menu summary::before { width: 10px; }
  .top-menu nav { white-space: normal; }
  .top-menu nav a { overflow-wrap: anywhere; }
  /* A long word in a narrow column breaks with a hyphen rather than pushing the page wider than the screen. */
  main { overflow-wrap: break-word; hyphens: auto; }
  /* The name gives way, but the kit's state never does: the price sits over "Not on sale yet" (or "Paid via Creem"). */
  body:has(.buybar) { --buybar: calc(70px + env(safe-area-inset-bottom)); }
  .buybar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "price btn" "state btn"; column-gap: 10px; row-gap: 3px; align-items: center; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .buybar .price { grid-area: price; align-self: end; }
  .buybar-name { grid-area: state; align-self: start; flex: none; }
  .buybar-name b { display: none; }
  .buybar-name span { font-size: 0.78rem; font-weight: 700; color: var(--white); white-space: nowrap; overflow: visible; }
  .buybar .btn { grid-area: btn; justify-self: end; padding: 0.4em 0.6em; line-height: 1.1; text-align: center; }
}

/* The reader: a page of the kit, full size. */
.reader { width: min(96vw, 900px); max-width: none; max-height: 94vh; max-height: 94dvh; padding: 0; border: 3px solid var(--fog); background: var(--white); color: var(--fog); overflow: auto; overscroll-behavior: contain; }
.reader::backdrop { background: rgba(10,9,12,0.82); }
/* The bar sits above the page, never over it: the page's printed top edge shows below it at every size. */
.reader-bar { position: sticky; top: 0; left: 0; z-index: 2; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 8px; background: var(--white); border-bottom: 2px solid var(--fog); }
.reader-close, .reader-zoom { min-height: 48px; min-width: 48px; padding: 0 16px; font: 900 1rem var(--head); color: var(--fog); background: var(--tape); border: 0; border-radius: 4px; cursor: pointer; box-shadow: 0 2px 0 var(--fog); }
.reader-zoom { background: var(--white); box-shadow: inset 0 0 0 3px var(--fog); }
@media (max-width: 24em) {
  .reader-bar { padding: 6px; gap: 6px; }
  .reader-close, .reader-zoom { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: 0.9rem; }
}
.reader-close:focus-visible, .reader-zoom:focus-visible { outline: 3px solid var(--fog); outline-offset: 2px; }
/* The page at its own shape, never wider than its own pixels. Until its picture has decoded, a sheet of paper of the
   same size holds its place: never the page shown before, and nothing left over once it has come. */
.reader-page { position: relative; display: block; width: 100%; max-width: var(--natw, 100%); margin: 0 auto; }
.reader-wait { display: none; }
.reader.loading .reader-wait { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 12px; margin: 0; font: 900 1.15rem/1.2 var(--head); color: var(--fog); }
.reader.loading .reader-wait::before { content: ""; width: 18px; height: 9px; background: var(--tape); transform: rotate(-6deg); }
.reader.loading .reader-page { aspect-ratio: var(--ar, 4 / 5); background: #f4efe4 repeating-linear-gradient(180deg, transparent 0 22px, rgba(25,24,29,0.07) 22px 24px); }
.reader img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 0.14s; }
.reader img.shown { opacity: 1; }
.reader img:not([src]) { display: none; }
/* Enlarged: twice the reader's width, or the page's own pixels up to four times it, whatever the browser's zoom. */
.reader.big .reader-page { width: max(200%, min(var(--natw, 200%), 400%)); max-width: none; margin: 0; }
.reader-cap { margin: 0; padding: 10px 14px 14px; font-size: 1rem; position: sticky; left: 0; max-width: min(96vw, 900px); box-sizing: border-box; }

/* The signup form. */
.signup { background: var(--fog2); padding: 26px; max-width: 40rem; border-radius: 2px; }
.signup h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.signup form { display: grid; gap: 12px; margin-top: 12px; }
.signup label.email span { display: block; font-weight: 700; margin-bottom: 6px; }
.signup input[type="email"] { width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1.05rem var(--body); color: var(--fog); background: var(--white); border: 3px solid var(--fog); border-radius: 2px; }
.signup .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: var(--ash); }
.signup .consent input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--tape); }
.signup .btn { justify-self: start; }