:root {
  --font-heading: var(--primitive-font-heading);
  --font-body: var(--primitive-font-body);
  --heading-weight: 500;
  --ease: var(--primitive-easing-out);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--primitive-fontSize-base);
  line-height: var(--primitive-lineHeight-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
::selection { background: var(--primitive-color-navy-700); color: #fff; }
p { margin: 0; }
a { color: inherit; }
.wrap { max-width: var(--space-container); margin: 0 auto; padding: 0 var(--space-gutter); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--heading-weight); margin: 0; font-variation-settings: "SOFT" 50, "WONK" 0; }
.display { font-size: var(--primitive-fontSize-4xl); line-height: var(--primitive-lineHeight-tight); letter-spacing: var(--primitive-tracking-display); }
.h2 { font-size: var(--primitive-fontSize-3xl); line-height: 1.06; letter-spacing: var(--primitive-tracking-heading); }
.h3 { font-size: var(--primitive-fontSize-xl); line-height: var(--primitive-lineHeight-snug); letter-spacing: -0.005em; }
.lead { font-size: var(--primitive-fontSize-lg); color: var(--color-text-muted); max-width: 48ch; }
.muted { color: var(--color-text-muted); }
.label { font-size: var(--primitive-fontSize-xs); letter-spacing: var(--primitive-tracking-label); text-transform: uppercase; font-weight: 600; color: var(--color-text-subtle); }
.accent { color: var(--color-text-brand); }
section { padding: var(--space-section) 0; }
.sec-head { display: grid; gap: var(--primitive-spacing-4); max-width: 680px; margin-bottom: var(--primitive-spacing-16); }
.sec-head.wide { max-width: 860px; }
.bg-white { background: var(--color-bg-raised); }
.bg-sunken { background: var(--color-bg-sunken); }
.bg-tint { background: var(--color-bg-tint); }
.bg-navy, .bg-deep { color: var(--color-text-inverse); }
.bg-navy { background: var(--color-bg-inverse); }
.bg-deep { background: var(--color-bg-inverse-deep); }
.bg-navy h2, .bg-navy h3, .bg-deep h2, .bg-deep h3 { color: #fff; }
.bg-navy .label, .bg-deep .label { color: var(--color-text-inverse-muted); }
.bg-navy .lead, .bg-deep .lead, .bg-navy .muted, .bg-deep .muted { color: var(--color-text-inverse-muted); }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: var(--button-font-size); padding: var(--button-padding-y) var(--button-padding-x); border-radius: var(--button-radius); background: var(--button-bg); color: var(--button-fg); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--primitive-duration-fast), transform var(--primitive-duration-fast) var(--ease); }
.btn:hover { background: var(--button-hover-bg); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn .arrow { transition: transform var(--primitive-duration-normal) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn.secondary:hover { background: var(--color-bg-sunken); }
.btn.small { padding: 9px 18px; font-size: var(--primitive-fontSize-sm); }
.btn.on-dark { background: var(--color-text-inverse); color: var(--color-bg-inverse); }
.btn.on-dark:hover { background: var(--primitive-color-navy-50); }
.btn.ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn.ghost-dark:hover { background: rgba(255,255,255,.08); }
.top { position: sticky; top: 0; z-index: 40; background: rgba(250, 250, 248, 0.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--primitive-duration-normal); }
.top.scrolled { border-bottom-color: var(--color-border); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.top .logo { position: relative; top: -2px; }
.logo { font-family: var(--primitive-font-logo); font-size: 1.6rem; letter-spacing: 0.06em; color: #000; text-decoration: none; white-space: nowrap; }
.nav-links { position: relative; top: 1px; display: flex; gap: var(--primitive-spacing-8); align-items: center; font-size: var(--primitive-fontSize-sm); }
.nav-links a:not(.btn) { color: var(--color-text-muted); text-decoration: none; transition: color var(--primitive-duration-fast); }
.nav-links a:not(.btn):hover { color: var(--color-text); }
@media (max-width: 860px) { .nav-links a:not(.btn) { display: none; } .logo { font-size: 1.35rem; } .nav-links .btn { padding: 8px 14px; } }
.hero { overflow: clip; padding: clamp(2rem, 1rem + 3vw, 3rem) 0 clamp(4rem, 2rem + 5vw, 7rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: center; min-height: min(760px, calc(100dvh - 72px)); }
.hero-copy { display: grid; justify-items: start; }
.hero-title { font-size: clamp(2.6rem, 1.3rem + 3.2vw, 4.15rem); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
.hero-title .accent { display: block; }
.hero-sub { margin-top: var(--primitive-spacing-6); font-size: var(--primitive-fontSize-lg); line-height: 1.45; color: var(--color-text); max-width: 30em; }
.btn-lg { margin-top: var(--primitive-spacing-8); min-height: 56px; }
.hero-visual { position: relative; margin-right: calc(-1 * clamp(0px, (100vw - 1240px) / 2, 72px)); }
.pile i { position: absolute; border-radius: 4px; }
.pile .p-a { left: -9%; top: 16%; width: 46%; height: 104%; background: var(--primitive-color-navy-700); }
.pile .p-b { left: 34%; top: -14%; width: 88%; height: 82%; background: var(--primitive-color-navy-100); }
.pile .p-c { left: 20%; top: 46%; width: 76%; height: 96%; background: var(--primitive-color-navy-900); }
.g-window { position: relative; z-index: 1; background: var(--color-bg-sunken); border: 1px solid rgba(71, 67, 42, 0.2); border-radius: 12px; overflow: hidden; }
.g-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; }
.g-bar i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.g-bar i:nth-child(2) { background: #FEBC2E; }
.g-bar i:nth-child(3) { background: #28C840; }
.g-bar .url { margin-left: 12px; font-size: 12px; color: var(--color-text-subtle); background: var(--color-bg-raised); border-radius: var(--primitive-radius-pill); padding: 3px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-window img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-top: 1px solid var(--color-border); }
.g-phone { position: absolute; z-index: 2; right: -4%; top: 38%; width: 21%; }
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: var(--primitive-spacing-16); }
  .hero-visual { margin-right: 0; }
  .pile { display: none; }
}
@media (max-width: 600px) {
  .g-phone { right: 8px; top: auto; bottom: -48px; width: 28%; }
      .hero { padding-bottom: 6rem; }
}
.hero-title .w { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; vertical-align: top; }
.hero-title .w > span { display: inline-block; }
.anim .hero-title .w > span { translate: 0 108%; }
.anim .hero:not(.go) .hero-sub, .anim .hero:not(.go) .hero-copy > div, .anim .hero:not(.go) .anim .g-window { opacity: 0; translate: 0 32px; scale: 0.97; }
.anim .g-window img { clip-path: inset(0 0 100% 0); scale: 1.06; transform-origin: top center; }
.anim .g-phone { opacity: 0; translate: 48px 24px; rotate: 5deg; }
.anim .pile .p-a { opacity: 0; translate: 40px 0; }
.anim .pile .p-b { opacity: 0; translate: 0 40px; }
.anim .pile .p-c { opacity: 0; translate: 0 -40px; }
.anim .hero.go .hero-title .w > span { translate: 0 0; transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 45ms); }
.anim .hero.go .hero-sub, .anim .hero.go .hero-copy > div, .anim .hero.go .anim .hero.go .hero-sub { transition-delay: 0.45s; }
.anim .hero.go .hero-copy > div { transition-delay: 0.55s; }
.anim .hero.go .anim .hero.go .g-window { opacity: 1; translate: 0 0; scale: 1; transition: opacity 0.6s var(--ease) 0.2s, translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, scale 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.anim .hero.go .g-window img { clip-path: inset(0 0 0 0); scale: 1; transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1) 0.55s, scale 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.55s; }
.anim .hero.go .g-phone { opacity: 1; translate: 0 0; rotate: 0deg; transition: opacity 0.5s var(--ease) 1.15s, translate 1s cubic-bezier(0.16, 1, 0.3, 1) 1.15s, rotate 1s cubic-bezier(0.16, 1, 0.3, 1) 1.15s; }
.anim .hero.go .pile i { opacity: 1; translate: 0 0; transition: opacity 0.8s var(--ease), translate 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.anim .hero.go .pile .p-a { transition-delay: 0.9s; }
.anim .hero.go .pile .p-b { transition-delay: 1s; }
.anim .hero.go .pile .p-c { transition-delay: 1.1s; }
.stage { position: relative; }
.frame { background: var(--color-bg-raised); border: 1px solid var(--frame-border); border-radius: var(--frame-radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(15, 35, 57, 0.28); }
.frame.tilt { transform: rotate(-1.2deg); }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-sunken); }
.frame-bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--primitive-color-paper-300); }
.frame-bar .url { margin-left: 10px; font-size: 11px; color: var(--color-text-subtle); background: var(--color-bg-raised); border-radius: var(--primitive-radius-pill); padding: 2px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot { aspect-ratio: 16 / 10; overflow: hidden; position: relative; background: var(--color-bg-sunken); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone { background: var(--primitive-color-navy-950); border-radius: 30px; padding: 6px; box-shadow: 0 30px 60px -24px rgba(15, 35, 57, 0.45); }
.phone-shot { aspect-ratio: 390 / 844; background: var(--primitive-color-navy-950); border-radius: 24px; overflow: hidden; }
.phone-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: inherit; }
.chip { position: absolute; background: var(--color-bg-raised); border: 1px solid var(--color-border-strong); border-radius: var(--primitive-radius-md); padding: 11px 15px; font-size: var(--primitive-fontSize-sm); display: grid; gap: 1px; line-height: 1.35; z-index: 4; color: var(--color-text); box-shadow: 0 12px 30px -14px rgba(15, 35, 57, 0.3); animation: float 6s ease-in-out infinite; }
.chip small { color: var(--color-text-subtle); font-size: 12px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-positive); margin-right: 7px; animation: pulse 2.4s infinite; vertical-align: 1px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(9,139,61,.45); } 70% { box-shadow: 0 0 0 9px rgba(9,139,61,0); } 100% { box-shadow: 0 0 0 0 rgba(9,139,61,0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.proof { padding: var(--primitive-spacing-8) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.proof-grid { display: grid; grid-template-columns: 0.8fr 1fr 1fr; gap: var(--primitive-spacing-8); align-items: start; }
.rating { display: grid; gap: 6px; }
.rating .score { font-family: var(--font-heading); font-size: var(--primitive-fontSize-3xl); line-height: 1; color: var(--color-text-brand); }
.stars { display: flex; gap: 3px; color: #E8A317; }
.stars svg { width: 18px; height: 18px; }
.rating small { color: var(--color-text-subtle); font-size: var(--primitive-fontSize-sm); }
.mini-quote { display: grid; gap: var(--primitive-spacing-4); padding-left: var(--primitive-spacing-6); border-left: 1px solid var(--color-border-strong); }
.mini-quote blockquote { margin: 0; font-family: var(--font-heading); font-size: var(--primitive-fontSize-lg); line-height: 1.35; }
.who { display: flex; align-items: center; gap: var(--primitive-spacing-3); font-size: var(--primitive-fontSize-sm); line-height: 1.3; }
.who .ini { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--color-bg-tint); color: var(--color-text-brand); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.who small { display: block; color: var(--color-text-subtle); }
.logos-row { margin-top: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--primitive-spacing-8); align-items: center; }
.logos-row .label { white-space: nowrap; }
.logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos-track { display: flex; gap: var(--primitive-spacing-16); width: max-content; animation: slide 50s linear infinite; align-items: center; }
.logos-track span { color: var(--color-text); opacity: .5; white-space: nowrap; font-size: 1.2rem; }
.lg-a { font-family: var(--font-heading); font-size: 1.4rem !important; }
.lg-b { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .95rem !important; }
.lg-c { font-family: var(--primitive-font-logo); font-size: 1.5rem !important; letter-spacing: .04em; }
.lg-d { font-family: var(--font-heading); font-style: italic; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } .mini-quote { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border-strong); padding-top: var(--primitive-spacing-6); } .logos-row { grid-template-columns: 1fr; gap: var(--primitive-spacing-4); } }
.problem { --neg: var(--color-negative); --neg-soft: #FBEDEE; --line: var(--primitive-color-paper-200); --bar: var(--primitive-color-paper-100); }
.pcards { list-style: none; margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; grid-auto-flow: row dense; }
.pc-a { grid-column: span 8; } .pc-b { grid-column: span 4; grid-row: span 2; } .pc-c, .pc-d { grid-column: span 4; } .pc-e { grid-column: span 5; } .pc-f { grid-column: span 7; }
.pcard { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 228px auto; background: var(--color-bg-raised); border: 0; border-radius: 22px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(4, 12, 22, 0.25), 0 28px 56px -28px rgba(4, 12, 22, 0.7); transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.pcard:hover { translate: 0 -3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 8px rgba(4, 12, 22, 0.25), 0 38px 70px -30px rgba(4, 12, 22, 0.8); }
.pcard.reveal { transition: opacity 0.7s var(--ease) calc(var(--i) * 60ms), transform 0.7s var(--ease) calc(var(--i) * 60ms), translate 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.pcard-visual { display: grid; place-items: center; margin: 10px 10px 0; padding: 22px 24px; border-radius: 15px; background: var(--color-bg-sunken); box-shadow: inset 0 1px 3px rgba(15, 35, 57, 0.08), inset 0 0 0 1px rgba(15, 35, 57, 0.04); }
.g-time, .g-rank, .g-fresh { background: var(--color-bg-raised); border-radius: 12px; padding: 14px 16px; }
.g-time, .g-rank, .g-fresh, .gw-bubble, .gb-btn, .gb-err, .go-row { box-shadow: 0 1px 2px rgba(15, 35, 57, 0.07), 0 8px 18px -10px rgba(15, 35, 57, 0.22); transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.pcard:hover .g-time, .pcard:hover .g-rank, .pcard:hover .g-fresh, .pcard:hover .gw-bubble, .pcard:hover .gb-err, .pcard:hover .go-row { translate: 0 -2px; box-shadow: 0 2px 4px rgba(15, 35, 57, 0.07), 0 14px 26px -12px rgba(15, 35, 57, 0.28); }
.pcard-body { padding: 22px 28px 28px; display: grid; gap: 10px; align-content: start; }
.problem .pcard-body h3 { color: var(--color-text); font-size: 1.3rem; line-height: 1.22; letter-spacing: -0.01em; text-wrap: balance; text-indent: -0.4em; }
.pcard-body p { font-size: var(--primitive-fontSize-sm); line-height: 1.55; color: var(--color-text-muted); }
.g { width: 100%; min-width: 0; max-width: 320px; font-size: 12px; color: var(--color-text-muted); }
.g svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g-time { display: grid; gap: 22px; }
.gt-row.bad { margin-bottom: 16px; }
.gt-row { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 12px; }
.gt-label { font-weight: 600; color: var(--color-text); white-space: nowrap; }
.gt-track { position: relative; height: 4px; border-radius: 4px; background: var(--bar); }
.gt-fill { position: absolute; inset: 0 auto 0 0; width: var(--to); border-radius: 4px; background: var(--color-primary); transform-origin: left; }
.gt-dot { position: absolute; top: 50%; left: var(--at); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 3px #fff, 0 2px 5px 3px rgba(15, 35, 57, 0.18); }
.gt-row.bad .gt-fill, .gt-row.bad .gt-dot { background: var(--neg); }
.gt-tag { position: absolute; left: var(--at); top: 14px; translate: -50% 0; font-style: normal; font-size: 11px; font-weight: 600; color: var(--neg); background: var(--neg-soft); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.gt-axis { display: flex; justify-content: space-between; margin-left: 90px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.g-rank { display: grid; gap: 9px; }
.gr-search { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--color-text); margin-bottom: 4px; }
.gr-search svg { width: 14px; height: 14px; flex: none; color: var(--color-text-subtle); }
.gr-search span { margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-search em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--color-text-subtle); background: var(--bar); padding: 2px 8px; border-radius: 99px; }
.gr-row { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px; height: 18px; }
.gr-row b { font-size: 11px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; text-align: right; }
.gr-row i { display: block; height: 8px; width: var(--w); border-radius: 8px; background: var(--primitive-color-navy-100); }
.gr-gap { height: 10px; margin-left: 32px; border-left: 2px dotted var(--line); }
.gr-row.you b { color: var(--neg); }
.gr-row.you span { justify-self: start; font-size: 11px; font-weight: 600; color: var(--neg); background: var(--neg-soft); padding: 2px 10px; border-radius: 99px; }
.g-wait { display: grid; gap: 14px; }
.gw-bubble { justify-self: end; max-width: 86%; background: var(--color-bg-raised); color: var(--color-text); border-radius: 16px 16px 4px 16px; padding: 10px 14px; line-height: 1.4; }
.gw-bubble small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--color-text-subtle); }
.gw-status { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--color-text-subtle); }
.gw-dots { display: inline-flex; gap: 4px; padding: 9px 12px; border-radius: 16px 16px 16px 4px; background: var(--primitive-color-paper-200); }
.gw-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--primitive-color-paper-300); }
.gw-days { margin-left: auto; font-size: 11px; color: var(--neg); background: var(--neg-soft); padding: 3px 9px; border-radius: 99px; }
.g-fresh { display: grid; }
.gf-head, .gf-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gf-head { padding-bottom: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-subtle); }
.gf-row { padding: 10px 0; border-top: 1px solid var(--line); color: var(--color-text); }
.gf-row em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--neg); background: var(--neg-soft); padding: 2px 9px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.g-broken { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; }
.gb-btn { position: relative; background: var(--color-primary); color: #fff; font-weight: 600; font-size: 11.5px; padding: 9px 14px; border-radius: 99px; white-space: nowrap; }
.gb-cursor { position: absolute; right: -6px; bottom: -12px; width: 18px; height: 18px; fill: #fff !important; stroke: var(--color-text) !important; stroke-width: 1.4 !important; }
.gb-path { width: 100%; height: 26px; color: var(--primitive-color-paper-300); stroke-dasharray: 3 4; }
.gb-path path:last-child { stroke-dasharray: none; }
.gb-err { display: grid; justify-items: center; gap: 2px; padding: 12px 14px; background: var(--color-bg-raised); border-radius: 12px; text-align: center; }
.gb-err b { font-family: var(--font-heading); font-weight: 500; font-size: 1.6rem; line-height: 1; color: var(--neg); }
.gb-err span { font-size: 10.5px; color: var(--color-text-subtle); white-space: nowrap; }
.g-own { display: grid; gap: 8px; }
.go-row { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; background: var(--color-bg-raised); border-radius: 12px; color: var(--color-text); }
.go-row svg { width: 15px; height: 15px; color: var(--color-text-subtle); }
.go-row em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--color-text-subtle); }
.go-row.bad { background: var(--neg-soft); box-shadow: inset 0 0 0 1px #F2C9CC, 0 1px 2px rgba(15, 35, 57, 0.07), 0 8px 18px -10px rgba(197, 54, 63, 0.3); }
.go-row.bad svg, .go-row.bad em { color: var(--neg); }
.anim .pcard .g { transition: opacity 0.35s ease; }
.anim .pcard.fade .g { opacity: 0; }
.anim .pcard.reset .g, .anim .pcard.reset .g * { transition: none !important; animation: none !important; }
.anim .pcard { --d: 0.35s; --e: cubic-bezier(0.16, 1, 0.3, 1); }
.anim .pcard .gt-fill { clip-path: inset(0 100% 0 0); transform: none; }
.anim .pcard.play .gt-fill { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--e) var(--d); }
.anim .pcard.play .gt-row.bad .gt-fill { transition-duration: 0.7s; }
.anim .pcard .gt-dot { scale: 0; }
.anim .pcard.play .gt-dot { scale: 1; transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d) + 1.25s); }
.anim .pcard.play .gt-row.bad .gt-dot { transition-delay: calc(var(--d) + 0.55s); }
.anim .pcard .gt-tag { opacity: 0; translate: -50% -6px; scale: 0.9; }
.anim .pcard.play .gt-tag { opacity: 1; translate: -50% 0; scale: 1; transition: opacity 0.3s ease calc(var(--d) + 0.85s), translate 0.5s var(--e) calc(var(--d) + 0.85s), scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d) + 0.85s); }
.anim .pcard .gr-row i { transform: scaleX(0); transform-origin: left; }
.anim .pcard.play .gr-row i { transform: scaleX(1); transition: transform 0.8s var(--e) calc(var(--d) + var(--k, 0) * 0.08s); }
.gr-row:nth-of-type(2) { --k: 0; } .gr-row:nth-of-type(3) { --k: 1; } .gr-row:nth-of-type(4) { --k: 2; } .gr-row:nth-of-type(5) { --k: 3; } .gr-row:nth-of-type(6) { --k: 4; } .gr-row:nth-of-type(7) { --k: 5; }
.anim .pcard .gr-gap { clip-path: inset(0 0 100% 0); }
.anim .pcard.play .gr-gap { clip-path: inset(0); transition: clip-path 0.5s ease calc(var(--d) + 0.6s); }
.anim .pcard .gr-row.you { opacity: 0; translate: 0 14px; }
.anim .pcard.play .gr-row.you { opacity: 1; translate: 0 0; transition: opacity 0.4s ease calc(var(--d) + 0.95s), translate 0.7s var(--e) calc(var(--d) + 0.95s); }
.anim .pcard .gw-bubble { opacity: 0; translate: 24px 8px; scale: 0.96; transform-origin: right bottom; }
.anim .pcard.play .gw-bubble { opacity: 1; translate: 0 0; scale: 1; transition: opacity 0.35s ease var(--d), translate 0.7s var(--e) var(--d), scale 0.7s var(--e) var(--d), box-shadow 0.5s var(--ease); }
.anim .pcard .gw-status { opacity: 0; }
.anim .pcard.play .gw-status { opacity: 1; transition: opacity 0.5s ease calc(var(--d) + 0.6s); }
.pcard.live .gw-dots i { animation: gwait 1.4s ease-in-out infinite; }
.pcard.live .gw-dots i:nth-child(2) { animation-delay: 0.18s; } .pcard.live .gw-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes gwait { 0%, 60%, 100% { translate: 0 0; opacity: 0.55; } 30% { translate: 0 -3px; opacity: 1; } }
.gw-n { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.anim .pcard .gf-row { opacity: 0; translate: 0 6px; }
.anim .pcard.play .gf-row { opacity: 1; translate: 0 0; transition: opacity 0.4s ease calc(var(--d) + var(--k) * 0.12s), translate 0.6s var(--e) calc(var(--d) + var(--k) * 0.12s); }
.gf-row:nth-of-type(2) { --k: 0; } .gf-row:nth-of-type(3) { --k: 1; } .gf-row:nth-of-type(4) { --k: 2; }
.anim .pcard .gf-row em { opacity: 0; translate: 0 -8px; rotate: -6deg; }
.anim .pcard.play .gf-row em { opacity: 1; translate: 0 0; rotate: 0deg; transition: opacity 0.25s ease calc(var(--d) + 0.45s + var(--k) * 0.18s), translate 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d) + 0.45s + var(--k) * 0.18s), rotate 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d) + 0.45s + var(--k) * 0.18s); }
.anim .pcard .gb-cursor { translate: 46px 34px; opacity: 0; }
.anim .pcard.play .gb-cursor { translate: 0 0; opacity: 1; transition: translate 0.9s var(--e) var(--d), opacity 0.3s ease var(--d); }
.anim .pcard.play .gb-btn { animation: gpress 0.35s ease calc(var(--d) + 0.95s) both; }
@keyframes gpress { 50% { scale: 0.93; } }
.anim .pcard .gb-path { clip-path: inset(0 100% 0 0); }
.anim .pcard.play .gb-path { clip-path: inset(0); transition: clip-path 0.55s ease-out calc(var(--d) + 1.2s); }
.anim .pcard .gb-err { opacity: 0; scale: 0.9; }
.anim .pcard.play .gb-err { opacity: 1; scale: 1; transition: opacity 0.3s ease calc(var(--d) + 1.65s), scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d) + 1.65s), translate 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.anim .pcard.play .gb-err b { animation: gshake 0.45s ease calc(var(--d) + 2s) both; }
@keyframes gshake { 20% { translate: -3px 0; } 45% { translate: 3px 0; } 70% { translate: -2px 0; } 100% { translate: 0 0; } }
.anim .pcard .go-row { opacity: 0; translate: -12px 0; }
.anim .pcard.play .go-row { opacity: 1; translate: 0 0; transition: opacity 0.4s ease calc(var(--d) + var(--k) * 0.14s), translate 0.6s var(--e) calc(var(--d) + var(--k) * 0.14s), box-shadow 0.5s var(--ease), background 0.5s ease calc(var(--d) + 1.1s); }
.go-row:nth-of-type(1) { --k: 0; } .go-row:nth-of-type(2) { --k: 1; } .go-row:nth-of-type(3) { --k: 2; }
.go-row svg path { transform-box: fill-box; }
.anim .pcard .go-row svg path { translate: 0 -2.5px; }
.anim .pcard.play .go-row svg path { translate: 0 0; transition: translate 0.3s cubic-bezier(0.34, 1.8, 0.64, 1) calc(var(--d) + 0.45s + var(--k) * 0.14s); }
.anim .pcard .go-row.bad { background: var(--color-bg-raised); box-shadow: 0 1px 2px rgba(15, 35, 57, 0.07), 0 8px 18px -10px rgba(15, 35, 57, 0.22); }
.anim .pcard .go-row.bad svg, .anim .pcard .go-row.bad em { color: var(--color-text-subtle); }
.anim .pcard.play .go-row.bad { background: var(--neg-soft); box-shadow: inset 0 0 0 1px #F2C9CC, 0 1px 2px rgba(15, 35, 57, 0.07), 0 8px 18px -10px rgba(197, 54, 63, 0.3); }
.anim .pcard.play .go-row.bad svg, .anim .pcard.play .go-row.bad em { color: var(--neg); transition: color 0.5s ease calc(var(--d) + 1.1s); }
.bridge { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--primitive-spacing-6); }
.bridge p { font-family: var(--font-heading); font-size: var(--primitive-fontSize-xl); line-height: 1.3; color: #fff; }
.pcard.wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(250px, auto); }
.pcard.wide .pcard-visual { margin: 10px 0 10px 10px; }
.pcard.wide .pcard-body { align-content: center; padding: 28px 32px; }
.pcard.wide .pcard-body h3 { font-size: 1.55rem; }
.pcard.tall { grid-template-rows: minmax(228px, 1fr) auto; }
.pcard.tall .g { max-width: 300px; }
.gr-row.more i { background: var(--primitive-color-paper-200); }
@media (max-width: 1080px) {
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-a, .pc-f { grid-column: 1 / -1; } .pc-b, .pc-c, .pc-d, .pc-e { grid-column: span 1; grid-row: auto; }
  .pcard.tall { grid-template-rows: 228px auto; }
  .gr-row.more { display: none; }
}
@media (max-width: 680px) {
  .pcards { grid-template-columns: 1fr; }
  .pcards > .pcard { grid-column: 1 / -1; }
  .pcard.wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .pcard.wide .pcard-visual { margin: 10px 10px 0; }
  .pcard.wide .pcard-body { padding: 20px 22px 24px; }
  .pcard.wide .pcard-body h3 { font-size: 1.3rem; }
  .pcard { grid-template-rows: auto auto; }
  .pcard-visual { padding: 24px 18px; }
  .pcard-body { padding: 20px 22px 24px; }
  .pcard-body h3 { text-indent: 0; }
}
@media (prefers-reduced-motion: reduce) { .pcard, .pcard .g-time, .pcard .g-rank, .pcard .g-fresh, .pcard .gw-bubble, .pcard .gb-err, .pcard .go-row { transition: none; } .pcard:hover, .pcard:hover * { translate: none !important; } }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--primitive-spacing-4); }
.tile { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); display: grid; gap: var(--primitive-spacing-4); align-content: start; overflow: hidden; position: relative; }
.tile .h3 { max-width: 24ch; }
.tile p { color: var(--color-text-muted); max-width: 46ch; }
.t-ai { grid-column: span 7; }
.t-phone { grid-column: span 5; padding-bottom: 0; background: var(--color-bg-tint); border-color: transparent; }
.t-design { grid-column: span 7; padding-bottom: 0; }
.t-simple { grid-column: span 5; }
@media (max-width: 900px) { .bento > .tile { grid-column: 1 / -1; } }
.chat { display: grid; gap: 10px; margin-top: var(--primitive-spacing-2); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--primitive-radius-md); padding: 16px; min-height: 250px; align-content: start; }
.chat-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-subtle); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.chat-head i { width: 18px; height: 18px; border-radius: 50%; background: var(--primitive-color-navy-900); display: inline-block; }
.bubble { font-size: var(--primitive-fontSize-sm); line-height: 1.45; padding: 10px 14px; border-radius: 14px; max-width: 88%; }
.bubble.q { justify-self: end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; min-height: 40px; }
.bubble.a { background: var(--color-bg-raised); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.bubble.a.show { opacity: 1; transform: none; }
.bubble.a b { font-weight: 600; }
.source { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; background: var(--color-bg-tint); color: var(--color-text-brand); border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.caret { display: inline-block; width: 1px; height: 1em; background: #fff; margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.t-phone .phone { width: 56%; max-width: 230px; justify-self: center; margin-top: var(--primitive-spacing-4); margin-bottom: -60px; }
.design-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--primitive-spacing-4); margin-bottom: -30px; }
.design-strip .frame { box-shadow: none; }
.design-strip .frame:nth-child(2) { transform: translateY(28px); }
.compare-stack { display: grid; gap: var(--primitive-spacing-3); margin-top: var(--primitive-spacing-2); }
.stack { border-radius: var(--primitive-radius-md); padding: 14px; display: grid; gap: 8px; align-content: start; font-size: 13px; }
.stack.old { background: var(--color-bg-sunken); color: var(--color-text-subtle); }
.stack.new { background: var(--color-bg-tint); color: var(--color-text-brand); }
.stack .label { margin-bottom: 2px; }
.pill { border-radius: 8px; padding: 7px 10px; background: var(--color-bg-raised); border: 1px solid var(--color-border); display: flex; justify-content: space-between; gap: 8px; }
.stack.old .pill { text-decoration: line-through; text-decoration-color: rgba(197,54,63,.6); }
.stack.old .pill em { font-style: normal; color: var(--color-negative); font-weight: 600; }
.stack.new .pill { border-color: transparent; font-weight: 600; }
.stack.new .ok { color: var(--color-positive); }
.care-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--primitive-spacing-16); align-items: end; margin-bottom: var(--primitive-spacing-16); }
.care-top .sec-head { margin-bottom: 0; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: rgba(255,255,255,.94); }
.checks li small { display: block; color: var(--color-text-inverse-muted); font-size: var(--primitive-fontSize-sm); }
.checks svg { width: 22px; height: 22px; margin-top: 2px; color: #fff; --check-bg: #1FA855; }
@media (max-width: 960px) { .care-top { grid-template-columns: 1fr; gap: var(--primitive-spacing-8); } }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } }
.portal { display: grid; grid-template-columns: 1fr 2.2fr; gap: var(--primitive-spacing-12); align-items: center; padding-top: var(--primitive-spacing-16); border-top: 1px solid var(--color-border-inverse); }
.portal-copy { display: grid; gap: var(--primitive-spacing-6); align-content: start; }
.portal-copy > p { color: var(--color-text-inverse-muted); }
.portal-points { list-style: none; margin: 0; padding: 0; display: grid; }
.portal-points li { padding: 14px 0; border-top: 1px solid var(--color-border-inverse); font-size: var(--primitive-fontSize-base); color: #fff; }
.portal-stage { position: relative; }
.portal-stage .frame { border-color: rgba(255,255,255,.18); box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); }
.portal-stage .phone { position: absolute; left: -48px; bottom: -40px; width: 22%; transform: rotate(-2deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.portal-stage .phone { z-index: 2; cursor: default; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.portal-stage .phone:hover { transform: rotate(0deg) translateY(-10px) scale(1.06); box-shadow: 0 44px 80px -24px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) { .portal-stage .phone { transition: none; } }
@media (max-width: 960px) { .portal { grid-template-columns: 1fr; } .portal-stage .phone { left: auto; right: 4px; bottom: -36px; width: 28%; } }
.fair .fair-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--primitive-spacing-16); align-items: start; }
.fair-list { display: grid; }
.fair-list > div { display: grid; grid-template-columns: 1fr auto; gap: var(--primitive-spacing-6); padding: var(--primitive-spacing-6) 0; border-top: 1px solid var(--color-border-strong); align-items: center; }
.fair-list > div:last-child { border-bottom: 1px solid var(--color-border-strong); }
.fair-list p { color: var(--color-text-muted); margin-top: 4px; }
.fair-list svg { width: 28px; height: 28px; color: var(--color-text-brand); }
@media (max-width: 900px) { .fair .fair-wrap { grid-template-columns: 1fr; gap: var(--primitive-spacing-8); } }
.compare { display: grid; margin-top: var(--primitive-spacing-16); font-size: var(--primitive-fontSize-base); }
.compare > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }
.compare > div > span { display: flex; align-items: center; gap: 12px; padding: 20px 24px; }
.c-label { font-weight: 600; color: var(--color-text); padding-left: 0 !important; border-bottom: 1px solid var(--color-border); }
.c-them { color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.c-us { background: var(--color-bg-inverse); color: #fff; font-weight: 600; border-bottom: 1px solid var(--color-border-inverse); }
.c-them::before, .c-us::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 12px; }
.c-them::before { background-color: var(--color-bg-sunken); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.c-us::before { background-color: #1FA855; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.c-head > span { padding-top: 28px; padding-bottom: 20px; font-size: var(--primitive-fontSize-sm); font-weight: 600; color: var(--color-text-subtle); border-bottom: 1px solid var(--color-border-strong) !important; }
.c-head .c-us { border-radius: var(--card-radius) var(--card-radius) 0 0; border-bottom-color: var(--color-border-inverse) !important; }
.c-head > span::before { display: none; }
.c-logo { font-family: var(--primitive-font-logo); font-size: 1.6rem; letter-spacing: 0.06em; font-weight: 400; color: #fff; }
.c-us.c-last { border-radius: 0 0 var(--card-radius) var(--card-radius); border-bottom: 0; padding-bottom: 28px; }
.compare > div:last-child .c-label, .compare > div:last-child .c-them { border-bottom: 0; }
.compare { box-shadow: none; }
@media (max-width: 700px) {
  .compare { gap: var(--primitive-spacing-4); }
  .compare > div { grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .compare > div > span { padding: 12px 14px; font-size: var(--primitive-fontSize-sm); align-items: flex-start; }
  .c-label { grid-column: 1 / -1; border-bottom: 0 !important; padding: 0 0 6px !important; }
  .c-them { background: var(--color-bg-sunken); border-radius: var(--primitive-radius-md); border-bottom: 0 !important; }
  .c-us, .c-us.c-last { border-radius: var(--primitive-radius-md); border-bottom: 0; padding-bottom: 12px; }
  .c-head > span:first-child { display: none; }
  .c-head > span { background: none !important; padding: 0 14px !important; border: 0 !important; color: var(--color-text-subtle); }
  .c-head .c-logo { color: var(--color-text); font-size: 1.15rem; }
  .c-them::before, .c-us::before { width: 18px; height: 18px; background-size: 10px; margin-top: 1px; }
}
.ba { max-width: 1040px; margin: 0 auto; position: relative; border-radius: var(--frame-radius); overflow: hidden; border: 1px solid var(--frame-border); --pos: 50%; user-select: none; background: var(--color-bg-raised); box-shadow: 0 30px 60px -30px rgba(15, 35, 57, 0.3); }
.ba .before { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba .handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 0 1px rgba(15,35,57,.12); }
.ba .handle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat; }
.ba input { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba input:focus-visible ~ .handle::after { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.ba .tag { position: absolute; z-index: 4; bottom: 16px; font-size: var(--primitive-fontSize-xs); font-weight: 600; letter-spacing: var(--primitive-tracking-label); text-transform: uppercase; background: #fff; color: var(--color-text); border-radius: var(--primitive-radius-pill); padding: 6px 14px; pointer-events: none; }
.ba .tag.l { left: 16px; } .ba .tag.r { right: 16px; background: var(--color-primary); color: #fff; }
.old { background: #efeeea; font-family: Verdana, Geneva, sans-serif; color: #333; font-size: clamp(7px, 0.95vw, 12px); display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
.old .o-head { background: #3d5a2a; color: #fff; padding: 2.2% 3%; display: flex; justify-content: space-between; align-items: center; }
.old .o-head b { font-family: Georgia, serif; font-size: 2em; font-weight: normal; font-style: italic; }
.old .o-head span { font-size: .9em; opacity: .85; }
.old .o-menu { background: #6b7f4d; padding: 1% 3%; display: flex; gap: 2.4em; color: #fff; font-size: .95em; }
.old .o-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3%; padding: 3%; align-content: start; }
.old .o-img { aspect-ratio: 4/3; background: url("img/old-photo.jpg") center / cover; border: 4px solid #fff; outline: 1px solid #ccc; }
.old h4 { margin: 0 0 .6em; font-family: Georgia, serif; font-weight: normal; font-size: 1.6em; color: #3d5a2a; }
.old p { line-height: 1.55; margin-bottom: .8em; }
.old .o-new { color: #b30000; font-weight: bold; }
.old .o-foot { font-size: .8em; color: #888; }
.showcase { margin-top: var(--primitive-spacing-16); display: grid; grid-template-columns: 2fr 1fr; gap: var(--primitive-spacing-6); align-items: start; }
.showcase .side { display: grid; gap: var(--primitive-spacing-6); }
.showcase .frame { box-shadow: none; transition: transform .5s var(--ease); }
.showcase .frame:hover { transform: translateY(-4px); }
.showcase-foot { margin-top: var(--primitive-spacing-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--primitive-spacing-4); align-items: center; font-size: var(--primitive-fontSize-sm); color: var(--color-text-muted); }
.showcase-foot b { color: var(--color-text); }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }
.more-sites { list-style: none; margin: var(--primitive-spacing-12) 0 0; padding: 0; border-top: 1px solid var(--color-border-strong); }
.more-sites li { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: var(--primitive-spacing-8); align-items: center; padding: var(--primitive-spacing-4) 0; border-bottom: 1px solid var(--color-border-strong); }
.more-info { display: grid; gap: 2px; }
.more-info b { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--primitive-fontSize-xl); line-height: 1.2; }
.more-info span { font-size: var(--primitive-fontSize-sm); color: var(--color-text-muted); }
.more-sites .btn { justify-self: end; }
@media (max-width: 640px) {
  .more-sites li { grid-template-columns: 112px minmax(0, 1fr); gap: var(--primitive-spacing-2) var(--primitive-spacing-4); }
  .more-sites .mini-site { grid-row: span 2; }
  .more-sites .btn { justify-self: start; }
}
.mini-site { aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; border: 1px solid var(--frame-border); display: grid; grid-template-rows: auto 1fr; font-size: 6px; background: var(--ms-bg); color: var(--ms-fg); }
.ms-nav { display: flex; align-items: center; gap: 5px; padding: 5px 7px; }
.ms-nav b { margin-right: auto; font-weight: 700; font-family: var(--ms-font); font-size: 7px; }
.ms-nav i { width: 12px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.4; }
.ms-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6px; padding: 4px 7px 7px; align-items: center; }
.ms-hero > div { display: grid; gap: 5px; justify-items: start; }
.ms-h { font-family: var(--ms-font); font-size: 11px; line-height: 1.05; font-weight: 600; }
.ms-btn { background: var(--ms-accent); color: var(--ms-btn-fg, #fff); padding: 2px 6px; border-radius: 99px; font-size: 5.5px; font-weight: 700; }
.ms-img { height: 100%; border-radius: 4px; background: var(--ms-img); }
.s-friseur { --ms-bg: #f4ede6; --ms-fg: #2b2522; --ms-accent: #2b2522; --ms-font: Georgia, serif; --ms-img: #c9a58c; }
.s-tischler { --ms-bg: #1f2a24; --ms-fg: #efe9de; --ms-accent: #c58b4b; --ms-font: "Figtree", sans-serif; --ms-img: #8a6a46; }
.s-cafe { --ms-bg: #fff8ef; --ms-fg: #5b2d1f; --ms-accent: #d9673c; --ms-font: "Fraunces", serif; --ms-img: #e8b9a0; }
.s-praxis { --ms-bg: #eef5f4; --ms-fg: #12352f; --ms-accent: #1f8a75; --ms-font: "Figtree", sans-serif; --ms-img: #a9d2c8; }
.reviews { margin-top: var(--primitive-spacing-16); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--primitive-spacing-8); }
.review { margin: 0; display: grid; gap: var(--primitive-spacing-4); align-content: start; padding-top: var(--primitive-spacing-6); border-top: 1px solid var(--color-border-strong); }
.review blockquote { margin: 0; font-family: var(--font-heading); font-size: var(--primitive-fontSize-lg); line-height: 1.35; }
.review blockquote::before { content: "„"; }
.review blockquote::after { content: "“"; }
.review .who { margin-top: var(--primitive-spacing-2); }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; gap: var(--primitive-spacing-6); } }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--primitive-spacing-6); position: relative; }
.steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: var(--color-border-strong); }
.steps .line { position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: #1FA855; transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease); }
.steps.in .line { transform: scaleX(1); }
.step { display: grid; gap: var(--primitive-spacing-3); position: relative; align-content: start; }
.step .num { width: 46px; height: 46px; border-radius: 50%; background: var(--color-bg-raised); border: 2px solid var(--color-border-strong); display: grid; place-items: center; font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-text-subtle); margin-bottom: var(--primitive-spacing-3); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.steps.in .step .num { background: #1FA855; border-color: #1FA855; color: #fff; }
.steps.in .step:nth-child(3) .num { transition-delay: .3s; }
.steps.in .step:nth-child(4) .num { transition-delay: .6s; }
.steps.in .step:nth-child(5) .num { transition-delay: .9s; }
.steps.in .step:nth-child(6) .num { transition-delay: 1.2s; }
.step p { color: var(--color-text-muted); font-size: var(--primitive-fontSize-sm); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: var(--primitive-spacing-8); }
  .steps::before, .steps .line { left: 22px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; }
  .steps .line { transform: scaleY(0); transform-origin: top; }
  .steps.in .line { transform: scaleY(1); }
  .step { grid-template-columns: 46px 1fr; column-gap: var(--primitive-spacing-6); }
  .step .num { grid-row: span 2; margin: 0; }
}
.ansatz-grid { --gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); --bar: 35px; --in: 34px; --w: calc((min(100vw - 2 * var(--space-gutter), var(--space-container) - 2 * var(--space-gutter)) - 380px) / 2 - var(--gap)); }
.ansatz-shot { position: relative; margin: 0 auto; width: 380px; }
.ansatz-shot .full-shot { display: block; width: 100%; height: auto; }
.notes { position: absolute; top: var(--bar); bottom: 0; left: 0; right: 0; pointer-events: none; }
.note { position: absolute; top: var(--y); width: min(300px, var(--w)); translate: 0 -0.75em; display: grid; gap: 4px; pointer-events: auto; }
.note.r { left: calc(100% + var(--gap)); }
.note.l { right: calc(100% + var(--gap)); text-align: right; justify-items: end; }
.note h3 { position: relative; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--primitive-fontSize-lg); line-height: 1.25; }
.note p { color: var(--color-text-muted); font-size: var(--primitive-fontSize-sm); line-height: 1.5; text-wrap: pretty; }
.note h3::before, .note h3::after { content: ""; position: absolute; }
.note h3::before { top: 0.62em; height: 1px; width: calc(var(--gap) + var(--in) - 14px); background: var(--color-primary); }
.note h3::after { top: calc(0.62em - 5.5px); width: 11px; height: 11px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 3px #fff, 0 2px 6px 3px rgba(15, 35, 57, 0.25); }
.note.r h3::before { right: calc(100% + 14px); transform-origin: left; }
.note.r h3::after { right: calc(100% + var(--gap) + var(--in) - 5.5px); }
.note.l h3::before { left: calc(100% + 14px); transform-origin: right; }
.note.l h3::after { left: calc(100% + var(--gap) + var(--in) - 5.5px); }
@media (max-width: 1000px) {
  .ansatz-shot { width: 100%; }
  .ansatz-shot .frame { max-height: 760px; position: relative; }
  .ansatz-shot .frame::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, var(--color-bg-sunken)); }
  .notes { position: static; margin-top: var(--primitive-spacing-8); display: grid; gap: var(--primitive-spacing-6); }
  .note, .note.l, .note.r { position: static; width: auto; translate: none; padding-left: 22px; text-align: left; justify-items: start; }
  .note h3::before { display: none; }
  .note.l h3::after, .note.r h3::after { left: -22px; right: auto; top: 0.45em; width: 9px; height: 9px; box-shadow: none; }
}
.why-demo { display: grid; gap: var(--primitive-spacing-3); padding: 22px 24px; background: var(--color-bg-raised); border-radius: var(--primitive-radius-lg); box-shadow: 0 1px 2px rgba(15, 35, 57, 0.05), 0 16px 36px -26px rgba(15, 35, 57, 0.3); }
.why-demo h3 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--primitive-fontSize-xl); line-height: 1.2; }
.why-demo p { color: var(--color-text-muted); font-size: var(--primitive-fontSize-sm); line-height: 1.55; max-width: 60ch; }
.demo-links { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--color-border-strong); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.demo-cta { display: grid; gap: var(--primitive-spacing-4); justify-items: start; }
@media (max-width: 900px) { .demo-links { grid-template-columns: 1fr; } }
.demo-cta > p { font-family: var(--font-heading); font-size: var(--primitive-fontSize-xl); line-height: 1.3; }
.demo-cta > div { display: flex; flex-wrap: wrap; gap: var(--primitive-spacing-3); }
.faq .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--primitive-spacing-16); align-items: start; }
.faq-side { position: sticky; top: 104px; display: grid; gap: var(--primitive-spacing-6); }
.faq-list details { border-top: 1px solid var(--faq-border); padding: var(--faq-padding-y) 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--faq-border); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--primitive-fontSize-xl); line-height: 1.25; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font-family: var(--font-body); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--color-text-brand); transition: transform var(--primitive-duration-normal) var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
:root { interpolate-size: allow-keywords; }
.faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0.35s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }
.faq-list details p { margin-top: var(--primitive-spacing-4); color: var(--color-text-muted); max-width: var(--space-measure); }
@media (max-width: 900px) { .faq .wrap { grid-template-columns: 1fr; gap: var(--primitive-spacing-8); } .faq-side { position: static; } }
.final .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--primitive-spacing-16); align-items: center; }
.final-copy { display: grid; gap: var(--primitive-spacing-6); }
.final-copy .h2 { font-size: var(--primitive-fontSize-4xl); line-height: 1.02; }
.final-copy p { color: var(--color-text-inverse-muted); font-size: var(--primitive-fontSize-lg); max-width: 40ch; }
.final-copy small { color: var(--color-text-inverse-muted); font-size: var(--primitive-fontSize-sm); }
.final-ctas { display: flex; flex-wrap: wrap; gap: var(--primitive-spacing-3); }
.cform { background: var(--color-bg-raised); color: var(--color-text); border-radius: var(--primitive-radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.cform .field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cform .field.full { grid-column: 1 / -1; }
.cform label { font-size: var(--primitive-fontSize-sm); font-weight: 600; color: var(--color-text); }
.cform label small { font-weight: 400; color: var(--color-text-subtle); font-size: inherit; }
.cform .input { width: 100%; font: inherit; font-size: 1rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--primitive-radius-md); padding: 13px 14px; transition: border-color var(--primitive-duration-fast), box-shadow var(--primitive-duration-fast); caret-color: var(--color-primary); }
.cform .input:hover { border-color: #BDB9AE; }
.cform .input:focus { outline: none; border-color: var(--color-primary); background: var(--color-bg-raised); box-shadow: 0 0 0 3px rgba(27,58,92,.14); }
.cform .input:user-invalid { border-color: var(--color-negative); }
.cform .field-err { display: none; font-size: var(--primitive-fontSize-sm); color: var(--color-negative); }
.cform .input:user-invalid + .field-err { display: block; }
.cform textarea.input { min-height: 132px; resize: vertical; }
.cform .btn { grid-column: 1 / -1; justify-content: center; min-height: 56px; }
.cform .btn[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 960px) { .final .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cform { grid-template-columns: minmax(0, 1fr); } }
.site-footer { background: var(--color-bg-inverse-deep); color: var(--color-text-inverse-muted); padding: var(--primitive-spacing-16) 0 var(--primitive-spacing-8); font-size: var(--primitive-fontSize-sm); border-top: 1px solid var(--color-border-inverse); }
.site-footer .cols { display: grid; grid-template-columns: 1fr auto auto; gap: var(--primitive-spacing-8) clamp(3rem, 2rem + 4vw, 6rem); }
.site-footer .cols > :not(:first-child) { text-align: right; }
.site-footer .logo { color: #fff; font-size: 1.8rem; }
.site-footer h4 { margin: 0 0 var(--primitive-spacing-3); color: #fff; font-size: var(--primitive-fontSize-sm); font-weight: 600; }
.site-footer a:not(.logo) { color: var(--color-text-inverse-muted); text-decoration: none; display: block; padding: 3px 0; }
.site-footer a:not(.logo):hover { color: #fff; }
.site-footer .bottom { margin-top: var(--primitive-spacing-12); padding-top: var(--primitive-spacing-6); border-top: 1px solid var(--color-border-inverse); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: var(--primitive-fontSize-xs); }
@media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr 1fr; gap: var(--primitive-spacing-8) var(--primitive-spacing-6); } .site-footer .cols > :first-child { grid-column: 1 / -1; } .site-footer .cols > :not(:first-child) { text-align: left; } .site-footer .bottom { flex-direction: column; } }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--primitive-duration-reveal) var(--ease), transform var(--primitive-duration-reveal) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .chip, .dot, .logos-track, .caret { animation: none !important; }
  .faq-list details::details-content { transition: none; }
}
.legal { padding: var(--primitive-spacing-16) 0 var(--primitive-spacing-24, 6rem); }
.legal-wrap { max-width: calc(720px + 2 * var(--space-gutter)); }
.legal h1 { margin-bottom: var(--primitive-spacing-8); }
.legal h2 { font-family: var(--font-heading); font-size: var(--primitive-fontSize-xl); font-weight: 500; line-height: 1.25; color: var(--color-text); margin: 0 0 var(--primitive-spacing-3); }
.legal h3 { font-family: var(--font-heading); font-size: var(--primitive-fontSize-lg); font-weight: 500; line-height: 1.3; color: var(--color-text); margin: var(--primitive-spacing-8) 0 var(--primitive-spacing-3); }
.legal p { color: var(--color-text-muted); line-height: 1.7; margin: 0 0 var(--primitive-spacing-3); overflow-wrap: anywhere; }
.legal strong { color: var(--color-text); font-weight: 600; }
.legal a { color: var(--color-text-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.legal hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--primitive-spacing-8) 0; }
.legal .legal-meta { color: var(--color-text-subtle); font-size: var(--primitive-fontSize-sm); }
.legal h1 + .legal-meta { margin-top: calc(-1 * var(--primitive-spacing-6)); margin-bottom: var(--primitive-spacing-6); }
.legal .section-label { font-family: var(--font-heading); font-size: var(--primitive-fontSize-2xl); line-height: 1.2; color: var(--color-text); margin: var(--primitive-spacing-12) 0 0; padding-top: var(--primitive-spacing-8); border-top: 1px solid var(--color-border); }
.legal .pdf-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--color-border-strong); border-radius: var(--button-radius); text-decoration: none; font-weight: 600; font-size: var(--primitive-fontSize-sm); }
.legal .pdf-link:hover { background: var(--color-bg-sunken); }
.legal .version-history { margin-top: var(--primitive-spacing-12) !important; font-size: var(--primitive-fontSize-sm); }
@media (max-width: 560px) { .legal h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); hyphens: auto; } }
.notfound { min-height: 46vh; display: grid; align-content: center; justify-items: start; gap: var(--primitive-spacing-4); }
.notfound .label { margin: 0; }
.notfound h1 { margin: 0; }
.notfound .btn { margin-top: var(--primitive-spacing-4); text-decoration: none; color: var(--button-fg); }