/* J-tekk – "vedos ennen painoa": the old site proofread in red pen, the new one beside it.
   Paper, ink, correction red, highlighter. One family (Familjen Grotesk), a hand only for the pen notes. */
@font-face { font-family: "Familjen Grotesk"; src: url("/fonts/familjen-grotesk-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --paper: #f6f7f9;
  --sheet: #ffffff;
  --ink: #14213d;
  --graphite: #4f5869;
  --rule: #d9dde4;
  --pen: #c8102e;
  --marker: #ffe45c;
  --focus: #0b63ce;
  --font: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.1rem, 4.2vw, 3.1rem);
  --step-4: clamp(2.6rem, 6.4vw, 4.6rem);
}
* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--step-0); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 20; }
.skip:focus { left: 8px; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
h1, h2, h3 { line-height: 1.05; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; max-width: 62ch; }

/* header: a plain line, no glass */
.top { border-bottom: 1px solid var(--rule); background: var(--paper); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }
.logo { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.03em; text-decoration: none; }
.logo span { color: var(--pen); }
.top nav { display: flex; align-items: center; gap: 22px; font-size: 0.98rem; }
.top nav a { text-decoration: none; color: var(--graphite); }
.top nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .top nav .hide-sm { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; background: var(--ink); color: #fff; font-weight: 700; font-size: 1.02rem; text-decoration: none; border-radius: 6px; border: 2px solid var(--ink); transition: background-color .18s ease, color .18s ease; }
.btn:hover { background: #22345c; border-color: #22345c; }
.btn:active { transform: translateY(1px); }
.btn.line { background: transparent; color: var(--ink); }
.btn.line:hover { background: var(--sheet); }
.top nav .btn { min-height: 40px; padding: 0 16px; font-size: 0.95rem; color: #fff; }

/* hero: headline left, the proof on the right */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero p.lead { font-size: var(--step-1); line-height: 1.45; color: var(--graphite); margin-top: 22px; max-width: 30ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .small { margin-top: 16px; color: var(--graphite); font-size: 0.95rem; }
mark { background: linear-gradient(transparent 55%, var(--marker) 55%); color: inherit; padding: 0 2px; }

/* the proof: before / after slider */
.proof { position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 1px 0 var(--rule), 0 24px 48px -32px rgba(20, 33, 61, .45); overflow: hidden; }
.proof .bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: 0.85rem; color: var(--graphite); }
.proof .bar .url { flex: 1; background: var(--paper); border-radius: 4px; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage { position: relative; aspect-ratio: 4 / 3.3; }
.page { position: absolute; inset: 0; overflow: hidden; }
.page.new { clip-path: inset(0 0 0 var(--cut, 36%)); }
.knob { position: absolute; top: 0; bottom: 0; left: var(--cut, 36%); width: 2px; background: var(--ink); transform: translateX(-1px); pointer-events: none; z-index: 3; }
.knob::after { content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--sheet); }
.knob::before { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); color: #fff; font-weight: 700; font-size: 15px; z-index: 1; white-space: nowrap; }
.stage input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 4; }
.stage input[type=range]:focus-visible + .knob::after { box-shadow: 0 0 0 4px var(--sheet), 0 0 0 7px var(--focus); }
.tag { position: absolute; top: 12px; font-size: 0.8rem; font-weight: 700; padding: 3px 9px; border-radius: 4px; background: var(--sheet); border: 1px solid var(--rule); z-index: 2; }
.tag.l { left: 12px; color: var(--pen); }
.tag.r { right: 12px; color: var(--ink); }

/* the old site, as small businesses still have it */
.old { background: #e9e6d8; font-family: "Times New Roman", Times, serif; color: #222; padding: 44px 18px 16px; font-size: 12px; line-height: 1.35; }
.old .banner { background: #3a5f8f; color: #ffef9e; font: bold 20px "Comic Sans MS", "Times New Roman", serif; padding: 10px; text-align: center; border: 3px ridge #8aa6c8; }
.old table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.old td { vertical-align: top; padding: 6px; border: 1px solid #b9b39b; }
.old .menu a { display: block; color: #00e; text-decoration: underline; margin-bottom: 4px; font-size: 12px; }
.old .counter { margin-top: 12px; font-size: 11px; color: #555; text-align: center; }
.old .counter b { background: #000; color: #3f3; font-family: "Courier New", monospace; padding: 0 4px; }
.note { position: absolute; font-family: var(--hand); color: var(--pen); font-size: 1.3rem; line-height: 1; transform: rotate(-4deg); white-space: nowrap; }
.circle { position: absolute; border: 2px solid var(--pen); border-radius: 50%; transform: rotate(-3deg); }

/* the new site */
.new { background: #fdfbf8; font-family: var(--font); color: #2b2420; padding-top: 30px; }
.new .nhead { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; font-size: 13px; border-bottom: 1px solid #eadfd5; }
.new .nhead b { font-size: 15px; letter-spacing: -0.02em; }
.new .nhero { padding: 20px 20px 16px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 16px; align-items: center; }
.new .nhero h4 { margin: 0; font-size: clamp(18px, 2.3vw, 26px); line-height: 1.05; letter-spacing: -0.03em; }
.new .nhero p { font-size: 12px; color: #6d5f55; margin-top: 8px; }
.new .ncta { display: inline-block; margin-top: 12px; background: #2b2420; color: #fff; font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 4px; }
.new .photo { aspect-ratio: 1 / 1; border-radius: 6px; background: radial-gradient(circle at 35% 30%, #d7b9a0 0 22%, transparent 23%), linear-gradient(160deg, #a77c5c, #5a4031); }
.new .nrow { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #eadfd5; }
.new .nrow div { padding: 12px 20px 16px; font-size: 11px; color: #6d5f55; border-right: 1px solid #eadfd5; }
.new .nrow div:last-child { border-right: 0; }
.new .nrow strong { display: block; color: #2b2420; font-size: 13px; }

/* sections */
section { padding: clamp(56px, 8vw, 104px) 0; }
.band { background: var(--sheet); border-block: 1px solid var(--rule); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: 40px; }
.head p { color: var(--graphite); }
@media (max-width: 900px) { .head { grid-template-columns: 1fr; } }

/* comparison: the spine of the page */
.compare { width: 100%; border-collapse: collapse; font-size: 1rem; }
.compare th { text-align: left; font-size: 0.95rem; color: var(--graphite); font-weight: 600; padding: 0 16px 12px 0; border-bottom: 2px solid var(--ink); }
.compare td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare td:first-child { font-weight: 700; width: 22%; }
.compare td.was { color: var(--graphite); text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px; width: 34%; }
@media (max-width: 720px) {
  .compare thead { display: none; }
  .compare tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .compare td { display: block; border: 0; padding: 2px 0; width: auto !important; }
}

/* timeline: a real sequence, so numbered by day */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.timeline li { padding: 22px 28px 0 0; position: relative; }
.timeline li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.timeline .when { display: block; font-weight: 700; color: var(--pen); margin-bottom: 6px; }
.timeline p { color: var(--graphite); margin-top: 8px; }
@media (max-width: 820px) { .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--ink); } .timeline li { padding: 0 0 28px 26px; } .timeline li::before { top: 4px; left: -8px; } }

/* price: one offer, said plainly */
.price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .price { grid-template-columns: 1fr; } }
.amount { font-size: clamp(3.4rem, 9vw, 6rem); font-weight: 700; letter-spacing: -0.05em; line-height: .9; margin-top: 20px; }
.amount small { font-size: 0.3em; letter-spacing: 0; font-weight: 600; color: var(--graphite); }
.price ul { margin: 0; padding: 0; list-style: none; }
.price li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.price li:first-child { border-top: 1px solid var(--rule); }
.aside { margin-top: 18px; color: var(--graphite); font-size: 0.97rem; }

/* faq */
.faq { max-width: 760px; margin-top: 28px; }
details { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 700; font-size: 1.08rem; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.5rem; font-weight: 400; color: var(--graphite); }
details[open] summary::after { content: "–"; }
details p { padding: 0 0 20px; color: var(--graphite); }

/* contact */
.contact h2 { max-width: 16ch; }
.contact .lines { margin-top: 32px; display: grid; gap: 10px; }
.contact .lines a { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; border-bottom: 2px solid var(--ink); justify-self: start; }
.contact .lines a:hover { border-bottom-color: var(--pen); }
.contact p.small { margin-top: 18px; color: var(--graphite); }

footer { border-top: 1px solid var(--rule); padding: 28px 0 40px; font-size: 0.92rem; color: var(--graphite); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; }
footer a { color: var(--graphite); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- v3: the scroll film -------------------------------------------------------------- */
.film { padding: 0; background: var(--ink); color: #fff; position: relative; overflow: clip; }
.film-pin { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; width: min(1180px, 100% - 40px); margin-inline: auto; padding: clamp(40px, 6vw, 72px) 0; }
@media (max-width: 900px) { .film-pin { grid-template-columns: 1fr; align-content: center; gap: 22px; padding: 24px 0; } }
.film-kicker { color: var(--marker); font-weight: 700; margin-bottom: 18px; }
.film-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: f; }
.film-steps li { color: rgba(255,255,255,.42); font-size: clamp(1.02rem, 1.6vw, 1.25rem); line-height: 1.4; padding-left: 44px; position: relative; transition: color .3s ease; counter-increment: f; }
.film-steps li::before { content: counter(f); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.42); display: grid; place-items: center; font-weight: 700; font-size: .95rem; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.film-steps li b { color: inherit; display: block; font-size: 1.12em; }
.film-steps li.is-on { color: #fff; }
.film-steps li.is-on::before { background: var(--marker); border-color: var(--marker); color: var(--ink); }
@media (max-width: 900px) { .film-steps li:not(.is-on) { display: none; } }
.film-frame { background: var(--sheet); color: var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); transform-origin: 50% 60%; }
.film-frame .bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: .85rem; color: var(--graphite); }
.film-frame .url { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--paper); border-radius: 4px; padding: 4px 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.film-frame .lock { width: 9px; height: 9px; border-radius: 2px; background: var(--pen); flex: none; }
.film-frame .lock.safe { background: #1d7a45; }
.film-frame .score { white-space: nowrap; }
.film-frame .score b { display: inline-block; min-width: 2ch; text-align: right; color: var(--pen); font-variant-numeric: tabular-nums; }
.film-stage { position: relative; aspect-ratio: 4 / 3.1; }
@media (max-width: 900px) { .film-stage { aspect-ratio: 4 / 3.6; } }
.film-stage .page { position: absolute; inset: 0; }
.film-stage .old { padding-top: 16px; }
.film-stage .new { padding-top: 0; clip-path: none; }
.pen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pen .ink { fill: none; stroke: var(--pen); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.film .note { font-size: clamp(1.1rem, 2vw, 1.5rem); }
.film .n1 { left: 56%; top: 66%; }
.film .n2 { left: 6%; top: 86%; }
.film .n3 { left: 70%; top: 30%; transform: rotate(6deg); }

/* without motion (no JS, or reduced motion): show the finished, new state */
.no-motion .film-pin { min-height: 0; }
.no-motion .film .f-old { display: none; }
.no-motion .film-steps li { color: #fff; display: block; }

/* hero entrance and tilt helpers */
.split-line { overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.proof { will-change: transform; }

/* ---- v4: the media house desk ------------------------------------------------------------
   One input, three screens: the visitor's business on a phone, in Google, in a feed.
   The open/closed dot is the signature: the three-second answer, live. */
:root { --open: #1d7a45; --closed: #b3261e; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.desk { padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 80px); }
.desk .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.desk h1 { font-size: clamp(2.3rem, 5.6vw, 4.3rem); }
.desk .lead { font-size: var(--step-1); line-height: 1.45; color: var(--graphite); margin-top: 18px; max-width: 32ch; }
.desk .small { margin-top: 16px; color: var(--graphite); font-size: .95rem; max-width: 44ch; }

.try { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; margin-top: 28px; padding: 10px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 10px; }
.field { display: grid; gap: 2px; padding: 6px 10px; border-radius: 6px; }
.field:focus-within { background: var(--paper); box-shadow: 0 0 0 3px var(--focus); }
.field span { font-size: .8rem; font-weight: 600; color: var(--graphite); }
.field input, .field select { font: inherit; font-size: 1.12rem; font-weight: 700; color: var(--ink); border: 0; background: transparent; padding: 2px 0; min-height: 34px; width: 100%; }
.field input::placeholder { color: #8a93a3; font-weight: 600; }
.field input:focus, .field select:focus { outline: none; }
.try .field + .field { border-left: 1px solid var(--rule); border-radius: 0 6px 6px 0; }

/* the three screens */
.screens { --brand: #7a3b52; --brand-tint: #f6eef1; position: relative; min-height: 630px; }
.screen-tabs { display: none; }
.phone { position: absolute; left: 0; top: 0; width: 270px; margin: 0; background: var(--ink); border-radius: 34px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(20, 33, 61, .55); z-index: 2; }
.phone-in { background: #fff; border-radius: 26px; overflow: hidden; min-height: 500px; color: #1c1c1c; }
.s-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 18px 10px; }
.s-head b { font-size: 1rem; letter-spacing: -.02em; color: var(--brand); transition: color .3s ease; }
.s-menu { width: 18px; height: 10px; border-block: 2px solid #1c1c1c; }
.s-open { display: flex; align-items: center; gap: 8px; margin: 2px 18px 0; padding: 7px 10px; background: #e8f4ec; color: var(--open); font-weight: 700; font-size: .82rem; border-radius: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; animation: pulse 2s ease-out infinite; }
.is-closed .s-open { background: #fbeceb; color: var(--closed); }
.is-closed .dot { animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(29,122,69,.45); } 80%, 100% { box-shadow: 0 0 0 9px rgba(29,122,69,0); } }
.s-hero { margin: 14px 18px 0; padding: 18px; background: var(--brand-tint); border-radius: 12px; transition: background-color .3s ease; }
.s-mono { width: 46px; height: 46px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.5rem; transition: background-color .3s ease; }
.s-hero h2 { font-size: 1.45rem; line-height: 1.05; letter-spacing: -.03em; margin-top: 14px; color: #1c1c1c; }
.s-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin: 12px 18px 0; }
.s-btn { display: grid; place-items: center; min-height: 42px; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 700; font-size: .9rem; transition: background-color .3s ease; }
.s-btn.alt { background: #fff; color: var(--brand); border: 2px solid var(--brand); }
.s-prices { list-style: none; margin: 14px 18px 0; padding: 0; font-size: .85rem; }
.s-prices li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid #ececec; }
.s-where { margin: 12px 18px 18px; font-size: .8rem; color: #666; }

.gcard { position: absolute; right: 0; top: 30px; width: 280px; margin: 0; background: #fff; border-radius: 14px; box-shadow: 0 20px 44px -24px rgba(20, 33, 61, .5); border: 1px solid var(--rule); overflow: hidden; z-index: 3; font-family: Arial, Helvetica, sans-serif; color: #202124; }
.g-map { height: 92px; position: relative; background:
  linear-gradient(90deg, transparent 47%, #fff 47% 53%, transparent 53%) 0 0 / 70px 100%,
  linear-gradient(0deg, transparent 44%, #fff 44% 56%, transparent 56%) 0 0 / 100% 46px,
  #e5e9df; }
.pin { position: absolute; left: 50%; top: 40%; width: 18px; height: 18px; background: #d93025; border-radius: 50% 50% 50% 0; transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.g-body { padding: 12px 16px 14px; display: grid; gap: 3px; }
.g-name { font-size: 1.12rem; font-weight: 400; }
.g-kind, .g-open { font-size: .84rem; color: #5f6368; }
.g-open .js-open-short { color: #188038; font-weight: 700; }
.is-closed .g-open .js-open-short { color: #d93025; }
.g-actions { display: flex; gap: 8px; margin-top: 10px; }
.g-actions span { flex: 1; text-align: center; font-size: .8rem; color: #1a73e8; border: 1px solid #dadce0; border-radius: 18px; padding: 6px 0; }

.post { position: absolute; right: 2%; top: 296px; width: 240px; margin: 0; background: #fff; border-radius: 12px; border: 1px solid var(--rule); box-shadow: 0 20px 44px -24px rgba(20, 33, 61, .5); overflow: hidden; z-index: 1; font-family: Arial, Helvetica, sans-serif; color: #262626; }
.p-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: .82rem; }
.p-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.p-img { aspect-ratio: 1 / 1; background-color: var(--brand); color: #fff; display: grid; place-items: end start; padding: 18px; transition: background-color .3s ease; background-image: radial-gradient(circle at 78% 26%, rgba(255,255,255,.22) 0 18%, transparent 19%), radial-gradient(circle at 70% 36%, rgba(255,255,255,.12) 0 32%, transparent 33%); }
.p-img span { font-family: var(--font); font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; max-width: 8ch; }
.p-text { padding: 10px 12px 14px; font-size: .8rem; line-height: 1.4; }

@media (max-width: 960px) {
  .desk .wrap { grid-template-columns: 1fr; }
  .screens { min-height: 0; display: grid; justify-items: center; gap: 14px; }
  .screen-tabs { display: flex; gap: 4px; padding: 4px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 999px; }
  .screen-tabs button { font: inherit; font-size: .92rem; font-weight: 600; color: var(--graphite); background: transparent; border: 0; border-radius: 999px; padding: 8px 16px; min-height: 40px; cursor: pointer; }
  .screen-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
  .phone, .gcard, .post { position: static; display: none; }
  .phone.is-shown, .gcard.is-shown, .post.is-shown { display: block; }
  .phone { width: min(290px, 100%); }
  .phone-in { min-height: 0; }
  .gcard { width: min(340px, 100%); }
  .post { width: min(300px, 100%); }
}
@media (max-width: 560px) {
  .desk { padding-top: 20px; }
  .desk h1 { font-size: 2.15rem; }
  .desk .lead { font-size: 1.08rem; margin-top: 12px; }
  .try { margin-top: 18px; grid-template-columns: 1fr; gap: 0; }
  .try .field + .field { border-left: 0; border-top: 1px solid var(--rule); border-radius: 0 0 6px 6px; }
  .desk .small { display: none; }
}

/* the price, said on the first screen: big firms hide it behind "ask for a quote" */
.pricebar { display: grid; grid-template-columns: repeat(3, auto) 1fr; align-items: end; gap: 4px 26px; margin-top: 24px; padding: 14px 0 12px; border-block: 2px solid var(--ink); text-decoration: none; color: var(--ink); max-width: 560px; }
.pricebar span { display: grid; font-size: .86rem; color: var(--graphite); line-height: 1.25; }
.pricebar i { font-style: normal; font-weight: 700; color: var(--ink); font-size: .95rem; margin-top: 2px; }
.pricebar b { font-size: clamp(1.9rem, 3.4vw, 2.5rem); letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.pricebar em { font-style: normal; font-size: .9rem; color: var(--graphite); justify-self: end; text-align: right; max-width: 14ch; line-height: 1.25; }
.pricebar:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 560px) {
  .pricebar { grid-template-columns: repeat(3, auto); justify-content: space-between; margin-top: 16px; padding: 10px 0 8px; }
  .pricebar b { font-size: 1.75rem; }
  .pricebar em { grid-column: 1 / -1; justify-self: start; text-align: left; max-width: none; }
}

/* tiers: a comparison table, so the difference reads row by row */
.tiers { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tiers thead th { text-align: left; vertical-align: bottom; padding: 0 20px 18px; border-bottom: 2px solid var(--ink); }
.tiers thead td { border-bottom: 2px solid var(--ink); width: 34%; }
.t-name { display: block; font-size: var(--step-1); font-weight: 700; }
.t-price { display: block; font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin-top: 6px; }
.t-price small { font-size: .32em; letter-spacing: 0; font-weight: 600; color: var(--graphite); margin-left: 4px; }
.t-for { display: block; font-size: .92rem; font-weight: 400; color: var(--graphite); margin-top: 8px; }
.tiers tbody th { text-align: left; font-weight: 600; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--rule); }
.tiers tbody td { padding: 14px 20px; border-bottom: 1px solid var(--rule); font-weight: 700; }
.tiers td.y::before { content: ""; display: inline-block; width: 10px; height: 6px; border: solid var(--open); border-width: 0 0 3px 3px; transform: rotate(-45deg) translateY(-3px); margin-right: 10px; }
.tiers td.n { color: #a2a9b5; font-weight: 400; }
.tiers .pick { background: var(--paper); }
@media (max-width: 760px) {
  .tiers, .tiers thead, .tiers tbody, .tiers tr { display: block; }
  .tiers thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--ink); }
  .tiers thead td { display: none; }
  .tiers thead th { display: block; padding: 0 8px 12px; border: 0; }
  .t-name { font-size: 1rem; }
  .t-price { font-size: 1.7rem; }
  .t-for { font-size: .78rem; }
  .tiers tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); padding-top: 10px; }
  .tiers tbody th { grid-column: 1 / -1; border: 0; padding: 0 8px 2px; font-size: .92rem; }
  .tiers tbody td { border: 0; padding: 4px 8px 10px; font-size: .85rem; }
  .tiers td.y::before { margin-right: 6px; }
}

/* services: a definition list, not a card grid */
.services { margin: 0; border-top: 2px solid var(--ink); }
.services > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 8px 40px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.services dt { font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; }
.services dd { margin: 0; color: var(--graphite); max-width: 60ch; }
@media (max-width: 720px) { .services > div { grid-template-columns: 1fr; } }

/* promises: three plain sentences, big */
.promises ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.promises li { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--graphite); max-width: 52ch; }
.promises li b { display: block; color: var(--ink); font-size: clamp(1.7rem, 4vw, 2.8rem); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 6px; }

/* plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.plan { padding: 24px 28px 28px 0; }
.plan + .plan { padding-left: 28px; border-left: 1px solid var(--rule); }
.plan.main { background: var(--paper); padding-right: 28px; }
.plan .amount { font-size: clamp(2.6rem, 5vw, 3.6rem); margin-top: 8px; }
.plan ul { list-style: none; margin: 18px 0 0; padding: 0; }
.plan li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: .98rem; }
@media (max-width: 820px) {
  .plans { grid-template-columns: 1fr; }
  .plan, .plan + .plan { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .plan.main { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
.logo img { display: block; height: 32px; width: auto; }

/* legal pages */
.doc { padding: clamp(32px, 6vw, 72px) 0; }
.doc .wrap { max-width: 720px; }
.doc h1 { font-size: var(--step-3); }
.doc h2 { font-size: var(--step-1); margin-top: 36px; }
.doc p, .doc ul { margin-top: 12px; color: var(--graphite); }
.doc strong { color: var(--ink); }
.doc-meta { font-size: .92rem; }
.doc-lead { font-size: var(--step-1); line-height: 1.45; color: var(--ink) !important; margin-top: 20px; }

/* ---- v4.1: portfolio showcase hero ----------------------------------------------------- */
.show { padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.show .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.show h1 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); }
.show .lead { font-size: var(--step-1); line-height: 1.45; color: var(--graphite); margin-top: 16px; max-width: 34ch; }
.show-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.stagebox { margin: 0; position: relative; }
.laptop { background: var(--ink); border-radius: 14px; padding: 8px; box-shadow: 0 40px 80px -40px rgba(20, 33, 61, .6); width: 92%; }
.laptop-bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px 10px; }
.laptop-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a4a6b; }
.laptop-bar span { margin-left: 10px; flex: 1; background: #22345c; color: #c6d0e2; font-size: .78rem; border-radius: 5px; padding: 3px 10px; }
.laptop-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #fff; }
.slide, .pslide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); transform: scale(1.04); }
.slide { display: block; }
.slide img, .pslide { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.slide.is-on, .pslide.is-on { opacity: 1; transform: scale(1); }
.slide.is-on { z-index: 1; }
.handset { position: absolute; right: 0; bottom: 104px; width: 25%; aspect-ratio: 390 / 760; background: var(--ink); border-radius: 26px; box-shadow: 0 30px 60px -24px rgba(20, 33, 61, .65); z-index: 3; overflow: hidden; }
.handset .pslide { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 20px; }
.show-cap { margin-top: 14px; width: 92%; }
.show-tabs { display: flex; gap: 6px; align-items: stretch; }
.show-tabs [role="tab"] { flex: 1; position: relative; font: inherit; font-size: .9rem; font-weight: 700; color: var(--graphite); background: none; border: 0; padding: 10px 0 0; text-align: left; cursor: pointer; min-height: 40px; }
.show-tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
.show-tabs .bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.show-tabs .bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.show-tabs [aria-selected="true"] .bar::after { animation: fill var(--dur, 10s) linear forwards; }
.stagebox.is-paused .show-tabs [aria-selected="true"] .bar::after { animation-play-state: paused; }
.stagebox.is-still .show-tabs [aria-selected="true"] .bar::after { animation: none; transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }
.show-pause { flex: none; width: 40px; min-height: 40px; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); cursor: pointer; position: relative; }
.show-pause::before, .show-pause::after { content: ""; position: absolute; top: 13px; width: 4px; height: 14px; background: var(--ink); border-radius: 1px; }
.show-pause::before { left: 14px; }
.show-pause::after { right: 14px; }
.stagebox.is-paused .show-pause[aria-pressed="true"]::before { left: 15px; width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--ink); border-radius: 0; }
.stagebox.is-paused .show-pause[aria-pressed="true"]::after { display: none; }
.show-cap p { margin-top: 10px; font-size: .92rem; color: var(--graphite); }
.show-cap p b { color: var(--ink); }
.desk-h { font-size: var(--step-3); }
@media (max-width: 960px) {
  .show .wrap { grid-template-columns: 1fr; }
  .show-acts .btn.line { display: none; }
}
@media (max-width: 560px) {
  .show { padding-top: 16px; }
  .show h1 { font-size: 2.05rem; }
  .show .lead { font-size: 1.02rem; margin-top: 10px; }
  .show-acts { margin-top: 14px; }
  .laptop { width: 100%; padding: 5px; border-radius: 10px; }
  .laptop-bar { padding: 2px 4px 6px; }
  .handset { width: 28%; bottom: 108px; border-radius: 16px; }
  .handset .pslide { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 12px; }
  .show-cap { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .slide, .pslide { transition: none; transform: none; } }

/* ---- v4.2: "living in the future" – light, luminous, 3D. Clear, not dark sci-fi. ----------- */
.show { position: relative; overflow: hidden; isolation: isolate; }
/* aurora: three soft lights drifting behind the hero */
.show::before { content: ""; position: absolute; inset: -20% -10% -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 46% at 72% 30%, rgba(60, 207, 126, .22), transparent 70%),
    radial-gradient(34% 40% at 88% 70%, rgba(64, 128, 255, .18), transparent 70%),
    radial-gradient(30% 36% at 20% 10%, rgba(20, 33, 61, .08), transparent 70%);
  filter: blur(10px); animation: aurora 18s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-4%, 3%, 0) scale(1.08); } }
.show .wrap { position: relative; }

/* live load-time readout */
.speed { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--rule); font-size: .92rem; color: var(--graphite); backdrop-filter: blur(8px); }
.speed b { color: var(--open); font-variant-numeric: tabular-nums; font-size: 1.05em; }
.speed-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--open); box-shadow: 0 0 0 0 rgba(29,122,69,.5); animation: pulse 2s ease-out infinite; }

/* the 3D stage */
.scene { position: relative; perspective: 1700px; perspective-origin: 50% 30%; }
.orbit { position: relative; aspect-ratio: 16 / 11.2; transform-style: preserve-3d; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.card { position: absolute; left: 10%; top: 2%; width: 80%; display: block; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 40px 70px -36px rgba(20, 33, 61, .55), 0 0 0 1px rgba(20,33,61,.08);
  transition: transform 1.2s cubic-bezier(.2,.75,.15,1), opacity .9s ease, filter .9s ease; transform-origin: 50% 60%; will-change: transform; }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.card-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #f1f3f7; border-bottom: 1px solid var(--rule); }
.card-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9cfdb; }
.card-bar span { margin-left: 8px; font-size: .72rem; color: var(--graphite); background: #fff; border-radius: 4px; padding: 2px 8px; flex: 1; white-space: nowrap; overflow: hidden; }
/* glass sheen */
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12) 100%); }
.card[data-pos="c"] { transform: translate3d(0, 0, 60px); z-index: 3; }
.card[data-pos="r"] { transform: translate3d(44%, -2%, -280px) rotateY(-36deg); opacity: .78; filter: saturate(.85) brightness(.98); z-index: 2; cursor: pointer; }
.card[data-pos="l"] { transform: translate3d(-44%, -2%, -280px) rotateY(36deg); opacity: .78; filter: saturate(.85) brightness(.98); z-index: 1; cursor: pointer; }
/* perspective floor fading into the horizon */
.floor { position: absolute; left: -6%; right: -12%; bottom: -18%; height: 70%; pointer-events: none; z-index: -1;
  background-image: linear-gradient(rgba(20,33,61,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.10) 1px, transparent 1px);
  background-size: 48px 48px; transform: perspective(600px) rotateX(68deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 60%, transparent); }
.stagebox .handset { right: -1%; bottom: 96px; width: 23%; transform: translateZ(0) rotate(3deg); animation: hover 6s ease-in-out infinite; }
@keyframes hover { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.stagebox .show-cap { width: 100%; }
@media (max-width: 560px) {
  .card { left: 7%; width: 86%; }
  .card[data-pos="r"] { transform: translate3d(36%, -2%, -220px) rotateY(-34deg); }
  .card[data-pos="l"] { transform: translate3d(-36%, -2%, -220px) rotateY(34deg); }
  .stagebox .handset { width: 27%; bottom: 100px; }
  .speed { font-size: .82rem; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .show::before, .speed-dot, .stagebox .handset { animation: none; }
  .card, .orbit { transition: none; }
}

/* pointer spotlight (added by motion.js) */
.spot { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .5s ease; background: radial-gradient(circle, rgba(60, 207, 126, .16), rgba(64, 128, 255, .08) 40%, transparent 70%); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---- v5: the 2500 layer. Pearl light field, glass, holographic rims. ------------------------ */
.holo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; display: block; }
.show.has-field::before { opacity: .35; }
.show { background: #f5f7fa; }
.show::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(246,247,249,0), var(--paper)); }
/* glass */
.show .pricebar, .speed { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.show .pricebar b { white-space: nowrap; }
.show .pricebar { column-gap: 20px; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; padding: 14px 18px 12px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 20px 40px -28px rgba(20,33,61,.35); }
.speed { border-color: rgba(255,255,255,.85); box-shadow: 0 10px 30px -20px rgba(20,33,61,.4); }
/* holographic rims: an iridescent edge that slowly turns */
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.card, .stagebox .handset { --rim: conic-gradient(from var(--spin), #8fe3ff, #c9b6ff, #ffb8d9, #b8ffd9, #8fe3ff); }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--rim); pointer-events: none; z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 8s linear infinite; opacity: .9; }
.stagebox .handset { background: linear-gradient(#14213d, #14213d) padding-box, var(--rim) border-box; border: 2px solid transparent; animation: hover 6s ease-in-out infinite, spin 8s linear infinite; }
@keyframes spin { to { --spin: 360deg; } }
.card[data-pos="c"] { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 50px 90px -40px rgba(20, 33, 61, .55), 0 0 60px -10px rgba(143, 227, 255, .45); }
@media (max-width: 560px) { .show .pricebar { padding: 10px 12px 8px; } }
@media (prefers-reduced-motion: reduce) { .card::before, .stagebox .handset { animation: none; } }

/* readability over the field: the customer-site rule (answer in three seconds) applies here too */
.show.has-field .lead, .show.has-field .show-cap p, .show.has-field .pricebar span, .show.has-field .pricebar em { color: #2d3a52; }
.show.has-field .show-tabs [role="tab"] { color: #3a4760; }
.show.has-field .show-cap p { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 6px 10px; border-radius: 8px; display: inline-block; }

/* the glass J-tekk mark hovering over the portfolio, like a craft over a city */
.mark3d { position: absolute; top: -112px; right: -7%; width: 40%; aspect-ratio: 1 / .95; z-index: 6; pointer-events: none; }
.show .stagebox { margin-top: 96px; }
.show { cursor: default; }
@media (max-width: 960px) { .show .stagebox { margin-top: 70px; } .mark3d { top: -88px; width: 34%; } }
@media (max-width: 560px) { .mark3d { top: -78px; right: -4%; width: 38%; } }

/* ==== v6: night theme. Deep navy, not black; the holo field glows against it. ================= */
:root[data-theme="dark"] { --paper: #070d1d; --sheet: #0d1630; --ink: #eaf0fb; --graphite: #a9b4ca; --rule: #23314f; --pen: #ff6b81; --focus: #7cb2ff; --open: #3ccf7e; --device: #1b2748; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .skip { color: var(--paper); }
html[data-theme="dark"] .btn { color: #08101f; }
html[data-theme="dark"] .btn:hover { background: #ffffff; border-color: #ffffff; }
html[data-theme="dark"] .btn.line { color: var(--ink); background: transparent; }
html[data-theme="dark"] .btn.line:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .top nav .btn { color: #08101f; }
html[data-theme="dark"] .top { background: rgba(7, 13, 29, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-theme="dark"] .film { background: #040914; }
html[data-theme="dark"] .phone, html[data-theme="dark"] .laptop, html[data-theme="dark"] .handset { background: var(--device); }
html[data-theme="dark"] .stagebox .handset { background: linear-gradient(var(--device), var(--device)) padding-box, var(--rim) border-box; }
html[data-theme="dark"] .screen-tabs button[aria-selected="true"] { color: #08101f; }
html[data-theme="dark"] mark { background: linear-gradient(transparent 55%, rgba(255, 228, 92, .45) 55%); }
/* hero */
html[data-theme="dark"] .show { background: var(--paper); }
html[data-theme="dark"] .show::after { background: linear-gradient(to bottom, rgba(7,13,29,0), var(--paper)); }
html[data-theme="dark"] .show.has-field::before { opacity: .5; }
html[data-theme="dark"] .show .pricebar, html[data-theme="dark"] .speed, html[data-theme="dark"] .show.has-field .show-cap p { background: rgba(13, 22, 48, .55); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .show .pricebar { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 24px 50px -30px rgba(0,0,0,.8); }
html[data-theme="dark"] .show.has-field .lead, html[data-theme="dark"] .show.has-field .show-cap p, html[data-theme="dark"] .show.has-field .pricebar span, html[data-theme="dark"] .show.has-field .pricebar em { color: #c3cde0; }
html[data-theme="dark"] .show.has-field .show-tabs [role="tab"] { color: #9fabc2; }
html[data-theme="dark"] .show.has-field .show-tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
html[data-theme="dark"] .floor { background-image: linear-gradient(rgba(140,170,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(140,170,255,.14) 1px, transparent 1px); }
html[data-theme="dark"] .card[data-pos="c"] { box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), 0 0 80px -10px rgba(120, 200, 255, .35); }
html[data-theme="dark"] .card[data-pos="l"], html[data-theme="dark"] .card[data-pos="r"] { filter: saturate(.8) brightness(.72); }
html[data-theme="dark"] .spot { background: radial-gradient(circle, rgba(60, 207, 126, .18), rgba(80, 140, 255, .12) 40%, transparent 70%); }
html[data-theme="dark"] .show-pause { background: var(--sheet); border-color: var(--rule); }
/* try section mockups keep their own light UI */
html[data-theme="dark"] .try { background: var(--sheet); border-color: var(--ink); }
html[data-theme="dark"] .field:focus-within { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .field input::placeholder { color: #7d89a3; }
html[data-theme="dark"] .field select option { background: var(--sheet); color: var(--ink); }
/* tables and lists */
html[data-theme="dark"] .tiers td.n { color: #6d7a94; }
html[data-theme="dark"] .tiers .pick, html[data-theme="dark"] .plan.main { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .compare td.was { color: #8b97ae; }

/* ---- v6.1: examples redrawn for the night theme ----------------------------------------- */
html[data-theme="dark"] .floor { display: none; }
/* portfolio cards: dark browser chrome, screens slightly dimmed so they glow instead of glare */
html[data-theme="dark"] .card { background: #0f1830; }
html[data-theme="dark"] .card-bar { background: #141f3d; border-bottom-color: #23314f; }
html[data-theme="dark"] .card-bar i { background: #33426a; }
html[data-theme="dark"] .card-bar span { background: #0b1328; color: #9fb0d0; }
html[data-theme="dark"] .card img { filter: none; }
html[data-theme="dark"] .card::after { background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 30%, rgba(7,13,29,0) 60%, rgba(7,13,29,.35) 100%); }

/* try section: the site preview in a dark version */
html[data-theme="dark"] .phone-in { background: #0e1730; color: #e6ecf8; }
html[data-theme="dark"] .s-head b { color: color-mix(in srgb, var(--brand) 45%, #ffffff); }
html[data-theme="dark"] .s-menu { border-color: #e6ecf8; }
html[data-theme="dark"] .s-open { background: rgba(60, 207, 126, .14); color: #6fe0a2; }
html[data-theme="dark"] .is-closed .s-open { background: rgba(255, 107, 129, .14); color: #ff8b9c; }
html[data-theme="dark"] .s-hero { background: color-mix(in srgb, var(--brand) 32%, #0e1730); }
html[data-theme="dark"] .s-hero h2 { color: #ffffff; }
html[data-theme="dark"] .s-mono { background: color-mix(in srgb, var(--brand) 70%, #ffffff); color: #0e1730; }
html[data-theme="dark"] .s-btn { background: color-mix(in srgb, var(--brand) 55%, #ffffff); color: #0e1730; }
html[data-theme="dark"] .s-btn.alt { background: transparent; color: #e6ecf8; border-color: color-mix(in srgb, var(--brand) 55%, #ffffff); }
html[data-theme="dark"] .s-prices li { border-bottom-color: #22304f; }
html[data-theme="dark"] .s-where { color: #9fb0d0; }
/* Google business profile in Google's own dark mode */
html[data-theme="dark"] .gcard { background: #202124; color: #e8eaed; border-color: #3c4043; }
html[data-theme="dark"] .g-map { background:
  linear-gradient(90deg, transparent 47%, #3c4043 47% 53%, transparent 53%) 0 0 / 70px 100%,
  linear-gradient(0deg, transparent 44%, #3c4043 44% 56%, transparent 56%) 0 0 / 100% 46px, #2a2d31; }
html[data-theme="dark"] .g-kind, html[data-theme="dark"] .g-open { color: #9aa0a6; }
html[data-theme="dark"] .g-open .js-open-short { color: #81c995; }
html[data-theme="dark"] .is-closed .g-open .js-open-short { color: #f28b82; }
html[data-theme="dark"] .g-actions span { color: #8ab4f8; border-color: #5f6368; }
/* Instagram post in Instagram's dark mode */
html[data-theme="dark"] .post { background: #000000; color: #f5f5f5; border-color: #262626; }
html[data-theme="dark"] .p-img { background-color: color-mix(in srgb, var(--brand) 75%, #000000); }

/* ---- v6.2: devices tidy-up. The mark hovers above the screens, not over them; side screens read as screens. */
.mark3d { top: -170px; right: -9%; width: 32%; }
.show .stagebox { margin-top: 120px; }
@media (max-width: 960px) { .mark3d { top: -150px; width: 34%; } .show .stagebox { margin-top: 110px; } }
@media (max-width: 560px) { .mark3d { top: -112px; right: -6%; width: 36%; } .show .stagebox { margin-top: 84px; } }
html[data-theme="dark"] .card[data-pos="l"], html[data-theme="dark"] .card[data-pos="r"] { filter: brightness(.85) saturate(.9); opacity: .9; box-shadow: 0 0 0 1px rgba(160, 190, 255, .28), 0 30px 60px -30px rgba(0,0,0,.9); }
html[data-theme="dark"] .card[data-pos="c"] { box-shadow: 0 0 0 1px rgba(160, 190, 255, .35), 0 50px 100px -40px rgba(0,0,0,.9), 0 0 80px -10px rgba(120, 200, 255, .35); }

/* ---- contact form: short, no captcha, no cookies --------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); margin-top: 32px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact .contact-grid .lines { margin-top: 0; }
.cform { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; }
.cf { display: grid; gap: 6px; }
.cf span, .cf-need legend { font-size: .9rem; font-weight: 600; color: var(--graphite); }
.cf i { font-style: normal; font-weight: 400; opacity: .8; }
.cf input, .cf textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; min-height: 48px; width: 100%; }
.cf textarea { resize: vertical; min-height: 84px; }
.cf input:focus, .cf textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(124, 178, 255, .3); }
.cf input[aria-invalid="true"] { border-color: var(--pen); }
.cf input::placeholder { color: #6f7b94; }
.cf-need { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cf-need legend { margin-bottom: 8px; padding: 0; }
.cf-need label { cursor: pointer; }
.cf-need input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf-need span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); color: var(--graphite); font-weight: 600; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.cf-need input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cf-need input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.cform .btn { justify-self: start; }
.cform .btn:disabled { opacity: .6; cursor: wait; }
.cf-status { min-height: 1.4em; font-weight: 600; }
.cf-status.is-ok { color: var(--open); }
.cf-status.is-err { color: var(--pen); }
.cf-status a { margin-left: 4px; }
.cf-note { font-size: .85rem; color: var(--graphite); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* try: the step from preview to a full demo site */
.try-full { margin-top: 14px; }
@media (max-width: 560px) { .try-full { width: 100%; } .desk .small { display: block; } }

/* glass mark removed from the hero (14.11.): give the portfolio its space back */
.mark3d { display: none; }
.show .stagebox { margin-top: 0; }
@media (max-width: 960px) { .show .stagebox { margin-top: 8px; } }
@media (max-width: 560px) { .show .stagebox { margin-top: 8px; } }