/* Layout: black hero over white pages, teal as the single accent; cards and a sticky price panel on detail pages. */
:root {
  --bg: #ffffff;
  --fg: #0f0f0f;
  --muted: #5f6664;
  --faint: #8f9794;
  --line: #e4e8e7;
  --soft: #f4f6f5;
  --teal: #00c2a8;
  --teal-dark: #009d87;
  --teal-soft: #e6fbf8;
  --ink: #0f0f0f;
  --on-ink: #ffffff;
  --on-ink-2: rgba(255, 255, 255, 0.55);
  --ink-line: rgba(255, 255, 255, 0.14);
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1110; --fg: #f1f4f3; --muted: #a3acaa; --faint: #7d8683; --line: #262c2a; --soft: #151918;
    --teal-dark: #2fd8c0; --teal-soft: #0f2a26; --ink: #070909; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1110; --fg: #f1f4f3; --muted: #a3acaa; --faint: #7d8683; --line: #262c2a; --soft: #151918;
  --teal-dark: #2fd8c0; --teal-soft: #0f2a26; --ink: #070909; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1100px; margin-inline: auto; padding-inline: 20px; }
.page { padding-block: 32px 64px; }

/* bars + nav */
.testbar { background: #fff3c4; color: #5a4600; font-size: 12px; text-align: center; padding: 6px 16px; }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 9px; }
.mark { width: 22px; height: 22px; flex-shrink: 0; }
.brand b { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.wm i { font-style: normal; color: var(--teal-dark); }
.brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
.brand-text small { font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--faint); }
.nav-r { display: flex; align-items: center; gap: 8px; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--muted); padding: 8px 12px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link { transition: color 0.15s; }
@media (hover: hover) { .nav-link:hover { color: var(--teal-dark); } }
.nav-link:focus-visible { color: var(--teal-dark); outline: none; }

/* buttons + tags */
.btn { font-weight: 600; font-size: 14px; letter-spacing: 0.01em; padding: 11px 20px; border-radius: 8px; border: 1.5px solid transparent; transition: opacity 0.15s; }
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-teal { background: var(--teal); color: #04201c; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn-ghostWhite { background: transparent; color: var(--on-ink); border-color: rgba(255, 255, 255, 0.3); }
.btn.full { width: 100%; padding: 13px; font-size: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; }
.tag-default { background: var(--soft); color: var(--muted); }
.tag-teal { background: var(--teal-soft); color: var(--teal-dark); }
.tag-black { background: var(--fg); color: var(--bg); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 10px; }
.eyebrow-light { color: var(--teal); }

/* type */
.h1 { font-size: clamp(28px, 4.2vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; margin-top: 14px; }
.h2 { font-size: 18px; font-weight: 600; margin-top: 36px; margin-bottom: 14px; }
.h2.big { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; text-wrap: balance; }
.lede { color: var(--muted); font-size: 16px; margin-top: 8px; max-width: 62ch; }
.fine { color: var(--faint); font-size: 12.5px; margin-top: 10px; max-width: 70ch; }
.crumbs { font-size: 13px; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* home */
.hero { background: var(--ink); color: var(--on-ink); padding-block: 72px 64px; }
.hero-g { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hero-stat { animation: fadeIn 0.5s ease; min-height: 190px; }
.hs-v { font-size: clamp(44px, 7.5vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.hs-s { color: var(--teal); font-size: 16px; margin-top: 12px; }
.hs-d { color: var(--on-ink-2); font-size: 14px; margin-top: 6px; }
.hero-copy { color: var(--on-ink-2); line-height: 1.75; margin-top: 28px; max-width: 44ch; }
.hero-cards { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero-card { border: 1px solid var(--ink-line); border-radius: 12px; padding: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hc-k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.hero-card h3 { font-size: 20px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.hero-card p:not(.hc-k) { color: var(--on-ink-2); font-size: 13.5px; line-height: 1.65; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-stat { animation: none; } html { scroll-behavior: auto; } }

.sec { padding-block: 64px; border-bottom: 1px solid var(--line); }
.sec.soft { background: var(--soft); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; margin-top: 28px; }
.step { background: var(--bg); padding: 24px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.stats { margin-top: 28px; }
.stat-v { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.stat-l { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: 0.04em; text-transform: uppercase; }
.gaps { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 28px; }
.gap { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.gap-c { font-weight: 600; color: var(--fg); font-size: 14px; }
.gap-v { color: var(--teal-dark); font-weight: 600; font-size: 12.5px; margin: 2px 0 10px; }
.cta-g { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.sec.cta { border-bottom: 0; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); transition: border-color 0.2s, transform 0.15s; min-width: 0; }
.card:hover { border-color: var(--teal); transform: translateY(-2px); }
.cover { width: 100%; object-fit: cover; background: var(--soft); }
.cover-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--faint); border-bottom: 1px solid var(--line); }
.cover-empty span { font-weight: 600; font-size: 17px; color: var(--muted); }
.cover-empty small { font-size: 12px; }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-size: 18px; font-weight: 600; line-height: 1.25; margin-top: 4px; }
.card-title span { color: var(--muted); font-weight: 500; }
.card-sub { font-size: 13px; color: var(--muted); }
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.mini-stats > div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.mini-stats b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.mini-stats small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.card-link { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--teal-dark); }

/* spaces page */
.filters { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 28px; padding-block: 18px; border-block: 1px solid var(--line); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); width: 56px; }
.chip { font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
.chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.sort { padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 13px; }
.empty { text-align: center; padding: 56px 0; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.strip { margin-top: 40px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.strip h3 { font-size: 17px; font-weight: 600; }
.strip p { font-size: 13px; color: var(--muted); }

/* detail */
.value { margin-top: 20px; padding: 16px 18px; border-radius: 12px; background: var(--teal-soft); max-width: 66ch; }
.value-k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); }
.value-v { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.value-s { font-size: 13px; color: var(--muted); margin-top: 4px; }
.detail-g { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; margin-top: 8px; align-items: start; }
.detail-main { min-width: 0; }
.detail-main .tags { margin-top: 20px; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 8px; margin-top: 24px; aspect-ratio: 2 / 1; }
.g-item { position: relative; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: var(--soft); min-width: 0; }
.g-item img { width: 100%; height: 100%; object-fit: cover; }
.g-first { grid-column: span 2; grid-row: span 2; }
.gallery-1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; aspect-ratio: 16 / 9; }
.gallery-1 .g-first { grid-column: auto; grid-row: auto; }
.gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; aspect-ratio: 2 / 0.75; }
.gallery-2 .g-first { grid-column: auto; grid-row: auto; }
.gallery-3 .g-item:not(.g-first) { grid-column: span 2; }
.gallery-4 .g-item:nth-child(4) { grid-column: span 2; }
.g-more { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 22px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.no-photos { margin-top: 24px; padding: 32px; border: 1px dashed var(--line); border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: var(--muted); }
.intro { margin-top: 24px; font-size: 16px; line-height: 1.75; color: var(--muted); max-width: 66ch; }
.note { margin-top: 14px; padding: 12px 16px; border-radius: 8px; background: var(--soft); display: flex; gap: 14px; font-size: 14px; max-width: 66ch; }
.note b { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); padding-top: 2px; }
.costs { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-variant-numeric: tabular-nums; }
.costs > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; flex-wrap: wrap; }
.costs > div + div { border-top: 1px solid var(--line); }
.costs span { color: var(--muted); }
.costs b { font-weight: 600; text-align: right; }
.costs-total { background: var(--soft); }
.costs-total b { font-size: 17px; }
.tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tabs button { background: var(--bg); border: 0; padding: 8px 18px; font-size: 13px; font-weight: 500; color: var(--muted); }
.tabs button + button { border-left: 1px solid var(--line); }
.tabs button.on { background: var(--fg); color: var(--bg); }
.plan { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; }
.plan img { max-height: 520px; margin-inline: auto; width: auto; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ticks li { padding-left: 22px; position: relative; font-size: 14px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 6px; height: 11px; border: solid var(--teal-dark); border-width: 0 2px 2px 0; transform: rotate(40deg) scale(0.8); }
.facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 600; text-align: right; }
.detail-side { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); }
.side-card { border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.side-k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.side-v { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.side-s { font-size: 13px; color: var(--muted); padding-bottom: 8px; }
.side-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding-block: 8px; border-top: 1px solid var(--line); }
.side-row span { color: var(--muted); }
.side-row b { text-align: right; font-weight: 600; }
.side-card .btn { margin-top: 4px; }
.side-fine { font-size: 12px; color: var(--faint); text-align: center; }

/* lightbox + modal */
.overlay { position: fixed; inset: 0; z-index: 200; background: rgba(10, 12, 12, 0.72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.overlay.dark { background: rgba(0, 0, 0, 0.92); }
.lb-img { max-width: min(100%, 1100px); max-height: 82vh; border-radius: 8px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.14); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lb-x { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; background: rgba(255, 255, 255, 0.14); color: #fff; }
.lb-count { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); color: rgba(255, 255, 255, 0.7); font-size: 13px; }
.modal { background: var(--bg); color: var(--fg); border-radius: 16px; width: 100%; max-width: 540px; max-height: calc(100% - 8px); overflow-y: auto; }
.modal-head { padding: 24px 28px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.modal-head h3 { font-size: 18px; font-weight: 700; text-wrap: balance; }
.modal-head p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.x { background: var(--soft); border: 0; border-radius: 50%; width: 32px; height: 32px; flex-shrink: 0; color: var(--muted); font-size: 14px; display: flex; align-items: center; justify-content: center; }
.modal-fields { padding: 20px 28px 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.modal-fields .span2 { grid-column: span 2; }
.modal-fields label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.modal input, .modal textarea, .modal select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 14px; }
.modal select { -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238f9794' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.modal ::placeholder { color: var(--faint); opacity: 1; }
.modal input:focus, .modal textarea:focus, .modal select:focus { border-color: var(--teal); outline: none; }
.modal textarea { resize: vertical; }
.modal-foot { padding: 12px 28px 26px; }
.err { padding: 0 28px; color: #c0392b; font-size: 13px; }
.modal-done { padding: 52px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.modal-done h3 { font-size: 22px; font-weight: 700; }
.modal-done p { color: var(--muted); max-width: 34ch; margin-bottom: 8px; }
.tick { width: 52px; height: 52px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-size: 22px; }

.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 28px; font-size: 13px; color: var(--muted); }
.foot b { color: var(--fg); }

/* phone and narrow */
@media (max-width: 860px) {
  .hero-g { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero { padding-block: 48px 44px; }
  .detail-g { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .detail-side { position: static; order: -1; }
  .g3, .g4, .split { grid-template-columns: minmax(0, 1fr); }
  .g4 { gap: 1px; }
  .sec { padding-block: 44px; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; aspect-ratio: auto; }
  .g-first { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
  .g-item:not(.g-first) { aspect-ratio: 4 / 3; }
  .gallery-1, .gallery-2 { aspect-ratio: auto; }
  .gallery-2 { grid-template-columns: minmax(0, 1fr); }
  .gallery-3 .g-item:not(.g-first), .gallery-4 .g-item:nth-child(4) { grid-column: auto; }
  .gallery-3, .gallery-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-3 .g-item:nth-child(3) { grid-column: span 2; }
  .modal-fields { grid-template-columns: minmax(0, 1fr); padding-inline: 20px; }
  .modal-fields .span2 { grid-column: auto; }
  .modal-head, .modal-foot { padding-inline: 20px; }
  .err { padding-inline: 20px; }
  .mini-stats b { font-size: 13px; }
  .chip-label { width: 100%; }
}

/* home (simplified) */
.hero-simple { max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-block: 8px; }
.hero-h { font-size: clamp(36px, 6vw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
.hero-p { color: var(--on-ink-2); font-size: 17px; line-height: 1.65; max-width: 52ch; }
.steps3 { gap: 40px; }
.step-t { font-size: 17px; font-weight: 600; }
.step-b { color: var(--muted); font-size: 14.5px; margin-top: 6px; max-width: 34ch; }

/* card save + capacity */
.card-wrap { position: relative; min-width: 0; display: flex; }
.card-wrap .card { flex: 1; }
.card-save { position: absolute; top: 10px; right: 10px; z-index: 2; }
.save { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.save.compact { padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #0f0f0f; border-color: transparent; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.save.on { color: #d6336c; border-color: currentColor; }
.save.compact.on { color: #d6336c; }
.save:disabled { opacity: 0.45; cursor: not-allowed; }
.card-cap { font-size: 13px; font-weight: 500; color: var(--teal-dark); }
.detail-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.detail-main .detail-top .tags { margin-top: 0; }
.as-link { display: block; text-align: center; }

/* location */
.facts.loc dd { text-align: right; max-width: 60%; }
.ext { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.team-in { width: 190px; }
.chip-note { font-size: 13px; color: var(--muted); }

/* compare */
.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.cmp { border-collapse: collapse; width: 100%; min-width: 640px; font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-size: 14px; }
.cmp thead th { border-top: 0; min-width: 190px; font-weight: 400; }
.cmp tbody th { font-weight: 500; color: var(--muted); font-size: 13px; width: 160px; position: sticky; left: 0; background: var(--bg); }
.cmp thead th:first-child { min-width: 160px; }
.cmp .cover { border-radius: 8px; margin-bottom: 10px; }
.cmp-t { display: block; font-size: 16px; font-weight: 600; }
.cmp-t:hover { color: var(--teal-dark); }
.cmp-s { font-size: 13px; color: var(--muted); }
.cmp td.best { color: var(--teal-dark); font-weight: 700; }
.cmp-act { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) { .facts.loc dd { max-width: 65%; } }
@media (max-width: 560px) { .hero-p { font-size: 16px; } }

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.post-list{display:grid;gap:12px;margin-top:28px;max-width:760px}
.post-item{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--card, transparent);text-decoration:none;color:inherit}
.post-item:hover{border-color:var(--teal)}
.post-item small,.post-date{color:var(--faint);font-size:13px}
.post-item h2{font-size:19px;margin:6px 0;letter-spacing:-0.01em}
.post-item p{color:var(--muted);font-size:15px}
.prose{max-width:68ch}
.prose h2{font-size:21px;margin:32px 0 8px;letter-spacing:-0.01em}
.prose p,.prose li{font-size:16px;line-height:1.75;color:var(--muted)}
.prose p{margin-top:12px}
.prose ul{margin:12px 0 0 20px;list-style:disc}
.prose strong{color:var(--fg)}
.prose a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px}
.faq{margin:28px 0;max-width:760px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--teal-dark)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--muted);line-height:1.7}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.foot a{text-decoration:underline;text-underline-offset:3px}

.in-short{margin-top:18px;padding:16px 18px;border-left:3px solid var(--teal);background:var(--soft, rgba(0,194,168,.08));border-radius:0 10px 10px 0;font-size:16px;line-height:1.65;color:var(--fg)}
.in-short b{color:var(--teal-dark)}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;color:var(--muted)}
.prose th{color:var(--fg);font-weight:600}
.prose ol{margin:12px 0 0 22px;list-style:decimal}
.prose li{margin-top:6px}
.post-cta{margin:44px 0 8px;padding:26px;border:1px solid var(--line);border-radius:16px;max-width:760px}
.post-cta h2{font-size:21px;letter-spacing:-0.01em}
.post-cta p{color:var(--muted);margin:8px 0 16px}
.post-cat{margin-top:40px}
.post-cat-h{font-size:20px;letter-spacing:-0.01em}
.post-cat .post-list{margin-top:14px}
.why3{margin-top:24px}
.post-list-wide{max-width:none;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:20px}

/* ───────── guides: index, cards, article ───────── */
.chip{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-dark);background:var(--teal-soft);padding:4px 10px;border-radius:999px}
.chips{display:flex;gap:8px;margin:22px -16px 26px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chipbtn{flex:none;font:inherit;font-size:14px;padding:9px 16px;min-height:40px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.chipbtn:hover{border-color:var(--teal)}
.chipbtn.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.post-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0b0e0d}
.pcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;background:var(--bg);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.pcard:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.pcard-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 20px;flex:1}
.pcard h2{font-size:19px;line-height:1.25;letter-spacing:-0.015em;margin:2px 0 0}
.pcard p{color:var(--muted);font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard small{margin-top:auto;padding-top:6px;color:var(--faint);font-size:13px}
.pcard-big{margin-bottom:22px}
.pcard-big h2{font-size:24px}
.pcard-big p{-webkit-line-clamp:4;font-size:16px}
.pgrid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:640px){.pgrid{grid-template-columns:repeat(2,1fr)}.chips{margin-left:0;margin-right:0;padding:0;flex-wrap:wrap;overflow:visible}}
@media (min-width:960px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .pcard-big{flex-direction:row;margin-bottom:26px}
  .pcard-big .post-img{width:58%;aspect-ratio:auto;height:auto;min-height:100%}
  .pcard-big .pcard-body{justify-content:center;padding:32px 36px;gap:12px}
  .pcard-big h2{font-size:32px;line-height:1.15}
  .pcard-big small{margin-top:8px}
}
/* article */
.post-page{max-width:820px}
.post-head{margin-top:6px}
.post-h1{font-size:clamp(28px,7.2vw,44px);line-height:1.12;letter-spacing:-0.025em;margin:14px 0 12px;text-wrap:balance}
.post-meta{color:var(--faint);font-size:14px;margin-bottom:20px}
.post-page .post-img{border-radius:16px;margin-bottom:26px}
.post-body.prose{max-width:none}
.post-body.prose p,.post-body.prose li{font-size:17px;line-height:1.75;color:var(--fg);opacity:.88}
@media (min-width:700px){.post-body.prose p,.post-body.prose li{font-size:18px}}
.post-body.prose p{margin-top:16px}
.post-body.prose h2{font-size:clamp(22px,5.6vw,28px);line-height:1.2;letter-spacing:-0.02em;margin:44px 0 6px;scroll-margin-top:84px}
.post-body.prose h3{font-size:19px;margin:28px 0 4px;letter-spacing:-0.01em}
.post-body.prose ul,.post-body.prose ol{margin:14px 0 0 22px}
.post-body.prose li{margin-top:8px}
.post-body.prose li::marker{color:var(--teal-dark)}
.post-body.prose blockquote{margin:20px 0;padding:4px 0 4px 18px;border-left:3px solid var(--teal)}
.post-body.prose a{text-decoration-thickness:1px}
.post-body .in-short{margin-top:0;font-size:17px;border-radius:12px;border-left-width:4px}
.toc{margin:20px 0 6px;border:1px solid var(--line);border-radius:14px;padding:0 16px}
.toc summary{cursor:pointer;font-weight:600;font-size:15px;padding:14px 0;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+";float:right;color:var(--teal-dark)}
.toc[open] summary::after{content:"–"}
.toc ol{margin:0 0 14px 20px;padding:0}
.toc li{margin-top:6px}
.toc li,.toc a{font-size:15px!important;line-height:1.45!important;opacity:1!important}
.tbl{overflow-x:auto;margin:20px -16px;padding:0 16px;-webkit-overflow-scrolling:touch}
.tbl table{min-width:520px;margin:0}
@media (min-width:700px){.tbl{margin:20px 0;padding:0}}
.post-page .post-cta{max-width:none;border-radius:18px}
.post-page .post-cat .pgrid{margin-top:16px}
@media (max-width:959px){.post-page .post-cat .pgrid{grid-template-columns:1fr}}
@media (min-width:640px) and (max-width:959px){.post-page .post-cat .pgrid{grid-template-columns:repeat(2,1fr)}}
.pcard-body .chip{align-self:flex-start}
.post-head .chip{align-self:flex-start}
.post-body .in-short{line-height:1.6;opacity:1;color:var(--fg)}
.nav-link,.nav-r .btn{white-space:nowrap}
@media (max-width:560px){
  .nav-r{gap:2px}
  .nav-link{padding:8px 8px;font-size:14px}
  .nav-r .btn{padding:9px 14px;font-size:14px;min-height:40px}
}

/* home hero: copy left, photos right, aligned to the page grid */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
.hero-split .hero-simple{max-width:none;padding-block:0}
.hero-facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:14px;padding-top:22px;border-top:1px solid var(--ink-line);width:100%}
.hero-facts dt{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--on-ink)}
.hero-facts dd{font-size:13px;color:var(--on-ink-2);margin-top:2px}
.hero-photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px;min-width:0}
.hp-tile{position:relative;display:block;overflow:hidden;border-radius:16px;background:#111;isolation:isolate;clip-path:inset(0 round 16px)}
.hp-tile img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.012);transition:transform .5s ease}
@media (hover:hover){.hp-tile:hover img{transform:scale(1.05)}.hp-tile:hover .hp-cap b{color:var(--teal)}}
.hp-0{grid-column:1/-1;aspect-ratio:16/10}
.hp-1,.hp-2{aspect-ratio:4/3}
.hp-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:28px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));color:#fff}
.hp-cap b{font-size:14px;font-weight:600}
.hp-cap small{font-size:12.5px;color:rgba(255,255,255,.78)}
.hp-0 .hp-cap{padding:40px 18px 16px}
.hp-0 .hp-cap b{font-size:16px}
@media (min-width:900px){
  .hero-split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px}
}
@media (max-width:560px){.hero-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:12px}.hero-facts dt{font-size:16px;white-space:nowrap}.hero-facts dd{font-size:12px;line-height:1.35}}

/* mobile nav: brand + button on the first row, links underneath */
@media (max-width:640px){
  .nav{padding:10px 16px;row-gap:6px}
  .nav-r{display:contents}
  .brand{order:1}
  .nav-cta{order:2;margin-left:auto;padding:9px 14px;font-size:14px;min-height:40px}
  .nav-links{order:3;flex-basis:100%;justify-content:flex-start;gap:0;margin-left:-8px}
  .nav-link{padding:8px}
}

/* home: why + how sections */
.why-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:28px}
.why-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;color:inherit;text-decoration:none;background:var(--bg);clip-path:inset(0 round 18px);transition:border-color .2s ease,box-shadow .2s ease}
.why-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0b0e0d;transition:transform .5s ease}
.why-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px;flex:1}
.why-body h3{font-size:20px;letter-spacing:-0.015em}
.why-body p{color:var(--muted);font-size:15px;line-height:1.6}
.more{margin-top:auto;padding-top:8px;color:var(--teal-dark);font-weight:600;font-size:14.5px}
.more i,.compare-link i{font-style:normal;display:inline-block;transition:transform .2s ease}
@media (hover:hover){.why-card:hover{border-color:var(--teal)}.why-card:hover img{transform:scale(1.035)}.why-card:hover .more i,.how-step:hover .more i,.compare-link:hover i{transform:translateX(4px)}}
.compare-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin-top:22px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;color:inherit;text-decoration:none;background:var(--soft)}
.compare-link span{color:var(--muted);font-size:15px}
.compare-link b{color:var(--teal-dark);font-size:15px}
@media (hover:hover){.compare-link:hover{border-color:var(--teal)}}
.how-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:28px}
.how-step{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:18px;background:var(--bg);color:inherit;text-decoration:none;transition:border-color .2s ease}
.how-n{font-size:40px;font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--teal-dark);margin-bottom:6px}
.how-step h3{font-size:20px;letter-spacing:-0.015em}
.how-step p{color:var(--muted);font-size:15px;line-height:1.6}
@media (hover:hover){.how-step:hover{border-color:var(--teal)}}
@media (min-width:820px){
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .how-grid{grid-template-columns:repeat(3,1fr);gap:18px}
}

/* forms on phones: 16px inputs (no iOS zoom), roomy tap targets, bottom sheet with a pinned send button */
@media (max-width:640px){
  .overlay{align-items:flex-end;padding:0}
  .modal{max-width:none;border-radius:20px 20px 0 0;max-height:92vh;max-height:92dvh;-webkit-overflow-scrolling:touch}
  .modal-head{position:sticky;top:0;background:var(--bg);z-index:2;padding:18px 20px 14px}
  .modal input,.modal select,.modal textarea{font-size:16px;min-height:48px;padding:12px 14px}
  .modal textarea{min-height:96px}
  .modal-fields label{font-size:13px}
  .modal-foot{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px));z-index:2}
  .modal-foot .btn{min-height:50px;font-size:16px}
}