/* Verdisee - technical bento
   White ground, black hairline boxes, cobalt and lime, one mono face,
   window-chrome panels and an isometric block scene. */

@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  --ink: #0b0b0f;
  --paper: #ffffff;
  --soft: #f3f3f5;
  --mute: #55555f;
  --blue: #1e3cf0;
  --lime: #d6f53c;
  --term-green: #3d7a00;
  --err: #b3001b;

  --line: 1.5px solid var(--ink);
  --gap: 14px;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.2, 0.9, 0.15, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink) var(--soft); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 14px/1.6 var(--mono); caret-color: var(--blue); font-variant-numeric: tabular-nums; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
svg { display: block; }
.ic { width: 18px; height: 18px; flex: none; }
::selection { background: var(--blue); color: #fff; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--soft); border-left: var(--line); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--soft); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lime); color: var(--ink); border: var(--line); padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 10px; }

.page { max-width: 1440px; margin: 0 auto; padding: 12px clamp(12px, 1.6vw, 22px) 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.box { border: var(--line); background: var(--paper); position: relative; }
h2 { font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.1; letter-spacing: -0.01em; }
h2 .n { display: block; font-weight: 700; color: var(--blue); font-size: 0.85em; margin-bottom: 4px; }

/* -- Buttons -------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border: var(--line); background: var(--paper); color: var(--ink); font: 700 13px/1 var(--mono); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color 0.18s, color 0.18s, transform 0.25s var(--ease-out); }
.btn:hover { transform: translate(-2px, -2px); }
.btn:active { transform: none; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--ink); }
.btn-line:hover { background: var(--lime); }
.btn-lime { background: var(--lime); }
.btn-lime:hover { background: var(--ink); color: var(--lime); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--blue); }
.btn-sm { height: 40px; padding: 0 16px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 14px; }

/* -- Nav ------------------------------------------------------ */
.nav { position: sticky; top: 10px; z-index: 50; display: flex; align-items: stretch; height: 58px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 18px; text-decoration: none; }
.brand-mark { position: relative; width: 26px; height: 26px; flex: none; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2.5px solid var(--ink); }
.brand-mark::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.brand-mark::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.brand-mark i { position: absolute; inset: 7px; background: var(--blue); }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.brand-txt em { font-style: normal; font-size: 12px; color: var(--mute); letter-spacing: 0.06em; }
.tabs { display: flex; flex: 1; justify-content: center; margin-left: 8px; }
.tabs a { display: flex; align-items: center; padding: 0 clamp(12px, 1.9vw, 28px); border-left: var(--line); font-size: 13px; font-weight: 500; text-decoration: none; letter-spacing: 0.02em; transition: background-color 0.18s, color 0.18s; }
.tabs a:last-child { border-right: var(--line); }
.tabs a:hover { background: var(--lime); }
.tabs a.on { background: var(--blue); color: #fff; }
.nav-cta { margin: 6px; height: auto; }

/* -- Hero ----------------------------------------------------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(8px, 2vw, 32px); align-items: center; padding: clamp(14px, 2vw, 30px) 46px clamp(10px, 1.6vw, 22px) clamp(6px, 1vw, 14px); }
.tag-hello { display: inline-block; border: var(--line); color: var(--blue); font-weight: 700; font-size: 13px; padding: 6px 12px; margin-bottom: 20px; letter-spacing: 0.03em; }
.hero h1 { font-weight: 800; font-size: clamp(38px, 5.6vw, 84px); line-height: 1; letter-spacing: -0.045em; }
.hero h1 span { display: block; white-space: nowrap; }
.cur { font-style: normal; color: var(--blue); animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { margin-top: 24px; font-weight: 700; font-size: clamp(14px, 1.45vw, 19px); line-height: 1.5; max-width: 26em; }
.hero-sub em { font-style: normal; color: var(--blue); }
.hero-lines { margin-top: 18px; line-height: 1.75; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-mail { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; font-size: 13px; color: var(--mute); }
.hero-mail a, .hero-mail span { display: inline-flex; align-items: center; gap: 8px; }
.hero-mail a { color: var(--ink); text-underline-offset: 4px; }

.hero-art { position: relative; min-height: clamp(320px, 38vw, 540px); }
.voxel { width: 100%; height: 100%; overflow: visible; }
.hero-art .voxel { position: absolute; inset: 0; }
.dots { position: absolute; width: 72px; height: 72px; background: radial-gradient(circle, var(--ink) 1.2px, transparent 1.6px) 0 0 / 9px 9px; pointer-events: none; }
.dots-a { left: 46%; top: 2%; }
.dots-b { right: 4%; bottom: 8%; width: 54px; height: 54px; }
.sq { position: absolute; display: block; pointer-events: none; }
.sq-blue { width: 11px; height: 11px; background: var(--blue); left: 34%; top: 0; }
.sq-black { width: 13px; height: 13px; background: var(--ink); left: 4%; bottom: 20%; }
.plus { position: absolute; right: 1%; top: 6%; font-style: normal; font-size: 30px; font-weight: 300; line-height: 1; }
.hero-side { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--blue); font-weight: 800; font-size: 13px; letter-spacing: 0.18em; }
.hero-side span { writing-mode: vertical-rl; transform: rotate(180deg); }
.hero-side i { width: 2px; height: 120px; background: var(--blue); position: relative; }
.hero-side i::before { content: ""; position: absolute; left: -3px; top: -8px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

/* -- Services -------------------------------------------------- */
.svc { display: grid; grid-template-columns: minmax(190px, 0.62fr) repeat(3, minmax(0, 1fr)); }
.svc-head { grid-row: span 2; position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px 20px 20px; border-right: var(--line); }
.svc-head::before { content: ""; position: absolute; left: -1.5px; top: 22px; width: 6px; height: 46px; background: var(--blue); }
.svc-head h2 { padding-left: 8px; }
.svc-head p { color: var(--mute); font-size: 13px; padding-left: 8px; }
.arrow-link { display: inline-flex; align-items: center; gap: 12px; margin-top: auto; padding-left: 8px; color: var(--blue); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; text-decoration: none; }
.arrow-link .ab { display: grid; place-items: center; width: 32px; height: 32px; border: var(--line); color: var(--ink); background: var(--paper); transition: background-color 0.18s; }
.arrow-link .ab .ic { width: 16px; height: 16px; }
.arrow-link:hover .ab { background: var(--lime); }
.card { position: relative; display: flex; flex-direction: column; padding: 22px 16px 16px; border-left: var(--line); transition: background-color 0.2s; }
.card:nth-of-type(n+4) { border-top: var(--line); }
.card:hover { background: var(--soft); }
.tab { position: absolute; left: 14px; top: -1.5px; display: grid; place-items: center; width: 32px; height: 32px; background: var(--lime); border: var(--line); font-weight: 800; font-size: 13px; z-index: 2; }
.card:nth-of-type(n+4) .tab { top: -1.5px; }
.shot { position: relative; height: 138px; margin-top: 14px; border: var(--line); background: var(--soft); overflow: hidden; }
.s-bar { display: flex; gap: 4px; align-items: center; height: 16px; padding: 0 6px; background: var(--paper); border-bottom: var(--line); }
.s-bar i { width: 6px; height: 6px; border: 1.5px solid var(--ink); }
.s-search { height: 18px; margin: 10px 10px 6px; border: var(--line); background: var(--paper); }
.s-res { display: flex; align-items: center; gap: 8px; height: 18px; margin: 6px 10px; padding: 0 6px; }
.s-res u { flex: 1; height: 6px; background: var(--ink); opacity: 0.85; }
.s-res.hot { background: var(--lime); border: var(--line); }
.s-res b { font-size: 12px; font-weight: 800; }
.s-chart { position: absolute; left: 0; right: 0; bottom: 0; top: 16px; display: flex; align-items: flex-end; gap: 7px; padding: 10px 12px 0; }
.s-chart i { flex: 1; height: var(--h); background: var(--ink); }
.s-chart i.b { background: var(--blue); }
.s-chart i.l { background: var(--lime); border: var(--line); border-bottom: 0; }
.s-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 10px; height: calc(100% - 16px); }
.s-tiles i { background: var(--paper); border: var(--line); }
.s-tiles i.b { background: var(--blue); }
.s-tiles i.l { background: var(--lime); }
.s-tiles i.k { background: var(--ink); }
.s-msg { width: 66%; margin: 8px 10px 0; padding: 6px 8px; background: var(--paper); border: var(--line); }
.s-msg u { display: block; height: 5px; margin: 3px 0; background: var(--ink); opacity: 0.8; }
.s-msg u:last-child { width: 60%; }
.s-msg.out { margin-left: auto; width: 52%; background: var(--blue); }
.s-msg.out u { background: #fff; opacity: 1; }
.s-web { padding: 10px; }
.s-web b { display: block; height: 30px; background: var(--ink); }
.s-web div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 8px; }
.s-web u { display: block; height: 42px; border: var(--line); background: var(--paper); }
.s-web u.l { background: var(--lime); }
.s-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 10px; }
.s-cal i { aspect-ratio: 1.15; border: var(--line); background: var(--paper); }
.s-cal i.b { background: var(--blue); }
.s-cal i.l { background: var(--lime); }
.s-cal i.k { background: var(--ink); }
.card h3 { margin-top: 16px; font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; }
.card .sub { color: var(--mute); font-size: 12px; margin-top: 2px; }
.card .desc { margin-top: 10px; font-size: 13.5px; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; padding-right: 44px; }
.chips li { border: 1px solid var(--ink); padding: 3px 8px; font-size: 12px; letter-spacing: 0.01em; background: var(--paper); }
.go { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: var(--line); background: var(--paper); transition: background-color 0.18s, transform 0.25s var(--ease-out); }
.go .ic { width: 16px; height: 16px; }
.card:hover .go, .go:hover { background: var(--lime); transform: translate(-2px, -2px); }

/* -- Windows --------------------------------------------------- */
.win { border: var(--line); background: var(--paper); display: flex; flex-direction: column; }
.win-bar { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
.win-blue > .win-bar { background: var(--blue); color: #fff; }
.win-lime > .win-bar { background: var(--lime); color: var(--ink); border-bottom: var(--line); }
.wc { display: flex; gap: 6px; }
.wc b { width: 11px; height: 11px; border: 1.5px solid currentColor; }
.wc b:nth-child(1) { border-width: 0 0 1.5px; height: 9px; }
.wc b:nth-child(3) { border: 0; background: linear-gradient(45deg, transparent 44%, currentColor 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, currentColor 44% 56%, transparent 56%); }
.win-body { padding: 14px 16px 16px; flex: 1; }

/* -- About row -------------------------------------------------- */
.row-3 { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: var(--gap); }
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "copy who" "face who"; gap: 16px 20px; padding: 20px; }
.about-copy { grid-area: copy; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.about-copy h2 { margin-bottom: 4px; }
.about-copy p { font-size: 13px; line-height: 1.7; max-width: 32em; }
.about-copy .btn { margin-top: 6px; }
.about-face { grid-area: face; align-self: end; }
.pix { width: 104px; height: 104px; }
.who { grid-area: who; }
.who h3 { font-size: 13px; font-weight: 800; letter-spacing: 0.03em; margin-top: 4px; color: var(--blue); }
.who h3:not(:first-child) { margin-top: 18px; }
.ticks { margin-top: 8px; display: grid; gap: 7px; }
.ticks li { position: relative; padding-left: 18px; font-size: 13px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; background: var(--ink); }
.ticks li:nth-child(odd)::before { background: var(--blue); }

.stats .win-body { display: flex; flex-direction: column; gap: 12px; }
.sample-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; line-height: 1.45; }
.sample-flag span { border: var(--line); background: var(--paper); padding: 2px 8px; font-weight: 800; letter-spacing: 0.04em; }
.stat-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; border: var(--line); background: var(--paper); }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-content: center; padding: 16px 14px; }
.stat:nth-child(odd) { border-right: var(--line); }
.stat:nth-child(-n+2) { border-bottom: var(--line); }
.stat .ic { grid-row: 1 / 3; width: 30px; height: 30px; margin-top: 2px; }
.stat .num { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.stat span { font-size: 12px; line-height: 1.35; color: var(--mute); margin-top: 6px; }
.stat em { grid-column: 2; justify-self: start; margin-top: 8px; font-style: normal; font-size: 12px; padding: 1px 7px; background: var(--soft); border: 1px solid var(--ink); }
.stat.real em { background: var(--lime); }

/* -- Story + pricing -------------------------------------------- */
.row-2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 15vw, 210px); gap: 16px; padding: 22px 20px 20px; }
.story-copy h2 { margin-bottom: 20px; }
.tl > li { position: relative; padding: 0 0 26px 38px; }
.tl > li:last-child { padding-bottom: 0; }
.tl > li::before { content: ""; position: absolute; left: 9px; top: 26px; bottom: 0; width: 1.5px; background: var(--ink); }
.tl > li:last-child::before { display: none; }
.node { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: var(--line); background: var(--paper); }
.node.on { background: var(--lime); }
.node.on::after { content: ""; position: absolute; inset: 4px; background: var(--ink); }
.when { color: var(--blue); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; }
.tl h3 { font-size: 14.5px; font-weight: 800; margin-top: 2px; }
.tl .who { color: var(--mute); font-size: 12px; }
.tl .d { margin-top: 8px; font-size: 13px; line-height: 1.65; max-width: 44em; }
.tl .chips { margin-top: 10px; padding: 0; }
.story-art { align-self: end; }
.story-art .voxel { height: clamp(150px, 16vw, 230px); }

.price { display: flex; flex-direction: column; }
.price-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 20px 18px; }
.rows { display: grid; flex: 1; grid-auto-rows: 1fr; }
.rows li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; border-top: var(--line); }
.rows li .ic { width: 44px; height: 44px; padding: 10px; border: var(--line); background: var(--paper); }
.rows li:nth-child(odd) .ic { background: var(--lime); }
.rows p { font-size: 13px; color: var(--mute); }
.rows p b { display: block; color: var(--ink); font-weight: 800; font-size: 13px; letter-spacing: 0.03em; }
.rows span { font-weight: 800; font-size: 13px; }

/* -- Close row --------------------------------------------------- */
.row-4 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 0.85fr); gap: var(--gap); }
.cta { position: relative; overflow: hidden; background: var(--lime); padding: 24px 22px 74px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta h2 { font-size: clamp(20px, 2vw, 27px); line-height: 1.15; }
.cta p { font-size: 13px; max-width: 26em; }
.cta .btn { margin-top: 4px; }
.hazard { position: absolute; right: 0; bottom: 0; width: 46%; height: 44px; background: repeating-linear-gradient(-55deg, var(--ink) 0 9px, transparent 9px 20px); }
.grid-art { display: grid; place-items: center; padding: 10px; background: linear-gradient(var(--soft) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--soft) 1px, transparent 1px) 0 0 / 22px 22px, var(--paper); }
.grid-art .voxel { height: clamp(150px, 15vw, 220px); }
.term .win-body { font-size: 13px; line-height: 1.75; }
.term em { font-style: normal; color: var(--term-green); font-weight: 800; }
.term .o { margin-bottom: 8px; padding-left: 2ch; text-indent: -2ch; }
.term a { text-underline-offset: 3px; }
.thanks { padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.thanks h2 { font-size: clamp(17px, 1.6vw, 21px); }
.thanks p { font-size: 12px; color: var(--mute); line-height: 1.7; }
.mini-nav { display: grid; gap: 4px; margin-top: 4px; }
.mini-nav a { font-size: 13px; font-weight: 700; text-underline-offset: 4px; }
.mini-nav a:hover { background: var(--lime); }
.icons { margin-top: auto; display: flex; gap: 8px; }
.icons a { display: grid; place-items: center; width: 34px; height: 34px; border: var(--line); color: var(--ink); background: var(--paper); transition: background-color 0.18s; }
.icons a:hover { background: var(--lime); }
.icons .up { transform: rotate(180deg); }

/* -- Voxel motion ------------------------------------------------- */
.voxel .cube { animation: drop 0.7s var(--ease-out) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes drop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
.voxel polygon { transition: fill 0.5s; }

/* -- Responsive ----------------------------------------------------- */
@media (max-width: 1180px) {
  .tabs a { font-size: 12px; padding: 0 12px; }
  .row-4 { grid-template-columns: 1fr 1fr; }
  .cta { grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; padding: 16px 40px 8px 6px; }
  .hero-art { min-height: clamp(300px, 62vw, 460px); }
  .svc { grid-template-columns: 1fr 1fr; }
  .svc-head { grid-row: auto; grid-column: 1 / -1; border-right: 0; border-bottom: var(--line); flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
  .svc-head p { flex: 1 1 260px; }
  .arrow-link { margin-top: 0; }
  .card { border-top: var(--line); }
  .card:nth-of-type(n+4) { border-top: var(--line); }
  .card:nth-of-type(odd) { border-left: 0; }
  .row-3, .row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 128px; }
  .nav { height: auto; flex-wrap: wrap; }
  .brand { flex: 1; height: 58px; }
  .nav-cta { align-self: center; }
  .tabs { order: 3; flex: 0 0 100%; margin: 0; justify-content: flex-start; overflow-x: auto; border-top: var(--line); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; height: 42px; padding: 0 16px; }
  .tabs a:first-child { border-left: 0; }
  .hero-art { min-height: clamp(360px, 92vw, 520px); }
  .svc { grid-template-columns: 1fr; }
  .card, .card:nth-of-type(odd) { border-left: 0; }
  .about { grid-template-columns: 1fr; grid-template-areas: "copy" "who" "face"; }
  .story { grid-template-columns: 1fr; }
  .story-art { justify-self: start; width: 190px; }
  .row-4 { grid-template-columns: 1fr; }
  .hero-side { display: none; }
  .hero { padding-right: 6px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat { grid-template-columns: 1fr; }
  .stat .ic { grid-row: auto; }
  .stat em { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cur { animation: none; }
  .voxel .cube { animation: none; }
  .voxel polygon, .btn, .go, .card { transition: none; }
}
.static .voxel .cube, .static .cur { animation: none; }

@media (max-width: 420px) { .hero-lines { font-size: 13px; } }

/* -- Services page ------------------------------------------------ */
.idx { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.idx a { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 118px; padding: 16px 14px 14px; border-left: var(--line); text-decoration: none; transition: background-color 0.18s; }
.idx a:first-child { border-left: 0; }
.idx a:hover { background: var(--lime); }
.idx .tab { position: static; width: 30px; height: 30px; font-size: 13px; }
.idx b { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }
.idx .ic { width: 16px; height: 16px; margin-top: auto; align-self: flex-end; transition: transform 0.25s var(--ease-out); }
.idx a:hover .ic { transform: translateY(3px); }

.sv { display: grid; grid-template-columns: minmax(270px, 0.62fr) minmax(0, 2fr); scroll-margin-top: 84px; }
.sv-head { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px 20px 20px; border-right: var(--line); }
.sv-head::before { content: ""; position: absolute; left: -1.5px; top: 22px; width: 6px; height: 46px; background: var(--blue); }
.sv-head h2 { padding-left: 8px; }
.sv-head .lead { padding-left: 8px; font-weight: 700; font-size: 14px; line-height: 1.5; }
.sv-head .btn { align-self: flex-start; margin-top: auto; }
.sv-head .shot { margin-top: 0; }
.sv-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--gap); padding: var(--gap); }
.run { grid-row: 1 / 3; }
.run .intro { font-weight: 700; line-height: 1.6; margin-bottom: 14px; }
.run .ticks { gap: 10px; }
.fills .chips { padding: 0; margin: 0; }
.fills .win-body { flex: 0; }
.pairs { padding: 16px; align-self: stretch; }
.pairs .pt { font-weight: 800; font-size: 12px; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 6px; }
.pairs a { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--ink); font-weight: 700; text-decoration: none; }
.pairs a .ic { width: 16px; height: 16px; transition: transform 0.25s var(--ease-out); }
.pairs a:hover { background: var(--lime); }
.pairs a:hover .ic { transform: translateX(4px); }

.steps .step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; background: var(--paper); color: var(--ink); }
.step-grid li { display: grid; gap: 10px; align-content: start; padding: 22px 20px; border-left: var(--line); }
.step-grid li:first-child { border-left: 0; }
.step-grid b { display: grid; place-items: center; width: 32px; height: 32px; background: var(--lime); border: var(--line); font-weight: 800; }
.step-grid h3 { font-size: 14px; font-weight: 800; line-height: 1.3; }
.step-grid p { font-size: 13px; line-height: 1.65; color: var(--mute); }
.row-3c { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.9fr); gap: var(--gap); }

@media (max-width: 1020px) {
  .idx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .idx a:nth-child(3n+1) { border-left: 0; }
  .idx a:nth-child(n+4) { border-top: var(--line); }
  .sv { grid-template-columns: 1fr; }
  .sv-head { border-right: 0; border-bottom: var(--line); }
  .sv-head .btn { margin-top: 4px; }
  .row-3c { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .idx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idx a:nth-child(n) { border-left: var(--line); border-top: 0; }
  .idx a:nth-child(odd) { border-left: 0; }
  .idx a:nth-child(n+3) { border-top: var(--line); }
  .sv-body { grid-template-columns: 1fr; }
  .run { grid-row: auto; }
  .steps .step-grid { grid-template-columns: 1fr; }
  .step-grid li { border-left: 0; border-top: var(--line); }
  .step-grid li:first-child { border-top: 0; }
  .sv { scroll-margin-top: 128px; }
}

/* -- Contact page -------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); align-items: start; scroll-margin-top: 84px; }
.form { display: grid; gap: 22px; padding: 22px; }
.form-note { font-size: 13px; color: var(--mute); line-height: 1.6; }
.form-note b, .field label b, .field legend b { color: var(--blue); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { padding: 0; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { width: 100%; padding: 12px 12px; border: var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: 500 14px/1.5 var(--mono); appearance: none; -webkit-appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.field textarea { resize: vertical; min-height: 120px; }
.field ::placeholder { color: #6b6b75; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--blue); outline-offset: 0; background: #fbffe6; }
.field [aria-invalid="true"] { border-color: var(--err); outline: 2px solid var(--err); }
.err { display: flex; gap: 8px; align-items: flex-start; color: var(--err); font-weight: 700; font-size: 13px; line-height: 1.4; }
.err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--err); font-size: 12px; font-weight: 800; }
.err[hidden] { display: none; }
.optrow { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: var(--line); background: var(--paper); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.opt:hover span { background: var(--lime); }
.opt input:checked + span { background: var(--blue); color: #fff; }
.opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 14px; }
.text-mail { font-size: 13px; text-underline-offset: 4px; }
.status { display: grid; gap: 12px; padding: 16px; border: var(--line); background: var(--lime); }
.status[hidden] { display: none; }
.status-msg { font-weight: 700; font-size: 13.5px; line-height: 1.55; }
.compose { width: 100%; padding: 12px; border: var(--line); background: var(--paper); font: 500 12.5px/1.6 var(--mono); resize: vertical; }
.status .btn { justify-self: start; }

.side { display: grid; gap: var(--gap); position: sticky; top: 84px; }
.kv { display: grid; gap: 0; padding: 0; }
.kv li { display: grid; grid-template-columns: 24px 74px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 14px 16px; border-top: var(--line); font-size: 13px; }
.kv li:first-child { border-top: 0; }
.kv .ic { align-self: center; width: 18px; height: 18px; }
.kv span { color: var(--mute); }
.kv a, .kv b { font-weight: 700; overflow-wrap: anywhere; }
.info .win-body { background: var(--paper); }
.nx { display: grid; gap: 0; padding: 0; background: var(--paper); color: var(--ink); }
.nx li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; padding: 16px; border-top: var(--line); }
.nx li:first-child { border-top: 0; }
.nx b { display: grid; place-items: center; width: 32px; height: 32px; background: var(--lime); border: var(--line); font-weight: 800; }
.nx p { font-size: 13px; line-height: 1.65; }

.faq .faq-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 0; background: var(--paper); }
.faq-grid > div { padding: 20px; border-top: var(--line); }
.faq-grid > div:nth-child(-n+2) { border-top: 0; }
.faq-grid > div:nth-child(even) { border-left: var(--line); }
.faq-grid h3 { font-size: 13.5px; font-weight: 800; line-height: 1.4; }
.faq-grid p { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--mute); }
.row-2b { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap); }

@media (max-width: 1020px) {
  .contact, .row-2b { grid-template-columns: 1fr; }
  .side { position: static; }
}
@media (max-width: 720px) {
  .grid2 { grid-template-columns: 1fr; }
  .form { padding: 16px; }
  .faq .faq-grid { grid-template-columns: 1fr; }
  .faq-grid > div { border-left: 0 !important; border-top: var(--line) !important; }
  .faq-grid > div:first-child { border-top: 0 !important; }
  .form-actions .btn { width: 100%; }
  .kv li { grid-template-columns: 22px 1fr; }
  .kv li span { display: none; }
  .contact { scroll-margin-top: 128px; }
}

/* -- SEO page ------------------------------------------------------- */
.tag-hello a { text-decoration: none; }
.tag-hello a:hover { text-decoration: underline; text-underline-offset: 4px; }
.serp-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.serp .win-body { display: grid; gap: 14px; align-content: start; padding: 18px; }
.serp-q { display: flex; align-items: center; gap: 10px; border: var(--line); padding: 11px 14px; font-weight: 700; font-size: 14px; }
.serp-map { position: relative; height: 150px; border: var(--line); background: linear-gradient(rgba(11, 11, 15, 0.09) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(11, 11, 15, 0.09) 1px, transparent 1px) 0 0 / 24px 24px, #fbfbfd; }
.pin { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; border: var(--line); background: var(--paper); font-style: normal; font-weight: 800; font-size: 13px; }
.pin.p1 { left: 46%; top: 30%; background: var(--lime); width: 34px; height: 34px; }
.pin.p2 { left: 22%; top: 60%; }
.pin.p3 { left: 74%; top: 56%; }
.serp-pack { border: var(--line); }
.serp-pack li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-top: var(--line); }
.serp-pack li:first-child { border-top: 0; }
.serp-pack li.hot { background: var(--lime); }
.ltr { display: grid; place-items: center; width: 30px; height: 30px; border: var(--line); background: var(--paper); font-weight: 800; }
.serp-pack h3 { font-size: 13.5px; font-weight: 800; letter-spacing: 0; }
.serp-pack h3 em { font-style: normal; font-weight: 500; color: var(--mute); }
.serp-pack p { font-size: 13px; line-height: 1.5; color: var(--mute); }
.serp-pack li.hot p { color: var(--ink); }
.serp-pack .meta { font-size: 12px; }
.rk { font-weight: 800; font-size: 18px; }
.why-list { display: grid; padding: 0; background: var(--paper); }
.why-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 16px; border-top: var(--line); }
.why-list li:first-child { border-top: 0; }
.why-list b { display: grid; place-items: center; width: 32px; height: 32px; border: var(--line); background: var(--lime); font-weight: 800; }
.why-list h3 { font-size: 13.5px; font-weight: 800; line-height: 1.35; }
.why-list p { margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--mute); }

.mods-head { display: grid; gap: 8px; padding: 24px 20px 20px; }
.mods-head p { color: var(--mute); font-size: 13.5px; max-width: 46em; }
.mods-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--line); }
.mods .card { padding: 36px 18px 18px; }
.mods .card:nth-of-type(3n+1) { border-left: 0; }
.mods .card:nth-of-type(n+4) { border-top: var(--line); }
.mods .card h3 { margin-top: 0; }
.mods .card .desc { margin-bottom: 14px; }
.mods .chips { padding-right: 0; }

.check .win-body { background: var(--paper); padding: 22px; }
.check-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.check-lead { margin-top: 10px; color: var(--mute); font-size: 13.5px; }
.ck-list { border: 0; margin: 14px 0 0; padding: 0; display: grid; }
.ck { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--ink); cursor: pointer; }
.ck:last-child { border-bottom: 1px solid var(--ink); }
.ck input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ck .bx { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: var(--line); background: var(--paper); transition: background-color 0.15s; }
.ck .bx::after { content: ""; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.ck:hover .bx { background: var(--lime); }
.ck input:checked + .bx { background: var(--blue); }
.ck input:checked + .bx::after { opacity: 1; }
.ck input:focus-visible + .bx { outline: 3px solid var(--ink); outline-offset: 3px; }
.ck .tx { font-size: 13.5px; line-height: 1.55; }
.score { position: sticky; top: 90px; display: grid; gap: 14px; padding: 20px; border: var(--line); background: var(--lime); }
.score-num { display: flex; align-items: baseline; gap: 6px; }
.score-num b { font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.score-num span { font-size: 24px; font-weight: 700; }
.score-bar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; height: 18px; }
.score-bar i { border: var(--line); background: var(--paper); transition: background-color 0.2s; }
.score-bar i.on { background: var(--blue); }
.score-msg { font-weight: 700; font-size: 14px; line-height: 1.55; min-height: 4.6em; }
.score .btn { justify-self: start; }
.note { align-self: start; }
.note .win-body { display: flex; flex-direction: column; gap: 0; }
.note-body h3 { font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--blue); }
.note-body h3:not(:first-child) { margin-top: 20px; }
.note-body p { margin-top: 8px; font-size: 13.5px; line-height: 1.7; }
.note-body .ticks { margin-top: 10px; gap: 10px; }
.note-body .price-line { margin-top: 22px; padding-top: 16px; border-top: 2px dotted var(--ink); font-weight: 500; }

@media (max-width: 1020px) {
  .serp-row, .check-grid { grid-template-columns: 1fr; }
  .score { position: static; }
  .mods-grid { grid-template-columns: 1fr; }
  .mods .card, .mods .card:nth-of-type(3n+1) { border-left: 0; border-top: var(--line); }
  .mods .card:first-child { border-top: 0; }
}

/* -- PPC page ------------------------------------------------------- */
.adcard { border: var(--line); padding: 16px; display: grid; gap: 8px; }
.ad-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); }
.adtag { border: var(--line); padding: 0 6px; color: var(--ink); font-weight: 800; font-size: 12px; }
.adcard h3 { text-transform: none; font-family: var(--mono); font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; letter-spacing: -0.01em; }
.adcard > p:not(.ad-top) { font-size: 13.5px; line-height: 1.6; }
.adcard .chips { padding: 6px 0 0; }
.adnotes { display: grid; gap: 10px; }
.adnotes li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.adnotes b { display: grid; place-items: center; width: 28px; height: 28px; border: var(--line); background: var(--lime); font-weight: 800; font-size: 13px; }
.adnotes p { font-size: 13px; line-height: 1.6; padding-top: 3px; }
.plan .win-body { display: grid; gap: 14px; align-content: start; padding: 18px; }
.plan-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 210px; margin-bottom: 28px; border-bottom: var(--line); }
.plan-bars i { position: relative; display: block; height: var(--h); background: var(--paper); border: var(--line); border-bottom: 0; }
.plan-bars i.b { background: var(--blue); }
.plan-bars i.l { background: var(--lime); }
.plan-bars i.k { background: var(--ink); }
.plan-bars i::after { content: attr(data-m); position: absolute; top: 100%; left: 0; right: 0; padding-top: 6px; text-align: center; font-style: normal; font-weight: 700; font-size: 12px; color: var(--ink); }
.plan-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; font-weight: 700; }
.plan-legend span { display: inline-flex; align-items: center; gap: 8px; }
.plan-legend i { width: 14px; height: 14px; border: var(--line); background: var(--paper); }
.plan-legend i.b { background: var(--blue); }
.plan-legend i.l { background: var(--lime); }
.plan-legend i.k { background: var(--ink); }
.field input[type="number"] { width: 100%; padding: 12px; border: var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: 500 14px/1.5 var(--mono); }
.hint { font-size: 12px; line-height: 1.5; color: var(--mute); }
.calc-fields { margin-top: 18px; }
.calc-out .score-num { flex-wrap: wrap; row-gap: 2px; }
.calc-out .score-num span { font-size: 16px; }
.out-label { font-weight: 800; font-size: 12px; letter-spacing: 0.08em; }

/* -- Social page ---------------------------------------------------- */
.post { border: var(--line); }
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: var(--line); font-size: 13px; }
.post-head b { font-weight: 800; }
.post-head span { margin-left: auto; color: var(--mute); font-size: 12px; }
.av { width: 28px; height: 28px; border: var(--line); background: var(--blue); flex: none; }
.post-img { display: block; width: 100%; height: 210px; background: var(--lime); border-bottom: var(--line); }
.post-cap { padding: 14px; display: grid; gap: 10px; }
.post-cap p { font-size: 13.5px; line-height: 1.6; }
.post-cap .chips { padding: 0; }
.calg-h { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; font-weight: 800; font-size: 12px; margin-top: 6px; }
.calg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calg i { display: block; height: 46px; border: var(--line); background: var(--paper); }
.calg i.b, .plan-legend i.b { background: var(--blue); }
.calg i.l { background: var(--lime); }
.calg i.k { background: var(--ink); }
.calg i.e, .plan-legend i.e { background: repeating-linear-gradient(-45deg, var(--ink) 0 2px, var(--paper) 2px 8px); }
.idea-list { display: grid; margin: 0; }
.idea-list li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1.5px solid var(--ink); }
.idea-list li:first-child { border-top: 0; padding-top: 0; }
.idea-list b { display: grid; place-items: center; height: 26px; border: var(--line); background: var(--paper); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; }
.idea-list p { font-size: 13.5px; line-height: 1.6; }
.idea-list .idea-empty { display: block; font-weight: 700; }
.idea-q { margin-top: 18px; }

/* -- Email + SMS page ------------------------------------------------ */
.sms { display: grid; }
.bubble { border: var(--line); padding: 12px 14px; font-size: 13.5px; line-height: 1.6; background: var(--soft); max-width: 92%; }
.bubble.out-b { background: var(--paper); max-width: none; }
.mailcard { border: var(--line); display: grid; }
.mc-head { padding: 12px 14px; border-bottom: var(--line); font-size: 13px; line-height: 1.6; }
.mc-head b { display: inline-block; margin-right: 6px; color: var(--blue); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.mc-head b:not(:first-child) { margin-left: 10px; }
.mc-body { padding: 14px 14px 8px; font-size: 13.5px; line-height: 1.65; }
.mailcard .chips { padding: 6px 14px 12px; }
.mc-foot { padding: 10px 14px; border-top: 1.5px dotted var(--ink); font-size: 12px; color: var(--mute); line-height: 1.5; }
.flow { display: grid; margin-top: 6px; }
.flow li { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 22px; }
.flow li:last-child { padding-bottom: 0; }
.flow li::after { content: ""; position: absolute; left: 38px; top: 32px; bottom: -2px; width: 1.5px; background: var(--ink); }
.flow li:last-child::after { display: none; }
.flow b { display: grid; place-items: center; height: 30px; border: var(--line); background: var(--paper); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; position: relative; z-index: 1; }
.flow li.end b { background: var(--lime); }
.flow h3 { font-size: 13.5px; font-weight: 800; padding-top: 4px; letter-spacing: 0; }
.flow p { margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--mute); }
.builder-out { gap: 10px; }
.builder-out .btn { margin-top: 8px; }
.count { font-size: 12px; font-weight: 700; min-height: 1.4em; }
.b-subject { font-weight: 800; font-size: 14px; line-height: 1.4; }
.b-prev { font-size: 13.5px; line-height: 1.6; }
.builder-hint { margin-top: 4px; }

/* -- Web design page -------------------------------------------------- */
.phone { width: min(100%, 340px); min-height: 430px; margin: 4px auto 0; border: 3px solid var(--ink); background: var(--paper); display: grid; grid-template-rows: auto 1fr auto; }
.ph-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: var(--line); background: var(--soft); font-size: 12px; }
.ph-bar i { width: 8px; height: 8px; background: var(--ink); }
.ph-body { display: grid; gap: 10px; align-content: start; padding: 18px 14px; }
.ph-h { font-family: var(--mono); text-transform: none; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.ph-p { font-size: 13.5px; color: var(--mute); line-height: 1.55; }
.ph-btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 10px 14px; border: var(--line); background: var(--paper); color: var(--ink); font: 700 14px/1.3 var(--mono); text-align: left; cursor: pointer; transition: background-color 0.15s; }
.ph-btn em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--mute); text-align: right; }
.ph-btn:hover { background: var(--lime); }
.ph-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ph-done { display: grid; gap: 10px; padding: 16px; border: var(--line); background: var(--lime); }
.ph-done:focus { outline: none; }
.ph-win { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.ph-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-top: var(--line); background: var(--soft); font-size: 12px; font-weight: 700; }
.taps b { font-size: 16px; }
.map { display: grid; gap: 16px; }
.map-root { border: var(--line); background: var(--paper); padding: 14px 16px; font-size: 13.5px; line-height: 1.5; }
.map-root b { display: inline-block; margin-right: 8px; padding: 2px 10px; background: var(--ink); color: #fff; }
.map-tier { margin-left: 10px; padding-left: 18px; border-left: 1.5px solid var(--ink); }
.map-label { margin-bottom: 8px; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; color: var(--blue); }
.map-row { display: flex; flex-wrap: wrap; gap: 8px; }
.map-row li { padding: 8px 12px; border: var(--line); background: var(--paper); font-weight: 700; font-size: 13px; }
.map-foot { padding-top: 14px; border-top: 2px dotted var(--ink); font-size: 13.5px; line-height: 1.6; }
.map-foot b { font-weight: 800; letter-spacing: 0.04em; margin-right: 6px; }
.side-stack { display: grid; gap: var(--gap); align-content: start; }
.need .win-body { background: var(--paper); }
.need .ticks { gap: 10px; }