/* Restable — restable.net. Spec: docs/superpowers/specs/2026-10-19-restable-net-website-design.md.
   Fonts are self-hosted (Schibsted Grotesk, OFL — fonts/OFL.txt); the page asks nothing of a third party. */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Layout: Stripe-style locked grid (4 bays of 3 columns, max 1200) drawn as hairline guides. A satin echo
   ribbon (68:26:16, greyscale, WebGL) flows behind the hero and leaves through its bottom edge; type it
   touches inverts (difference blend). The explanation sits in its own section below the hero. */
:root {
  --ground: #ffffff;
  --ink: #111111;
  --text-2: #333333;
  --muted: #595959;
  --guide: rgba(17, 17, 17, 0.08);
  --panel: #f3f3f3;
  --on-ink: #ffffff;
  --line: #d6d6d6;
  --btn-edge: transparent;   /* the demo widget's black button, on a dark ground: a light hairline keeps its shape */
  /* blended type: the colour that, differenced against the ground, gives the intended ink */
  --b-h1: #ffffff;   /* -> #000 on white, white over the ribbon */
  --b-sec: #a8a8a8;  /* -> #575757 */
  --b-muted: #a6a6a6;/* -> #595959 */
  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #111111; --ink: #ffffff; --text-2: #d6d6d6; --muted: #a8a8a8; --guide: rgba(255, 255, 255, 0.09);
    --panel: #1c1c1c; --on-ink: #111111; --line: rgba(255, 255, 255, 0.18); --b-h1: #ffffff; --b-sec: #b0b0b0; --b-muted: #b9b9b9; --btn-edge: rgba(255, 255, 255, 0.5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #111111; --ink: #ffffff; --text-2: #d6d6d6; --muted: #a8a8a8; --guide: rgba(255, 255, 255, 0.09);
  --panel: #1c1c1c; --on-ink: #111111; --line: rgba(255, 255, 255, 0.18); --b-h1: #ffffff; --b-sec: #b0b0b0; --b-muted: #b9b9b9; --btn-edge: rgba(255, 255, 255, 0.5); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: 76px; }
body { background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.wrap { max-width: calc(var(--max) + 2 * 16px); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header .wrap { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lockup { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.lockup svg { display: block; fill: currentColor; }
.nav { display: flex; align-items: center; gap: 4px; }
.link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; border-radius: 8px; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* the language switcher (spec 2026-10-20-restable-net-languages L5): plain links, never a redirect */
.langs { display: inline-flex; align-items: center; margin-right: 2px; }
.langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 44px; padding-inline: 4px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 13px; letter-spacing: .03em; }
.langs a:hover { color: var(--ink); }
.langs a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
/* the footer repeats it; under 360px the header has no room for it beside the login link, so only the
   footer's shows (hreflang already sends a searcher to their own language) */
.foot-links .langs { margin-right: 8px; }
@media (max-width: 359px) { .site-header .langs { display: none; } }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 18px; background: var(--ink); color: var(--on-ink); border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.btn:hover { opacity: .88; }
.btn.lg { min-height: 52px; padding-inline: 22px; font-size: 17px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the scope: its own ground, so blended type has a backdrop to difference against */
.scope { position: relative; isolation: isolate; background: var(--ground); }
.guides { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.guides .wrap { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.bay { border-left: 1px dashed var(--guide); }
.bay:first-child { border-left-style: solid; }
.bay:last-child { border-right: 1px solid var(--guide); }
.ribbon { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }

.hero { padding-block: clamp(56px, 9vw, 104px) clamp(150px, 17vw, 220px); border-bottom: 1px solid var(--guide); }
.hero-copy { display: grid; gap: 30px; max-width: min(940px, 78%); }
.hero h1 { margin: 0; display: grid; gap: .28em; font-weight: 700; mix-blend-mode: difference; }
.hero h1 .primary { display: block; font-size: clamp(46px, 9.4vw, 124px); line-height: .95; letter-spacing: -0.045em; color: var(--b-h1); }
.hero h1 .secondary { display: block; max-width: 20em; font-size: clamp(22px, 3.1vw, 40px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; color: var(--b-sec); text-wrap: balance; }
.cta { display: grid; gap: 10px; justify-items: start; }
.note { font-size: 14px; color: var(--b-muted); mix-blend-mode: difference; }
.hero .note { max-width: 30ch; }   /* clear of the ribbon on a phone */
.closing .note { max-width: 56ch; }

/* the explanation, directly after the hero */
.explain { padding-block: clamp(48px, 7vw, 88px); }
.explain p { margin: 0; max-width: 26em; font-size: clamp(21px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; color: var(--ink); text-wrap: pretty; }



@media (max-width: 720px) {
  .guides .wrap { grid-template-columns: repeat(2, 1fr); }
  .bay:nth-child(n+3) { display: none; }
  .bay:nth-child(2) { border-right: 1px solid var(--guide); }
  .nav .hide-sm { display: none; }
  .hero-copy { max-width: none; gap: 26px; }
  }
/* shared section rhythm: every section sits on the grid and is separated by a hairline, like the hero */
.phone, .closing { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--guide); }
.eyebrow { display: block; margin-bottom: 14px; }
h2 { margin: 0; font-weight: 700; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }

/* phone assistant */
.phone-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.phone-copy { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); display: grid; gap: 18px; justify-items: start; min-width: 0; }
.phone-copy p { margin: 0; max-width: 30em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-2); }
.listen { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 26px; background: var(--ink); color: var(--on-ink); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.listen .dur { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.listen .i-pause { display: none; }
.listen[aria-pressed="true"] .i-play { display: none; }
.listen[aria-pressed="true"] .i-pause { display: block; }
.listen:hover { opacity: .9; }

.call { position: relative; margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--ground); padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 16px; box-shadow: 0 1px 0 var(--guide), 0 24px 60px -32px rgba(0,0,0,.28); }
.call-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; flex-wrap: wrap; }
.call-head .timer { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; }
.call-visual { display: block; }
.voice { width: 100%; height: 56px; display: block; }
.call-body { position: relative; }
.turns { list-style: none; margin: 0; padding: 4px 0; display: grid; gap: 14px; max-height: 440px; overflow-y: auto; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%); }
.turns li { position: relative; display: grid; gap: 3px; padding-left: 22px; transition: opacity .35s ease; cursor: pointer; }
.turns b { font-size: 13px; font-weight: 600; color: var(--muted); }
.turns q { quotes: "„" "”"; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.45; }
.turns li[data-who="r"] q { font-weight: 500; }
/* the logo's thick/thin pair marks who speaks: thick = the restaurant, thin = the guest */
.turns li::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; background: var(--ink); transition: background-color .3s ease; }
.turns li[data-who="r"]::before { width: 6px; }
.turns li[data-who="g"]::before { width: 1.5px; left: 2.25px; }
.call.playing .turns li { opacity: .3; }
.call.playing .turns li.said { opacity: .62; }
.call.playing .turns li.speaking { opacity: 1; }
.call.playing .turns li:not(.said)::before { background: var(--line); }
.call figcaption { font-size: 13px; color: var(--muted); line-height: 1.45; }

.facts { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.facts li { display: grid; gap: 8px; align-content: start; padding: 20px clamp(12px, 1.6vw, 24px) 4px 0; border-top: 2px solid var(--ink); margin-right: clamp(12px, 1.6vw, 24px); }
.facts b { font-size: 18px; letter-spacing: -0.01em; }
.facts span { font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* the widget, step by step: a real recording, pinned, that plays the part of the flow each step describes */
.site { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--guide); }
.site .lede { margin: 18px 0 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-2); }
.walk { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); margin-top: clamp(40px, 5vw, 64px); }
.steps { list-style: none; margin: 0; padding: 0 0 38vh; }   /* room for the last step to play through */
/* one step at a time: the current one at full strength, the next ones dimmed, the ones passed all but gone, so
   which step is "now" is never in doubt. Free scrolling (snapping felt artificial, owner 2026-10-20); a step
   becomes current as it reaches the reading line, and its part of the recording plays then */
.step { min-height: 52vh; padding-block: 24px; opacity: .3; transition: opacity .35s ease; }
.step.past { opacity: .12; }
.step.on { opacity: 1; }
/* a step's words stay in view while its part of the recording plays, then the next step takes over */
/* the number and its words stick as one, so they also let go as one (stuck apart, the taller words left first
   and the number stayed behind on its own) */
.step-in { display: grid; grid-template-columns: 40px 1fr; gap: 14px; position: sticky; top: 42vh; }
.step .n { display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.step.on .n { background: var(--ink); color: var(--on-ink); }
.step b { display: block; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; margin-top: 2px; }
.step p { margin: 8px 0 0; max-width: 26em; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.inline-shot { display: none; }
.frame-col { position: relative; }
.frame-stick { position: sticky; top: calc(100px + env(safe-area-inset-top, 0px)); }
.widget-view { position: relative; display: grid; grid-template-rows: 100%; justify-items: start; align-items: start; height: min(72vh, 720px); overflow: hidden; }   /* beside the steps */
.widget-view video { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.widget-view canvas { grid-area: 1 / 1; width: min(100%, 340px); height: auto; aspect-ratio: 728 / 1688; transform-origin: 0 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .25s ease; }
/* the hand-off (step 7): the open panel itself folds into the hero's ribbon and pours down into the corner,
   gathering there into the live launcher. A WebGL canvas under the recording (identical to it at the first
   frame) and over the pinned frame's ground (a phone's has one). */
.pour { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; }
.frame-stick.gliding { z-index: 30; }
.widget-view.pouring canvas { opacity: 0; transition: opacity .12s linear; }
.widget-live .widget-view canvas, .widget-live .widget-view img[data-shot="7"] { opacity: 0; }
/* the live launcher stays out of sight until the recording hands over to it (or the visitor opens it) */
.has-walk:not(.widget-live):not(.widget-opened) iframe[src^="https://widget.restable.net/w/"][src*="sdk=1"] { opacity: 0 !important; pointer-events: none !important; }
/* and it opens in one move: the frame snaps to its size. Eased (as the SDK did until its 2026-10-19 fix), it grew through every
   width in between, the widget reflowed at each and reported new heights, and the frame chased those in a
   second step: it looked as if it opened twice */
iframe[src^="https://widget.restable.net/w/"][src*="sdk=1"] { transition: opacity .3s ease !important; }
.widget-view.still canvas { display: none; }
.widget-view.still img { display: block; }
.widget-view img { grid-area: 1 / 1; display: none; width: auto; max-width: min(100%, 340px); max-height: 100%; height: auto; opacity: 0; transition: opacity .45s ease; }
.widget-view img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .widget-view canvas { display: none; } .widget-view img { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .turns li, .step, .widget-view img { transition: none; }
}
@media (max-width: 720px) {
  .phone-grid, .walk { grid-template-columns: 1fr; }
  .phone-copy { position: static; }
  .turns { max-height: 380px; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  /* phone: the desktop arrangement, compact. The frame pins under the header at about half the screen and
     the steps scroll beneath it; the step crossing the frame's lower edge picks the capture. */
  .walk { gap: 0; }
  .frame-col { display: contents; }
  .frame-stick { order: -1; top: calc(68px + env(safe-area-inset-top, 0px)); z-index: 2; padding: 8px 0 14px; }
  /* its ground is a layer of its own, so it can fold away with the card: its sides close in as the card's thirds
     fold over, then it clears from the top as the folded strip drains (the script sets --fold-*). When the
     card has gone, so has the ground, and the page behind is already there */
  .frame-stick::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ground);
    clip-path: inset(var(--fold-top, 0px) var(--fold-r, 0px) var(--fold-bottom, 0px) var(--fold-l, 0px)); }
  /* once the widget has poured out of it, the pinned frame is empty: it lets the page show through and
     stops taking taps, so the text scrolls up the whole screen instead of being cut at its edge. Its box
     stays, so nothing jumps; scrolling back (the recording returns) gives it its ground again. */
  .widget-live .frame-stick:not(.gliding) { pointer-events: none; }
  .widget-live .frame-stick:not(.gliding)::before { opacity: 0; }   /* handed over without the pour (reduced motion, an opened widget) */
  .widget-view { height: 50vh; justify-items: center; }
  .widget-view canvas { transform-origin: 50% 0; }
  .widget-view canvas { width: min(100%, 250px); }
  .widget-view img { max-width: min(100%, 250px); }
  .steps { padding-bottom: 22vh; }
  .step-in { top: calc(50vh + 100px + env(safe-area-inset-top, 0px)); grid-template-columns: 34px 1fr; }
  .step { min-height: 32vh; padding-block: 10px; }
  .step .n { width: 28px; height: 28px; font-size: 13px; }
  .step b { font-size: 20px; }
  .step p { font-size: 16px; margin-top: 6px; }
  .inline-shot { display: none; }
}


/* closing */
.closing-row { display: flex; align-items: end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .turns li { transition: none; }
}
@media (max-width: 720px) {
  .phone-grid { grid-template-columns: 1fr; }
  .phone-copy { position: static; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } }

/* step 7 points at the live widget's launcher in the bottom-right corner; the page never draws a launcher itself */
.try-btn { margin-top: 16px; }
/* measured on the live „Rezerwuj” pill: 12-15 px from the right, 20-21 px from the bottom, ~97 x 43 */
/* the live launcher, measured in the widget itself (2026-10-20): 102 x 45, corner 14 (widget.css .rw-pill: 12px 18px
   round a 15px/1.4 semibold label, the system font), 12px from the right and 16px off the bottom (sdk.js: 12 less the
   24px shadow room, 16 less the 32px below). The ring, the dark-mode edge and the pour's landing all draw to it: drawn to
   an older 97 x 43 guess, the outline sat narrower and off to one side, and the label looked off-centre inside it */
.try-ring { position: fixed; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2147483001; width: var(--live-w, 102px); height: 45px; border-radius: 14px; border: 2px solid var(--ink); opacity: 0; pointer-events: none; }
.live-edge { position: fixed; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2147483001; width: var(--live-w, 102px); height: 45px; border-radius: 14px; box-shadow: 0 0 0 1px var(--btn-edge); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.widget-live .live-edge, .widget-opened .live-edge { opacity: 1; }
.try-ring.on { animation: try-ring 1.4s ease-out 2; }   /* the landing: two pulses, then still */
.widget-open .try-ring, .widget-open .live-edge { display: none; }
@keyframes try-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .try-ring.on { animation: none; opacity: .5; } }

/* The widget's frame is a light document. On a dark page Chrome backs a frame whose colour scheme differs
   from its embedder's with an opaque white box; matching the scheme keeps the frame transparent. */
iframe[src^="https://widget.restable.net/"] { color-scheme: light; }

/* footer; on a phone the bottom 88 px stay clear for the widget launcher */
.site-footer { border-top: 1px solid var(--guide); padding-block: 40px; font-size: 15px; color: var(--text-2); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.foot-row .lockup { color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-inline: -8px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--ink); text-underline-offset: 4px; }
.foot-links .copy { color: var(--muted); padding-inline: 8px; }
@media (max-width: 720px) { .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } .foot-row { align-items: flex-start; flex-direction: column; } }