:root { --ss-font-code: var(--ss-font); --ar: #0e8a72; --bar: #0f3d3a; }
.nav .brand, .foot a.brand { font-family: var(--ss-font-heading); font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.f { padding-bottom: 8px; }
.f code { padding: 1px 6px; border-radius: 6px; background: var(--ss-mint); color: var(--ss-deep); font-family: var(--ss-font); font-size: .92em; }
.f .ed-code code { padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; }
.f .cs { color: var(--ss-ide-str); }
.f a:not(.btn):not(.card):not(.v-u) { color: var(--ss-sea); }
.f-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; padding-top: 56px; }
.f-hero .crumbs { margin: 0 0 18px; }
.f-hero .h-lg { margin: 0; }
.f-hero .lead { margin: 16px 0 0; max-width: 520px; }
.f-center { display: block; padding-top: 72px; text-align: center; }
.f-center .lead { margin-inline: auto; }
.f-art { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 20px; border-radius: 16px; }
.f-art svg { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.f-art text, .v-u text { font-family: var(--ss-font); }
.v-deep { background: var(--ss-deep); --ar: var(--ss-spring); --bar: #fff; }
.v-sea { background: var(--ss-sea); --ar: #fff; --bar: #fff; }
.v-mint { background: var(--ss-mint); --ar: #0e8a72; --bar: #0f3d3a; }
.f-sec { padding-top: 96px; }
.f-h { margin-bottom: 28px; }
.f-h .h-section, .f-top .h-section { margin: 0; }
.f-top .h-section { margin-bottom: 28px; }
.f-body { margin: 16px 0 0; color: var(--ss-charcoal); font-size: 17px; line-height: 1.6; }
.f-split .f-body { margin: 0; }
.f-note { margin: 20px 0 0; max-width: 760px; color: var(--ss-charcoal); line-height: 1.6; }
.f-foot { margin: 14px 0 0; color: var(--ss-stone); font-size: var(--ss-t-small); line-height: 1.5; }
.f-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.f-split .f-h { margin: 0; }
.f-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.f-top { gap: 32px; align-items: start; }
.f-code { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.f-side { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.f-tall svg { max-width: 300px; }
.f .callout { margin-top: 14px; }


.v-u { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-width: 0; padding: 28px; border-radius: 16px; overflow: hidden; color: var(--ss-charcoal); text-decoration: none; }
.v-u h2, .v-u h3 { margin: 0; font-family: var(--ss-font-heading); font-size: 24px; font-weight: 550; line-height: 1.2; letter-spacing: -.015em; }
.v-u p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; }
.v-u.v-deep, .v-u.v-sea, .v-u.v-deep h2, .v-u.v-sea h2, .v-u.v-deep h3, .v-u.v-sea h3 { color: #fff; }
.v-u.v-mint h2, .v-u.v-mint h3 { color: var(--ss-deep); }
.v-u.v-deep code, .v-u.v-sea code { background: #fff; color: var(--ss-deep); }
.v-u.v-mint code { background: #fff; }
.v-u-d svg { display: block; width: 100%; height: auto; overflow: visible; }
.v-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 24px; }
.d-a, .d-b { transform-box: fill-box; transform-origin: center; transition: translate .35s var(--ss-ease-out), rotate .35s var(--ss-ease-out); }
.v-u:hover .d-a, .f-art:hover .d-a { translate: 0 -5px; rotate: -1.5deg; }
.v-u:hover .d-b, .f-art:hover .d-b { translate: 0 4px; rotate: 1.5deg; }
@media (prefers-reduced-motion: reduce) { .d-a, .d-b { transition: none; } .v-u:hover .d-a, .f-art:hover .d-a, .v-u:hover .d-b, .f-art:hover .d-b { translate: none; rotate: none; } }


.f-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding-top: 56px; }
.f-2 { grid-column: span 2; } .f-3 { grid-column: span 3; } .f-4 { grid-column: span 4; }
.f-mosaic .v-u { position: relative; transition: translate var(--ss-fast) var(--ss-ease-out); }
.f-mosaic .v-u:hover { translate: 0 -3px; }
.f-mosaic .v-u:focus-visible { outline: 2px solid var(--ss-sea); outline-offset: 3px; }
.f-go { display: inline-block; margin-top: 14px; font-size: 20px; line-height: 1; transition: translate var(--ss-fast) var(--ss-ease-out); }
.f-mosaic .v-u:hover .f-go { translate: 5px 0; }
.f-mosaic .v-mint .f-go { color: var(--ss-sea); }


.f-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.f-pack { padding: 24px; border-radius: 16px; background: #fff; box-shadow: var(--ss-ring-line); }
.f-pack h3 { margin: 0; color: var(--ss-obsidian); font-family: var(--ss-font); font-size: 16px; font-weight: 500; }
.f-price { margin: 12px 0 18px; color: var(--ss-deep); font-family: var(--ss-font-heading); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.025em; }
.f-pack dl { display: grid; gap: 0; margin: 0; }
.f-pack dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ss-hairline); }
.f-pack dt { color: var(--ss-charcoal); font-size: var(--ss-t-small); }
.f-pack dd { margin: 0; color: var(--ss-obsidian); font-size: var(--ss-t-small); font-weight: 500; }


.f-card { padding: 24px; border-radius: 16px; background: #fff; box-shadow: var(--ss-ring-line); }
.f-card-h { margin: 0 0 14px; color: var(--ss-obsidian); font-weight: 500; }
.f-svc { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; color: var(--ss-charcoal); font-size: 15px; line-height: 1.5; }
.f-svc strong { color: var(--ss-obsidian); font-weight: 500; }
.f-rows { margin: 0; padding: 0; list-style: none; }
.f-rows li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--ss-hairline); color: var(--ss-obsidian); line-height: 1.5; }
.f-rows li:last-child { border-bottom: 1px solid var(--ss-hairline); }
.f-tbl { overflow-x: auto; border-radius: 14px; background: #fff; box-shadow: var(--ss-ring-line); }
.f-tbl table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.f-tbl th { padding: 13px 20px; background: var(--ss-wash); color: var(--ss-charcoal); font-size: var(--ss-t-small); font-weight: 500; text-align: left; white-space: nowrap; }
.f-tbl td { padding: 15px 20px; border-top: 1px solid var(--ss-hairline); color: var(--ss-charcoal); vertical-align: top; }
.f-tbl td:first-child { color: var(--ss-obsidian); font-weight: 500; }
.f-tbl td.ours, .f-tbl th.ours { position: static; background: transparent; }
.f-tbl th.ours { background: var(--ss-wash); }
.f-tbl .f-us td, .f-tbl .f-us td.ours { background: var(--ss-mint); color: var(--ss-deep); }
.f-big td:last-child { color: var(--ss-deep); font-family: var(--ss-font-heading); font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.f-big td { vertical-align: middle; }
.f-stack { display: grid; gap: 16px; }
.f-stack .v-u { padding: 24px; }
.f-stack .v-u p { margin: 0; font-size: 16px; }
.v-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v-minis.f-4c { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v-mini { display: flex; gap: 14px; padding: 18px 20px; border-radius: 14px; background: #fff; box-shadow: var(--ss-ring-line); }
.v-mini > div { display: grid; align-content: start; gap: 3px; min-width: 0; }
.v-mini b { color: var(--ss-obsidian); font-weight: 500; line-height: 1.35; }
.v-mini div span { color: var(--ss-charcoal); font-size: var(--ss-t-small); line-height: 1.45; }
.v-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ss-mint); color: var(--ss-sea); }
.f-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.f-chips a { padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: var(--ss-ring-line); font-weight: 500; text-decoration: none; transition: box-shadow var(--ss-fast) var(--ss-ease-out); }
.f-chips a:hover { box-shadow: 0 0 0 1px var(--ss-sea); }
.f-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.f-tool { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.f-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.f-chiprow code { padding: 4px 9px; font-size: 13.5px; }
.f-tool p { margin: 0; color: var(--ss-charcoal); font-size: 15px; line-height: 1.5; }
.f-runs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 40px; padding: 36px; }
.f-runs h2 { font-size: clamp(28px, 2.6vw, 36px); }
.f-tm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.f-span { grid-column: span 2; }
.f-y { display: inline-flex; align-items: center; gap: 6px; color: var(--ss-sea); font-weight: 500; }
.f-y svg { width: 16px; height: 16px; }
.f-n { color: var(--ss-stone); }
.f-roles table { min-width: 560px; }
.f-rel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.f-rel .card { transition: translate var(--ss-fast) var(--ss-ease-out), box-shadow var(--ss-fast) var(--ss-ease-out); }
.f-rel .card:hover { translate: 0 -2px; box-shadow: 0 0 0 1px var(--ss-sea); }
@media (prefers-reduced-motion: reduce) { .f-rel .card, .f-mosaic .v-u, .f-go { transition: none; } .f-rel .card:hover, .f-mosaic .v-u:hover, .f-mosaic .v-u:hover .f-go { translate: none; } }

@media (max-width: 1100px) {
  .v-minis.f-4c { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-mosaic .f-4, .f-mosaic .f-3, .f-mosaic .f-2 { grid-column: span 6; }
  .f-mosaic .f-2 { grid-column: span 3; }
  .f-mosaic .v-mint.f-3 { grid-column: span 6; }
  .f-side { grid-template-columns: minmax(0, 1fr); }
  .f-tall svg { max-width: 260px; }
}
@media (max-width: 900px) {
  .f-hero, .f-split, .f-code, .f-two, .f-packs, .f-tools, .v-minis, .f-runs { grid-template-columns: minmax(0, 1fr); }
  .f-hero { gap: 28px; padding-top: 36px; }
  .f-sec { padding-top: 72px; }
  .f-tm { grid-template-columns: minmax(0, 1fr); }
  .f-span { grid-column: auto; }
  .f-mosaic .f-2 { grid-column: span 6; }
  .v-minis.f-4c { grid-template-columns: minmax(0, 1fr); }
  .f-rel { grid-auto-flow: row; }
}
@media (max-width: 640px) {
  .v-wide, .f-runs { grid-template-columns: minmax(0, 1fr); }
  .v-u { padding: 22px; }
  .f-price { font-size: 40px; }
  .f-tbl th, .f-tbl td { padding-inline: 14px; }
  .f-tbl th { white-space: normal; }
  .f-roles table { min-width: 0; }
  .f-roles thead { display: none; }
  .f-roles tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 0; padding: 14px; border-top: 1px solid var(--ss-hairline); }
  .f-roles tbody tr:first-child { border-top: 0; }
  .f-roles td { padding: 0; border: 0; }
  .f-roles td:first-child { grid-column: 1 / -1; }
  .f-roles td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; color: var(--ss-stone); font-size: 13px; }
}
@media (max-width: 480px) {
  .nav .brand { gap: 6px; font-size: 16px; }
  .nav .btn-go { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 380px) {
  .nav .brand { font-size: 15px; }
  .nav .btn-go { padding-left: 10px; padding-right: 10px; }
}