/* Sofaflick website. Tokens first, then each part of the home page in the order it appears. */
@font-face {
  font-family: "Stack Sans Headline";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/stack-sans-headline-300-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Stack Sans Headline";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/stack-sans-headline-300-latin.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: "Stack Sans Text";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/stack-sans-text-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Stack Sans Text";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/stack-sans-text-latin.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;
}

/* Tokens ------------------------------------------------------------------------------------ */
:root {
  color-scheme: light dark;
  --ground: #ffffff;
  --surface: #f0f1f6;
  --surface-deep: #e1e3ec;
  --ink: #15171f;
  --soft: #474b5b;
  --amber: #ffb000;
  --amber-deep: #e59c00;
  --amber-ink: #2a1b00;
  --field: #15171f;
  --field-deep: #0b0c11;
  --field-ink: #f5f6fa;
  --field-soft: #b9bdcc;
  --screen: #12141b;

  --margin: clamp(20px, 3vw, 44px);
  --display: clamp(40px, 6vw, 96px);
  --head: clamp(32px, 4vw, 60px);
  --lead: clamp(22px, 2.2vw, 32px);
  --body: clamp(17px, 0.3vw + 16px, 19px);
  --small: 15px;
  --headline: "Stack Sans Headline", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: "Stack Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f1117;
    --surface: #1b1e29;
    --surface-deep: #262a38;
    --ink: #f1f2f7;
    --soft: #b4b9c9;
    --field: #07080c;
    --field-deep: #000000;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--body)/1.5 var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 0.2em; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.get-app :focus-visible, .foot :focus-visible { outline-color: var(--amber); }
.wrap { padding-inline: var(--margin); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--ground); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 12px; }
.small { font-size: var(--small); color: var(--soft); }

h1, h2, h3, .statement, .giant, .price, .poster .word, .mark { font-family: var(--headline); font-weight: 300; letter-spacing: -0.022em; }

/* Buttons: one shape, a cut top left corner (the same cut as the stage in the hero) ---------------- */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  font: 500 var(--body)/1.2 var(--text); text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:focus-visible { outline-offset: -7px; }
.btn small { font-size: var(--small); font-weight: 400; }
.btn.primary { background: var(--ink); color: var(--ground); }
.btn.ghost { background: var(--surface-deep); color: var(--ink); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.soon { cursor: default; opacity: 0.72; }
.btn.soon:hover { transform: none; }

/* Top bar ------------------------------------------------------------------------------------- */
.top { position: relative; z-index: 10; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 var(--lead)/1 var(--headline); letter-spacing: -0.03em; }
.brand img { width: 32px; height: 32px; display: block; }
.nav { display: flex; align-items: center; gap: 28px; font-size: var(--small); }
.nav a:not(.btn) { text-decoration: none; padding: 6px 0; transition: opacity 0.2s var(--ease); }
.nav a:not(.btn):hover { opacity: 0.6; }
.nav .get { min-height: 44px; padding: 0 20px; background: var(--amber); color: var(--amber-ink); font-size: var(--small); font-weight: 500; }
.nav .lang { font-weight: 500; }

/* Hero ---------------------------------------------------------------------------------------- */
.hero { padding-top: 64px; }
h1 { font-size: var(--display); line-height: 1.05; white-space: nowrap; }
html[lang="pl"] h1 { font-size: clamp(32px, 4.5vw, 70px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--margin); padding-left: var(--margin); margin-top: 48px; align-items: stretch; }
.hero-copy { display: grid; align-content: start; gap: 24px; padding-bottom: 56px; }
.lead { font-size: var(--body); line-height: 1.5; max-width: 40ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.fine { font-size: var(--small); color: var(--soft); }
.stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 36px; align-items: center; align-content: center;
  min-height: min(620px, 70svh); padding: 72px 56px 56px; background: var(--amber); color: var(--amber-ink);
  clip-path: polygon(88px 0, 100% 0, 100% 100%, 0 100%, 0 88px);
}
.demo-note { grid-column: 1 / -1; font-size: var(--small); font-weight: 500; }

/* The demo: a post with the TV button, and the TV ---------------------------------------------- */
.post[data-ui] { position: relative; background: #fff; color: #15171f; border-radius: 16px; padding: 14px; box-shadow: 0 10px 30px rgba(15, 17, 23, 0.12); }
.post .who { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.skel { background: #e3e5ee; border-radius: 6px; height: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #e3e5ee; flex: none; }
.video { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #2d1b47; }
.video .bar-fill { position: absolute; left: 0; bottom: 0; height: 4px; width: 38%; background: #fff; z-index: 1; }
.post .lines { display: grid; gap: 8px; margin-top: 14px; }
.sfbtn {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; height: 34px; min-width: 34px; padding: 0 8px;
  border: 0; border-radius: 17px; background: rgba(15, 17, 23, 0.82); color: #fff; font: 500 13px/1 var(--text); cursor: pointer;
  transition: background-color 0.18s, color 0.18s, transform 0.18s;
}
.sfbtn:active { transform: scale(0.96); }
.sfbtn .ic { width: 18px; height: 18px; display: block; flex: none; overflow: visible; }
.sfbtn .ic .scr, .sfbtn .ic .stand, .sfbtn .ic .tick { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sfbtn .ic .pl { fill: currentColor; transition: transform 0.38s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.25s; }
.sfbtn .ic .tick { opacity: 0; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 0.3s 0.2s, opacity 0.1s 0.2s; }
.sfbtn .lbl { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.22s ease, opacity 0.18s ease, margin 0.22s ease; }
.sfbtn:hover .lbl, .sfbtn:focus-visible .lbl, .sfbtn.hint .lbl, .sfbtn[data-s="busy"] .lbl, .sfbtn[data-s="ok"] .lbl, .sfbtn.show .lbl { max-width: 220px; opacity: 1; margin-left: 8px; }
.sfbtn:hover, .sfbtn[data-s="ok"], .sfbtn.show { background: var(--amber); color: var(--amber-ink); }
.sfbtn[data-s="ok"] .ic .pl { transform: translateX(7px); opacity: 0; }
.sfbtn[data-s="ok"] .ic .tick { opacity: 1; stroke-dashoffset: 0; }
.sfbtn[data-s="busy"] .ic .pl { animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

/* A hand drawn arrow that points at the demo button, drawn once and gone after the first press ------ */
.doodle { --s: 1.1; position: absolute; top: -50px; right: -4px; width: 250px; height: 120px; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 1px rgba(42, 27, 0, 0.6)) drop-shadow(0 2px 3px rgba(42, 27, 0, 0.3)); transform: scale(var(--s)); transform-origin: 204px 112px; transition: opacity 0.4s; z-index: 3; }
.doodle path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.doodle .shaft { animation: draw 0.9s var(--ease) 1.7s forwards; }
.doodle .head { animation: draw 0.3s ease-out 2.55s forwards; }
.doodle .head.h2 { animation-delay: 2.7s; }
.doodle .nudge { animation: nudge 1.4s ease-in-out 3.4s 3; }
.stage.used .doodle { opacity: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes nudge { 50% { transform: translate(1px, 7px); } }

.tv { display: grid; justify-items: center; }
.tv-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--screen); border: 9px solid #1f2230; border-radius: 14px; overflow: hidden; transition: border-color 0.5s; }
.tv-screen .content { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s; }
.tv-screen .status { position: absolute; left: 12px; bottom: 10px; right: 12px; font-size: 13px; font-weight: 500; color: #cfd3e3; display: flex; align-items: center; gap: 8px; z-index: 3; }
.tv-screen .dot { width: 8px; height: 8px; border-radius: 50%; background: #5a5f73; flex: none; }
.tv.on .tv-screen { border-color: #2a2d3d; }
.tv.on .content { opacity: 1; }
.tv.on .dot { background: var(--amber); }
.tv.on .status { color: #fff; }
.tv-stand { width: 22%; height: 12px; background: #1f2230; border-radius: 0 0 8px 8px; }
.tv-foot { width: 38%; height: 6px; background: #1f2230; border-radius: 3px; }
.flick { position: fixed; z-index: 60; width: 22px; height: 22px; pointer-events: none; left: 0; top: 0; }
.flick svg { width: 100%; height: 100%; display: block; }
.w30 { width: 30%; } .w46 { width: 46%; } .w60 { width: 60%; } .w70 { width: 70%; } .w92 { width: 92%; }
.grow { flex: 1; display: grid; gap: 6px; }

/* How it works: three tiles that grow, order carried by size -------------------------------------- */
section { padding-block: clamp(96px, 11vw, 176px) 0; }
.hero { padding-bottom: 0; }
h2 { font-size: var(--head); line-height: 1.05; }
.tiles-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 10px; align-items: end; }
.how-title { grid-column: 1 / 8; grid-row: 1; align-self: start; max-width: 12ch; }
.tiles { display: contents; }
.tile { grid-row: 1; display: grid; gap: 6px; align-content: end; }
.tile h3 { font-size: var(--lead); font-weight: 400; margin-top: 18px; }
.tile p { font-size: var(--body); max-width: 34ch; }
.t1 { grid-column: 1 / 4; } .t2 { grid-column: 4 / 8; } .t3 { grid-column: 8 / 13; }
.tile-box { display: grid; place-items: center; padding: 20px; overflow: hidden; }
.t1 .tile-box { padding: 6px; height: 30vh; min-height: 220px; background: var(--surface); }
.t2 .tile-box { height: 44vh; min-height: 300px; background: var(--amber); }
.t3 .tile-box { height: 60vh; min-height: 420px; background: var(--field); color: var(--field-ink); }

/* Interface fragments (marked data-ui): the extension's own components --------------------------- */
.ui { font-family: var(--text); font-size: 14px; line-height: 1.35; }
.ui .g { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.found { display: grid; gap: 12px; width: 100%; max-width: 318px; min-height: 212px; align-content: center; padding: 20px; border-radius: 14px; background: #fff; color: #15171f; font-weight: 500; }
.found-row { display: flex; align-items: center; gap: 10px; }
.found-row .g { color: #0c5a33; }
.found-ok { padding: 12px 14px; border-radius: 10px; background: #e2f4ea; color: #0c5a33; }
.clip { width: min(100%, 340px); }
.clipvid { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #2d1b47; }
.clipvid .sfbtn { cursor: default; }
.popup { width: min(100%, 330px); min-height: 300px; border-radius: 14px; overflow: hidden; background: #181b24; color: #f1f2f7; }
.pop-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--amber); color: var(--amber-ink); font: 500 17px/1 var(--headline); letter-spacing: -0.02em; }
.pop-device { display: flex; align-items: center; gap: 12px; margin: 14px 14px 0; padding: 12px; border-radius: 10px; background: #2a2316; }
.pop-device svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pop-device svg:first-child { width: 22px; height: 22px; flex: none; }
.pop-device span { display: grid; flex: 1; }
.pop-device small { color: #b4b9c9; }
.pop-device .g { color: var(--amber); width: 18px; height: 18px; }
.pop-status { display: flex; align-items: center; gap: 8px; margin: 14px 18px 0; font-weight: 500; }
.pop-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.pop-ctl { display: flex; gap: 10px; margin: 14px 18px 0; }
.round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--amber); color: var(--amber-ink); }
.round.alt { background: #2a2d3d; color: #f1f2f7; }
.pop-plan { display: grid; gap: 8px; margin: 16px 18px 18px; color: #b4b9c9; font-weight: 500; }
.gauge { display: block; height: 6px; background: #2a2d3d; border-radius: 3px; overflow: hidden; }
.gauge i { display: block; height: 100%; background: var(--amber); }
.meter { display: grid; gap: 8px; padding: 14px 16px; border-radius: 10px; background: #fff; color: #15171f; font-weight: 500; }
.meter .gauge { background: #e3e5ee; }

/* Download: the app, set as a poster on a dark field ---------------------------------------------- */
.get-app { background: var(--field); color: var(--field-ink); margin-top: clamp(96px, 11vw, 176px); padding-block: clamp(72px, 8vw, 120px); }
.poster { display: grid; }
.dl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 24px; padding-block: 4px; transition: opacity 0.25s var(--ease); outline-offset: 4px; }
.poster .word { font-size: var(--display); line-height: 0.98; text-decoration: none; transition: color 0.2s var(--ease); }
.facts { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; font-size: var(--body); font-variant-numeric: tabular-nums; }
.fact { color: var(--field-ink); }
.you { font-weight: 500; color: var(--amber); }
.ver { color: var(--field-soft); }
.dl.current .word { color: var(--amber); }
.poster:hover .dl:not(:hover), .poster:focus-within .dl:not(:focus-within) { opacity: 0.38; }
.dl:hover .word, .dl:focus-within .word { color: var(--amber); }
.how-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.how-list strong { font-weight: 500; }
.sha { grid-column: 1 / -1; font-size: var(--small); color: var(--field-soft); }
.sha code { overflow-wrap: anywhere; }
.poster-foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--margin); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.preview { min-height: 3em; max-width: 36ch; font-size: var(--lead); line-height: 1.25; color: var(--amber); }
.poster-notes { display: grid; gap: 16px; max-width: 56ch; }
.poster-notes .small { color: var(--field-soft); }

/* Devices: one statement with small pictures in it ------------------------------------------------ */
.statement { font-size: var(--lead); line-height: 1.22; max-width: 26em; }
.slot { display: inline-grid; place-items: center; width: 1.9em; height: 1em; margin-inline: 0.12em; border-radius: 0.18em; background: var(--amber); color: var(--amber-ink); vertical-align: -0.12em; }
.slot svg { width: 0.7em; height: 0.7em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dev-more { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 10px; margin-top: 72px; }
.dev-more dl { grid-column: 1 / 7; display: grid; gap: 4px; }
.dev-more dt { font-weight: 500; margin-top: 18px; }
.dev-more dt:first-child { margin-top: 0; }
.need { grid-column: 8 / 13; }
.need h3 { font: 500 var(--body)/1.4 var(--text); letter-spacing: 0; margin-bottom: 4px; }

/* Privacy: a dark band, the promise on the left and the details on the right ------------------------ */
.privacy { background: var(--field); color: var(--field-ink); margin-top: clamp(96px, 11vw, 176px); padding-block: clamp(72px, 8vw, 120px); }
.privacy :focus-visible { outline-color: var(--amber); }
.privacy-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 10px; }
.privacy-title { grid-column: 1 / 7; font-size: var(--head); max-width: 10ch; }
.privacy-body { grid-column: 7 / 13; display: grid; gap: 22px; max-width: 560px; }
.privacy-lead { font-size: var(--lead); line-height: 1.25; }
.privacy-points { display: grid; gap: 10px; }
.privacy-points li { padding: 14px 18px; background: var(--field-deep); border-left: 4px solid var(--amber); }
.privacy-belief { color: var(--field-soft); }
.privacy .small { color: var(--field-soft); }
.privacy-link { color: var(--amber); text-underline-offset: 4px; }

/* Websites: one giant word, then bars --------------------------------------------------------------- */
.sites-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sites-col { grid-column: 5 / 13; container-type: inline-size; display: grid; gap: 24px; max-width: 640px; }
.giant { font-size: 22cqw; line-height: 0.85; letter-spacing: -0.04em; margin-bottom: 8px; }
.sites-lead { font-size: var(--lead); line-height: 1.25; }
.bars { display: grid; gap: 6px; }
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 18px; background: var(--surface); }
.bar-row strong { font-weight: 500; }
.bar-row span { font-size: var(--small); color: var(--soft); }
.bar-row.available { background: var(--amber); color: var(--amber-ink); }
.bar-row.available span { color: var(--amber-ink); font-weight: 500; }

/* Pricing: the bigger plan is literally bigger ------------------------------------------------------ */
.plans { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; }
.p-title { grid-column: 1 / 5; align-self: start; grid-row: 1; }
.plan { display: grid; grid-template-rows: 1fr auto; grid-row: 1; }
.plan.free { grid-column: 5 / 9; min-height: 430px; background: var(--surface); }
.plan.full { grid-column: 9 / 13; min-height: 560px; background: var(--amber); color: var(--amber-ink); }
.plan-body { padding: 28px; display: grid; gap: 14px; align-content: start; }
.plan h3 { font: 500 var(--lead)/1.1 var(--text); letter-spacing: -0.01em; }
.price { font-size: var(--head); line-height: 1; }
.price small { font-size: var(--body); letter-spacing: 0; }
.plan ul { display: grid; gap: 6px; }
.plan .meter { margin-top: 14px; }
.strip { padding: 20px 28px; font-weight: 500; }
.plan.free .strip { background: var(--surface-deep); }
.plan.full .strip { background: var(--amber-deep); }
.pnote { margin-top: 28px; max-width: 56ch; }

/* Questions: index cards in a drawer -------------------------------------------------------------------- */
.faq .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.faq h2 { grid-column: 3 / 11; margin-bottom: 40px; }
.cards { grid-column: 3 / 11; }
.card { position: relative; margin-top: -40px; padding-top: 40px; transition: background-color 0.3s var(--ease); }
.card:first-child { margin-top: 0; }
.card { --tab: 150px; --step: 90px; --x: 0px; }
.card.c1 { --x: 0px; } .card.c2 { --x: calc(1 * var(--step)); } .card.c3 { --x: calc(2 * var(--step)); } .card.c4 { --x: calc(3 * var(--step)); }
.card.c5 { --x: calc(4 * var(--step)); } .card.c6 { --x: calc(5 * var(--step)); } .card.c7 { --x: calc(6 * var(--step)); } .card.c8 { --x: calc(7 * var(--step)); } .card.c9 { --x: calc(8 * var(--step)); }
.card { clip-path: polygon(0 40px, var(--x) 40px, var(--x) 0, calc(var(--x) + var(--tab)) 0, calc(var(--x) + var(--tab)) 40px, 100% 40px, 100% 100%, 0 100%); }
.card:nth-child(3n+1) { background: var(--surface); }
.card:nth-child(3n+2) { background: var(--amber); color: var(--amber-ink); }
.card:nth-child(3n) { background: var(--field); color: var(--field-ink); }
.card summary { display: block; cursor: pointer; list-style: none; position: relative; min-height: 112px; padding: 28px 28px 52px; }
.card summary::-webkit-details-marker { display: none; }
.q { display: block; font-size: var(--body); font-weight: 500; line-height: 1.3; max-width: 40ch; }
.card p { padding: 0 28px 56px; max-width: 54ch; }
.card summary:hover .q { text-decoration: underline; text-decoration-thickness: 1px; }
.card summary:focus-visible { outline-offset: -8px; }

/* Footer: the name returns at full width ------------------------------------------------------------------ */
.foot { background: var(--field); color: var(--field-ink); margin-top: clamp(96px, 11vw, 176px); padding-block: clamp(56px, 7vw, 96px) 40px; }
.mark { container-type: inline-size; font-size: 13vw; line-height: 0.82; letter-spacing: -0.05em; color: var(--amber); white-space: nowrap; text-align: right; margin-right: 0.023em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 48px; font-size: var(--body); }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.co { margin-top: 18px; max-width: 70ch; font-size: var(--small); color: var(--field-soft); }

/* Legal and contact pages ---------------------------------------------------------------------------------- */
.doc { max-width: 760px; padding-block: 72px 0; margin-inline: auto; }
.doc h1 { font-size: var(--head); white-space: normal; margin-bottom: 24px; }
.doc h2 { font-size: var(--lead); font-family: var(--text); font-weight: 500; letter-spacing: -0.01em; margin: 44px 0 10px; }
.doc p { margin-bottom: 14px; }
.doc .upd { color: var(--soft); font-size: var(--small); }
.doc .lead3 { font-size: var(--lead); line-height: 1.25; max-width: 28ch; margin-bottom: 28px; }
.doc .btn { text-decoration: none; }
.doc + .foot, main + .foot { margin-top: clamp(72px, 9vw, 128px); }

/* Where Stripe sends people back to -------------------------------------------------------------------------- */
.done { padding-top: 64px; }
.done h1 { white-space: normal; }
.done-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--margin); padding-left: var(--margin); margin-top: 48px; align-items: stretch; }
.done .lead { align-self: start; }
.done-stage { display: grid; place-items: center; min-height: min(520px, 62svh); padding: 72px 56px 56px; background: var(--amber); clip-path: polygon(88px 0, 100% 0, 100% 100%, 0 100%, 0 88px); }
.done-stage .tv { width: min(100%, 560px); }
.done + .foot, main:has(.done) + .foot { margin-top: 0; }

/* Motion: the entrance of every part, once, and nothing hidden when the script is missing ----------------- */
html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv.d1 { transition-delay: 70ms; } html.js .rv.d2 { transition-delay: 140ms; } html.js .rv.d3 { transition-delay: 210ms; }
html.js .stage { opacity: 0; transform: translateX(40px); transition: opacity 0.8s var(--ease) 0.15s, transform 0.8s var(--ease) 0.15s; }
html.js .stage.in { opacity: 1; transform: none; }
html.js h1 { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js h1.in { opacity: 1; transform: none; }

/* Narrow screens ------------------------------------------------------------------------------------------------ */
@media (max-width: 1020px) { .nav a:not(.get):not(.lang) { display: none; } }
@media (max-width: 900px) {
  h1 { font-size: 5.8vw; }
  html[lang="pl"] h1 { font-size: 4.2vw; }
  .hero { padding-top: 40px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding-right: var(--margin); margin-top: 28px; }
  .hero-copy { padding-bottom: 36px; }
  .lead { max-width: 32ch; }
  .stage { grid-template-columns: minmax(0, 1fr); margin-right: calc(var(--margin) * -1); margin-left: calc(var(--margin) * -1); padding: 56px var(--margin) 40px; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px); gap: 24px; }
  .done-grid { grid-template-columns: minmax(0, 1fr); padding-right: var(--margin); margin-top: 28px; }
  .done-stage { min-height: 0; margin-right: calc(var(--margin) * -1); margin-left: calc(var(--margin) * -1); padding: 56px var(--margin) 40px; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px); }
  .tiles-grid { display: block; }
  .how-title { margin-bottom: 36px; max-width: none; }
  .tiles { display: grid; gap: 28px; }
  .tile { display: block; grid-row: auto; }
  .t1, .t2, .t3 { grid-column: auto; }
  .t1 .tile-box { height: auto; min-height: 34vw; } .t2 .tile-box { height: auto; min-height: 46vw; } .t3 .tile-box { height: auto; min-height: 62vw; }
  .dl { grid-template-columns: minmax(0, 1fr); }
  .facts { justify-content: flex-start; margin-top: 4px; }
  .how-list { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: grid; gap: 10px; margin-top: 36px; color: var(--field-soft); }
  .poster-foot { grid-template-columns: minmax(0, 1fr); }
  .preview { display: none; }
  .dev-more { display: block; margin-top: 48px; }
  .need { margin-top: 36px; }
  .sites-col { grid-column: 1 / -1; }
  .privacy-title, .privacy-body { grid-column: 1 / -1; }
  .plans { display: grid; grid-template-columns: minmax(0, 1fr); }
  .p-title { grid-column: 1; margin-bottom: 20px; }
  .plan.free, .plan.full { grid-column: 1; grid-row: auto; min-height: 0; }
  .faq h2, .cards { grid-column: 1 / -1; }
  .card { --tab: 120px; --step: 40px; }
  .mark { font-size: 17vw; }
}
@media (max-width: 900px) { .post { max-width: 420px; } .tv { max-width: 520px; } .doodle { --s: 0.9; } }
@media (max-width: 600px) {
  h1 { white-space: normal; font-size: 10vw; }
  html[lang="pl"] h1 { font-size: 8.4vw; }
}
@media (max-width: 420px) { .brand span { display: none; } .nav { gap: 16px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv, html.js .stage, html.js h1 { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* the scene: a still on the small video, a running clip on the TV */
.scene { position: absolute; inset: 0; overflow: hidden; background: #2d1b47; }
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene .cone { opacity: 0.1; }
.scene .arm-l { transform: rotate(8deg); } .scene .arm-r { transform: rotate(-8deg); }
.scene .note { opacity: 0; }
.scene .arm, .scene .head, .scene .tail, .scene .foot, .scene .dancer, .scene .ball, .scene .rise { transform-box: view-box; }
.scene .arm-l { transform-origin: -8px 55px; } .scene .arm-r { transform-origin: 8px 55px; }
.scene .head { transform-origin: 0 52px; }
.scene .tail { transform-origin: 7px 72px; }
.scene .ball { transform-origin: 80px 9px; }
.tv-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--lamp); z-index: 2; }
.tv.on .scene .cone.c1 { animation: flash 0.6s ease-in-out infinite alternate; }
.tv.on .scene .cone.c2 { animation: flash 0.6s ease-in-out infinite alternate-reverse; }
.tv.on .scene .ball { animation: turn 5s linear infinite; }
.tv.on .scene .dancer { animation: bounce 0.6s ease-in-out infinite; }
.tv.on .scene .arm-l { animation: raise-l 0.6s ease-in-out infinite alternate; }
.tv.on .scene .arm-r { animation: raise-r 0.6s ease-in-out infinite alternate-reverse; }
.tv.on .scene .head { animation: nod 1.2s ease-in-out infinite alternate; }
.tv.on .scene .tail { animation: swish 0.6s ease-in-out infinite alternate; }
.tv.on .scene .f1 { animation: step 1.2s ease-in-out infinite; } .tv.on .scene .f2 { animation: step 1.2s ease-in-out infinite -0.6s; }
.tv.on .scene .note { animation: show 2.4s linear infinite; }
.tv.on .scene .rise { animation: float 2.4s linear infinite; }
.tv.on .tv-bar { animation: fill 9s linear forwards; }
.tv.on .scene .late .dancer, .tv.on .scene .late .arm, .tv.on .scene .late .head, .tv.on .scene .late .tail { animation-delay: 0.3s; }
.tv.on .scene .n1, .tv.on .scene .n1 .rise { animation-delay: 0.8s; }
.tv.on .scene .n2, .tv.on .scene .n2 .rise { animation-delay: 1.6s; }
@keyframes flash { from { opacity: 0.04; } to { opacity: 0.26; } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes raise-l { from { transform: rotate(8deg); } to { transform: rotate(150deg); } }
@keyframes raise-r { from { transform: rotate(-8deg); } to { transform: rotate(-150deg); } }
@keyframes nod { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes swish { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes step { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-2.6px); } 50% { transform: translateY(0); } }
@keyframes show { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-26px); } }
@keyframes fill { to { width: 100%; } }