/* Folio Studio Developers. One family (Inter), one accent on the main buttons, dark by default when the system is dark. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/inter-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: "Inter fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --bg: #f3f3f1; --panel: #e8e7e3; --panel-2: #dedcd6; --ink: #141518; --muted: #575b64; --line: #d2d0ca;
  --accent: #c2410c; --on-accent: #ffffff; --inv: #141518; --on-inv: #f3f3f1; --inv-muted: #b4b7be;
  --t1: clamp(46px, 7vw, 124px); --t2: clamp(34px, 5vw, 80px); --t3: clamp(21px, 1.9vw, 28px); --t4: 18px; --t5: 16px;
  --m: clamp(16px, 3vw, 48px); --gap: clamp(104px, 11vw, 176px); --col: 20px; --r: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1); --pop: cubic-bezier(.34, 1.5, .64, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0e0f12; --panel: #16181d; --panel-2: #1d2027; --ink: #f1f1ef; --muted: #a6aab3; --line: #2a2d34;
    --accent: #fb923c; --on-accent: #141518; --inv: #ecebe8; --on-inv: #0e0f12; --inv-muted: #4f535b; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0e0f12; --panel: #16181d; --panel-2: #1d2027; --ink: #f1f1ef; --muted: #a6aab3; --line: #2a2d34;
  --accent: #fb923c; --on-accent: #141518; --inv: #ecebe8; --on-inv: #0e0f12; --inv-muted: #4f535b; color-scheme: dark; }

* { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body { background: var(--bg); color: var(--ink); font-family: Inter, "Inter fallback", system-ui, sans-serif; font-size: var(--t4); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color .35s ease, color .35s ease; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
ul, ol { list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -80px; z-index: 100; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ink); color: var(--bg); }
html { scrollbar-color: var(--muted) var(--bg); }

/* headings share one voice */
h2, .line { font-size: var(--t2); font-weight: 800; letter-spacing: -0.045em; line-height: .98; }

/* buttons: one shape, accent only here */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-weight: 650; font-size: 17px; text-decoration: none; transition: transform .3s var(--ease), background-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn.ghost { background: var(--panel); color: var(--ink); }
.btn.ghost:hover { background: var(--panel-2); }

/* nav: plain bar that turns solid once the page moves */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--m);
  transition: background-color .3s, transform .4s var(--ease); }
.nav.solid { background: var(--bg); }
.nav.away { transform: translateY(-100%); }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; text-decoration: none; font-weight: 800; letter-spacing: -0.02em; font-size: 17px; }
.logo b { font-weight: 600; color: var(--muted); }
.links { display: flex; gap: 4px 26px; font-size: var(--t5); font-weight: 550; }
.links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--muted); transition: color .2s; }
.links a:hover, .links a.here { color: var(--ink); }
.nav-end { display: flex; align-items: center; gap: 10px; }
.theme { min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--panel); font-weight: 600; font-size: 16px; cursor: pointer; }
.theme:hover { background: var(--panel-2); }
.mk-d, .t-to-dark { display: none; }
:root[data-theme="dark"] .mk-l, :root[data-theme="dark"] .t-to-dark { display: none; }
:root[data-theme="dark"] .mk-d, :root[data-theme="dark"] .t-to-light { display: inline; }
:root[data-theme="light"] .t-to-light { display: none; } :root[data-theme="light"] .t-to-dark { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-l { display: none; } :root:not([data-theme="light"]) .mk-d { display: inline; } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .t-to-light { display: none; } :root:not([data-theme="dark"]) .t-to-dark { display: inline; } }

/* hero: words on the left, the ring of real sites on the right */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); align-items: center; padding: 96px var(--m) 72px; }
.hero-text { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 2; pointer-events: none; }
.hero-text a, .hero-text p { pointer-events: auto; }
.hero h1 { font-size: var(--t1); font-weight: 800; letter-spacing: -0.05em; line-height: .94; }
.hero h1 .ln { display: block; white-space: nowrap; }
.lede { margin-top: 28px; max-width: 44ch; font-size: var(--t3); line-height: 1.35; letter-spacing: -0.01em; color: var(--muted); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.stage { grid-column: 7 / 13; grid-row: 1; position: relative; height: min(80svh, 820px); margin-right: calc(var(--m) * -1); }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; touch-action: pan-y; }
.stage-still { position: absolute; left: 50%; top: 50%; width: min(56%, 420px); transform: translate(-50%, -50%); border-radius: 28px; }
.stage.live .stage-still { display: none; }
.tip { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 999px; font-size: 16px; font-weight: 600; white-space: nowrap;
  opacity: 0; scale: .8; transition: opacity .2s, scale .25s var(--pop); }
.tip.on { opacity: 1; scale: 1; }
.hint { position: absolute; right: calc(var(--m) + 84px); bottom: 32px; font-size: var(--t5); color: var(--muted); }

/* kinds: hover a line and its sites fan out as cards */
.kinds { padding: var(--gap) var(--m) 0; }
.kinds-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); align-items: end; }
.kinds-head h2 { grid-column: 1 / 8; }
.kinds-head p { grid-column: 9 / 13; color: var(--muted); }
.on-touch { display: none; }
@media (hover: none) { .on-hover { display: none; } .on-touch { display: inline; } }
.kind-list { margin-top: 40px; display: grid; gap: 6px; }
.kind { position: relative; border-radius: var(--r); transition: background-color .3s; }
.kind:hover, .kind.open, .kind:focus-within { background: var(--panel); }
.kind-row { width: 100%; display: grid; grid-template-columns: 7fr 4fr 176px 2fr; gap: 20px; align-items: center; padding: 18px 22px; background: none; border: 0; text-align: left; cursor: pointer; }
.k-name { font-size: clamp(30px, 4.4vw, 72px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--muted); transition: color .25s, transform .5s var(--ease); }
.k-what { color: var(--muted); }
.k-days { text-align: right; font-weight: 650; }
.k-thumb { width: 176px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--panel-2); transition: opacity .3s, scale .4s var(--pop); }
.k-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kind:hover .k-thumb, .kind.open .k-thumb, .kind:focus-within .k-thumb { opacity: 0; scale: .7; }
.kind:hover .k-name, .kind.open .k-name, .kind-row:focus-visible .k-name { color: var(--ink); transform: translateX(14px); }
.deck { position: absolute; right: 24%; top: 50%; z-index: 5; width: 0; height: 0; pointer-events: none; }
.card { position: absolute; left: 0; top: 0; width: 300px; text-decoration: none; color: var(--ink); opacity: 0; transform-origin: 50% 120%;
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) rotate(0deg) scale(.55);
  transition: transform .55s var(--pop), opacity .25s ease; transition-delay: calc(var(--i, 0) * 45ms); }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 12px; background: var(--panel); outline: 8px solid var(--panel-2); }
.card.tall { width: 150px; } .card.tall img { aspect-ratio: 9 / 19.5; }
.card.contain img { object-fit: contain; background: var(--panel-2); }
.card span { display: block; margin-top: 14px; font-size: 16px; line-height: 1.35; color: var(--muted); background: var(--bg); padding: 8px 12px; border-radius: 12px; width: max-content; max-width: 100%; }
.card b { display: block; color: var(--ink); font-size: 16px; }
.kind:hover, .kind.open, .kind:focus-within { z-index: 6; }
.kind:hover .deck, .kind.open .deck, .kind:focus-within .deck { pointer-events: auto; }
.kind:hover .card, .kind.open .card, .kind:focus-within .card { opacity: 1; transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
.kind .card:hover, .kind .card:focus-visible { transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) translate(var(--dx), calc(var(--dy) - 18px)) rotate(0deg) scale(1.06) !important; z-index: 3; transition-delay: 0ms; }
.card:nth-child(1) { --i: 0; --dx: -170px; --dy: -10px; --rot: -7deg; }
.card:nth-child(2) { --i: 1; --dx: 40px; --dy: 18px; --rot: 3deg; }
.card:nth-child(3) { --i: 2; --dx: 250px; --dy: -6px; --rot: 9deg; }
.card.tall:nth-child(2) { --dx: 120px; --dy: 30px; }
.kinds-note { margin-top: 32px; max-width: 60ch; color: var(--muted); }

/* why: drag the line between a PDF and a site */
.why { padding: var(--gap) var(--m) 0; }
.why-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); align-items: end; }
.why-head h2 { grid-column: 1 / 9; }
.why-head p { grid-column: 9 / 13; color: var(--muted); }
.compare { position: relative; margin-top: 48px; aspect-ratio: 16 / 8.2; border-radius: var(--r); overflow: hidden; background: var(--panel); user-select: none; }
.pane { position: absolute; inset: 0; }
.pdf { background: #5f6168; display: flex; flex-direction: column; }
.pdf-bar { display: flex; justify-content: space-between; padding: 12px 18px; background: #3a3c42; color: #d8d9dc; font-size: 14px; }
.pdf-page { margin: 4% auto 0; width: min(46%, 520px); background: #fbfbfa; flex: 1; padding: 6% 6% 0; display: flex; flex-direction: column; gap: 10px; }
.pdf-page b { font-size: clamp(14px, 1.6vw, 22px); color: #2a2b2f; letter-spacing: .04em; }
.pdf-page b.h { font-size: 12px; margin-top: 10px; color: #6c6e74; }
.pdf-page i { display: block; height: 8px; border-radius: 2px; background: #d6d7da; }
.pdf-page i.s { width: 60%; }
.site { background: #ffffff; color: #15171b; clip-path: inset(0 0 0 var(--x)); font-size: 15px; }
.ui-top { display: flex; gap: 22px; padding: 18px 26px; background: #f1f1ef; font-size: 14px; color: #4a4e57; }
.ui-top b { color: #15171b; margin-right: auto; }
.ui-hero { padding: 4% 26px 2.4%; }
.ui-k { font-size: 14px; color: #4a4e57; font-weight: 600; }
.ui-h { font-size: clamp(22px, 3.4vw, 54px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 10px 0 12px; max-width: 15ch; }
.ui-s { color: #4a4e57; max-width: 44ch; }
.ui-btn { display: inline-block; margin-top: 16px; background: #15171b; color: #fff; padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.site-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 0 26px 26px; align-items: start; }
.ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 26px; }
.ui-hero { padding-right: 26px; }
.ui-card { height: clamp(80px, 11vw, 160px); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; font-size: 14px; line-height: 1.3; }
.ui-card span { font-size: 13px; opacity: .8; }
.c1 { background: #dfe9e4; } .c2 { background: #f1dfd3; } .c3 { background: #e2e2ee; } .c4 { background: #ece7da; }
.handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: var(--ink); pointer-events: none; }
.handle span { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--ink); }
.handle span::before, .handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 7px solid transparent; margin-top: -7px; }
.handle span::before { left: 11px; border-right-color: var(--bg); border-left: 0; }
.handle span::after { right: 11px; border-left-color: var(--bg); border-right: 0; }
.compare { cursor: ew-resize; touch-action: pan-y; }
.compare input { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; margin: 0; }
.compare:has(input:focus-visible) .handle span { outline: 3px solid var(--accent); outline-offset: 3px; }
.compare-cap { margin-top: 12px; font-size: var(--t5); color: var(--muted); }
/* the comparison: one situation per row, the answer we give on a dark panel */
.vs { width: 100%; margin-top: 56px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vs thead th { font-size: var(--t3); font-weight: 750; letter-spacing: -0.02em; text-align: left; padding: 22px 24px; }
.vs thead th.no { color: var(--muted); }
.vs thead th.yes { background: var(--inv); color: var(--on-inv); border-radius: var(--r) var(--r) 0 0; }
.vs col.sit, .vs tbody th { width: 30%; }
.vs tbody th { text-align: left; font-weight: 700; font-size: var(--t4); padding: 22px 24px 22px 0; vertical-align: top; }
.vs td { position: relative; padding: 22px 24px 22px 60px; vertical-align: top; }
.vs .mk { width: 22px; height: 22px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; position: absolute; left: 24px; top: 23px; }
.vs td.no { color: var(--muted); }
.vs td.no .mk { stroke: var(--muted); }
.vs td.yes { background: var(--inv); color: var(--on-inv); font-weight: 650; }
.vs td.yes .mk { stroke: var(--on-inv); }
.vs tbody tr:last-child td.yes { border-radius: 0 0 var(--r) var(--r); }
.vs tbody tr { transition: background-color .25s; }
.vs tbody tr:hover th, .vs tbody tr:hover td.no { background: var(--panel); }
.vs tbody tr:hover td.no { color: var(--ink); }
.vs tbody th, .vs td.no { transition: background-color .25s, color .25s; }
.vs tbody tr:hover th { border-radius: 14px 0 0 14px; padding-left: 16px; }
.why-end { margin-top: 40px; font-size: var(--t3); line-height: 1.35; max-width: 46ch; }
.why-end a { font-weight: 700; }

/* 3D: the type stack beside the bag */
.show { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); align-items: start; }
.stack { grid-column: 1 / 7; font-size: var(--t1); font-weight: 800; letter-spacing: -0.05em; line-height: .92; }
.stack span { display: block; white-space: nowrap; }
.stack span:nth-child(2) { color: var(--muted); }
.viewer { grid-column: 7 / 13; grid-row: 1 / 3; position: relative; aspect-ratio: 1 / 1; border-radius: var(--r); background: var(--panel); overflow: hidden; }
.viewer canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; touch-action: pan-y; }
.viewer canvas:active { cursor: grabbing; }
.viewer-still { width: 100%; height: 100%; object-fit: contain; }
.viewer.live .viewer-still { display: none; }
.facts { grid-column: 1 / 6; margin-top: 44px; max-width: 44ch; }
.swatches { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }
.swatches button { width: 48px; height: 48px; border-radius: 50%; background: var(--c); border: 2px solid color-mix(in srgb, var(--c) 78%, var(--ink)); cursor: pointer;
  outline: 2px solid transparent; outline-offset: 4px; transition: transform .25s var(--pop), outline-color .2s; }
.swatches button:hover { transform: scale(1.08); }
.swatches button[aria-checked="true"] { outline-color: var(--ink); }
.swatches button:focus-visible { outline: 3px solid var(--ink); }
.ticks { margin-bottom: 30px; }
.ticks li { padding: 6px 0; }
.ticks li + li { margin-top: 2px; }

/* process: the steps scroll, the phone stays and changes */
.process { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); }
.steps { grid-column: 1 / 8; }
.step { min-height: 50svh; display: flex; flex-direction: column; justify-content: center; }
.step .line { color: var(--muted); transition: color .4s; }
.step.on .line { color: var(--ink); }
.step p { margin-top: 16px; max-width: 40ch; }
.step:nth-child(2) { padding-left: 6%; } .step:nth-child(3) { padding-left: 12%; } .step:nth-child(4) { padding-left: 18%; }
.phone-wrap { grid-column: 9 / 13; position: sticky; top: 14svh; height: 72svh; display: flex; align-items: center; justify-content: center; }
.phone { position: relative; width: min(100%, 320px); aspect-ratio: 9 / 18.5; border-radius: 44px; background: var(--inv); padding: 12px; }
.scr { position: absolute; inset: 12px; border-radius: 34px; background: #ece5dd; color: #15171b; padding: 46px 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.4;
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .45s, transform .6s var(--ease); overflow: hidden; }
.scr.on { opacity: 1; transform: none; }
.chat-top { position: absolute; left: 0; right: 0; top: 0; padding: 14px 18px 10px; background: #1f4e43; color: #fff; display: flex; flex-direction: column; font-size: 14px; }
.chat-top span { font-size: 12.5px; opacity: .8; }
.scr[data-s="0"] { padding-top: 76px; }
.msg { max-width: 84%; padding: 9px 12px; border-radius: 12px; background: #fff; }
.msg.me { align-self: flex-end; background: #d6f5c9; }
.msg.file { align-self: flex-end; background: #d6f5c9; font-weight: 600; }
.doc { background: #fff; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.doc dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.doc dt { font-weight: 700; }
.ok { align-self: flex-start; background: #1f4e43; color: #fff; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.url { background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; color: #4a4e57; }
.mini { background: #fff; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.mini b { font-size: 19px; line-height: 1.1; letter-spacing: -0.02em; }
.mini i { display: block; height: 7px; border-radius: 4px; background: #e2e2e5; } .mini i.s { width: 60%; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.mini-grid span { height: 64px; border-radius: 8px; background: #dfe9e4; } .mini-grid span + span { background: #f1dfd3; }
.mini.live { background: #e3f1ea; }

/* faq: questions filed like cards in a drawer */
.faq { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); }
.faq h2 { grid-column: 1 / 5; align-self: start; position: sticky; top: 110px; }
.drawer { grid-column: 5 / 13; }
.fcard { --tab: 0; position: relative; margin-top: -18px; padding-top: 42px; }
.fcard:first-child { margin-top: 0; }
.fcard h3 { font: inherit; }
.fcard button { position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; }
.ftab { position: absolute; top: -42px; left: calc(var(--tab) * 1%); display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 14px 14px 0 0; background: var(--c); font-size: 16px; font-weight: 700; }
.fq { display: flex; align-items: center; min-height: 76px; padding: 18px 26px; border-radius: 0 16px 0 0; background: var(--c); font-size: var(--t3); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.fa { background: var(--c); display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); border-radius: 0 0 16px 16px; }
.fa > p { overflow: hidden; padding: 0 26px; max-width: 62ch; }
.fcard.open .fa { grid-template-rows: 1fr; }
.fcard.open .fa > p { padding-bottom: 28px; }
.fcard:nth-child(3n+1) { --c: var(--panel); } .fcard:nth-child(3n+2) { --c: var(--panel-2); } .fcard:nth-child(3n) { --c: var(--inv); color: var(--on-inv); }
.fcard:nth-child(1) { --tab: 0; } .fcard:nth-child(2) { --tab: 11; } .fcard:nth-child(3) { --tab: 22; } .fcard:nth-child(4) { --tab: 33; }
.fcard:nth-child(5) { --tab: 44; } .fcard:nth-child(6) { --tab: 55; } .fcard:nth-child(7) { --tab: 66; } .fcard:nth-child(8) { --tab: 77; }
.fcard button:hover .fq { text-decoration: underline; text-decoration-thickness: 1.5px; }

/* contact */
.contact { padding: var(--gap) var(--m) var(--gap); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); align-items: start; }
.c-left { grid-column: 1 / 7; }
.c-sub { margin-top: 20px; max-width: 40ch; font-size: var(--t3); line-height: 1.35; color: var(--muted); }
.rows { margin-top: 36px; display: grid; gap: 6px; }
.rows > li > a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 16px; background: var(--panel); text-decoration: none;
  font-size: clamp(24px, 2.6vw, 40px); font-weight: 750; letter-spacing: -0.03em; transition: padding .4s var(--ease); }
.rows .num { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 14px 14px 14px 20px; border-radius: 16px; background: var(--panel); }
.rows .n { font-size: var(--t3); word-break: break-word; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rows .acts { display: flex; gap: 8px; }
.rows .acts a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--panel-2); font-size: var(--t5); font-weight: 650; letter-spacing: 0; text-decoration: none; transition: background-color .2s; }
.rows .acts a:hover { background: var(--ink); color: var(--bg); padding-left: 18px; }
.rows > li > a span { font-size: var(--t3); font-weight: 550; letter-spacing: 0; color: var(--muted); text-align: right; word-break: break-word; }
.rows > li > a:hover { padding-left: 30px; background: var(--panel-2); }
.form { grid-column: 8 / 13; background: var(--panel); border-radius: var(--r); padding: clamp(20px, 2.4vw, 36px); display: grid; gap: 16px; }
.f { display: grid; gap: 6px; font-weight: 600; font-size: var(--t5); }
.f small { font-weight: 500; color: var(--muted); }
.f input, .f select, .f textarea { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); font-weight: 450; font-size: 17px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 0; border-color: var(--ink); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t5); color: var(--muted); }
.consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form .btn { justify-self: start; }
.privacy { margin-top: 44px; }
.privacy h3 { font-size: var(--t4); font-weight: 700; }
.privacy p { margin-top: 8px; color: var(--muted); max-width: 70ch; }

/* footer: the name, built large */
.foot { background: var(--inv); color: var(--on-inv); padding: 64px var(--m) 32px; overflow: hidden; }
.giant { font-size: 19.2vw; font-weight: 800; letter-spacing: -0.065em; line-height: .8; white-space: nowrap; margin-left: -.04em; transform-origin: left bottom; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 40px; font-size: var(--t5); }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-row a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.foot-row a:hover { text-decoration: underline; }
.credits { margin-top: 18px; font-size: 16px; color: var(--inv-muted); max-width: 90ch; }
.foot :focus-visible { outline-color: var(--on-inv); }

.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #06331a; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); /* taste-skill-ignore: a floating button is a real overlay */ transition: transform .3s var(--pop); }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0ms !important; }
}

/* tablet */
@media (max-width: 1100px) {
  .links { display: none; }
  .kind-row { grid-template-columns: 1fr 176px auto; }
  .k-thumb { grid-column: 2; grid-row: 1 / 3; }
  .k-what { grid-column: 1; grid-row: 2; }
  .k-days { grid-column: 3; grid-row: 1; }
  .deck { right: 30%; }
  .faq h2 { grid-column: 1 / -1; position: static; margin-bottom: 40px; }
  .drawer { grid-column: 1 / -1; }
  .kinds-head p, .why-head p, .team-head p { grid-column: 1 / -1; margin-top: 18px; max-width: 52ch; }
  .kinds-head h2, .why-head h2, .team-head h2 { grid-column: 1 / -1; }
}

/* phone and small tablet: the hero stacks, decks open inline as a swipe row */
@media (max-width: 820px) {
  :root { --t1: clamp(40px, 11.4vw, 72px); --t2: clamp(32px, 9vw, 52px); --t3: 20px; --t4: 17px; --gap: 96px; }
  .logo span { display: none; }
  .nav-end .btn { display: none; }
  .hero { display: block; min-height: 0; padding-top: 88px; padding-bottom: 0; }
  .hero h1 .ln { white-space: normal; }
  .stage { height: 420px; margin: 8px calc(var(--m) * -1) 0; }
  .hint { position: static; text-align: center; margin-top: -8px; }
  .tip { display: none; }
  .kind-row { padding: 20px 0; }
  .kind:hover .k-name { transform: none; }
  .kind.open .k-name { transform: none; color: var(--ink); }
  .deck { position: static; width: auto; height: auto; display: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 22px; pointer-events: auto; }
  .kind.open .deck { display: flex; }
  .card, .kind:hover .card, .kind.open .card, .kind:focus-within .card { position: relative; flex: none; width: 78%; opacity: 1; transform: none !important; scroll-snap-align: start; transition: none; }
  .card.tall { width: 42%; }
  .card img { filter: none; }
  .compare { aspect-ratio: 4 / 5; }
  .site-body { grid-template-columns: 1fr; padding: 0 0 20px; }
  .ui-grid { padding: 0 20px; }
  .ui-top span:not(b) { display: none; }
  .pdf-page { width: 70%; }
  .ui-h { font-size: 22px; }
  .vs, .vs thead, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto; }
  .vs { margin-top: 40px; }
  .vs thead { display: none; }
  .vs tbody tr { margin-top: 14px; border-radius: var(--r); overflow: hidden; background: var(--panel); }
  .vs tbody th { width: auto; padding: 16px 18px 6px; }
  .vs td { padding: 10px 18px 14px 50px; }
  .vs .mk { left: 18px; top: 36px; }
  .vs td.no::before, .vs td.yes::before { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
  .vs td.no::before { content: "Without a website"; }
  .vs td.yes::before { content: "With a Folio Studio site"; }
  .vs tbody tr:last-child td.yes { border-radius: 0; }
  .vs tbody tr:hover th { padding-left: 18px; border-radius: 0; }
  .k-thumb { display: none; }
  .kind-row { padding: 16px; grid-template-columns: 1fr auto; }
  .k-what { grid-column: 1 / -1; grid-row: 2; }
  .k-days { grid-column: 2; grid-row: 1; }
  .rows > li > a span { font-size: var(--t5); }
  .show { display: block; }
  .stack { font-size: 15.5vw; }
  .viewer { margin-top: 28px; }
  .facts { margin-top: 28px; }
  .process { display: block; }
  .phone-wrap { display: none; }
  .step { min-height: 0; padding: 0 0 48px !important; }
  .step .line { color: var(--ink); }
  .step:nth-child(2) { padding-left: 6vw !important; } .step:nth-child(3) { padding-left: 12vw !important; } .step:nth-child(4) { padding-left: 18vw !important; }
  .faq { display: block; }
  .fq { min-height: 64px; padding: 14px 18px; }
  .fa > p { padding: 0 18px; }
  .ftab { padding: 0 14px; }
  .fcard:nth-child(n) { --tab: 0; } .fcard:nth-child(2n) { --tab: 30; }
  .fcard { margin-top: 8px; }
  .contact { display: block; }
  .form { margin-top: 40px; }
  .form .btn { justify-self: stretch; }
  .rows > li > a { flex-direction: column; align-items: flex-start; gap: 2px; }
  .rows > li > a span { text-align: left; }
  .wa-float { width: 54px; height: 54px; right: 14px; bottom: 14px; }
}