/* Tissel Canvas: the home page's sections. The tokens, type, buttons and the
   toolbar come from chrome.css. The page keeps the look of a designer's canvas
   (the dot grid, white artboards, the blue, the notes from Σπύρος), but nothing
   on it pretends to be a tool you have to work: every section scrolls normally. */

:root {
  --sc-canvas: var(--canvas);
  --sc-surface: var(--frame);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-2);
  --sc-accent: var(--blue);
  --sc-accent-ink: #fff;
  --sc-font-display: "Manrope", system-ui, sans-serif;
  --sc-font-text: "Manrope", system-ui, sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ------------------------------------------------------------ 1 · hero -- */
/* the first artboard: what I do, three prices, a real demo beside them */
.stage-hero { padding: calc(var(--chrome) + 44px) var(--gut) 0 var(--edge-l); }
.frame--hero { max-width: 1840px; } /* as wide as the page, so no empty strip beside it */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; padding: clamp(24px, 3.4vw, 56px); }
.hero__kicker { font: 500 12px/1.3 var(--mono); color: var(--ink-2); margin: 0 0 16px; }
.hero__h { font: 800 clamp(2.1rem, 0.9rem + 2.9vw, 3.9rem)/1.02 "Manrope", sans-serif; letter-spacing: -0.045em; margin: 0; text-wrap: balance; }
.hero__h span { color: var(--blue-ink); }
.hero__sub { margin: 18px 0 0; color: var(--ink-2); font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.1rem); line-height: 1.55; max-width: 44ch; }
.hero__cta { display: inline-flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.slot { margin: 0; }
.slot__real { display: flex; flex-direction: column; background: var(--frame); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--sh-1); }
.slot__cap { margin: 12px 2px 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.slot__cap a { font-weight: 700; text-underline-offset: 0.2em; }
.bbar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: var(--skel-2); border-bottom: 1px solid var(--line); flex: none; }
.bbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--skel-3); }
.bbar span { margin-left: 8px; font: 400 10.5px/1 var(--mono); color: var(--ink-3); background: var(--frame); padding: 3px 10px; border-radius: 5px; }
.bview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }

/* the demo wall (inc/wall.php): every demo on a canvas tilted back in 3D. The
   columns drift (half a track's height, so the loop is seamless), the pointer
   leans the canvas a little, and the card in front names one demo at a time;
   page.js turns the card when its bar fills. Motion stops off screen, while
   the card has the pointer or focus, with its pause button, and for reduced motion. */
.wall { position: relative; margin: 0; --rx: 32deg; --rz: -20deg; --ws: 1.04; --mx: 0; --my: 0; }
.wall__view {
  position: relative; height: clamp(460px, 40vw, 640px); overflow: hidden; border-radius: 12px;
  background-color: var(--canvas); background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.4px); background-size: 18px 18px;
  perspective: 1600px; perspective-origin: 50% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); mask-composite: intersect;
}
.wall__plane {
  position: absolute; left: 50%; top: 50%; height: 1400px; overflow: hidden; display: flex; gap: 22px; align-items: flex-start;
  transform: translate(-50%, -50%) rotateX(calc(var(--rx) - var(--my) * 4deg)) rotateZ(calc(var(--rz) + var(--mx) * 3deg)) scale(var(--ws));
  transition: transform 1.1s var(--ease); animation: wall-in 1.5s var(--ease) 0.1s backwards;
}
@keyframes wall-in { from { opacity: 0; transform: translate(-50%, -44%) rotateX(0deg) rotateZ(0deg) scale(0.8); } }
.wall__col { flex: none; width: 236px; }
.wall__col--phone { width: 112px; }
.wall__track { animation: wall-drift 70s linear infinite; will-change: transform; }
.wall__col:nth-child(2) .wall__track { animation-duration: 54s; animation-direction: reverse; }
.wall__col:nth-child(3) .wall__track { animation-duration: 82s; }
.wall__col:nth-child(4) .wall__track { animation-duration: 60s; animation-direction: reverse; }
.wall__col:nth-child(5) .wall__track { animation-duration: 76s; }
@keyframes wall-drift { to { transform: translateY(-50%); } }
.wall__col:hover .wall__track { animation-play-state: paused; }
.wall__card { display: block; padding-bottom: 22px; color: inherit; text-decoration: none; }
.wall__lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 6px; font: 500 10px/1.2 var(--mono); color: var(--ink-3); white-space: nowrap; }
.wall__lbl b { font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.wall__lbl i { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.wall__art { display: block; overflow: hidden; background: var(--frame); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--sh-1); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), outline-color 0.3s; outline: 2px solid transparent; outline-offset: 3px; }
.wall__bar { display: flex; align-items: center; gap: 4px; height: 13px; padding: 0 7px; background: var(--skel-2); border-bottom: 1px solid var(--line); }
.wall__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--skel-3); }
.wall__art img { display: block; width: 100%; height: auto; }
.wall__card--phone .wall__art { padding: 4px; border-radius: 16px; background: #0E0E10; border-color: #0E0E10; }
.wall__card--phone .wall__art img { border-radius: 12px; }
.wall__card:hover .wall__art { transform: translateY(-4px); box-shadow: var(--sh-2); outline-color: var(--blue-line); }
.wall__card.is-on .wall__art { outline-color: var(--blue); box-shadow: var(--sh-2); }
.wall__card.is-on .wall__lbl b { color: var(--blue-ink); }

.wall__spot { position: absolute; left: 18px; bottom: 54px; z-index: 2; width: min(330px, calc(100% - 36px)); margin: 0; padding: 16px 16px 12px; background: var(--frame); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-2); }
.wall__k { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font: 500 11px/1.2 var(--mono); color: var(--ink-3); }
.wall__n { font-weight: 700; color: var(--blue-ink); }
.wall__name { margin: 0; font-weight: 800; font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.wall__desc { margin: 6px 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); min-height: 2.9em; }
.wall.is-swap .wall__txt { animation: wall-swap 0.55s var(--ease); }
@keyframes wall-swap { from { opacity: 0; transform: translateY(6px); } }
.wall__go { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.wall__price { font-size: 0.9rem; color: var(--ink-2); }
.wall__price b { color: var(--ink); font-weight: 800; }
.wall__go .btn { min-height: 40px; padding: 0 16px; font-size: 0.92rem; }
.wall__nav { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.wall__btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--frame); color: var(--ink-2); font: 600 16px/1 var(--sans); cursor: pointer; }
.wall__btn:hover { color: var(--ink); border-color: var(--field-line); }
.wall__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wall__btn--pause::before { content: ""; width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.wall.is-stopped .wall__btn--pause::before { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.wall__prog { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: var(--track); }
.wall__prog i { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; animation: wall-prog 5.5s linear forwards; }
@keyframes wall-prog { to { transform: scaleX(1); } }
.wall.is-held .wall__track, .wall.is-held .wall__prog i { animation-play-state: paused; }
.wall.is-stopped .wall__prog i { animation: none; }
.wall > .slot__cap { margin-top: 12px; }
/* the light look's colour (chrome.css): the wall on a blue-violet canvas, the
   three prices in their own tints, the seven steps in turn, the line between
   them in the wash's blue */
html:not([data-mode]) .wall__view { background-color: #EDF1FF; background-image: radial-gradient(circle, #C3CDF0 1px, transparent 1.4px), radial-gradient(70% 60% at 100% 100%, rgba(147, 51, 201, 0.10), transparent 70%), radial-gradient(60% 50% at 0% 0%, rgba(37, 99, 235, 0.08), transparent 70%); background-size: 18px 18px, 100% 100%, 100% 100%; }
html:not([data-mode]) .specs { background: var(--frame); }
html:not([data-mode]) .specs li:nth-child(1) { --tint: #EEF3FF; --tint-ink: #1E4FD6; }
html:not([data-mode]) .specs li:nth-child(2) { --tint: #F3EEFF; --tint-ink: #6D28D9; }
html:not([data-mode]) .specs li:nth-child(3) { --tint: #FFF3E2; --tint-ink: #A84A06; }
html:not([data-mode]) .specs a { background: var(--tint); }
html:not([data-mode]) .specs a:hover { background: var(--frame); }
html:not([data-mode]) .specs__k { color: var(--tint-ink); font-weight: 600; }
html:not([data-mode]) .fstep:nth-child(7n+1) { --step: #2563EB; }
html:not([data-mode]) .fstep:nth-child(7n+2) { --step: #6D28D9; }
html:not([data-mode]) .fstep:nth-child(7n+3) { --step: #0F766E; }
html:not([data-mode]) .fstep:nth-child(7n+4) { --step: #B45309; }
html:not([data-mode]) .fstep:nth-child(7n+5) { --step: #BE185D; }
html:not([data-mode]) .fstep:nth-child(7n+6) { --step: #15803D; }
html:not([data-mode]) .fstep:nth-child(7n+7) { --step: #4338CA; }
html:not([data-mode]) .fstep__n { background: var(--step); }
html:not([data-mode]) .fstep { box-shadow: inset 0 3px 0 var(--step), var(--sh-1); }
html:not([data-mode]) .wires__all { stroke: #A9B6EC; }
@media (prefers-reduced-motion: reduce) {
  .wall__plane, .wall__track, .wall__prog i, .wall.is-swap .wall__txt { animation: none; }
  .wall__plane, .wall__art { transition: none; }
  .wall__prog, .wall__btn--pause { display: none; }
  .wall__nav { justify-content: space-between; }
}
@media (max-width: 860px) {
  .wall { --rx: 28deg; --rz: -18deg; --ws: 0.78; }
  .wall__view { height: 340px; }
  .wall__spot { position: relative; left: auto; bottom: auto; width: auto; margin-top: -46px; margin-inline: 12px; }
}

.insp { background: var(--frame); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-2); }
.insp__h { margin: 0 0 8px; font: 500 11px/1.2 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.insp__t { margin: 0 0 10px; font-weight: 800; font-size: 0.98rem; }
.insp__dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; font-size: 12px; }
.insp__dl dt { font-family: var(--mono); color: var(--ink-3); }
.insp__dl dd { margin: 0; font-family: var(--mono); color: var(--ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a note from Σπύρος, set in the page (no longer floating over it) */
.cmt { display: flex; gap: 9px; align-items: flex-start; width: max-content; max-width: 270px; padding: 10px 13px 11px 10px; background: var(--frame); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; box-shadow: var(--sh-2); }
.cmt p { margin: 2px 0 0; font-size: 0.92rem; line-height: 1.4; font-weight: 600; }
/* ------------------------------------------------------------ 2 · rail -- */
/* a plain section: the lead, then a row that swipes sideways (chrome.js) and
   runs out to the right edge of the canvas */
.rail-sec { padding: calc(var(--chrome) + 56px) var(--gut) 64px var(--edge-l); }
.rail__lead { max-width: 46rem; }
.rail__lead p:not(.frame__label), .rail__end p:not(.frame__label) { color: var(--ink-2); font-size: 1.05rem; line-height: 1.55; max-width: 40ch; margin: 18px 0 0; }
/* every sector by name: pick yours and the row slides to it */
.rail__pick { display: grid; gap: 6px; margin-top: 20px; max-width: 22rem; font-weight: 700; font-size: 0.92rem; }
.rail__pick select { min-height: 46px; padding: 0 40px 0 14px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; color: var(--ink); font: 600 1rem/1.2 var(--sans); appearance: none; cursor: pointer; }
.rail__pick select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rail { --hr-w: min(34rem, 80vw); --hr-gap: clamp(28px, 3.4vw, 56px); --hr-pad: 4px; }
.rail.is-hrail { margin-right: calc(-1 * var(--gut)) !important; padding-right: var(--gut) !important; padding-bottom: 30px !important; scroll-padding-inline: 4px; }
.rail__end { align-self: center; padding: 28px; background: var(--frame); border: 1px dashed var(--dash-blue); border-radius: 10px; }
.rail__end .h2 { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); }
.rail__end .btn { margin-top: 22px; }
.pair { flex: 0 0 min(36rem, 84vw); }
.pair .frame__label span:first-child { color: var(--ink); font-weight: 500; }
.pair.is-front .frame__label span:first-child { color: var(--blue-ink); }
.pair__art { position: relative; margin-right: 6%; }
.pair__desk { background: var(--frame); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--sh-2); transition: outline-color 200ms var(--ease); outline: 1.5px solid transparent; outline-offset: 5px; }
.pair.is-front .pair__desk { outline-color: var(--blue); }
.pair__desk img { width: 100%; height: auto; max-height: min(52vh, 27rem); object-fit: cover; object-position: top; display: block; }
.pair__phone { position: absolute; right: -8%; bottom: -26px; width: 27%; aspect-ratio: 332 / 720; border-radius: 16px; overflow: hidden; background: #0d0d10; box-shadow: 0 0 0 4px #121214, 0 0 0 5px #3A3A40, 0 22px 40px -14px rgba(18, 18, 20, 0.45); }
.pair__phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pair__txt { margin-top: 40px; max-width: 30rem; }
.pair__txt p { margin: 0; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
.pair__txt b { color: var(--ink); }
.pair__go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.pair__go a { font-weight: 700; text-underline-offset: 0.22em; }
.pair__go button { border: 0; cursor: pointer; min-height: 36px; padding: 0 14px; border-radius: 8px; background: var(--ink); color: var(--on-ink); font: 700 0.88rem/1 "Manrope", sans-serif; }
.pair__go button:hover { background: var(--blue); color: #fff; }
.pair__go button[aria-pressed="true"] { background: var(--blue); color: #fff; }

/* ----------------------------------------------------------- 3 · price -- */
.price { display: grid; grid-template-columns: 1fr minmax(320px, 380px); grid-template-areas: "head head" "board insp"; gap: 36px clamp(28px, 4vw, 64px); padding: calc(var(--chrome) + 64px) var(--gut) 96px var(--edge-l); align-items: start; }
.price__head { grid-area: head; }
.board-wrap { grid-area: board; }
.board-wrap { position: sticky; top: calc(var(--chrome) + 28px); }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 38px 22px; }
.pg { animation: pgIn 420ms var(--ease) both; }
@keyframes pgIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.pg .frame__label { margin-bottom: 7px; font-size: 11px; }
.pg__t { position: relative; aspect-ratio: 4 / 3; background: var(--frame); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--sh-1); overflow: hidden; padding: 9px; display: grid; gap: 5px; align-content: start; }
.pg__t i { display: block; height: 7px; border-radius: 3px; background: var(--skel); }
.pg__t i.b { height: 26px; background: var(--skel-2); }
.pg__t i.s { width: 60%; }
.pg__t i.c { height: 18px; background: var(--blue-tint); width: 40%; }
.pg__t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pg--shop .pg__t { background: var(--well); }
.pg__chip { font: 500 10px/1 var(--mono); color: var(--ok-ink); background: var(--ok-bg); border-radius: 4px; padding: 2px 5px; }
.pg--first .pg__t { outline: 1.5px solid var(--blue); outline-offset: 4px; }
.board__cap { margin: 22px 0 0; font: 500 12px/1.4 var(--mono); color: var(--ink-2); }

.insp--main { grid-area: insp; position: sticky; top: calc(var(--chrome) + 16px); padding: 4px 0 0; }
.insp__sec { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.insp__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; }
.insp__row .insp__h { margin: 0; }
.insp__row .insp__note { grid-column: 1 / -1; }
.insp__note { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); }
.insp__val { margin: 0; font-weight: 700; font-size: 0.92rem; text-align: right; }
.insp__val a { font-weight: 600; margin-left: 6px; }
.segs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--well); border-radius: 9px; border: 1px solid var(--line); }
.seg, .pkg { position: relative; cursor: pointer; }
.seg input, .pkg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 8px 6px; border-radius: 7px; font-weight: 700; font-size: 0.88rem; color: var(--ink-2); }
.seg input:checked + span { background: var(--frame); color: var(--ink); box-shadow: 0 1px 3px rgba(18, 18, 20, 0.14); }
.seg input:focus-visible + span, .pkg input:focus-visible ~ .pkg__n { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 5px; }
.pkgs { display: grid; gap: 4px; }
.pkg { display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; border-radius: 8px; font-size: 0.92rem; }
.pkg:hover { background: var(--well); }
.pkg__n { font-weight: 700; }
.pkg__p { font: 500 12.5px/1 var(--mono); color: var(--ink-2); }
.pkg:has(input:checked) { background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
.pkg:has(input:checked) .pkg__p { color: var(--blue-ink); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--frame); }
.stepper button { width: 34px; height: 34px; border: 0; background: none; font: 700 1.05rem/1 "Manrope", sans-serif; cursor: pointer; border-radius: 8px; color: var(--ink); }
.stepper button:hover:not(:disabled) { background: var(--well); }
.stepper button:disabled { color: var(--ctl-off); cursor: not-allowed; }
.stepper__n { min-width: 40px; text-align: center; font: 500 13px/1 var(--mono); }
details { margin: 0; }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 0.9rem; min-height: 36px; }
summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font: 500 15px/1 var(--mono); color: var(--ink-3); }
.more[open] summary::after { content: "−"; }
.more + .more { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
.more ul { margin: 2px 0 6px; padding-left: 18px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.help { margin-top: 8px; }
.help summary { font-size: 0.86rem; font-weight: 600; color: var(--blue-ink); justify-content: flex-start; min-height: 30px; }
.help__body { display: grid; gap: 8px; padding: 4px 0 2px; font-size: 0.86rem; line-height: 1.4; }
.help__body label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.help__body input { margin-top: 2px; accent-color: var(--blue); }
.help__out { margin: 2px 0 0; font-weight: 700; }
.help__out button { margin-left: 6px; border: 0; background: var(--blue); color: #fff; border-radius: 6px; padding: 4px 9px; font-weight: 700; cursor: pointer; }
.payback { display: grid; gap: 8px; padding: 4px 0 6px; font-size: 0.88rem; }
.payback label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.payback input { width: 74px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; text-align: right; font: 500 13px var(--mono); background: var(--frame); }
.payback__out { margin: 2px 0 0; font-size: 0.95rem; }
.payback__out b { font-size: 1.2rem; }
.insp__total { padding: 16px 18px 18px; }
.total { margin: 0; display: flex; align-items: flex-start; gap: 4px; font: 800 3.1rem/1 "Manrope", sans-serif; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.total__e { font-size: 1.5rem; margin-top: 0.3rem; }
.total__meta { margin: 8px 0 14px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); }
.total__meta b { color: var(--ink); }

/* ------------------------------------------------------------ 4 · flow -- */
/* the seven steps, all shown at once and joined by a dashed line (page.js draws it) */
.stage-flow { position: relative; padding: calc(var(--chrome) + 40px) var(--gut) 20px var(--edge-l); }
.flow { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "a b c" "f e d"; gap: 44px 48px; position: relative; z-index: 2; }
.fstep:nth-child(1) { grid-area: a; } .fstep:nth-child(2) { grid-area: b; } .fstep:nth-child(3) { grid-area: c; } .fstep:nth-child(4) { grid-area: d; }
.fstep:nth-child(5) { grid-area: e; } .fstep:nth-child(6) { grid-area: f; }
.fstep { background: var(--frame); border: 1px solid var(--line); border-radius: 8px; padding: 16px 16px 18px; box-shadow: var(--sh-1); }
.fstep__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 500 12px/1 var(--mono); background: var(--blue); color: #fff; }
.fstep h3 { margin: 12px 0 0; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.fstep p { margin: 6px 0 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.45; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.wires__all { fill: none; stroke: var(--dash); stroke-width: 1.5; stroke-dasharray: 4 5; }
.flow__note { margin: 40px 0 0; font-size: 0.95rem; color: var(--ink-2); max-width: 60ch; }

/* ----------------------------------------------------------- 5 · about -- */
.about { padding: calc(var(--chrome) + 72px) var(--gut) 96px var(--edge-l); max-width: 980px; margin: 0 auto; }
.thread { display: grid; gap: 18px; margin-top: 8px; }
.msg { display: flex; gap: 14px; align-items: flex-start; }
.msg__body { background: var(--frame); border: 1px solid var(--line); border-radius: 4px 18px 18px 18px; padding: 18px 22px 20px; box-shadow: var(--sh-1); }
.msg__body p { margin: 10px 0 0; color: var(--ink-2); line-height: 1.6; font-size: 1.05rem; max-width: 62ch; }
.msg__who { margin: 0 !important; font-weight: 800; color: var(--ink) !important; font-size: 0.95rem !important; }
.msg__who span { font: 500 11px/1 var(--mono); color: var(--ink-3); margin-left: 6px; }
.msg__big { font-weight: 800 !important; color: var(--ink) !important; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem) !important; line-height: 1.15 !important; letter-spacing: -0.03em; }
.msg--reply { margin-left: 56px; }
.stickies { list-style: none; margin: 46px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.sticky { width: 168px; min-height: 132px; padding: 16px; background: var(--sticky); color: var(--sticky-ink); font-size: 0.92rem; line-height: 1.35; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 12px 24px -14px rgba(60, 50, 10, 0.4); }
.sticky:nth-child(1) { rotate: -2deg; } .sticky:nth-child(2) { rotate: 1.5deg; } .sticky:nth-child(3) { rotate: -1deg; } .sticky:nth-child(4) { rotate: 2deg; }
.sticky b { display: block; font-weight: 800; font-size: 1.7rem; letter-spacing: -0.04em; margin-bottom: 6px; color: #231E07; }

/* ------------------------------------------------------ 6 · components -- */
.comps-wrap { padding: calc(var(--chrome) + 56px) var(--gut) 96px var(--edge-l); }
.comps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.comp { background: var(--frame); border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 18px; box-shadow: var(--sh-1); }
.comp h3 { margin: 14px 6px 0; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; }
.comp p { margin: 6px 6px 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
.comp__demo { position: relative; height: 158px; border-radius: 7px; background: var(--well); border: 1px solid var(--line); overflow: hidden; }
.comp__demo--build { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 18px 46px 1fr; gap: 7px; padding: 12px; }
.comp__demo--build i { background: var(--frame); border: 1px solid var(--line); border-radius: 4px; opacity: 0; transform: translateY(8px); }
.comp__demo--build i:nth-child(1) { grid-column: 1 / -1; } .comp__demo--build i:nth-child(2) { grid-column: 1 / -1; background: var(--blue-tint); border-color: var(--blue-line); }
.sc-in .comp__demo--build i, .comp:hover .comp__demo--build i { animation: blk 520ms var(--ease) forwards; }
.comp__demo--build i:nth-child(2) { animation-delay: 90ms !important; } .comp__demo--build i:nth-child(3) { animation-delay: 180ms !important; }
.comp__demo--build i:nth-child(4) { animation-delay: 270ms !important; } .comp__demo--build i:nth-child(5) { animation-delay: 360ms !important; }
@keyframes blk { to { opacity: 1; transform: none; } }
.comp__demo--shop { display: flex; align-items: center; gap: 14px; padding: 14px; }
.mini-prod { width: 92px; flex: none; background: var(--frame); border: 1px solid var(--line); border-radius: 6px; padding: 6px; display: grid; gap: 5px; }
.mini-prod__img { height: 64px; border-radius: 4px; background: linear-gradient(135deg, var(--blue-tint), var(--well)); }
.mini-prod__l { height: 6px; border-radius: 3px; background: var(--track); } .mini-prod__l--s { width: 55%; background: var(--blue-tint); }
.mini-add { border: 0; cursor: pointer; min-height: 36px; padding: 0 14px; border-radius: 8px; background: var(--ink); color: var(--on-ink); font: 700 0.86rem/1 "Manrope", sans-serif; }
.mini-add:hover { background: var(--blue); color: #fff; }
.mini-cart { position: absolute; right: 12px; top: 12px; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--frame); border: 1px solid var(--line); font: 500 12px/1 var(--mono); }
.mini-cart.is-bump { animation: bump 320ms var(--ease); }
@keyframes bump { 40% { transform: scale(1.25); background: var(--blue); color: #fff; } }
.comp__demo--seo { padding: 16px; display: grid; align-content: center; gap: 4px; background: var(--frame); }
.serp__url { font-size: 11.5px; color: var(--serp-ink); }
.serp__t { font-size: 15px; color: var(--serp-link); font-weight: 600; line-height: 1.25; }
.serp__d { font-size: 12px; color: var(--serp-ink); line-height: 1.4; }
.ab { position: absolute; inset: 0; }
.ab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ab__before { filter: grayscale(1) contrast(0.85) blur(1.2px) brightness(1.06); clip-path: inset(0 calc(100% - var(--ab)) 0 0); }
.ab::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--ab); width: 2px; translate: -1px 0; background: var(--blue); pointer-events: none; }
.ab__tag { position: absolute; top: 8px; font: 500 10px/1 var(--mono); background: var(--frame); padding: 3px 6px; border-radius: 4px; color: var(--ink-2); }
.ab__tag--b { left: 8px; } .ab__tag--a { right: 8px; color: var(--blue-ink); }
.ab__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ab__range:focus-visible + * { outline: none; }
.comp__demo--care { display: grid; align-content: center; gap: 12px; padding: 18px; }
.tog { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.tog input { position: absolute; opacity: 0; }
.tog__ui { width: 38px; height: 22px; border-radius: 999px; background: var(--ctl-off); position: relative; transition: background-color 160ms var(--ease); flex: none; }
.tog__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 160ms var(--ease); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.tog input:checked + .tog__ui { background: var(--blue); }
.tog input:checked + .tog__ui::after { transform: translateX(16px); }
.tog input:focus-visible + .tog__ui { outline: 2px solid var(--blue); outline-offset: 2px; }
.care__price { margin: 0; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.04em; }
.care__price span { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.comp__demo--speed { display: grid; align-content: center; gap: 10px; padding: 20px; }
.load { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.load i { display: block; height: 100%; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
.sc-in .load i, .comp:hover .load i { animation: load 900ms var(--ease) forwards; }
@keyframes load { to { transform: scaleX(1); } }
.load__l { font: 500 11px/1 var(--mono); color: var(--ink-3); }

/* ------------------------------------------------------------- 7 · faq -- */
.faq-wrap { display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: 40px clamp(28px, 5vw, 80px); padding: calc(var(--chrome) + 56px) var(--gut) 96px var(--edge-l); align-items: start; }
.faq { display: grid; gap: 10px; margin-top: 30px; }
.q summary { justify-content: flex-start; gap: 12px; padding: 0; min-height: 0; }
.q summary span { background: var(--frame); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; padding: 12px 16px; font-size: 1rem; font-weight: 700; box-shadow: var(--sh-1); transition: box-shadow 160ms var(--ease); }
.q summary:hover span { box-shadow: inset 0 0 0 1px var(--ink-3), var(--sh-1); }
.q[open] summary span { box-shadow: inset 0 0 0 1px var(--green), var(--sh-1); }
.q .a { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 8px 38px; }
.q .a p { margin: 0; background: var(--blue-tint); border-radius: 4px 16px 16px 16px; padding: 12px 16px; color: var(--tint-ink); line-height: 1.55; max-width: 60ch; }
.check { position: sticky; top: calc(var(--chrome) + 24px); background: var(--frame); border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: var(--sh-2); }
.check h3 { margin: 0; font-weight: 800; font-size: 1.15rem; }
.check__s { margin: 6px 0 12px; font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; }
.check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check label { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; cursor: pointer; font-size: 0.92rem; }
.check input { grid-row: span 2; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--blue); }
.check span { color: var(--ink-2); font-size: 0.84rem; line-height: 1.4; }
.check__out { margin: 14px 0 0; font-weight: 700; font-size: 0.9rem; color: var(--blue-ink); }

/* ----------------------------------------------------------- 8 · close -- */
.stage-close { position: relative; padding: calc(var(--chrome) + 64px) var(--gut) 8px; display: grid; place-items: center; }
.frame--close { width: min(940px, calc(100vw - var(--edge-l) - var(--gut) - 160px)); margin-left: var(--rule); }
.close { padding: clamp(28px, 4vw, 52px); }
.sum { margin: 26px 0 0; display: grid; grid-template-columns: repeat(5, auto); gap: 6px 28px; justify-content: start; }
.sum div { display: grid; gap: 4px; }
.sum dt { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.sum dd { margin: 0; font-weight: 700; font-size: 0.98rem; }
.sum__t dd { color: var(--blue-ink); font-weight: 800; }
.close__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 30px; }
.close__go p { margin: 0; color: var(--ink-2); max-width: 38ch; line-height: 1.5; }

/* ------------------------------------------- hero: trust line, prices -- */
.hero__trust { margin: 14px 0 0; font: 500 12px/1.5 var(--mono); color: var(--ink-2); white-space: pre-wrap; }
.specs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; background: var(--well); overflow: hidden; max-width: 34rem; }
.specs li + li { border-left: 1px solid var(--line); }
.specs a { display: grid; gap: 3px; padding: 9px 12px 10px; color: var(--ink); text-decoration: none; height: 100%; }
.specs a:hover { background: var(--blue-tint); }
.specs__k { font: 500 10.5px/1.2 var(--mono); color: var(--ink-3); }
.specs__v { font-size: 0.86rem; font-weight: 600; }
.specs__v b { font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em; }
.specs__n { font-size: 0.74rem; line-height: 1.3; color: var(--ink-2); }

/* ------------------------------------------------------------- works -- */
.works, .paths, .contact { padding: calc(var(--chrome) + 56px) var(--gut) 88px var(--edge-l); }
.works__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 44px 32px; margin-top: 40px; }
.work .frame__label span:first-child { color: var(--ink); }
.work__art { background: var(--frame); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--sh-2); transition: outline-color 200ms var(--ease); outline: 1.5px solid transparent; outline-offset: 5px; }
.work:hover .work__art { outline-color: var(--blue); }
.work__shot { position: relative; aspect-ratio: 16 / 7.4; background: var(--well); overflow: hidden; }
.work__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.work__ph { position: absolute; inset: 0; display: grid; place-items: center; font: 800 4rem/1 var(--sans); color: var(--line); }
.work h3 { margin: 18px 0 0; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; }
.work p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.55; max-width: 52ch; }
.work__go { display: inline-block; margin-top: 10px; font-weight: 700; text-underline-offset: 0.22em; }
.works__empty { margin-top: 32px; padding: 18px 20px; max-width: 60ch; background: var(--frame); border: 1px dashed var(--ink-3); border-radius: 8px; color: var(--ink-2); line-height: 1.55; }
.row-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.rail__all { display: inline-block; margin-top: 16px; font-weight: 700; text-underline-offset: 0.22em; }
.pair__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* ------------------------------------------------- two ways (variants) -- */
.variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; max-width: 980px; }
.variant .frame__label span:last-child { color: var(--ink); font-weight: 500; }
.variant__body { position: relative; height: calc(100% - 22px); display: flex; flex-direction: column; padding: 26px 26px 24px; background: var(--frame); border: 1px dashed var(--dash-blue); border-radius: 10px; box-shadow: var(--sh-1); }
.variant--custom .variant__body { border-style: solid; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint), var(--sh-2); }
.variant h3 { margin: 0; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; }
.variant__tag { margin: 6px 0 0; color: var(--ink-2); }
.variant ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.variant li { position: relative; padding-left: 26px; line-height: 1.45; }
.variant li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px; border-radius: 4px; background: var(--blue-tint) no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%232563EB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-mode="dark"] .variant li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%237AA2FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.variant__price { margin: auto 0 0; padding-top: 22px; font-weight: 800; font-size: 1.9rem; letter-spacing: -0.04em; }
.variant .btn { margin-top: 14px; align-self: flex-start; }

/* ------------------------------------------------- the price, extras -- */
.price__head .lead { margin-top: 14px; }
.board__note { margin: 14px 0 0; max-width: 60ch; font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); }
.board__note a { font-weight: 700; white-space: nowrap; text-underline-offset: 0.2em; }
.pkg__n small { display: block; margin-top: 3px; font: 500 10.5px/1.2 var(--mono); color: var(--ink-3); }
.more ul li.scope { list-style: none; margin: 0 0 4px -18px; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------- services -- */
.comps-wrap .lead { margin-bottom: 0; }
.comp__go { margin: 10px 6px 0 !important; font-size: 0.88rem !important; }
.comp__go a { font-weight: 700; text-underline-offset: 0.2em; margin-right: 12px; }

/* ------------------------------------------- about: the client dashboard -- */
.about { max-width: 1080px; }
.dash { position: relative; margin: 46px 0 0; }
.dash .frame__label { justify-content: space-between; }
.dash__art { background: var(--frame); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--sh-2); }
.dash__art img { display: block; width: 100%; height: auto; }
.cmt--static { position: relative; left: auto; top: auto; z-index: 2; width: fit-content; margin: -28px 0 0 auto; margin-right: clamp(0px, 4vw, 48px); max-width: 360px; }

/* ----------------------------------------------------------- reviews -- */
.reviews { padding: calc(var(--chrome) + 40px) var(--gut) 72px var(--edge-l); }
.reviews #testimonials { padding: 0 !important; max-width: 1100px; margin: 0 !important; }
.reviews .sec-label { font: 500 12px/1.2 var(--mono); color: var(--ink-2); text-align: left !important; margin-bottom: 10px; }
.reviews .sec-title { font: 800 clamp(2rem, 1.2rem + 3vw, 3.4rem)/1.04 var(--sans); letter-spacing: -0.04em; text-align: left !important; margin: 0 0 28px !important; }
.reviews .pack { background: var(--frame); border: 1px solid var(--line); border-radius: 4px 18px 18px 18px; box-shadow: var(--sh-1); color: var(--ink); }
.reviews .pack p { margin: 0; color: var(--ink-2); }
.reviews .pack .sub { color: var(--ink); }

/* -------------------------------------------------------- faq, extra -- */
.check__more { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 0.9rem; text-underline-offset: 0.2em; }

/* ----------------------------------------------------------- contact -- */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px clamp(28px, 5vw, 80px); align-items: start; }
.contact__dl { margin: 28px 0 0; display: grid; gap: 14px; }
.contact__dl div { display: grid; gap: 4px; }
.contact__dl dt { font: 500 11px/1 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.contact__dl dd { margin: 0; font-weight: 700; font-size: 1.08rem; }
.contact__dl a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.contact__dl a:hover { color: var(--blue-ink); }
.contact__form { padding-top: 24px; }
.contact__form .frame__label { justify-content: space-between; }
.contact__frame { background: var(--frame); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--sh-2); padding: clamp(18px, 3vw, 30px); }
.contact__frame .wpforms-container { margin: 0 !important;
  --wpforms-field-border-radius: 8px; --wpforms-field-border-color: var(--field-line); --wpforms-field-background-color: var(--field); --wpforms-field-text-color: var(--ink);
  --wpforms-label-color: var(--ink); --wpforms-label-sublabel-color: var(--ink-2); --wpforms-label-error-color: var(--red-ink);
  --wpforms-button-border-radius: 10px; --wpforms-button-background-color: var(--blue); --wpforms-button-text-color: #fff;
  --wpforms-field-size-input-height: 46px; --wpforms-field-size-font-size: 16px; --wpforms-label-size-font-size: 14px; }
.contact__frame .wpforms-field { padding: 0 0 16px !important; }
.contact__frame .wpforms-field-label { font: 700 0.9rem/1.3 var(--sans) !important; color: var(--ink) !important; margin-bottom: 6px !important; }
.contact__frame .wpforms-required-label { color: var(--blue-ink) !important; }
.contact__frame input:not([type=checkbox]):not([type=radio]), .contact__frame textarea, .contact__frame select { width: 100% !important; max-width: 100% !important; font: 500 1rem/1.4 var(--sans) !important; color: var(--ink) !important; background: var(--field) !important; border: 1px solid var(--field-line) !important; border-radius: 8px !important; padding: 11px 13px !important; box-shadow: none !important; }
.contact__frame textarea { min-height: 130px; }
.contact__frame input:focus, .contact__frame textarea:focus, .contact__frame select:focus { outline: none !important; border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-tint) !important; }
.contact__frame .wpforms-submit-container { padding: 4px 0 0 !important; }
.contact__frame button[type=submit], .contact__frame .wpforms-submit { min-height: 46px !important; padding: 0 26px !important; border: 0 !important; border-radius: 10px !important; background: var(--blue) !important; color: #fff !important; font: 700 0.98rem/1 var(--sans) !important; cursor: pointer; box-shadow: 0 1px 1px rgba(18, 18, 20, 0.12), 0 8px 18px -8px rgba(37, 99, 235, 0.65) !important; }
.contact__frame button[type=submit]:hover, .contact__frame .wpforms-submit:hover { background: var(--blue-2) !important; }
.contact__frame .wpforms-error-noscript { font-size: 0.85rem; color: var(--ink-2); }
.contact__frame .wpforms-confirmation-container-full { background: var(--blue-tint) !important; border: 1px solid var(--blue-line) !important; color: var(--ink) !important; border-radius: 8px; }

/* ---------------------------------------------------- narrower screens -- */
@media (max-width: 1180px) {
  .stage-hero, .rail-sec, .price, .stage-flow, .comps-wrap, .faq-wrap { padding-right: var(--gut); }
  .rail.is-hrail { margin-right: calc(-1 * var(--gut)) !important; padding-right: var(--gut) !important; }
  .comps { grid-template-columns: repeat(2, 1fr); }
  .frame--close { width: calc(100vw - var(--edge-l) - var(--gut)); }
}
@media (max-width: 860px) {
  .stage-hero { padding: calc(var(--chrome) + 30px) var(--gut) 0; }
  .hero { grid-template-columns: 1fr; align-content: start; gap: 22px; padding: 22px 18px; }
  .hero__h { font-size: clamp(2rem, 8.6vw, 2.8rem); }
  .hero__sub { font-size: 0.95rem; margin-top: 12px; }
  .hero__cta { margin-top: 16px; }
  .hero__cta .btn { min-height: 42px; padding: 0 16px; }
  .rail__pick { max-width: none; }
  .rail-sec { padding-top: calc(var(--chrome) + 40px); padding-bottom: 40px; }
  .rail { --hr-w: 84vw; --hr-gap: 20px; }
  .rail__end { padding: 22px; }
  .pair__desk img { max-height: 36vh; }
  /* rows that swipe on a phone: the steps and the services */
  .flow.is-hrail { --hr-w: 74vw; --hr-gap: 12px; --hr-pad: var(--gut); margin-top: 6px !important; }
  .flow.is-hrail .fstep { display: block; padding: 14px 14px 16px; }
  .flow.is-hrail .fstep h3 { margin-top: 10px; }
  .flow.is-hrail .fstep p { font-size: 0.88rem; margin-top: 4px; }
  .comps.is-hrail { --hr-w: 82vw; --hr-gap: 14px; --hr-pad: var(--gut); }
  .a-flow .stage-flow { padding-bottom: 40px; }
  .price { grid-template-columns: 1fr; grid-template-areas: "head" "board" "insp"; padding-top: calc(var(--chrome) + 40px); }
  .board { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 26px 12px; }
  .insp--main { position: static; }
  .board-wrap { position: static; }
  .flow { grid-template-columns: 1fr; grid-template-areas: none; gap: 12px; margin-top: 20px; }
  .fstep:nth-child(n) { grid-area: auto; }
  .fstep { padding: 10px 12px 12px; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; }
  .fstep__n { grid-row: span 2; }
  .fstep h3 { margin: 0; font-size: 1rem; }
  .fstep p { margin: 2px 0 0; font-size: 0.82rem; }
  .wires { display: none; }
  .flow__note { margin-top: 18px; font-size: 0.86rem; }
  .stage-flow { padding-top: calc(var(--chrome) + 22px); }
  .stage-flow .h2 { font-size: 1.7rem; }
  .msg--reply { margin-left: 0; }
  .comps { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; }
  .check { position: static; }
  .sum { grid-template-columns: 1fr 1fr; }
  .frame--close { margin-left: 0; }
  .stage-close { place-items: start center; padding: calc(var(--chrome) + 40px) var(--gut) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pg { animation: none; }
  .comp__demo--build i { opacity: 1; transform: none; animation: none !important; }
  .load i { transform: none; animation: none !important; }
}

/* the sections that came back from the old home, on narrower screens */
@media (max-width: 1180px) {
  .works, .paths, .contact, .reviews { padding-right: var(--gut); }
}
@media (max-width: 860px) {
  .works, .paths, .contact, .reviews { padding-top: calc(var(--chrome) + 40px); padding-bottom: 64px; }
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
  .specs a { padding: 7px 8px 8px; }
  .specs__n { display: none; }
  .hero__trust { margin-top: 10px; font-size: 11px; }
  .variants { grid-template-columns: 1fr; gap: 36px; }
  .contact { grid-template-columns: 1fr; }
  .cmt--static { margin: 12px 0 0; max-width: none; }
  .works__grid { gap: 40px; }
}
/* below the first one, the sections need no room for the fixed toolbar (anchors
   land below it through scroll-padding): only air between one frame and the next */
@media (min-width: 861px) {
  .works, .paths, .contact, .reviews, .rail-sec, .price, .comps-wrap, .about, .faq-wrap, .stage-flow { padding-top: 76px; padding-bottom: 20px; }
  .stage-close { padding-top: 76px; }
}
@media (max-width: 860px) {
  .works, .paths, .contact, .reviews, .rail-sec, .price, .comps-wrap, .about, .faq-wrap { padding-top: 44px; padding-bottom: 36px; }
  .a-flow .stage-flow { padding-top: 44px; }
  .stage-close { padding-top: 44px; }
}
/* «Τι κοστίζει» on its own line, the invitation under it */
.h2 .h2__line { display: block; }