/* SellWell Studio · sellwell.studio */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-Italic-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-Italic-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
:root, [data-theme="deep"] {
--surface: #002020; --surface-raised: #072d2c; --surface-sunken: #001717;
--line: #1d4746; --line-strong: #4f807b;
--ink: #ffffff; --ink-muted: #a8c4bf; --ink-faint: #7f9e99;
--sun: #fbbc00; --on-sun: #002020; --sun-ink: #fbbc00; --sun-soft: #2a3a14;
--lagoon: #0f5c57; --on-lagoon: #ffffff;
--mint: #5ee6c0; --mint-soft: #0c3b33; --flare: #ff8a66; --flare-soft: #3d1d14;
--focus-ring: #fbbc00; --link: #fbbc00;
--shadow-pop: 6px 6px 0 0 #fbbc00;
--shadow-lift: 0 1px 0 0 #1d4746, 0 12px 32px -12px #000000;
}
[data-theme="paper"] {
--surface: #f6f3ea; --surface-raised: #ffffff; --surface-sunken: #ece8da;
--line: #dcd6c4; --line-strong: #8f8a77;
--ink: #002020; --ink-muted: #46605c; --ink-faint: #566865;
--sun-ink: #8a5a00; --sun-soft: #fff0c2;
--mint: #0a6e53; --mint-soft: #d9f5ec; --flare: #b23c0b; --flare-soft: #fde3d8;
--focus-ring: #002020; --link: #8a5a00;
--shadow-pop: 6px 6px 0 0 #002020;
--shadow-lift: 0 1px 0 0 #dcd6c4, 0 12px 32px -16px #00202040;
}
:root {
--font-display: Archivo, "Arial Black", system-ui, sans-serif;
--font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px;
--radius-xs: 2px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
--slant-angle: -10deg; --duration-quick: 120ms; --duration-type: 45ms;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.site { background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.site [data-theme] { background: var(--surface); color: var(--ink); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-6); }
.sec { padding: var(--space-10) 0 0; }
.h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.2vw, 72px); line-height: .95; letter-spacing: -0.035em; text-wrap: balance; max-width: 15ch; }
.lead { margin: 0; font-size: 21px; line-height: 1.45; color: var(--ink-muted); max-width: 34em; text-wrap: pretty; }
.sec-head { display: grid; gap: var(--space-5); margin-bottom: var(--space-8); }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.sw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sw-icon { flex: none; display: block; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 22px; border-radius: var(--radius-sm); border: 2px solid transparent; font-family: var(--font-sans); font-size: 16px; font-weight: 650; line-height: 1; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--duration-quick) ease-out, box-shadow var(--duration-quick) ease-out, background-color var(--duration-quick), border-color var(--duration-quick); }
.sw-btn-lg { height: 56px; padding: 0 28px; font-size: 17px; }
.sw-btn-block { display: flex; width: 100%; box-sizing: border-box; }
.sw-btn-primary { background: var(--sun); color: var(--on-sun); }
.sw-btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--ink); }
.sw-btn-primary:active { transform: translate(0, 0); box-shadow: 0 0 0 0 var(--ink); }
.sw-btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.sw-btn-secondary:hover { border-color: var(--ink); }
.sw-btn-ghost { background: transparent; color: var(--ink); padding: 0 4px; height: 40px; }
.sw-btn-ghost:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--sun); }
.sw-btn-ghost:hover .sw-icon { transform: translateX(3px); }
.sw-btn-ghost .sw-icon { transition: transform var(--duration-quick) ease-out; }
.sw-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.sw-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap; background: var(--surface-sunken); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }
.sw-tag-sun { background: var(--sun-soft); color: var(--sun-ink); box-shadow: none; }
.sw-tag-mint { background: var(--mint-soft); color: var(--mint); box-shadow: none; }
.sw-tag-flare { background: var(--flare-soft); color: var(--flare); box-shadow: none; }
.sw-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sw-hl { position: relative; isolation: isolate; white-space: nowrap; }
.sw-hl::before { content: ''; position: absolute; z-index: -1; transform: skewX(var(--slant-angle)); border-radius: var(--radius-xs); background: var(--sun); }
.sw-hl-marker { color: var(--on-sun); padding: 0 .14em; margin: 0 .04em; }
.sw-hl-marker::before { inset: .1em 0 .02em; }
.sw-hl-underline::before { left: -.04em; right: -.04em; bottom: .02em; height: .16em; }
.sw-hl-slant { font-style: italic; }
.sw-sh { display: grid; gap: var(--space-4); max-width: 760px; }
.sw-sh-center { margin: 0 auto; text-align: center; justify-items: center; }
.sw-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; color: var(--sun-ink); }
.sw-eyebrow-bar { width: 8px; height: 14px; background: var(--sun); border-radius: 1px; transform: skewX(var(--slant-angle)); }
.sw-sh-title { margin: 0; font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.sw-sh-title-lg { font-size: 64px; line-height: .95; letter-spacing: -0.03em; }
.sw-sh-lead { margin: 0; font-size: 21px; line-height: 1.45; color: var(--ink-muted); max-width: 60ch; text-wrap: pretty; }
@media (max-width: 720px) { .sw-sh-title { font-size: 36px; } .sw-sh-title-lg { font-size: 44px; } .sw-sh-lead { font-size: 18px; } }
.sw-prompt { display: grid; gap: var(--space-3); max-width: 620px; }
.sw-prompt-bar { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: 8px 8px 8px 18px; box-sizing: border-box; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 1.5; }
.sw-prompt-float .sw-prompt-bar { box-shadow: var(--shadow-lift); }
.sw-prompt-chev { color: var(--sun-ink); font-weight: 700; font-size: 20px; line-height: 1; }
.sw-prompt-text { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.sw-prompt-ph { color: var(--ink-faint); }
.sw-caret { display: inline-block; width: .55em; height: 1.15em; margin-left: 2px; vertical-align: -0.22em; background: var(--sun); transform: skewX(var(--slant-angle)); border-radius: 1px; }
.sw-caret-blink { animation: sw-blink 1s steps(1) infinite; }
@keyframes sw-blink { 50% { opacity: 0; } }
.sw-prompt-send { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); background: var(--sun); color: var(--on-sun); }
.sw-prompt-result { display: flex; align-items: center; gap: var(--space-3); min-height: 24px; padding-left: 2px; font-size: 15px; color: var(--ink-muted); }
.sw-prompt-done { color: var(--ink); font-weight: 500; }
.sw-prompt-working { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
.sw-dots { display: inline-flex; gap: 4px; }
.sw-dots i { width: 6px; height: 10px; background: var(--sun); transform: skewX(var(--slant-angle)); animation: sw-dot 0.9s ease-in-out infinite; }
.sw-dots i:nth-child(2) { animation-delay: .15s; } .sw-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sw-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sw-caret-blink, .sw-dots i { animation: none; } }
.sw-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color var(--duration-quick); }
.sw-card:hover { border-color: var(--line-strong); }
.sw-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-2); }
.sw-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--sun-soft); color: var(--sun-ink); }
.sw-card-problem .sw-card-icon { background: var(--flare-soft); color: var(--flare); }
.sw-card-solution .sw-card-icon { background: var(--mint-soft); color: var(--mint); }
.sw-card-index { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink-faint); letter-spacing: .06em; }
.sw-card-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.sw-card-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.sw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--sw-steps, 4), minmax(0, 1fr)); gap: var(--space-5); counter-reset: none; }
.sw-step { position: relative; display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-5); border-top: 2px solid var(--line); }
.sw-step::before { content: ''; position: absolute; top: -2px; left: 0; width: 48px; height: 2px; background: var(--sun); }
.sw-step-num { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 56px; line-height: .9; letter-spacing: -0.04em; color: var(--sun-ink); }
.sw-step-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.sw-step-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.sw-step-prompt { margin: 0; padding: 10px 12px; background: var(--surface-sunken); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; line-height: 1.45; color: var(--ink); }
.sw-step-prompt span { color: var(--sun-ink); font-weight: 700; }
@media (max-width: 860px) { .sw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sw-steps { grid-template-columns: 1fr; } }
.sw-pattern { display: block; max-width: 100%; height: auto; }
.sw-pattern-sun .sw-pat-bar { fill: var(--sun); } .sw-pattern-sun .sw-pat-accent { fill: var(--ink); }
.sw-pattern-lagoon .sw-pat-bar { fill: var(--lagoon); } .sw-pattern-lagoon .sw-pat-accent { fill: var(--sun); }
.sw-pattern-deep .sw-pat-bar { fill: var(--on-sun); } .sw-pattern-deep .sw-pat-accent { fill: var(--lagoon); }
.sw-pattern-line .sw-pat-bar { fill: var(--line); } .sw-pattern-line .sw-pat-accent { fill: var(--sun); }
.sw-work { display: grid; gap: var(--space-4); color: inherit; text-decoration: none; }
.sw-work-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line); }
.sw-work-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease-out; }
.sw-work:hover .sw-work-img { transform: scale(1.03); }
.sw-work-ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--space-5); }
.sw-work-ph-lagoon { background: var(--lagoon); color: var(--on-lagoon); }
.sw-work-ph-sun { background: var(--sun); color: var(--on-sun); }
.sw-work-ph-deep { background: var(--on-sun); color: var(--on-lagoon); }
.sw-work-ph-pat { position: absolute; top: var(--space-5); right: var(--space-5); width: 46%; }
.sw-work-ph-name { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: .95; letter-spacing: -0.03em; }
.sw-work-meta { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; }
.sw-work-name { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.sw-work-line { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.sw-work-arrow { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--ink); transition: background-color var(--duration-quick), color var(--duration-quick); }
.sw-work:hover .sw-work-arrow { background: var(--sun); color: var(--on-sun); border-color: var(--sun); }
.sw-work-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sw-cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.sw-cmp { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; min-width: 560px; }
.sw-cmp th, .sw-cmp td { padding: 14px var(--space-5); text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sw-cmp tbody tr:last-child th, .sw-cmp tbody tr:last-child td { border-bottom: 0; }
.sw-cmp thead th { background: var(--surface-sunken); font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); }
.sw-cmp tbody th { font-weight: 500; color: var(--ink-muted); }
.sw-cmp td { color: var(--ink); }
.sw-cmp thead th.sw-cmp-hi { background: var(--sun); color: var(--on-sun); }
.sw-cmp td.sw-cmp-hi { background: var(--sun-soft); font-weight: 600; }
.sw-cmp-yes, .sw-cmp-no { display: inline-flex; }
.sw-cmp-yes { color: var(--mint); }
.sw-cmp-no { color: var(--flare); }
.sw-price { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sw-price-featured { border: 2px solid var(--sun); box-shadow: var(--shadow-pop); }
.sw-price-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sw-price-name { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.sw-price-blurb { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.sw-price-amt { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.sw-price-num { font-family: var(--font-display); font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.sw-price-per { font-size: 15px; color: var(--ink-faint); }
.sw-price-list { list-style: none; margin: 0 0 var(--space-2); padding: var(--space-4) 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 15px; line-height: 1.45; flex: 1; align-content: start; }
.sw-price-list li { display: flex; gap: 10px; align-items: flex-start; }
.sw-price-check { color: var(--mint); padding-top: 1px; }
.sw-price-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-faint); text-align: center; }
.sw-faq { border-top: 1px solid var(--line); }
.sw-faq-item { border-bottom: 1px solid var(--line); }
.sw-faq-q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 22px 0; cursor: pointer; font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.sw-faq-q::-webkit-details-marker { display: none; }
.sw-faq-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--ink); transition: background-color var(--duration-quick); }
.sw-faq-minus { display: none; }
.sw-faq-item[open] .sw-faq-plus { display: none; }
.sw-faq-item[open] .sw-faq-minus { display: block; }
.sw-faq-item[open] .sw-faq-icon { background: var(--sun); color: var(--on-sun); border-color: var(--sun); }
.sw-faq-q:hover .sw-faq-icon { border-color: var(--ink); }
.sw-faq-a { padding: 0 56px 24px 0; font-size: 17px; line-height: 1.6; color: var(--ink-muted); max-width: 68ch; }
body { margin: 0; background: #002020; }
a { color: #fbbc00; } a:hover { color: #ffffff; }
sw-if { display: contents; }
sw-if[hidden] { display: none; }
img, video { max-width: 100%; }
.hm { background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.hm-pad { padding-left: 48px; padding-right: 48px; }
.hm-in { max-width: 1344px; margin: 0 auto; }
.hm-h2 { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: clamp(44px, 6.6vw, 100px); line-height: .88; letter-spacing: -0.05em; text-wrap: balance; }
.hm-h2 .indent { display: block; padding-left: 8vw; }
.hm-lead { margin: 0; font-size: 20px; line-height: 1.5; color: var(--ink-muted); max-width: 30em; text-wrap: pretty; }
.hm-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 72px; }
.magnet { display: inline-block; transition: transform 220ms cubic-bezier(.2,.8,.2,1); will-change: transform; }
.hm-nav { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.hm-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
.hm-nav img { height: 30px; width: auto; display: block; }
.hm-links { display: flex; gap: 32px; }
.hm-links a { color: var(--ink-muted); text-decoration: none; font-size: 15px; font-weight: 500; position: relative; }
.hm-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--sun); transform: skewX(-10deg) scaleX(0); transform-origin: left; transition: transform 200ms ease-out; }
.hm-links a:hover { color: var(--ink); }
.hm-links a:hover::after { transform: skewX(-10deg) scaleX(1); }
.hm-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--sun); transform-origin: left; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
.hm-progress { animation: hm-grow linear both; animation-timeline: scroll(root); }
@keyframes hm-grow { to { transform: scaleX(1); } }
}
.hm-hero { padding-top: 48px; padding-bottom: 120px; }
.hm-h1 { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: 122%; font-size: clamp(60px, 10.6vw, 156px); line-height: .84; letter-spacing: -0.055em; }
.hm-h1 .l2 { display: block; padding-left: 9vw; margin-top: .06em; }
.hm-hero-row { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 56px; }
.hm-hero-side p { margin: 0 0 28px; font-size: 20px; line-height: 1.5; color: var(--ink-muted); }
.hm-who { margin-top: 32px !important; font-size: 15px !important; color: var(--ink-faint) !important; }
.hm-hint { display: flex; align-items: center; gap: 10px; margin-top: 48px; font-size: 14px; color: var(--ink-faint); }
.hm-hint i { display: block; width: 8px; height: 22px; background: var(--sun); transform: skewX(-10deg); animation: hm-hint 1.6s ease-in-out infinite; }
@keyframes hm-hint { 0%,100% { transform: skewX(-10deg) translateY(0); } 50% { transform: skewX(-10deg) translateY(6px); } }
.site-win { background: #ffffff; color: #002020; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line), 18px 18px 0 0 var(--sun); }
.site-bar { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: #ece8da; border-bottom: 1px solid #dcd6c4; font-family: var(--font-mono); font-size: 12px; color: #46605c; }
.site-bar span:first-child { background: #ffffff; padding: 3px 10px; border-radius: 6px; }
.site-banner { background: #fbbc00; color: #002020; text-align: center; font-weight: 650; font-size: 14px; padding: 10px; }
.site-banner.drop { animation: hm-drop 420ms cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes hm-drop { from { clip-path: inset(0 0 100% 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.site-nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; font-size: 13px; color: #46605c; font-weight: 500; }
.site-nav b { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 20px; color: #002020; letter-spacing: -0.02em; }
.site-links { display: flex; gap: 16px; align-items: center; }
.site-new { display: inline-flex; align-items: center; gap: 6px; color: #002020; font-weight: 650; animation: hm-pop 380ms ease-out both; }
.site-new i { font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 6px; border-radius: 999px; background: #d9f5ec; color: #0a6e53; }
@keyframes hm-pop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.site-media { position: relative; margin: 0 22px; height: 250px; border-radius: var(--radius-md); overflow: hidden; background: #ece8da; }
.site-media img, .site-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.site-media img.push { transform-origin: 38% 62%; animation: hm-push 12s ease-in-out infinite alternate; }
@keyframes hm-push { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.site-body { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 20px 22px 24px; }
.site-h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: .95; letter-spacing: -0.03em; max-width: 9em; }
.site-price { margin: 0 0 8px; font-size: 14px; color: #46605c; text-align: right; }
.site-price b { font-family: var(--font-display); font-size: 24px; color: #002020; padding: 0 4px; border-radius: 2px; }
.site-price.flash b { animation: hm-flash 1.4s ease-out both; }
@keyframes hm-flash { 0%, 70% { background: #fbbc00; } 100% { background: transparent; } }
.site-btn { display: block; margin-left: auto; width: max-content; background: #002020; color: #ffffff; padding: 9px 14px; border-radius: 6px; font-weight: 650; font-size: 13px; }
.hm-prompt { position: relative; z-index: 2; margin: -30px 28px 0; }
.hm-prompt .sw-prompt { max-width: none; }
.hm-prompt .sw-prompt-bar { box-shadow: var(--shadow-lift); }
.hm-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 28px 0; }
.hm-try > span { font-size: 14px; color: var(--ink-faint); margin-right: 6px; }
.chip { appearance: none; font: inherit; font-size: 14px; font-weight: 500; min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; transition: border-color 120ms, background-color 120ms, transform 120ms; }
.chip:hover { border-color: var(--ink); transform: translateY(-2px); }
.chip.is-on { background: var(--sun); color: var(--on-sun); border-color: var(--sun); }
.hm-build { position: relative; height: 1600px; view-timeline-name: --build; }
.hm-build-in { position: sticky; top: 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 72px; align-items: center; min-height: 780px; }
.hm-build h2 { margin: 0 0 20px; font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: clamp(40px, 4.6vw, 68px); line-height: .9; letter-spacing: -0.045em; }
.hm-cmds { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 10px; font-family: var(--font-mono); font-size: 15px; }
.hm-cmds li { display: flex; gap: 10px; align-items: center; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--line); }
.hm-cmds b { color: var(--sun-ink); }
.hm-cmds em { margin-left: auto; font-style: normal; font-family: var(--font-sans); font-size: 13px; font-weight: 650; color: var(--mint); }
@supports (animation-timeline: view()) {
.bld { animation: hm-bld linear both; animation-timeline: --build; }
.bld.b1 { animation-range: contain 0% contain 14%; }
.bld.b2 { animation-range: contain 12% contain 28%; }
.bld.b3 { animation-range: contain 26% contain 44%; }
.bld.b4 { animation-range: contain 42% contain 60%; }
.bld.b5 { animation-range: contain 58% contain 76%; }
@keyframes hm-bld { from { opacity: 0; transform: translateY(40px) skewY(3deg); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.cmd { animation: hm-cmd linear both; animation-timeline: --build; }
.cmd.b1 { animation-range: contain 0% contain 14%; }
.cmd.b3 { animation-range: contain 26% contain 44%; }
.cmd.b5 { animation-range: contain 58% contain 76%; }
@keyframes hm-cmd { from { opacity: .2; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
}
.site-win.dn { background: #f4f8fb; color: #12324a; font-family: Nunito, "Instrument Sans", system-ui, sans-serif; }
.dn-banner { background: #12324a; color: #ffffff; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 9px; }
.dn-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; font-size: 14px; }
.dn-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.dn-logo i { width: 22px; height: 22px; border-radius: 50%; background: #1f5fa8; box-shadow: inset 0 0 0 6px #cfe4f5; }
.dn-links { display: flex; gap: 18px; color: #4a6275; font-weight: 600; }
.dn-call { padding: 7px 14px; border-radius: 999px; border: 1.5px solid #1f5fa8; color: #1f5fa8; font-weight: 700; font-size: 13px; }
.dn-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: center; padding: 12px 24px 28px; }
.dn-kicker { margin: 0 0 10px; color: #1f5fa8; font-weight: 700; font-size: 13px; }
.dn-h { margin: 0 0 12px; font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -0.02em; }
.dn-p { margin: 0; color: #4a6275; font-size: 14px; line-height: 1.5; }
.dn-hours { display: grid; gap: 14px; justify-items: start; margin-top: 20px; }
.dn-open { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: #e1eef8; font-size: 13px; font-weight: 700; }
.dn-open i, .dn-float i { width: 8px; height: 8px; border-radius: 50%; background: #2e9d6b; }
.dn-btn { padding: 11px 20px; border-radius: 999px; background: #1f5fa8; color: #ffffff; font-weight: 800; font-size: 14px; }
.dn-photo { position: relative; height: 290px; border-radius: 24px; overflow: hidden; }
.dn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dn-float { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: #ffffff; color: #12324a; font-size: 13px; font-weight: 700; box-shadow: 0 10px 24px -12px #12324a; }
@media (max-width: 680px) {
.dn-hero { grid-template-columns: minmax(0, 1fr); }
.dn-links { display: none; }
.dn-photo { height: 200px; }
}
.hm-old { padding-top: 160px; }
.hm-lines { border-top: 2px solid var(--line); }
.hm-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--line); view-timeline-name: --line; }
.hm-was { position: relative; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.035em; color: var(--ink-muted); width: max-content; max-width: 100%; }
.hm-was::after { content: ""; position: absolute; left: -6px; right: -6px; top: 52%; height: 6px; background: var(--flare); transform: skewY(-2deg); transform-origin: left center; }
.hm-now { margin: 0; display: grid; gap: 4px; }
.hm-now b { display: flex; gap: 12px; align-items: center; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.025em; line-height: 1.1; }
.hm-now b svg { flex: none; color: var(--mint); }
.hm-now span { font-size: 17px; color: var(--ink-muted); padding-left: 36px; }
.hm-old-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 48px; }
.hm-old-foot h3 { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: clamp(32px, 3.8vw, 56px); line-height: .95; letter-spacing: -0.04em; }
@supports (animation-timeline: view()) {
.hm-was::after { animation: hm-strike linear both; animation-timeline: --line; animation-range: entry 80% cover 45%; }
@keyframes hm-strike { from { transform: skewY(-2deg) scaleX(0); } to { transform: skewY(-2deg) scaleX(1); } }
.hm-now { animation: hm-now linear both; animation-timeline: --line; animation-range: cover 30% cover 55%; }
@keyframes hm-now { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
}
.hm-svc { padding-top: 180px; }
.hm-svc-list { border-top: 2px solid var(--line); }
.hm-svc-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--line); isolation: isolate; }
.hm-svc-row::before { content: ""; position: absolute; z-index: -1; inset: 10px -24px; background: var(--sun); border-radius: var(--radius-sm); transform: skewX(-10deg) scaleX(0); transform-origin: left; transition: transform 380ms cubic-bezier(.2,.8,.2,1); }
.hm-svc-row:hover::before { transform: skewX(-10deg) scaleX(1); }
.hm-svc-row:hover, .hm-svc-row:hover p, .hm-svc-row:hover .hm-svc-ic { color: var(--on-sun); }
.hm-svc-ic { color: var(--sun-ink); transition: transform 380ms cubic-bezier(.2,.8,.2,1); }
.hm-svc-row:hover .hm-svc-ic { transform: rotate(-10deg) scale(1.1); }
.hm-svc-row h3 { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: clamp(32px, 4.4vw, 64px); line-height: .95; letter-spacing: -0.045em; transition: transform 380ms cubic-bezier(.2,.8,.2,1); }
.hm-svc-row:hover h3 { transform: translateX(12px); }
.hm-svc-row p { margin: 0; font-size: 18px; color: var(--ink-muted); transition: color 200ms; }
.hm-svc-more { margin: 40px 0 0; font-size: 18px; color: var(--ink-muted); }
.hm-svc-more a { color: var(--link); font-weight: 650; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hm-demos { position: relative; height: 1500px; margin-top: 160px; view-timeline-name: --fan; }
.hm-demos-in { position: sticky; top: 80px; padding-top: 40px; }
.hm-fan { position: relative; height: 560px; }
.hm-card { position: absolute; top: 0; width: calc((100% - 64px) / 3); display: flex; flex-direction: column; gap: 16px; }
.hm-card-win { background: #ffffff; color: #002020; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px #dcd6c4; transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms; }
.hm-card:hover .hm-card-win { transform: translate(-4px, -4px) rotate(-1deg); box-shadow: 0 0 0 1px #dcd6c4, 10px 10px 0 0 var(--sun); }
.hm-card-win img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hm-card h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.hm-card p { margin: 0; font-size: 16px; color: var(--ink-muted); }
.hm-card-tags { display: flex; gap: 8px; }
.hm-c1 { left: 0; } .hm-c2 { left: calc((100% - 64px) / 3 + 32px); } .hm-c3 { left: calc(2 * (100% - 64px) / 3 + 64px); }
.hm-demo-note { margin: 32px 0 0; font-size: 15px; color: var(--ink-faint); }
@supports (animation-timeline: view()) {
.hm-c1, .hm-c2, .hm-c3 { animation: hm-fan linear both; animation-timeline: --fan; animation-range: contain 0% contain 40%; }
.hm-c1 { --fx: calc(100% + 32px); --fr: -9deg; --fy: 30px; }
.hm-c2 { --fx: 0px; --fr: 0deg; --fy: 0px; }
.hm-c3 { --fx: calc(-100% - 32px); --fr: 9deg; --fy: 30px; }
@keyframes hm-fan { from { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.88); } to { transform: none; } }
@media (min-width: 1001px) {
.hm-card > :not(.hm-card-win) { animation: hm-meta linear both; animation-timeline: --fan; animation-range: contain 30% contain 42%; }
@keyframes hm-meta { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
}
.hm-how { padding-top: 120px; }
.hm-cmp { margin-top: 180px; padding-top: 140px; padding-bottom: 140px; }
.hm-cmp-note { margin: 28px 0 0; font-size: 17px; color: var(--ink-muted); max-width: 40em; }
.hm-price { padding-top: 160px; }
.hm-slab { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; padding: 72px; background: var(--sun); color: var(--on-sun); border-radius: var(--radius-lg); view-timeline-name: --slab; }
.hm-slab-tag { display: inline-block; margin-bottom: 24px; padding: 6px 12px; border-radius: 999px; background: var(--on-sun); color: var(--sun); font-weight: 650; font-size: 13px; }
.hm-big { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(140px, 19vw, 280px); line-height: .76; letter-spacing: -0.065em; transform-origin: left bottom; }
.hm-unit { margin: 16px 0 24px; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 40px; letter-spacing: -0.02em; }
.hm-slab-line { margin: 0; font-size: 18px; max-width: 24em; }
.hm-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; font-size: 18px; font-weight: 500; }
.hm-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 32, 32, .22); }
.hm-list svg { margin-top: 4px; }
.hm-fine { margin: 16px 0 0; font-size: 15px; }
.hm-slab-pat { position: absolute; right: 36px; top: 36px; width: 150px; }
.sw-btn.btn-ink, .hm-slab .sw-btn { background: #002020; color: #ffffff; border-color: #002020; }
.sw-btn.btn-ink:hover, .hm-slab .sw-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #ffffff; }
.hm-slab :where(a, button):focus-visible { outline-color: #002020; }
@supports (animation-timeline: view()) {
.hm-big { animation: hm-slam linear both; animation-timeline: --slab; animation-range: entry 30% cover 40%; }
@keyframes hm-slam { from { transform: scale(1.5) rotate(-4deg); opacity: 0; letter-spacing: .02em; } 70% { opacity: 1; } to { transform: none; opacity: 1; } }
}
.hm-faq { padding-top: 180px; }
.hm-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.hm-faq-side { position: sticky; top: 120px; display: grid; gap: 24px; }
.hm-final { padding-top: 200px; padding-bottom: 120px; }
.hm-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; align-items: end; }
.hm-final h2 { margin: 0 0 24px; font-family: var(--font-display); font-weight: 900; font-stretch: 122%; font-size: clamp(30px, 6vw, 88px); line-height: .9; letter-spacing: -0.055em; }
.hm-final p { margin: 0 0 32px; font-size: 20px; color: var(--ink-muted); }
.hm-foot { border-top: 1px solid var(--line); padding-top: 56px; overflow: hidden; }
.hm-foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: start; }
.hm-foot img { height: 36px; width: auto; display: block; margin-bottom: 20px; }
.hm-foot-tag { margin: 0; font-size: 15px; color: var(--ink-muted); }
.hm-foot-links { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 15px; }
.hm-foot-links a { color: var(--ink-muted); text-decoration: none; }
.hm-foot-links a:hover { color: var(--ink); text-decoration: underline; }
.hm-legal { margin: 40px 0 0; font-size: 13px; color: var(--ink-faint); }
.hm-giant { margin: 32px 0 -0.16em; padding: 0 24px; font-family: var(--font-display); font-weight: 900; font-stretch: 100%; font-size: 6.8vw; line-height: .9; letter-spacing: -0.055em; color: var(--surface-raised); white-space: nowrap; user-select: none; }
@media (max-width: 680px) { .hm-giant { padding: 0 16px; font-size: 6.4vw; } }
@media (max-width: 1000px) {
.hm-pad { padding-left: 24px; padding-right: 24px; }
.hm-links { display: none; }
.hm-hero-row, .hm-head, .hm-build-in, .hm-faq-grid, .hm-final-grid, .hm-slab, .hm-old-foot { grid-template-columns: minmax(0, 1fr); }
.hm-head { gap: 24px; margin-bottom: 48px; }
.hm-build { height: auto; } .hm-build-in { position: static; min-height: 0; padding: 80px 0; gap: 48px; }
.hm-demos { height: auto; } .hm-demos-in { position: static; }
.hm-fan { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.hm-card { position: static; width: auto; }
.hm-faq-side { position: static; }
.hm-svc-row { grid-template-columns: 48px minmax(0, 1fr); }
.hm-svc-row p { grid-column: 2; }
.hm-slab { padding: 48px; }
.hm-slab-pat { display: none; }
}
@media (max-width: 680px) {
.hm-pad { padding-left: 16px; padding-right: 16px; }
.hm-nav-in { height: 68px; }
.hm-nav img { height: 24px; }
.hm-h1 .l2, .hm-h2 .indent { padding-left: 0; }
.hm-hero-row { margin-top: 40px; gap: 48px; }
.hm-prompt { margin: -22px 10px 0; }
.hm-prompt .sw-prompt-bar { font-size: 14px; padding-left: 12px; }
.hm-try { margin: 20px 0 0; }
.site-win { box-shadow: 0 0 0 1px var(--line), 10px 10px 0 0 var(--sun); }
.site-media { height: 180px; }
.site-body { flex-direction: column; align-items: start; }
.site-price, .site-btn { text-align: left; margin-left: 0; }
.site-links span:not(.site-new) { display: none; }
.hm-line { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hm-fan { grid-template-columns: minmax(0, 1fr); }
.hm-old, .hm-svc, .hm-price, .hm-faq { padding-top: 112px; }
.hm-final { padding-top: 120px; }
.hm-slab { padding: 32px; gap: 32px; }
.hm-foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.bld, .cmd, .hm-was::after, .hm-now, .hm-c1, .hm-c2, .hm-c3, .hm-big, .hm-progress { animation: none !important; }
.hm-progress { transform: scaleX(0); }
.hm-hint i, .site-banner.drop, .site-new, .site-price.flash b, .site-media img.push { animation: none; }
.magnet, .chip, .hm-svc-row::before, .hm-svc-row h3, .hm-svc-ic, .hm-card-win { transition: none; }
}
.work-ph { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: flex-end; padding: 24px; box-sizing: border-box; overflow: hidden; }
.work-ph::before { content: ""; position: absolute; top: 24px; right: 24px; width: 46%; height: 42%; background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 28px); opacity: .9; transform: skewX(-10deg); -webkit-mask-image: linear-gradient(180deg, #000 0 45%, transparent 45% 55%, #000 55%); mask-image: linear-gradient(180deg, #000 0 45%, transparent 45% 55%, #000 55%); }
.work-ph-lagoon { background: #0f5c57; color: #fbbc00; }
.work-ph-sun { background: #fbbc00; color: #002020; }
.work-ph-deep { background: #001717; color: #fbbc00; box-shadow: inset 0 0 0 1px #1d4746; }
.work-ph-name { position: relative; font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: clamp(28px, 3vw, 44px); line-height: .95; letter-spacing: -0.04em; color: #ffffff; }
.work-ph-sun .work-ph-name { color: #002020; }
.hm-card-win img.work-shot { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: left top; background: #001717; }
.hm .sw-btn { box-sizing: border-box; }
.hm-nav-cta { display: flex; align-items: center; gap: 8px; }
.hm-burger { display: none; appearance: none; width: 48px; height: 48px; flex: none; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; position: relative; }
.hm-burger span { position: absolute; left: 13px; width: 20px; height: 3px; background: currentColor; border-radius: 1px; transition: transform 220ms cubic-bezier(.2,.8,.2,1), top 220ms cubic-bezier(.2,.8,.2,1); }
.hm-burger span:first-child { top: 18px; transform: skewX(-10deg); }
.hm-burger span:last-child { top: 26px; left: 17px; width: 16px; transform: skewX(-10deg); }
.hm-burger[aria-expanded="true"] span:first-child { top: 22px; left: 13px; width: 22px; transform: rotate(45deg); }
.hm-burger[aria-expanded="true"] span:last-child { top: 22px; left: 13px; width: 22px; transform: rotate(-45deg); }
.hm-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 29; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 16px 28px; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6); animation: hm-menu-in 240ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes hm-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.hm-menu-links { display: grid; margin: 0 0 24px; }
.hm-menu-links a { display: flex; align-items: baseline; gap: 14px; min-height: 64px; padding: 14px 0; box-sizing: border-box; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: 34px; line-height: 1; letter-spacing: -0.04em; }
.hm-menu-links a i { font-family: var(--font-mono); font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--sun-ink); }
.hm-menu-links a:hover { color: var(--sun); }
.hm-menu .sw-btn { width: 100%; }
.hm-menu-mail { margin: 16px 0 0; font-size: 15px; text-align: center; }
.hm-menu-mail a { color: var(--ink-muted); }
@media (max-width: 1000px) {
.hm-burger { display: block; }
@supports (animation-timeline: view()) {
.hm-build .bld, .hm-build .cmd { animation-timeline: view(); animation-range: entry 0% cover 30%; }
.hm-demos .hm-card { animation: hm-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
@keyframes hm-rise { from { opacity: 0; transform: translateY(48px) rotate(-2deg); } to { opacity: 1; transform: none; } }
}
.hm-demos { margin-top: 120px; }
}
@media (min-width: 1001px) { .hm-menu { display: none; } }
@media (max-width: 680px) {
.hm-nav .sw-btn { height: 48px; padding: 0 16px; font-size: 15px; }
.hm-nav-in { gap: 12px; }
.hm-h1 { font-size: clamp(40px, 12.2vw, 50px); line-height: .88; }
.hm-hero { padding-top: 28px; }
.hm-hero-side p { font-size: 17px; margin-bottom: 24px; }
.hm-hero-side .magnet, .hm-final .magnet { display: block; }
.hm-hero-side .sw-btn, .hm-final .sw-btn { width: 100%; }
.hm-hint { display: none; }
.hm-try > span { width: 100%; }
.hm-h2 { font-size: clamp(34px, 10.4vw, 42px) !important; line-height: .94; text-align: left !important; }
.hm-h2 span { white-space: normal !important; }
.hm-h2 .indent { padding-left: 0; }
#work-title { text-align: center !important; }
#price-title { font-size: clamp(30px, 10vw, 40px) !important; }
#price-title span { white-space: nowrap !important; }
.hm-build h2 { font-size: 36px; }
.hm-final h2 { font-size: clamp(26px, 8.6vw, 34px); }
.hm-lead, .hm-final p { font-size: 17px; }
.hm-head { margin-bottom: 36px; }
.hm-build-in { padding-top: 64px; padding-bottom: 24px; }
.hm-cmds { font-size: 13px; }
.hm-cmds li { padding: 12px 14px; align-items: flex-start; }
.dn-nav { padding: 14px 16px; }
.dn-hero { padding: 8px 16px 20px; }
.dn-h { font-size: 26px; }
.hm-was { font-size: 26px; }
.hm-now b { font-size: 22px; }
.hm-svc-row { gap: 12px 16px; padding: 28px 0; }
.hm-svc-row h3 { font-size: 30px; }
.hm-demos { margin-top: 96px; }
.hm-fan { gap: 48px; }
.hm-card .sw-btn { width: 100%; }
.hm-big { font-size: clamp(96px, 30vw, 132px); }
.hm-slab { padding: 28px 20px; }
.hm-slab .magnet { display: block; }
.hm-slab .sw-btn { width: 100%; height: auto; min-height: 56px; padding: 14px 18px; white-space: normal; text-align: center; line-height: 1.25; }
.hm-final-grid { gap: 40px; }
.hm-foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.hm-foot-links a { min-height: 44px; display: flex; align-items: center; }
.hm-foot-links a[href^="mailto"] { grid-column: 1 / -1; }
.hm-giant { white-space: normal; font-size: 15.5vw; line-height: .86; margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.hm-menu, .hm-demos .hm-card { animation: none !important; }
.hm-burger span { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .hm-card > :not(.hm-card-win) { animation: none !important; } }
@media (max-width: 680px) {
.hm-hero { padding-top: 32px; padding-bottom: 64px; }
.hm-hero-row { margin-top: 32px; gap: 40px; }
.hm-hero-side p { margin-bottom: 20px; }
.hm-who { margin-top: 16px; }
.hm-build-in { padding-top: 24px; padding-bottom: 0; gap: 32px; }
.hm-build h2 { margin-bottom: 16px; }
.hm-cmds { margin-top: 24px; }
.hm-old, .hm-svc, .hm-how, .hm-price, .hm-faq { padding-top: 88px; }
.hm-demos { margin-top: 88px; }
.hm-demos-in { padding-top: 0; }
.hm-cmp { margin-top: 88px; padding-top: 72px; padding-bottom: 72px; }
.hm-final { padding-top: 88px; padding-bottom: 72px; }
.hm-head { margin-bottom: 32px; gap: 16px; }
.hm-line { padding: 24px 0; gap: 12px; }
.hm-old-foot { gap: 16px; padding-top: 32px; }
.hm-svc-more { margin-top: 24px; }
.hm-fan { gap: 40px; }
.hm-cmp-note { margin-top: 20px; font-size: 15px; }
.hm-unit { margin: 8px 0 16px; font-size: 32px; }
.hm-list { margin-bottom: 24px; gap: 10px; font-size: 16px; }
.hm-list li { padding-bottom: 10px; }
.hm-faq-grid { gap: 32px; }
.hm-final-grid { gap: 32px; }
.hm-final h2 { margin-bottom: 16px; }
.hm-final p { margin-bottom: 24px; }
.hm-final-grid > div[aria-hidden] { max-width: 220px; }
.hm-foot { padding-top: 48px; }
.hm-foot-grid { gap: 24px; }
.hm-giant { margin-top: 32px; }
}
.hm-cmp { background: var(--surface); color: var(--ink); }
.sc-wrap { margin-top: 8px; }
.sc { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 16px; line-height: 1.35; }
.sc .sc-c-label { width: 31%; } .sc .sc-c-sw { width: 25%; }
.sc th, .sc td { padding: 22px 24px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.sc thead th { vertical-align: bottom; padding-top: 28px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.sc tbody th { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.sc td { color: var(--ink-muted); }
.sc-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.015em; color: var(--ink); }
.sc-sub { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-faint); }
.sc-val { display: inline-flex; align-items: center; gap: 10px; }
.sc-yes svg { color: var(--mint); } .sc-no svg { color: var(--flare); } .sc-part svg { color: var(--ink-faint); }
.sc-no, .sc-part { color: var(--ink-muted); }
.sc .sc-sw { position: relative; background: var(--sun); color: var(--on-sun); font-weight: 650; border-bottom: 1px solid rgba(0, 32, 32, .16); box-shadow: 8px 0 0 0 #002020; }
.sc thead .sc-sw { border-radius: 18px 18px 0 0; border-bottom: 2px solid rgba(0, 32, 32, .3); padding-top: 24px; }
.sc tfoot .sc-sw { border-radius: 0 0 18px 18px; border-bottom: 0; box-shadow: 8px 0 0 0 #002020, 8px 8px 0 0 #002020; }
.sc-pick { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin-bottom: 14px; border-radius: var(--radius-pill); background: #002020; color: var(--sun); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sc-logo { display: block; width: max-content; max-width: 100%; padding: 10px 14px; border-radius: 10px; background: #002020; box-sizing: border-box; }
.sc-logo img { display: block; height: 26px; width: auto; max-width: 100%; }
.sc-tick { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #002020; color: var(--sun); }
.sc-big { font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: 44px; line-height: .9; letter-spacing: -0.04em; }
.sc tfoot th, .sc tfoot td { border-bottom: 0; padding-top: 26px; padding-bottom: 28px; vertical-align: top; }
.sc-kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.sc-verdict { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.sc tfoot td:not(.sc-sw) .sc-verdict { color: var(--ink-muted); font-weight: 600; }
.sc tbody tr:hover th, .sc tbody tr:hover td:not(.sc-sw) { background: var(--surface-sunken); }
@media (max-width: 1000px) {
.sc th, .sc td { padding: 18px 14px; }
.sc tbody th { font-size: 16px; }
.sc-big { font-size: 34px; }
}
.scm { display: none; }
@media (max-width: 680px) {
.sc { display: none; }
.scm { display: block; }
.scm-sw { position: relative; padding: 20px 20px 22px; border-radius: 18px; background: var(--sun); color: var(--on-sun); box-shadow: 6px 6px 0 0 #002020; }
.scm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 2px solid rgba(0, 32, 32, .3); }
.scm-head .sc-pick { margin: 0; }
.scm-head .sc-logo { padding: 8px 12px; }
.scm-head .sc-logo img { height: 22px; }
.scm-list { list-style: none; margin: 0; padding: 0; }
.scm-list li { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid rgba(0, 32, 32, .16); }
.scm-q { font-size: 14px; line-height: 1.3; color: rgba(0, 32, 32, .78); }
.scm-a { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.scm-a .sc-tick { width: 24px; height: 24px; }
.scm-cost { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 0 !important; }
.scm-cost .sc-big { font-size: 40px; }
.scm-verdict { margin: 4px 0 0; padding-top: 16px; border-top: 2px solid rgba(0, 32, 32, .3); font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; }
.scm-vs { display: flex; align-items: center; gap: 12px; margin: 32px 0 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.scm-vs::before, .scm-vs::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.scm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.scm-rq { grid-column: 1 / -1; margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ink); }
.scm-row .sc-val { gap: 8px; align-items: flex-start; color: var(--ink-muted); }
.scm-row .sc-val svg { flex: none; margin-top: 2px; }
.scm-rhead { padding-top: 4px; border-bottom: 2px solid var(--ink); }
.scm-rhead .sc-name { font-size: 16px; }
.scm-rhead .sc-sub { font-size: 12px; }
.scm-rfoot { border-bottom: 0; padding-top: 14px; }
.scm-rfoot .sc-verdict { font-size: 15px; color: var(--ink-muted); font-weight: 600; }
}
.am-hero { padding-top: 40px; padding-bottom: 40px; }
.am-crumbs { display: flex; gap: 10px; align-items: center; margin-bottom: 40px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
.am-crumbs a { color: var(--ink-muted); text-decoration: none; } .am-crumbs a:hover { color: var(--sun); }
.am-h1 { margin: 0; max-width: 12ch; font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: clamp(48px, 8.2vw, 124px); line-height: .9; letter-spacing: -0.05em; }
.am-hero-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-top: 56px; }
.am-lead { margin: 0; font-size: 22px; line-height: 1.5; color: var(--ink-muted); max-width: 32em; }
.am-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: flex-end; }
.am-def { padding-top: 96px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.am-def-card { position: relative; padding: 40px; border-radius: var(--radius-lg); background: var(--sun); color: var(--on-sun); box-shadow: 8px 8px 0 0 var(--lagoon); }
.am-kicker { margin: 0 0 18px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sun-ink); }
.am-def-card .am-kicker, .am-kicker-ink { color: var(--on-sun); }
.am-quote { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.025em; }
.am-note { margin: 20px 0 0; font-size: 16px; color: rgba(0, 32, 32, .8); }
.am-three { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--line); }
.am-three li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.am-num { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--line-strong); font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 20px; color: var(--sun); }
.am-three b { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.015em; }
.am-three li > span:last-child { color: var(--ink-muted); font-size: 16px; }
.am-asks { padding-top: 140px; }
.am-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.am-ask { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 15px; }
.am-chev { color: var(--sun); font-weight: 800; font-size: 20px; }
.am-ask-t { flex: 1; min-width: 0; }
.am-how { padding-top: 140px; }
.am-vs { padding-top: 140px; }
.am-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.am-card { padding: 28px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); }
.am-card h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.am-card p { margin: 0; font-size: 16px; color: var(--ink-muted); }
.am-card-hi { background: var(--sun); border-color: var(--sun); color: var(--on-sun); box-shadow: 8px 8px 0 0 var(--lagoon); transform: translateY(-12px); }
.am-card-hi p { color: rgba(0, 32, 32, .82); }
.am-card-hi .sc-pick { margin-bottom: 14px; }
.am-more { margin: 32px 0 0; font-size: 17px; }
.am-more a { font-weight: 650; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.am-fit { padding-top: 140px; }
.am-fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.am-fit-col { padding: 28px; border-radius: var(--radius-md); border: 1px solid var(--line); }
.am-fit-h { margin: 0 0 14px; font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.am-fit-yes { color: var(--mint); } .am-fit-no { color: var(--flare); }
.am-fit-col ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 17px; color: var(--ink-muted); }
.am-price { padding-top: 140px; }
.am-price-slab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding: 56px; border-radius: var(--radius-lg); background: var(--sun); color: var(--on-sun); }
.am-price-slab .am-price-big { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(88px, 11vw, 160px); line-height: .8; letter-spacing: -0.06em; }
.am-price-slab .am-price-big span { font-size: .28em; font-style: italic; letter-spacing: -0.02em; margin-left: 8px; }
.am-price-slab p { margin: 0 0 24px; font-size: 18px; }
.am-price-slab .sw-btn { background: #002020; color: #ffffff; border-color: #002020; }
.am-faq { padding-top: 140px; }
@media (max-width: 1000px) {
.am-hero-row, .am-def, .am-price-slab { grid-template-columns: minmax(0, 1fr); }
.am-hero-cta { justify-content: flex-start; }
.am-cards { grid-template-columns: minmax(0, 1fr); }
.am-card-hi { transform: none; }
}
@media (max-width: 680px) {
.am-hero { padding-top: 24px; padding-bottom: 0; }
.am-crumbs { margin-bottom: 24px; font-size: 12px; }
.am-h1 { font-size: clamp(40px, 12vw, 52px); }
.am-hero-row { margin-top: 28px; gap: 24px; }
.am-lead { font-size: 18px; }
.am-hero-cta .magnet { display: block; width: 100%; }
.am-hero-cta .magnet .sw-btn { width: 100%; }
.am-def { padding-top: 64px; gap: 32px; }
.am-def-card { padding: 24px 20px; box-shadow: 6px 6px 0 0 var(--lagoon); }
.am-quote { font-size: 23px; }
.am-asks, .am-how, .am-vs, .am-fit, .am-price, .am-faq { padding-top: 88px; }
.am-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.am-ask { font-size: 13px; min-height: 56px; }
.am-fit-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.am-fit-col { padding: 22px 20px; }
.am-price-slab { padding: 28px 20px; gap: 20px; }
.am-price-slab .magnet { display: block; }
.am-price-slab .sw-btn { width: 100%; height: auto; min-height: 56px; padding: 14px 18px; white-space: normal; }
}
.am-stage { position: relative; margin: 64px 0 0; }
.am-win { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: #ffffff; color: #002020; box-shadow: 0 0 0 1px var(--line), 12px 12px 0 0 var(--sun); }
.am-win-banner { display: grid; place-items: center; height: 0; overflow: hidden; background: #c2185b; color: #ffffff; font-weight: 700; font-size: 15px; letter-spacing: .01em; animation: am-banner 10s cubic-bezier(.2,.9,.3,1.15) infinite; }
.am-win-media { position: relative; aspect-ratio: 16 / 7; background: #ece8da; overflow: hidden; }
.am-win-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.am-win-media img.push { transform-origin: 30% 60%; animation: hm-push 14s ease-in-out infinite alternate; }
.am-win-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.am-win-title { position: absolute; left: 32px; bottom: 28px; display: grid; gap: 4px; padding: 16px 20px; border-radius: 14px; background: rgba(255, 255, 255, .92); }
.am-win-title b { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.am-win-title span { font-size: 14px; color: #46605c; }
.am-flow { position: absolute; right: 32px; bottom: -36px; display: grid; gap: 10px; width: min(420px, 60%); z-index: 2; }
.am-bub { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; box-sizing: border-box; border-radius: 14px; background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift); font-size: 15px; color: var(--ink); }
.am-bub-you { justify-self: end; font-family: var(--font-mono); background: var(--sun); color: var(--on-sun); border-color: var(--sun); }
.am-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation: am-type 10s steps(25, end) infinite; }
.am-caret { width: 9px; height: 20px; background: #002020; transform: skewX(-10deg); animation: sw-blink 1s steps(1) infinite; }
.am-bub-ai { position: relative; opacity: 0; animation: am-ai 10s ease-out infinite; }
.am-ai-wait, .am-ai-done { display: inline-flex; align-items: center; gap: 10px; }
.am-ai-wait { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); animation: am-wait 10s steps(1) infinite; }
.am-ai-done { position: absolute; left: 16px; opacity: 0; animation: am-done 10s steps(1) infinite; }
@keyframes am-type { 0%, 6% { width: 0; } 30%, 92% { width: 25ch; } 97%, 100% { width: 0; } }
@keyframes am-ai { 0%, 33% { opacity: 0; transform: translateY(8px); } 37%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes am-wait { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes am-done { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes am-banner { 0%, 50% { height: 0; } 54%, 92% { height: 44px; } 97%, 100% { height: 0; } }
.am-three { position: relative; }
.am-three::before, .am-three::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: 42px; width: 2px; background: var(--line); }
.am-three::after { background: var(--sun); transform-origin: top; transform: scaleY(0); }
.am-three li > .am-num { position: relative; z-index: 1; }
@supports (animation-timeline: view()) {
.am-three::after { animation: am-fill linear both; animation-timeline: view(); animation-range: entry 60% cover 55%; }
@keyframes am-fill { to { transform: scaleY(1); } }
.am-three li > .am-num { animation: am-numon linear both; animation-timeline: view(); animation-range: entry 80% cover 40%; }
@keyframes am-numon { from { background: var(--surface-raised); color: var(--sun); } to { background: var(--sun); color: var(--on-sun); border-color: var(--sun); } }
}
@supports (animation-timeline: view()) {
.am-ask .am-ask-t { animation: am-reveal steps(28, end) both; animation-timeline: view(); animation-range: entry 70% cover 40%; }
.am-ask .sw-tag { animation: am-pop linear both; animation-timeline: view(); animation-range: cover 38% cover 46%; }
.am-ask:nth-child(even) .am-ask-t { animation-range: entry 90% cover 44%; }
.am-ask:nth-child(even) .sw-tag { animation-range: cover 42% cover 50%; }
@keyframes am-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes am-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
}
.am-places { padding-top: 140px; }
.am-places-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.am-place { position: relative; margin: 0; }
.am-place-img { overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 5; background: var(--surface-raised); }
.am-place-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.am-place:hover .am-place-img img { transform: scale(1.05); }
.am-place-chat { position: absolute; left: 14px; right: 14px; bottom: 58px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift); font-family: var(--font-mono); font-size: 13px; color: var(--ink); animation: am-bob 5s ease-in-out infinite; }
.am-place-chat > span:nth-child(2) { flex: 1; min-width: 0; }
.am-place:nth-child(2) .am-place-chat { animation-delay: -1.6s; } .am-place:nth-child(3) .am-place-chat { animation-delay: -3.2s; }
@keyframes am-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.am-place figcaption { margin-top: 14px; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
@supports (animation-timeline: view()) {
.am-place-img { animation: am-unveil linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
@keyframes am-unveil { from { clip-path: inset(18% 0 0 0 round 12px); transform: translateY(30px); } to { clip-path: inset(0 0 0 0 round 12px); transform: none; } }
}
.am-price-slab { position: relative; overflow: clip; }
.am-price-pat { position: absolute; right: 40px; top: 36px; width: 140px; }
.am-price-pat .sw-pat-bar { transform-box: fill-box; transform-origin: 50% 100%; }
@supports (animation-timeline: view()) {
.am-price-pat .sw-pat-bar { animation: am-bar linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
.am-price-pat .sw-pat-bar:nth-child(3n+2) { animation-range: entry 55% cover 45%; }
.am-price-pat .sw-pat-bar:nth-child(3n) { animation-range: entry 70% cover 50%; }
@keyframes am-bar { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
}
@media (max-width: 1000px) {
.am-places-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.am-place-chat { font-size: 12px; padding: 10px; bottom: 52px; }
.am-price-pat { display: none; }
}
@media (max-width: 680px) {
.am-stage { margin-top: 40px; }
.am-win { box-shadow: 0 0 0 1px var(--line), 8px 8px 0 0 var(--sun); }
.am-win-media { aspect-ratio: 4 / 3; }
.am-win-title { left: 14px; bottom: 14px; padding: 10px 12px; }
.am-win-title b { font-size: 19px; } .am-win-title span { font-size: 12px; }
.am-win-banner { font-size: 12px; }
.am-flow { position: relative; right: auto; bottom: auto; width: auto; margin: -22px 10px 0; }
.am-bub { font-size: 13px; min-height: 46px; }
.am-places { padding-top: 88px; }
.am-places-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.am-place-img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
.am-win-banner { animation: none; height: 44px; }
.am-type { animation: none; width: auto; }
.am-caret { animation: none; }
.am-bub-ai, .am-ai-done { animation: none; opacity: 1; }
.am-ai-wait { animation: none; display: none; }
.am-ai-done { position: static; }
.am-three::after, .am-three li > .am-num, .am-ask .am-ask-t, .am-ask .sw-tag, .am-place-chat, .am-place-img, .am-price-pat .sw-pat-bar { animation: none !important; }
.am-three::after { transform: scaleY(1); }
.am-place-img img { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .am-win-media img.push { animation: none; } }
.hm-final { padding-top: 180px; padding-bottom: 140px; }
.cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 72px 72px 72px 80px; border-radius: 28px; background: var(--sun); color: var(--on-sun); box-shadow: 12px 12px 0 0 var(--lagoon); overflow: hidden; }
.cta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 340px; height: 340px; border-radius: 50%; background: rgba(255, 255, 255, .16); pointer-events: none; }
.hm-final .cta h2 { margin: 0 0 24px; font-size: clamp(30px, 4vw, 62px); line-height: .92; color: #002020; }
.hm-final .cta .sw-hl-marker { color: var(--sun); }
.hm-final .cta .sw-hl::before { background: #002020; }
.hm-final .cta-copy > p { margin: 0 0 32px; font-size: 19px; line-height: 1.5; color: rgba(0, 32, 32, .82); max-width: 30em; }
.hm-final .cta .sw-btn { background: #002020; color: #ffffff; border-color: #002020; }
.hm-final .cta .sw-btn:hover { box-shadow: 4px 4px 0 0 #ffffff; }
.cta-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; font-weight: 600; }
.cta-points li { display: flex; align-items: center; gap: 10px; }
.cta-points svg { flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #002020; color: var(--sun); }
.cta-phone { position: relative; z-index: 1; justify-self: center; width: 100%; max-width: 360px; padding: 12px; box-sizing: border-box; border-radius: 44px; background: #001717; box-shadow: 0 30px 60px -20px rgba(0, 32, 32, .6), inset 0 0 0 2px #1d4746; transform: rotate(2deg); }
.cta-screen { display: flex; flex-direction: column; height: 480px; border-radius: 34px; overflow: hidden; background: #072d2c; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 14px 14px; color: #ffffff; }
.cta-top { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; background: #002020; border-bottom: 1px solid #1d4746; }
.cta-top b { display: block; font-size: 15px; } .cta-top span { font-size: 12px; color: var(--mint); }
.cta-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 14px; overflow: hidden; }
.cta-day { align-self: center; margin: 0 0 6px; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 11px; color: var(--ink-muted); }
.cta-m { position: relative; max-width: 80%; margin: 0; padding: 9px 12px 18px; border-radius: 14px; font-size: 13.5px; line-height: 1.38; }
.cta-m i { position: absolute; right: 10px; bottom: 4px; font-style: normal; font-size: 10px; opacity: .7; }
.cta-you { align-self: flex-end; background: var(--sun); color: #002020; border-bottom-right-radius: 4px; }
.cta-us { align-self: flex-start; background: #f6f3ea; color: #002020; border-bottom-left-radius: 4px; }
.cta-typing { align-self: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: #f6f3ea; }
.cta-input { display: flex; align-items: center; justify-content: space-between; margin: 0 12px 14px; padding: 6px 6px 6px 16px; border-radius: 999px; background: #002020; border: 1px solid #1d4746; font-size: 13px; color: var(--ink-faint); }
.cta-send { width: 34px; height: 34px; border-radius: 50%; background: var(--sun); }
.hm-final .cta-msgs .cta-day { margin: 0 0 6px; font-size: 11px; color: var(--ink-muted); }
.hm-final .cta-msgs .cta-m { margin: 0; font-size: 13.5px; line-height: 1.38; overflow: hidden; }
.hm-final .cta-msgs .cta-typing { margin: 0; overflow: hidden; }
.hm-final .cta-msgs .cta-you, .hm-final .cta-msgs .cta-us { color: #002020; }
.cta-m1, .cta-m2, .cta-m3, .cta-typing { animation: 12s ease-out infinite both; }
.cta-m1 { animation-name: cta-m1; } .cta-typing { animation-name: cta-type; } .cta-m2 { animation-name: cta-m2; } .cta-m3 { animation-name: cta-m3; }
@keyframes cta-m1 { 0%, 4% { opacity: 0; transform: translateY(12px) scale(.96); max-height: 0; padding-top: 0; padding-bottom: 0; } 8%, 93% { opacity: 1; transform: none; max-height: 120px; padding-top: 9px; padding-bottom: 18px; } 98%, 100% { opacity: 0; max-height: 120px; } }
@keyframes cta-type { 0%, 13% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } 15%, 27% { opacity: 1; max-height: 40px; padding-top: 12px; padding-bottom: 12px; } 29%, 37% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } 39%, 47% { opacity: 1; max-height: 40px; padding-top: 12px; padding-bottom: 12px; } 49%, 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes cta-m2 { 0%, 28% { opacity: 0; transform: translateY(12px) scale(.96); max-height: 0; padding-top: 0; padding-bottom: 0; } 32%, 93% { opacity: 1; transform: none; max-height: 140px; padding-top: 9px; padding-bottom: 18px; } 98%, 100% { opacity: 0; max-height: 140px; } }
@keyframes cta-m3 { 0%, 48% { opacity: 0; transform: translateY(12px) scale(.96); max-height: 0; padding-top: 0; padding-bottom: 0; } 52%, 93% { opacity: 1; transform: none; max-height: 140px; padding-top: 9px; padding-bottom: 18px; } 98%, 100% { opacity: 0; max-height: 140px; } }
@media (max-width: 1000px) {
.cta { grid-template-columns: minmax(0, 1fr); padding: 56px 48px; }
.cta-phone { transform: none; }
}
@media (max-width: 680px) {
.cta { padding: 32px 20px 28px; gap: 32px; border-radius: 20px; box-shadow: 6px 6px 0 0 var(--lagoon); }
.cta::after { width: 200px; height: 200px; right: -50px; top: -50px; }
.hm-final .cta h2 { font-size: clamp(24px, 7.6vw, 30px); margin-bottom: 16px; }
.hm-final .cta-copy > p { font-size: 16px; margin-bottom: 24px; }
.cta-points { margin-top: 20px; font-size: 14px; }
.cta-screen { height: 420px; }
.cta-phone { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
.cta-m1, .cta-m2, .cta-m3 { animation: none; opacity: 1; }
.cta-typing { animation: none; display: none; }
}
.ft { padding-top: 88px; border-top: 1px solid var(--line); overflow: clip; view-timeline-name: --foot; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
.ft-brand img { height: 40px; width: auto; display: block; margin-bottom: 20px; }
.ft-brand .hm-foot-tag { max-width: 22em; font-size: 16px; line-height: 1.55; }
.ft-rate { display: inline-flex; align-items: baseline; gap: 6px; margin: 24px 0 0; padding: 8px 14px; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
.ft-rate b { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--sun); letter-spacing: -0.02em; }
.ft-col { display: grid; gap: 4px; align-content: start; }
.ft-h { margin: 0 0 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sun-ink); }
.ft-col > a { position: relative; justify-self: start; max-width: 100%; padding: 6px 0; font-size: 16px; color: var(--ink-muted); text-decoration: none; }
.ft-col > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--sun); transform: skewX(-10deg) scaleX(0); transform-origin: left; transition: transform 200ms ease-out; }
.ft-col > a:hover { color: var(--ink); } .ft-col > a:hover::after { transform: skewX(-10deg) scaleX(1); }
.ft-col > a[aria-current="page"] { color: var(--ink); }
.ft-col > a.ft-contact { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.ft-col > a.ft-contact::after { display: none; }
.ft-contact svg { flex: none; margin-top: 2px; padding: 8px; box-sizing: content-box; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--line); color: var(--sun); transition: background-color 150ms, color 150ms; }
.ft-contact:hover svg { background: var(--sun); color: var(--on-sun); border-color: var(--sun); }
.ft-contact span { display: grid; gap: 2px; font-size: 15px; overflow-wrap: anywhere; }
.ft-contact b { font-size: 13px; font-weight: 600; color: var(--ink-faint); }
.ft-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.ft-bottom .hm-legal { margin: 0; }
.ft-top-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; transition: border-color 150ms, transform 150ms; }
.ft-top-btn:hover { color: var(--ink); border-color: var(--sun); transform: translateY(-2px); }
.ft-top-btn svg { color: var(--sun); }
.ft-giant { margin: 56px 0 -0.14em; padding: 0 24px; font-family: var(--font-display); font-weight: 900; font-stretch: 100%; font-size: 6.8vw; line-height: .9; letter-spacing: -0.05em; white-space: nowrap; user-select: none; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); background: linear-gradient(90deg, var(--sun), var(--sun)) no-repeat 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text; }
@supports (animation-timeline: view()) {
.ft-giant { animation: ft-fill linear both; animation-timeline: --foot; animation-range: entry 15% entry 100%; }
@keyframes ft-fill { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
}
@media (max-width: 1000px) {
.ft-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
.ft { padding-top: 56px; }
.ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
.ft-col:last-child { grid-column: 1 / -1; }
.ft-col > a { font-size: 15px; padding: 8px 0; }
.ft-bottom { margin-top: 40px; }
.ft-giant { padding: 0 16px; white-space: normal; font-size: 15vw; line-height: .86; margin-top: 40px; -webkit-text-stroke-width: 1px; background-image: linear-gradient(180deg, var(--sun), var(--sun)); }
@supports (animation-timeline: view()) {
.ft-giant { animation-name: ft-fill-v; }
@keyframes ft-fill-v { from { background-size: 100% 0%; } to { background-size: 100% 100%; } }
}
}
@media (prefers-reduced-motion: reduce) { .ft-giant { animation: none; background-size: 100% 100%; } .ft-col > a::after, .ft-top-btn { transition: none; } }
.hm-nav { --nav-h: 80px; background: var(--surface); border-bottom: 1px solid var(--line); }
.hm-nav-in { position: relative; box-sizing: content-box; border: 1px solid transparent; border-top: 0; border-radius: 0; background-color: transparent; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); overflow: clip; }
.hm-nav-in .hm-progress { left: 0; right: 0; bottom: 0; height: 3px; }
.hm-links a.is-active { color: var(--ink); }
@supports (animation-timeline: scroll()) {
.hm-nav { animation: nav-wrap linear both; animation-timeline: scroll(root); animation-range: 0px 200px; }
.hm-nav-in { animation: nav-pill linear both; animation-timeline: scroll(root); animation-range: 0px 200px; }
@keyframes nav-wrap { to { background-color: transparent; border-bottom-color: transparent; padding: 10px 12px 6px; } }
@keyframes nav-pill { to { max-width: 1120px; height: calc(var(--nav-h) - 16px); padding-left: 22px; padding-right: 8px; border-radius: calc(var(--radius-sm) + 8px); border-top: 1px solid var(--line); border-color: var(--line); background-color: rgba(0, 32, 32, .78); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75); } }
}
.hm-nav .sw-btn { transition: transform var(--duration-quick) ease-out, box-shadow var(--duration-quick) ease-out; }
@media (max-width: 680px) {
.hm-nav { --nav-h: 68px; }
@supports (animation-timeline: scroll()) {
@keyframes nav-pill { to { height: calc(var(--nav-h) - 12px); padding-left: 14px; padding-right: 6px; border-radius: calc(var(--radius-sm) + 6px); border-top: 1px solid var(--line); border-color: var(--line); background-color: rgba(0, 32, 32, .82); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .75); } }
@keyframes nav-wrap { to { background-color: transparent; border-bottom-color: transparent; padding: 8px 8px 4px; } }
}
.hm-nav .sw-btn { height: 44px; }
.hm-menu { left: 8px; right: 8px; top: calc(100% + 6px); border: 1px solid var(--line); border-radius: calc(var(--radius-sm) + 6px); }
}
@media (prefers-reduced-motion: reduce) { .hm-nav, .hm-nav-in { animation-duration: auto; } }
@media (min-width: 1001px) {
.hm-build-in { top: 88px; min-height: 0; height: min(780px, calc(100vh - 104px)); box-sizing: border-box; }
}
@media (min-width: 1001px) and (max-height: 640px) {
.hm-build { height: auto; }
.hm-build-in { position: static; height: auto; padding: 96px 0; }
}
.hm-am { padding-top: 160px; }
.hm-am .am-def.hm-am-body { padding-top: 0; }
.hm-am-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; min-height: 48px; padding: 0 18px; border-radius: var(--radius-sm); background: #002020; color: #ffffff; font-weight: 650; font-size: 15px; text-decoration: none; transition: transform var(--duration-quick) ease-out, box-shadow var(--duration-quick) ease-out; }
.hm-am-link:hover { color: #ffffff; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #ffffff; }
.hm-am-link svg { color: var(--sun); }
@media (max-width: 680px) {
.hm-am { padding-top: 88px; }
.hm-am-link { width: 100%; justify-content: center; box-sizing: border-box; padding: 12px 16px; height: auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .hm-am-link { transition: none; } }
.hw { list-style: none; margin: 0; padding: 0; display: grid; }
.hw-step { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 56px; align-items: start; padding-bottom: 96px; view-timeline-name: --hws; }
.hw-step:last-child { padding-bottom: 0; }
.hw-step:not(:last-child)::before, .hw-step:not(:last-child)::after { content: ""; position: absolute; left: 34px; top: 36px; bottom: -36px; width: 4px; border-radius: 2px; }
.hw-step:not(:last-child)::before { background: var(--line); }
.hw-step:not(:last-child)::after { background: var(--sun); transform-origin: top; }
.hw-mark { position: relative; z-index: 1; width: 72px; height: 72px; }
.hw-num { display: grid; place-items: center; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; background: var(--sun); color: var(--on-sun); border: 3px solid var(--sun); font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 26px; letter-spacing: -0.04em; line-height: 1; box-shadow: 0 0 0 8px var(--surface); }
.hw-copy { display: grid; gap: 14px; padding-top: 6px; max-width: 520px; }
.hw-tag { justify-self: start; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sun-ink); }
.hw-title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 4.4vw, 68px); line-height: .9; letter-spacing: -0.05em; }
.hw-text { font-size: 19px; line-height: 1.55; color: var(--ink-muted); }
.hw-vis { position: relative; box-sizing: border-box; min-height: 210px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.hw-av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-sunken); border: 1px solid var(--line-strong); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: -0.02em; }
.hw-ppl .hw-av:first-child { width: 40px; font-size: 10px; border-radius: 20px; }
.hw-av-sun { background: var(--sun); border-color: var(--sun); color: var(--on-sun); font-style: italic; }
.hw-chat { display: grid; gap: 10px; align-content: start; }
.hw-chat-top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.hw-chat-who { display: grid; line-height: 1.2; }
.hw-chat-who b { font-size: 15px; }
.hw-chat-who i { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.hw-b { max-width: 82%; padding: 9px 13px; border-radius: 14px; }
.hw-b-in { justify-self: end; background: #0f4a3c; color: #e9fff6; border-bottom-right-radius: 4px; }
.hw-b-out { justify-self: start; background: var(--surface-sunken); color: var(--ink); border-bottom-left-radius: 4px; }
.hw-file { display: flex; align-items: center; gap: 10px; color: var(--sun-ink); }
.hw-file span { display: grid; color: var(--ink); font-weight: 600; line-height: 1.2; }
.hw-file small { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-faint); }
.hw-build { padding: 0; overflow: clip; background: #ffffff; border-color: #ffffff; box-shadow: 14px 14px 0 0 var(--sun); }
.hw-win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #ece8da; }
.hw-win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9c2ad; }
.hw-win-bar span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #ffffff; font-family: var(--font-mono); font-size: 11px; color: #4b6360; }
.hw-win-body { display: grid; gap: 10px; padding: 16px; }
.hw-sk { display: block; height: 10px; border-radius: 4px; background: #e2ddcd; transform-origin: left; }
.hw-sk-nav { width: 40%; height: 8px; }
.hw-sk-hero { height: 52px; background: #002020; border-radius: 8px; }
.hw-sk-line { width: 85%; }
.hw-sk-short { width: 55%; }
.hw-sk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hw-sk-cards .hw-sk { height: 34px; border-radius: 6px; background: #fbbc00; }
.hw-sk-cards .hw-sk + .hw-sk { background: #e2ddcd; }
.hw-badge { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: #002020; color: #fbbc00; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hw-call { display: grid; gap: 16px; align-content: start; }
.hw-call-top { display: flex; align-items: center; gap: 12px; }
.hw-ppl { display: flex; }
.hw-ppl .hw-av + .hw-av { margin-left: -10px; box-shadow: 0 0 0 3px var(--surface-raised); }
.hw-call-meta { display: grid; line-height: 1.25; }
.hw-call-meta b { font-size: 15px; }
.hw-call-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); }
.hw-live { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.hw-wave { display: flex; align-items: center; justify-content: space-between; gap: 5px; height: 56px; padding: 0 4px; }
.hw-wave i { flex: 1; max-width: 9px; height: 30%; border-radius: 3px; background: var(--sun); }
.hw-wave i:nth-child(3n) { height: 70%; } .hw-wave i:nth-child(4n+1) { height: 50%; } .hw-wave i:nth-child(5n+2) { height: 90%; }
.hw-call-tip { padding: 10px 13px; border-radius: var(--radius-sm); background: var(--surface-sunken); font-style: italic; color: var(--ink-muted); }
.hw-run { display: grid; gap: 14px; align-content: center; }
.hw-ask { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 16px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 15px; white-space: nowrap; overflow: hidden; }
.hw-chev { color: var(--sun-ink); font-weight: 700; font-size: 20px; line-height: 1; }
.hw-typed { display: inline-block; overflow: hidden; max-width: 28ch; }
.hw-caret { width: 2px; height: 20px; background: var(--sun); animation: hw-blink 1s steps(1) infinite; }
.hw-done { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--sun); color: var(--on-sun); font-weight: 700; }
.hw-tick { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--on-sun); color: var(--sun); }
@keyframes hw-blink { 50% { opacity: 0; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.hw-step:not(:last-child)::after { animation: hw-fill linear both; animation-timeline: --hws; animation-range: entry-crossing calc(40vh + 36px) entry-crossing calc(100% + 40vh + 36px); }
.hw-num { animation: hw-dot linear both; animation-timeline: --hws; animation-range: entry-crossing calc(40vh + 20px) entry-crossing calc(40vh + 56px); }
.hw-copy, .hw-vis { animation: hw-wake linear both; animation-timeline: --hws; animation-range: entry-crossing calc(40vh - 80px) entry-crossing calc(40vh + 60px); }
.hw-chat .hw-b { animation: hw-pop linear both; animation-timeline: --hws; }
.hw-chat .hw-b:nth-of-type(1) { animation-range: entry-crossing calc(40vh - 40px) entry-crossing calc(40vh + 20px); }
.hw-chat .hw-b:nth-of-type(2) { animation-range: entry-crossing calc(40vh + 40px) entry-crossing calc(40vh + 100px); }
.hw-chat .hw-b:nth-of-type(3) { animation-range: entry-crossing calc(40vh + 110px) entry-crossing calc(40vh + 170px); }
.hw-build .hw-sk { animation: hw-grow linear both; animation-timeline: --hws; }
.hw-build .hw-sk-nav { animation-range: entry-crossing calc(40vh - 40px) entry-crossing calc(40vh + 20px); }
.hw-build .hw-sk-hero { animation-range: entry-crossing calc(40vh) entry-crossing calc(40vh + 70px); }
.hw-build .hw-sk-line { animation-range: entry-crossing calc(40vh + 50px) entry-crossing calc(40vh + 110px); }
.hw-build .hw-sk-short { animation-range: entry-crossing calc(40vh + 80px) entry-crossing calc(40vh + 140px); }
.hw-build .hw-sk-cards .hw-sk { animation-name: hw-rise; animation-range: entry-crossing calc(40vh + 110px) entry-crossing calc(40vh + 170px); }
.hw-build .hw-badge { animation: hw-pop linear both; animation-timeline: --hws; animation-range: entry-crossing calc(40vh + 160px) entry-crossing calc(40vh + 210px); }
.hw-wave i { animation: hw-talk 900ms ease-in-out infinite alternate; transform-origin: center; }
.hw-wave i:nth-child(2n) { animation-delay: -300ms; } .hw-wave i:nth-child(3n) { animation-delay: -600ms; animation-duration: 700ms; }
.hw-typed { animation: hw-type steps(28, end) both; animation-timeline: --hws; animation-range: entry-crossing calc(40vh - 20px) entry-crossing calc(40vh + 140px); }
.hw-done { animation: hw-pop linear both; animation-timeline: --hws; animation-range: entry-crossing calc(40vh + 150px) entry-crossing calc(40vh + 200px); }
}
}
@keyframes hw-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hw-dot { from { background: var(--surface); color: var(--ink-faint); border-color: var(--line-strong); transform: scale(.82); } 60% { transform: scale(1.12); } to { background: var(--sun); color: var(--on-sun); border-color: var(--sun); transform: scale(1); } }
@keyframes hw-wake { from { opacity: .28; } to { opacity: 1; } }
@keyframes hw-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hw-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hw-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hw-talk { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes hw-type { from { max-width: 0; } to { max-width: 28ch; } }
@media (prefers-reduced-motion: reduce) { .hw-caret { animation: none; } }
@media (max-width: 1000px) {
.hw-step { grid-template-columns: 64px minmax(0, 1fr); column-gap: 28px; row-gap: 24px; padding-bottom: 72px; }
.hw-vis { grid-column: 2; max-width: 480px; }
.hw-mark { width: 64px; height: 64px; }
.hw-step:not(:last-child)::before, .hw-step:not(:last-child)::after { left: 30px; top: 32px; bottom: -32px; }
.hw-num { font-size: 22px; }
}
@media (max-width: 640px) {
.hw-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 20px; padding-bottom: 56px; }
.hw-mark { width: 44px; height: 44px; }
.hw-num { font-size: 16px; border-width: 2px; box-shadow: 0 0 0 6px var(--surface); }
.hw-step:not(:last-child)::before, .hw-step:not(:last-child)::after { left: 20px; top: 22px; bottom: -22px; width: 4px; }
.hw-copy { gap: 10px; padding-top: 2px; }
.hw-tag { font-size: 11px; }
.hw-title { font-size: 36px; }
.hw-text { font-size: 17px; }
.hw-vis { min-height: 0; padding: 14px; font-size: 14px; }
.hw-build { padding: 0; box-shadow: 8px 8px 0 0 var(--sun); margin-right: 8px; }
.hw-ask { font-size: 13px; padding: 0 12px; min-height: 50px; }
.hw-done { font-size: 14px; }
}
.hm-slab { align-items: start; }
.pc-left .hm-list { margin: 32px 0 0; }
.pc { position: relative; z-index: 1; display: grid; gap: 26px; padding: 30px; border-radius: var(--radius-lg); background: #002020; color: #ffffff; box-shadow: 14px 14px 0 0 rgba(0, 32, 32, .28); }
.pc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 18px; border-bottom: 1px solid #1d4746; }
.pc-title { font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; }
.pc-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a8c4bf; }
.pc-live i { width: 8px; height: 8px; border-radius: 50%; background: #fbbc00; box-shadow: 0 0 0 4px rgba(251, 188, 0, .18); }
.pc-row { display: grid; gap: 12px; }
.pc-label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pc-label { font-size: 16px; font-weight: 650; color: #ffffff; }
.pc-pages { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: #001717; border: 1px solid #1d4746; }
.pc-step { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: calc(var(--radius-sm) - 2px); background: #072d2c; color: #ffffff; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; transition: background 150ms, color 150ms; }
.pc-step:hover { background: #fbbc00; color: #002020; }
.pc-count { min-width: 44px; text-align: center; font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 24px; letter-spacing: -0.03em; color: #fbbc00; font-variant-numeric: tabular-nums; }
.pc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.pc-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, #fbbc00 var(--p, 30%), #1d4746 var(--p, 30%)); }
.pc-range::-moz-range-track { height: 8px; border-radius: 4px; background: #1d4746; }
.pc-range::-moz-range-progress { height: 8px; border-radius: 4px; background: #fbbc00; }
.pc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fbbc00; border: 4px solid #002020; box-shadow: 0 0 0 2px #fbbc00; transition: transform 150ms; }
.pc-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fbbc00; border: 4px solid #002020; box-shadow: 0 0 0 2px #fbbc00; }
.pc-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.pc-range:focus-visible { outline: 2px solid #fbbc00; outline-offset: 4px; border-radius: 6px; }
.hm-price .hm-slab-pat { display: none; }
.pc-scale { position: relative; height: 14px; margin-top: -4px; font-family: var(--font-mono); font-size: 11px; color: #7f9e99; }
.pc-scale span { position: absolute; top: 0; left: calc(13px + (100% - 26px) * var(--at)); transform: translateX(-50%); }
.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 10px; border: 1px solid #4f807b; border-radius: var(--radius-sm); background: transparent; color: #ffffff; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms, transform 150ms; }
.pc-chip small { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: #a8c4bf; }
.pc-chip-box { position: relative; width: 16px; height: 16px; border-radius: 4px; border: 2px solid #4f807b; box-sizing: border-box; transition: inherit; }
.pc-chip:hover { border-color: #fbbc00; transform: translateY(-1px); }
.pc-chip.is-on { background: #fbbc00; border-color: #fbbc00; color: #002020; }
.pc-chip.is-on small { color: #002020; opacity: .7; }
.pc-chip.is-on .pc-chip-box { background: #002020; border-color: #002020; }
.pc-chip.is-on .pc-chip-box::after { content: ""; position: absolute; left: 3px; top: 0px; width: 4px; height: 8px; border: solid #fbbc00; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pc-total { display: grid; grid-template-columns: auto auto auto auto minmax(0, 1fr); align-items: end; gap: 14px; padding: 20px 22px; border-radius: var(--radius-md); background: #072d2c; border: 1px solid #1d4746; }
.pc-cell { display: grid; gap: 4px; }
.pc-k { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #7f9e99; }
.pc-cell b { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-op { padding-bottom: 2px; font-size: 22px; color: #4f807b; line-height: 1; }
.pc-sum { justify-self: end; text-align: right; }
.pc-sum b { font-weight: 900; font-size: 48px; color: #fbbc00; letter-spacing: -0.05em; }
.pc .magnet { display: block; }
.pc .sw-btn { width: 100%; justify-content: center; background: #fbbc00; color: #002020; border-color: #fbbc00; }
.pc .sw-btn:hover { box-shadow: 4px 4px 0 0 #ffffff; }
.pc :where(a, button, input):focus-visible { outline: 2px solid #fbbc00; outline-offset: 3px; }
.pc-fine { margin: -10px 0 0; font-size: 14px; line-height: 1.5; color: #a8c4bf; text-align: center; }
@media (max-width: 1200px) and (min-width: 1001px) { .hm-slab { padding: 56px; gap: 40px; } .pc-sum b { font-size: 40px; } }
@media (max-width: 640px) {
.pc { padding: 20px 16px; gap: 22px; box-shadow: 8px 8px 0 0 rgba(0, 32, 32, .28); }
.pc-title { font-size: 22px; }
.pc-total { grid-template-columns: 1fr 1fr; padding: 16px; gap: 10px 12px; }
.pc-op { display: none; }
.pc-label { font-size: 15px; white-space: nowrap; }
.pc-step { width: 32px; height: 32px; }
.pc-count { min-width: 36px; font-size: 22px; }
.pc-sum { grid-column: 1 / -1; justify-self: stretch; display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px solid #1d4746; text-align: left; }
.pc-cell b { font-size: 20px; }
.pc-sum b { font-size: 40px; }
.pc-chip { font-size: 14px; }
.pc .sw-btn { white-space: normal; height: auto; min-height: 56px; padding: 14px 16px; text-align: center; line-height: 1.25; }
}
.ft:not(:has(.ft-giant)) .ft-bottom { padding-bottom: 40px; }
@media (max-width: 640px) { .ft:not(:has(.ft-giant)) .ft-bottom { padding-bottom: 28px; } }
.hm-links { gap: 26px; align-items: center; }
.hm-links a { white-space: nowrap; }
.hm-links .hm-link-page { display: inline-flex; align-items: center; gap: 6px; padding-left: 26px; border-left: 1px solid var(--line); }
.hm-links .hm-link-page::after { left: 26px; }
@media (max-width: 1240px) and (min-width: 1001px) { .hm-links { gap: 18px; } .hm-links a { font-size: 14px; } .hm-links .hm-link-page { padding-left: 18px; } .hm-links .hm-link-page::after { left: 18px; } }
.hm-menu-links a { min-height: 56px; padding: 12px 0; font-size: 30px; }
.hm-menu-links a[aria-current="page"] { color: var(--sun); }
.hm-nav .hm-nav-ai { gap: 8px; color: var(--ink); border-color: var(--line-strong); background: transparent; }
.hm-nav .hm-nav-ai svg { transition: transform 200ms ease-out; }
.hm-nav .hm-nav-ai:hover { border-color: var(--sun); color: var(--sun); }
.hm-nav .hm-nav-ai:hover svg { transform: translateX(3px); }
.hm-nav .hm-nav-ai.is-current { border-color: var(--sun); color: var(--sun); cursor: default; }
@media (max-width: 1360px) and (min-width: 1001px) { .hm-links { gap: 20px; } .hm-links a { font-size: 14px; } .hm-nav .hm-nav-ai svg { display: none; } .hm-nav .sw-btn { padding: 0 16px; font-size: 15px; } }
@media (max-width: 1180px) and (min-width: 1001px) { .hm-links { gap: 14px; } .hm-links a { font-size: 13.5px; } .hm-nav .sw-btn { padding: 0 12px; font-size: 14px; } }
@media (max-width: 1000px) { .hm-nav .hm-nav-ai { display: none; } }
.hm a.sw-btn.sw-btn-primary:hover, .hm a.sw-btn.sw-btn-primary:focus-visible { color: #002020; }
.hm a.sw-btn.btn-ink:hover, .hm .hm-slab a.sw-btn:not(.btn-sun):hover, .hm .am-price-slab a.sw-btn:hover, .hm .hm-final .cta a.sw-btn:hover { color: #ffffff; }
.am-faq .hm-faq-side { container-type: inline-size; }
.am-faq .am-faq-h span { display: block; white-space: nowrap !important; }
.hm :is(h2.hm-h2, #build-title, #final-title, #am-final-title) { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: clamp(36px, 5.5vw, 80px) !important; line-height: .9; letter-spacing: -0.05em; }
.hm :is(h2.hm-h2, #build-title, #final-title, #am-final-title) span { white-space: normal !important; }
@media (max-width: 640px) { .hm :is(h2.hm-h2, #build-title, #final-title, #am-final-title) { font-size: clamp(30px, 9.4vw, 40px) !important; line-height: .94; } }
.hm :is(#final-title, #am-final-title) span:not(.sw-hl) { display: inline !important; }
.hm :is(#final-title, #am-final-title) .sw-hl { display: inline-block; white-space: nowrap !important; margin-top: 6px; }
.hm :is(#final-title, #am-final-title) { text-wrap: balance; }
.hm :is(h1, h2, h3, .hm-menu-links a, .work-ph-name) { font-stretch: 100% !important; }
.hm-price .hm-slab { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; row-gap: 48px; }
.pc-incl-h { margin: 0 0 16px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pc-incl .hm-list { margin: 0; }
.pc { grid-column: 1 / -1; padding: 32px; }
.pc-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pc-in { display: grid; gap: 28px; }
.pc-label small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: #7f9e99; white-space: normal; }
.pc-hint { font-size: 13px; color: #7f9e99; }
.pc-scale { margin-bottom: 4px; }
.pc-seg { display: grid; gap: 8px; }
.pc-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-opt { display: grid; gap: 3px; align-content: start; padding: 11px 13px; border: 1px solid #4f807b; border-radius: var(--radius-sm); background: transparent; color: #ffffff; font: inherit; font-size: 15px; font-weight: 650; line-height: 1.2; text-align: left; cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms; }
.pc-opt small { font-size: 12.5px; font-weight: 500; color: #a8c4bf; }
.pc-opt:hover { border-color: #fbbc00; }
.pc-opt.is-on { background: #fbbc00; border-color: #fbbc00; color: #002020; }
.pc-opt.is-on small { color: #002020; opacity: .75; }
.pc-row-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pc-row-split .pc-label-row { flex-wrap: wrap; gap: 10px 16px; }
.pc-row-split .pc-label { white-space: normal !important; }
.pc-step:disabled { opacity: .35; cursor: default; background: #072d2c; color: #ffffff; }
.pc-out { position: sticky; top: 104px; display: grid; gap: 10px; padding: 24px; border-radius: var(--radius-md); background: #072d2c; border: 1px solid #1d4746; }
.pc-price { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 3.4vw, 50px); line-height: 1; letter-spacing: -0.04em; color: #fbbc00; font-variant-numeric: tabular-nums; }
.pc-meta { font-size: 14px; color: #a8c4bf; }
.pc-lines { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid #1d4746; }
.pc-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px dashed #1d4746; font-size: 14px; line-height: 1.35; color: #d6e5e2; }
.pc-lines b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #ffffff; white-space: nowrap; }
.pc-totline { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0 8px; font-weight: 700; }
.pc-totline b { font-family: var(--font-mono); font-size: 14px; color: #fbbc00; white-space: nowrap; }
.pc-out .pc-fine { margin: 0; text-align: left; }
@media (max-width: 1000px) {
.hm-price .hm-slab { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
.pc-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.pc-out { position: static; }
}
@media (max-width: 640px) {
.pc { padding: 20px 16px; }
.pc-seg-3 { grid-template-columns: minmax(0, 1fr); }
.pc-row-split { grid-template-columns: minmax(0, 1fr); }
.pc-out { padding: 18px 16px; }
.pc-lines li { font-size: 13.5px; }
}
@media (min-width: 1001px) { .hm-price .hm-slab { grid-template-columns: auto minmax(0, 1fr); column-gap: 72px; } }
.in-h1 { max-width: none; }
.in-h1 > span:not(.sw-hl) { display: inline; }
.in-pains-sec, .in-feats-sec, .in-price-sec, .in-others-sec { padding-top: 140px; }
.in-pains { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.in-pain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); }
.in-was { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--flare); text-decoration-thickness: 4px; }
.in-now { display: flex; gap: 14px; align-items: baseline; font-size: 20px; line-height: 1.45; color: var(--ink); }
.in-now b { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.in-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.in-feat { padding: 28px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); transition: border-color 200ms, transform 200ms; }
.in-feat:hover { border-color: var(--sun); transform: translateY(-3px); }
.in-feat-n { display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--sun-ink); }
.in-feat h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.02em; }
.in-feat p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.in-price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 64px; border-radius: var(--radius-lg); background: var(--sun); color: var(--on-sun); }
.in-price .hm-slab-tag { margin-bottom: 20px; }
.in-price-h { margin: 0 0 18px; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--on-sun); }
.in-price-big { margin: 0; white-space: nowrap; font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 4.4vw, 68px); line-height: .95; letter-spacing: -0.05em; color: var(--on-sun); font-variant-numeric: tabular-nums; }
.in-price-meta { margin: 16px 0 0; font-size: 17px; font-weight: 600; color: var(--on-sun); }
.in-price-what { margin: 0 0 20px; font-size: 17px; line-height: 1.5; color: var(--on-sun); }
.in-price .hm-list { margin: 0 0 28px; }
.in-price-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.in-price-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--on-sun) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.in-price-link svg { transition: transform 200ms; }
.in-price-link:hover svg { transform: translateX(3px); }
.in-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.in-other { display: grid; gap: 0; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink) !important; text-decoration: none; transition: border-color 200ms, transform 200ms; }
.in-other:hover { border-color: var(--sun); transform: translateY(-3px); }
.in-other-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.in-other-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms; }
.in-other:hover .in-other-img img { transform: scale(1.04); }
.in-other-t { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.in-other-t svg { color: var(--sun); flex: none; }
.ft-top { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 1000px) {
.in-pain { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.in-feats, .in-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-price { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 44px; }
.ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.in-pains-sec, .in-feats-sec, .in-price-sec, .in-others-sec { padding-top: 88px; }
.in-pain { padding: 22px 0; }
.in-now { font-size: 17px; }
.in-feats, .in-others { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.in-feat { padding: 22px 20px; }
.in-price { padding: 28px 20px; }
.in-price-cta .sw-btn { width: 100%; justify-content: center; }
}
.hm-who a { color: inherit !important; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.hm-who a:hover { color: var(--sun) !important; text-decoration-color: var(--sun); }
.ed { --ed: 15s; margin-top: 64px; }
.ed-win { box-shadow: 0 0 0 1px var(--line), 14px 14px 0 0 var(--sun); }
.ed-bn { position: relative; display: grid; place-items: center; height: 0; color: #ffffff; font-weight: 700; font-size: 15px; letter-spacing: .01em; animation: ed-bn var(--ed) linear infinite; }
.ed-bn > span { overflow: hidden; white-space: nowrap; }
.ed-pill { position: relative; display: inline-grid; justify-self: start; margin-top: 6px; padding: 5px 10px; border-radius: 999px; background: #ece8da; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: #002020; }
.ed-pill > span { grid-area: 1 / 1; white-space: nowrap; }
.ed-old { animation: ed-old var(--ed) linear infinite; }
.ed-new { opacity: 0; color: #0f6b5c; animation: ed-new var(--ed) linear infinite; }
.ed-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 14px 46px; background: #ffffff; }
.ed-item { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; background: #f4f1e8; color: #002020; font-size: 14px; font-weight: 600; }
.ed-item b { margin-left: auto; font-family: var(--font-mono); font-size: 13px; }
.ed-add { background: transparent; outline: 2px dashed #cfc8b3; outline-offset: -2px; }
.ed-add-in { display: flex; align-items: center; gap: 8px; width: 100%; opacity: 0; animation: ed-add var(--ed) linear infinite; }
.ed-add-in i { font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: #fbbc00; color: #002020; }
.ed-bn::after, .ed-pill::after, .ed-add::after { content: ""; position: absolute; inset: -4px; border: 2px solid #fbbc00; border-radius: 8px; opacity: 0; pointer-events: none; }
.ed-bn::after { inset: 3px; }
.ed-bn::before, .ed-pill::before, .ed-add::before { content: "AI editing"; position: absolute; z-index: 2; padding: 2px 7px; border-radius: 4px; background: #fbbc00; color: #002020; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; opacity: 0; pointer-events: none; }
.ed-bn::before { right: 12px; top: 50%; transform: translateY(-50%); }
.ed-pill::before, .ed-add::before { left: -2px; top: -26px; }
.ed-bn::after, .ed-bn::before { animation: ed-hl1 var(--ed) linear infinite; }
.ed-pill::after, .ed-pill::before { animation: ed-hl2 var(--ed) linear infinite; }
.ed-add::after, .ed-add::before { animation: ed-hl3 var(--ed) linear infinite; }
.ed-cur { position: absolute; z-index: 3; width: 22px; height: 22px; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.ed-bn .ed-cur { left: 58%; top: 10px; animation: ed-cur1 var(--ed) ease-out infinite; }
.ed-pill .ed-cur { left: 70%; top: 12px; animation: ed-cur2 var(--ed) ease-out infinite; }
.ed-add .ed-cur { left: 62%; top: 18px; animation: ed-cur3 var(--ed) ease-out infinite; }
.ed-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; width: min(560px, calc(100% - 64px)); min-height: 60px; margin: -30px auto 0; padding: 0 12px 0 18px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
.ed-chev { color: var(--sun); font-weight: 700; font-size: 20px; }
.ed-qs { position: relative; display: grid; flex: 0 1 auto; min-width: 0; }
.ed-q { grid-area: 1 / 1; width: 0; overflow: hidden; white-space: nowrap; opacity: 0; }
.ed-q1 { animation: ed-q1 var(--ed) steps(30, end) infinite; }
.ed-q2 { animation: ed-q2 var(--ed) steps(30, end) infinite; }
.ed-q3 { animation: ed-q3 var(--ed) steps(30, end) infinite; }
.ed-caret { flex: none; width: 9px; height: 20px; margin-left: -8px; background: var(--sun); transform: skewX(-10deg); animation: hw-blink 1s steps(1) infinite; }
.ed-st { position: relative; display: grid; margin-left: auto; flex: none; font-family: var(--font-sans); font-size: 13px; font-weight: 650; color: var(--ink-muted); }
.ed-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; justify-self: end; opacity: 0; }
.ed-wait { animation: ed-wait var(--ed) linear infinite; }
.ed-live { animation: ed-live var(--ed) linear infinite; }
@keyframes ed-q1 { 0% { opacity: 1; width: 0; } 2% { width: 0; } 11%, 31% { width: calc(var(--n) * 1ch); opacity: 1; } 32%, 100% { width: 0; opacity: 0; } }
@keyframes ed-q2 { 0%, 33% { opacity: 0; width: 0; } 33.4% { opacity: 1; width: 0; } 35% { width: 0; } 44%, 64% { width: calc(var(--n) * 1ch); opacity: 1; } 65%, 100% { width: 0; opacity: 0; } }
@keyframes ed-q3 { 0%, 66.6% { opacity: 0; width: 0; } 66.8% { opacity: 1; width: 0; } 68% { width: 0; } 77%, 97% { width: calc(var(--n) * 1ch); opacity: 1; } 98%, 100% { width: 0; opacity: 0; } }
@keyframes ed-wait { 0%, 11.9% { opacity: 0; } 12%, 16% { opacity: 1; } 16.1%, 44.9% { opacity: 0; } 45%, 49% { opacity: 1; } 49.1%, 77.9% { opacity: 0; } 78%, 82% { opacity: 1; } 82.1%, 100% { opacity: 0; } }
@keyframes ed-live { 0%, 15.9% { opacity: 0; } 16%, 31% { opacity: 1; } 31.1%, 48.9% { opacity: 0; } 49%, 64% { opacity: 1; } 64.1%, 81.9% { opacity: 0; } 82%, 97% { opacity: 1; } 97.1%, 100% { opacity: 0; } }
@keyframes ed-bn { 0%, 13% { height: 0; } 16%, 97% { height: 42px; } 99.5%, 100% { height: 0; } }
@keyframes ed-hl1 { 0%, 12% { opacity: 0; } 14%, 28% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes ed-hl2 { 0%, 45% { opacity: 0; } 47%, 61% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes ed-hl3 { 0%, 78% { opacity: 0; } 80%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ed-old { 0%, 48% { opacity: 1; transform: none; } 50%, 97% { opacity: 0; transform: translateY(-6px); } 99%, 100% { opacity: 1; transform: none; } }
@keyframes ed-new { 0%, 48% { opacity: 0; transform: translateY(6px); } 50%, 97% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes ed-add { 0%, 81% { opacity: 0; transform: scale(.9); } 84%, 97% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes ed-cur1 { 0%, 9% { opacity: 0; transform: translate(60px, 50px); } 12% { opacity: 1; transform: translate(0, 0); } 14% { transform: scale(.85); } 15%, 26% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; } }
@keyframes ed-cur2 { 0%, 42% { opacity: 0; transform: translate(60px, 50px); } 45% { opacity: 1; transform: translate(0, 0); } 47% { transform: scale(.85); } 48%, 59% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; } }
@keyframes ed-cur3 { 0%, 75% { opacity: 0; transform: translate(60px, 50px); } 78% { opacity: 1; transform: translate(0, 0); } 80% { transform: scale(.85); } 81%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@media (max-width: 640px) {
.ed { margin-top: 40px; }
.ed-win { box-shadow: 0 0 0 1px var(--line), 8px 8px 0 0 var(--sun); }
.ed-bn { font-size: 12px; } .ed-bn > span { padding: 0 70px 0 10px; }
@keyframes ed-bn { 0%, 13% { height: 0; } 16%, 97% { height: 36px; } 99.5%, 100% { height: 0; } }
.ed-pill { font-size: 11px; padding: 4px 8px; }
.ed-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 10px 34px; }
.ed-strip .ed-item:first-child { display: none; }
.ed-item { min-height: 38px; padding: 0 10px; font-size: 12px; } .ed-item b { font-size: 11px; }
.ed-add-in i { font-size: 9px; padding: 1px 4px; }
.ed-bar { width: calc(100% - 20px); min-height: 50px; margin-top: -22px; font-size: 12.5px; gap: 8px; padding: 0 10px 0 12px; }
.ed-st { font-size: 12px; } .ed-wait { font-size: 0; } .ed-wait .sw-dots { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.ed-bn { animation: none; height: 42px; }
.ed-old { animation: none; opacity: 0; } .ed-new { animation: none; opacity: 1; }
.ed-add-in { animation: none; opacity: 1; }
.ed-bn::after, .ed-bn::before, .ed-pill::after, .ed-pill::before, .ed-add::after, .ed-add::before, .ed-cur { animation: none; opacity: 0; }
.ed-q1 { animation: none; width: auto; opacity: 1; } .ed-q2, .ed-q3 { animation: none; }
.ed-wait { animation: none; } .ed-live { animation: none; opacity: 1; } .ed-caret { animation: none; }
}
.ms { background: #ffffff; color: #002020; }
.ms-nav { display: flex; align-items: center; gap: 28px; padding: 18px 32px; border-bottom: 1px solid #ece8da; }
.ms-logo { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.ms-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 600; color: #46605c; }
.ms-btn { padding: 9px 16px; border-radius: 8px; background: var(--ms, #002020); color: #ffffff; font-size: 13.5px; font-weight: 700; }
.ms-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 36px; align-items: center; padding: 32px 32px 8px; }
.ms-copy { display: grid; gap: 14px; align-content: center; }
.ms-h { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 3.4vw, 50px); line-height: .98; letter-spacing: -0.04em; color: #002020; }
.ms-sub { margin: 0; max-width: 26em; font-size: 16px; line-height: 1.5; color: #46605c; }
.ms .ed-pill { margin-top: 4px; padding: 7px 12px; font-size: 13px; background: color-mix(in srgb, var(--ms, #002020) 10%, #ffffff); color: #002020; }
.ms .ed-new { color: var(--ms, #0f6b5c); }
.ms-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: #ece8da; }
.ms-media img, .ms-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-media img.push { transform-origin: 40% 60%; animation: hm-push 14s ease-in-out infinite alternate; }
.ms .ed-strip { padding: 24px 32px 54px; gap: 14px; background: transparent; }
.ms-card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px; box-sizing: border-box; border-radius: 12px; border: 1px solid #ece8da; background: #faf8f2; }
.ms-th { flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: 8px; background: #ece8da; }
.ms-th img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(2.2); }
.ms-ct { display: grid; gap: 2px; min-width: 0; }
.ms-ct b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-ct > span { font-family: var(--font-mono); font-size: 12px; color: #46605c; }
.ms-ct b i { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; background: #fbbc00; color: #002020; }
.ms .ed-add { background: transparent; border-color: transparent; outline: 2px dashed #cfc8b3; outline-offset: -2px; }
.ms .ed-add-in { display: flex; align-items: center; gap: 12px; width: 100%; }
.ms .ed-pill::before { top: -26px; }
@media (max-width: 1000px) {
.ms-hero { gap: 24px; padding: 24px 24px 4px; }
.ms-nav { padding: 14px 24px; }
.ms .ed-strip { padding: 20px 24px 50px; }
}
@media (max-width: 640px) {
.ms-nav { gap: 10px; padding: 10px 12px; }
.ms-logo { font-size: 16px; }
.ms-links { display: none; }
.ms-btn { margin-left: auto; padding: 6px 10px; font-size: 11.5px; }
.ms-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px 12px 0; }
.ms-media { order: -1; aspect-ratio: 16 / 9; border-radius: 10px; }
.ms-h { font-size: 24px; }
.ms-sub { display: none; }
.ms .ed-pill { font-size: 11px; padding: 5px 9px; }
.ms .ed-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 12px 36px; }
.ms .ed-strip .ms-card:first-child { display: none; }
.ms-card { min-height: 52px; gap: 8px; padding: 6px; }
.ms-th { width: 38px; height: 38px; }
.ms-ct b { font-size: 12px; } .ms-ct > span { font-size: 10.5px; }
.ms .ed-add-in { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ms-media img.push { animation: none; } }
.ms-media { aspect-ratio: 3 / 2; }
.ms .ed-pill { margin-top: 16px; }
.ms-sub { max-width: 30em; }
@media (max-width: 640px) { .ms-media { aspect-ratio: 16 / 9; } .ms .ed-pill { margin-top: 4px; } }
.in-asks-sec, .in-how { padding-top: 140px; }
.in-ba { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch; }
.in-ba-col { padding: 36px; border-radius: var(--radius-lg); }
.in-ba-old { border: 1px solid var(--line); background: var(--surface-raised); }
.in-ba-new { background: var(--sun); color: var(--on-sun); box-shadow: 10px 10px 0 0 var(--lagoon); }
.in-ba-k { margin: 0 0 22px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.in-ba-old .in-ba-k { color: var(--flare); }
.in-ba-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.in-ba-col li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -0.02em; }
.in-ba-new li { border-top-color: rgba(0, 32, 32, .18); }
.in-ba-old li { color: var(--ink-muted); }
.in-ba-i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%; }
.in-ba-old .in-ba-i { background: var(--flare-soft); color: var(--flare); }
.in-ba-new .in-ba-i { background: var(--on-sun); color: var(--sun); }
.in-ba-i svg { width: 15px; height: 15px; }
.in-ba-arrow { display: grid; place-items: center; color: var(--sun); }
.in-ba-arrow svg { width: 34px; height: 34px; }
.in-asks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.in-asks-side { position: sticky; top: 120px; display: grid; gap: 24px; }
.in-asks-side .hm-lead { margin: 0; }
.in-asks-stat { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 0; }
.in-asks-stat b { font-family: var(--font-display); font-weight: 900; font-size: 88px; line-height: .8; color: var(--sun); }
.in-asks-stat span { font-size: 17px; color: var(--ink-muted); max-width: 9em; }
.in-chat { overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line-strong); }
.in-chat-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.in-chat-top > span:last-child { display: grid; line-height: 1.25; }
.in-chat-top b { font-size: 15px; } .in-chat-top i { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.in-chat-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); color: var(--on-sun); font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 14px; }
.in-chat-body { display: grid; gap: 10px; padding: 22px 20px 26px; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 18px 18px; }
.in-msg { max-width: 84%; padding: 11px 15px; border-radius: 14px; font-size: 15px; line-height: 1.4; }
.in-msg-you { justify-self: end; background: var(--sun); color: var(--on-sun); font-family: var(--font-mono); font-size: 14px; border-bottom-right-radius: 4px; }
.in-msg-ai { justify-self: start; display: flex; align-items: center; gap: 10px; background: var(--surface-sunken); color: var(--ink-muted); border: 1px solid var(--line); border-bottom-left-radius: 4px; margin-bottom: 8px; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.in-msg { animation: in-msg linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
@keyframes in-msg { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
} }
.in-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 16px; }
.in-bt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 26px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); overflow: hidden; transition: border-color 200ms, transform 200ms; }
.in-bt:hover { border-color: var(--sun); transform: translateY(-3px); }
.in-bt h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.02em; }
.in-bt p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-muted); max-width: 30em; }
.in-bt-n { position: absolute; top: 22px; right: 24px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--sun-ink); }
.in-bt-big { grid-column: 1 / span 2; grid-row: 1 / span 2; min-height: 420px; border: 0; background: var(--lagoon); color: #ffffff; }
.in-bt-big h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1; } .in-bt-big p { color: rgba(255,255,255,.86); font-size: 17px; }
.in-bt-big .in-bt-n { z-index: 1; color: var(--sun); }
.in-bt-img { position: absolute; inset: 0; }
.in-bt-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms; }
.in-bt-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,32,32,0) 30%, rgba(0,32,32,.92) 100%); }
.in-bt-big:hover .in-bt-img img { transform: scale(1.04); }
.in-bt-big h3, .in-bt-big p { position: relative; z-index: 1; }
.in-bento .in-bt:nth-child(5) { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
.in-bento .in-bt:nth-child(5) p { color: rgba(0,32,32,.8); } .in-bento .in-bt:nth-child(5) .in-bt-n { color: var(--on-sun); }
.in-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.in-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "vis vis" "mark copy"; gap: 22px 18px; align-items: start; padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); view-timeline-name: --hws; }
.in-step .hw-vis { grid-area: vis; min-height: 200px; max-width: none; }
.in-step .hw-mark { grid-area: mark; width: 56px; height: 56px; }
.in-step .hw-num { font-size: 20px; box-shadow: none; }
.in-step .hw-copy { grid-area: copy; padding-top: 0; gap: 8px; }
.in-step .hw-title { font-size: clamp(30px, 3vw, 44px); }
.in-step .hw-text { font-size: 17px; }
.in-cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 72px; align-items: center; }
.in-cost-copy { display: grid; gap: 22px; justify-items: start; }
.in-cost-copy .hm-lead { margin: 0; }
.in-cost-copy .hm-list { margin: 0; width: 100%; }
.in-cost-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.in-receipt { position: relative; padding: 30px 30px 40px; background: #fbf8ef; color: #002020; font-family: var(--font-mono); transform: rotate(1.5deg); box-shadow: 14px 14px 0 0 var(--sun); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%; }
.in-rc-head { display: grid; gap: 4px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 2px dashed #cfc8b3; text-align: center; }
.in-rc-head b { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 24px; letter-spacing: -0.02em; }
.in-rc-head span { font-size: 12px; color: #46605c; text-transform: uppercase; letter-spacing: .08em; }
.in-rc-lines { list-style: none; margin: 0; padding: 0; }
.in-rc-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; font-size: 13.5px; line-height: 1.35; }
.in-rc-lines li span { font-family: var(--font-sans); font-size: 14.5px; }
.in-rc-lines b { white-space: nowrap; font-weight: 600; }
.in-rc-sum { display: flex; justify-content: space-between; padding: 14px 0 10px; margin-top: 8px; border-top: 2px dashed #cfc8b3; font-size: 14px; }
.in-rc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; margin: 4px -16px 0; background: #002020; color: #fbbc00; border-radius: 6px; }
.in-rc-total span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #ffffff; }
.in-rc-total b { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.03em; white-space: nowrap; }
.in-rc-foot { margin: 14px 0 0; text-align: center; font-size: 12px; color: #46605c; }
@media (max-width: 1000px) {
.in-ba { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.in-ba-arrow { transform: rotate(90deg); height: 40px; }
.in-asks { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.in-asks-side { position: static; }
.in-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-bt-big { grid-column: 1 / -1; grid-row: auto; min-height: 340px; }
.in-steps { grid-template-columns: minmax(0, 1fr); }
.in-cost { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.in-receipt { max-width: 480px; }
}
@media (max-width: 640px) {
.in-asks-sec, .in-how { padding-top: 88px; }
.in-ba-col { padding: 24px 20px; }
.in-ba-new { box-shadow: 6px 6px 0 0 var(--lagoon); }
.in-ba-col li { font-size: 18px; padding: 14px 0; }
.in-asks-stat b { font-size: 64px; }
.in-chat-body { padding: 16px 12px 20px; }
.in-msg { max-width: 92%; font-size: 14px; } .in-msg-you { font-size: 13px; }
.in-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
.in-bt { padding: 22px 20px; min-height: 0; }
.in-bt-big { min-height: 300px; }
.in-step { padding: 14px; grid-template-columns: 44px minmax(0, 1fr); gap: 16px 14px; }
.in-step .hw-mark { width: 44px; height: 44px; }
.in-receipt { padding: 22px 18px 34px; transform: none; box-shadow: 8px 8px 0 0 var(--sun); }
.in-rc-total { margin: 4px -8px 0; padding: 12px; }
.in-cost-copy .in-price-cta { width: 100%; }
}
.in-receipt { box-shadow: none; transform: none; }
.in-rc-wrap { transform: rotate(1.5deg); filter: drop-shadow(14px 14px 0 #fbbc00); }
.in-cost .hm-slab-tag { background: var(--sun); color: var(--on-sun); }
@media (max-width: 1000px) { .in-rc-wrap { max-width: 480px; } }
@media (max-width: 640px) { .in-rc-wrap { transform: none; filter: drop-shadow(8px 8px 0 #fbbc00); } }
.st-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
.st-hero .in-h1 { max-width: 15ch; }
.st-stats { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-stats li { display: grid; gap: 6px; padding: 26px 24px; border-left: 1px solid var(--line); }
.st-stats li:first-child { border-left: 0; padding-left: 0; }
.st-stats b { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -0.04em; color: var(--sun); line-height: 1; }
.st-stats span { font-size: 15px; color: var(--ink-muted); line-height: 1.4; }
.st-sec { padding-top: 140px; }
.st-kick { margin: 0 0 18px; font-family: var(--font-mono); font-size: 14px; color: var(--sun-ink); }
.st-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.st-split-copy .hm-h2 { margin-bottom: 24px; }
.st-split-copy .hm-lead { margin: 0; }
.st-split-copy .hm-list { margin: 28px 0 0; }
.st-split-rev .st-split-copy { order: 2; }
.st-term-dots { display: inline-flex; gap: 6px; } .st-term-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3c5f5c; }
.st-board { border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: var(--surface-raised); overflow: hidden; }
.st-board-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); }
.st-board-tag { padding: 3px 9px; border-radius: 999px; background: var(--sun-soft); color: var(--sun-ink); font-size: 11.5px; }
.st-tks { list-style: none; margin: 0; padding: 8px 12px; }
.st-tk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 8px; border-bottom: 1px dashed var(--line); }
.st-tk:last-child { border-bottom: 0; }
.st-tk-id { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.st-tk-t { font-size: 15.5px; font-weight: 600; }
.st-tk-st { position: relative; display: grid; justify-items: end; font-family: var(--font-mono); font-size: 12px; }
.st-tk-st > * { grid-area: 1 / 1; }
.st-tk-st s { color: var(--flare); text-decoration-thickness: 2px; }
.st-board-foot { margin: 0; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-sunken); font-family: var(--font-mono); font-size: 12.5px; color: var(--mint); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.st-tk { view-timeline-name: --tk; }
.st-tk-t { animation: st-done linear both; animation-timeline: --tk; animation-range: cover 30% cover 45%; }
.st-tk-st s { animation: st-out linear both; animation-timeline: --tk; animation-range: cover 30% cover 45%; }
.st-tk-st .sw-tag { animation: st-in linear both; animation-timeline: --tk; animation-range: cover 38% cover 50%; }
@keyframes st-done { to { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--mint); } }
@keyframes st-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes st-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
} }
@supports not (animation-timeline: view()) { .st-tk-st s { display: none; } }
@media (prefers-reduced-motion: reduce) { .st-tk-st s { display: none; } }
.st-log-wrap { border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: #001717; overflow: hidden; }
.st-log-head, .st-code-top { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.st-log { list-style: none; margin: 0; padding: 12px 28px 28px; }
.st-log-i { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px dashed var(--line); }
.st-log-i:last-child { border-bottom: 0; }
.st-log-v { align-self: start; justify-self: start; padding: 4px 10px; border-radius: 6px; background: var(--sun); color: var(--on-sun); font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.st-log-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; }
.st-log-when { grid-column: 2; grid-row: 1; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.st-log-q { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--font-mono); font-size: 16px; color: var(--ink); }
.st-log-q span { color: var(--sun); }
.st-log-r { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--ink-muted); }
.st-code { margin: 0; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: #001717; overflow: hidden; box-shadow: 14px 14px 0 0 var(--sun); }
.st-code pre { margin: 0; padding: 24px 26px 28px; overflow-x: auto; font-family: var(--font-mono); font-size: 15px; line-height: 1.75; color: var(--ink); }
.st-k { color: #7dd3c0; } .st-s { color: #fbbc00; } .st-n { color: #ff8a65; } .st-c { color: #5f817d; font-style: italic; }
.st-gantt { border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 28px; background: var(--surface-raised); }
.st-gantt-scale, .st-wk { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.st-gantt-scale { padding-bottom: 14px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.st-wks { list-style: none; margin: 0; padding: 0; }
.st-wk { row-gap: 6px; column-gap: 0; padding: 18px 0; border-bottom: 1px dashed var(--line); }
.st-wk:last-child { border-bottom: 0; }
.st-wk > * { grid-column: var(--s) / calc(var(--e) + 1); }
.st-wk-w { font-family: var(--font-mono); font-size: 12px; color: var(--sun-ink); }
.st-wk b { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.st-wk-bar { height: 12px; border-radius: 3px; background: var(--sun); transform: skewX(-10deg); transform-origin: left; }
.st-wk:nth-child(3) .st-wk-bar { background: var(--mint); } .st-wk:nth-child(4) .st-wk-bar { background: #ffffff; }
.st-wk p { margin: 0; padding-right: 16px; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.st-wk-bar { animation: st-bar linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
@keyframes st-bar { from { transform: skewX(-10deg) scaleX(0); } to { transform: skewX(-10deg) scaleX(1); } }
} }
@media (max-width: 1000px) {
.st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-stats li:nth-child(3) { border-left: 0; padding-left: 0; }
.st-stats li:nth-child(n+3) { border-top: 1px solid var(--line); }
.st-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.st-split-rev .st-split-copy { order: 0; }
.st-wk > * { grid-column: 1 / -1; }
.st-wk-bar { width: calc((var(--e) - var(--s) + 1) * 12.5%); margin-left: calc((var(--s) - 1) * 12.5%); }
}
@media (max-width: 640px) {
.st-sec { padding-top: 88px; }
.st-stats { margin-top: 48px; }
.st-stats li { padding: 18px 14px; } .st-stats li:nth-child(odd) { padding-left: 0; }
.st-stats span { font-size: 13.5px; }
.st-tk { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
.st-tk-id { grid-column: 1 / -1; }
.st-tk-t { font-size: 14.5px; }
.st-log { padding: 6px 16px 18px; }
.st-log-i { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.st-log-b { grid-template-columns: minmax(0, 1fr); }
.st-log-when, .st-log-q { grid-column: 1; grid-row: auto; }
.st-log-q { font-size: 14px; }
.st-code { box-shadow: 8px 8px 0 0 var(--sun); }
.st-code pre { padding: 18px 16px 20px; font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.st-gantt { padding: 18px 16px; }
.st-gantt-scale span:nth-child(even) { visibility: hidden; }
}
@property --lm1 { syntax: '<integer>'; inherits: false; initial-value: 42; }
@property --lm2 { syntax: '<integer>'; inherits: false; initial-value: 318; }
.lm { position: absolute; inset: 0; container-type: inline-size; display: flex; flex-direction: column; gap: 2.4cqw; padding: 3.6cqw 4cqw; background: linear-gradient(160deg, #ffffff, #f3f0fb); color: #1b1530; font-family: var(--font-body); }
.lm-top { display: flex; align-items: center; justify-content: space-between; font-size: 3.6cqw; }
.lm-top b { font-weight: 700; }
.lm-live { display: inline-flex; align-items: center; gap: 1.5cqw; padding: .8cqw 2.4cqw; border-radius: 99px; background: #ece6ff; color: var(--ms); font-family: var(--font-mono); font-size: 2.8cqw; font-weight: 600; text-transform: uppercase; }
.lm-live i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--ms); animation: lm-ping 1.6s ease-out infinite; }
.lm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; }
.lm-kpis > span { display: grid; gap: .6cqw; padding: 1.8cqw 2.4cqw; border-radius: 2.2cqw; background: #ffffff; border: 1px solid #e4def5; }
.lm-kpis small { font-size: 2.6cqw; color: #6b6585; }
.lm-kpis b { font-family: var(--font-display); font-weight: 800; font-size: 4.8cqw; letter-spacing: -0.03em; line-height: 1.05; }
.lm-kpis em { font-style: normal; font-family: var(--font-mono); font-size: 2.5cqw; color: #12805c; }
.lm-kpis em.lm-dn { color: #12805c; }
.lm-n1 { counter-reset: a var(--lm1); animation: lm-c1 6s ease-in-out infinite; } .lm-n1::before { content: "$" counter(a) "k"; }
.lm-n2 { counter-reset: b var(--lm2); animation: lm-c2 6s ease-in-out infinite; } .lm-n2::before { content: counter(b); }
.lm-chart { position: relative; flex: 1 1 auto; min-height: 10cqw; }
.lm-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lm-grid { stroke: #e4def5; stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.lm-area { fill: var(--ms); opacity: .12; animation: lm-fade 6s ease-in-out infinite; }
.lm-line { fill: none; stroke: var(--ms); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lm-draw 6s ease-in-out infinite; }
.lm-bars { flex: none; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 1.6cqw; height: 6cqw; }
.lm-top, .lm-kpis { flex: none; }
.lm-bars i { height: var(--h); border-radius: 1cqw 1cqw 0 0; background: #cfc4f5; transform-origin: bottom; animation: lm-bar 6s ease-in-out infinite; }
.lm-bars i:last-child { background: var(--ms); }
.lm-bars i:nth-child(2) { animation-delay: .1s; } .lm-bars i:nth-child(3) { animation-delay: .2s; } .lm-bars i:nth-child(4) { animation-delay: .3s; } .lm-bars i:nth-child(5) { animation-delay: .4s; } .lm-bars i:nth-child(6) { animation-delay: .5s; } .lm-bars i:nth-child(7) { animation-delay: .6s; }
@keyframes lm-draw { 0% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lm-fade { 0%, 20% { opacity: 0; } 50%, 85% { opacity: .12; } 100% { opacity: 0; } }
@keyframes lm-bar { 0% { transform: scaleY(.15); } 40%, 88% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }
@keyframes lm-c1 { 0% { --lm1: 42; } 45%, 100% { --lm1: 48; } }
@keyframes lm-c2 { 0% { --lm2: 318; } 45%, 100% { --lm2: 344; } }
@keyframes lm-ping { 0% { box-shadow: 0 0 0 0 rgba(91, 60, 196, .5); } 100% { box-shadow: 0 0 0 2.4cqw rgba(91, 60, 196, 0); } }
@container (max-width: 380px) { .lm-bars { display: none; } .lm-kpis > .lm-k3 { display: none; } .lm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-th-ic { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; padding: 10px 9px; background: #ece6ff; }
.ms-th-ic i { border-radius: 2px; background: var(--ms); height: 40%; }
.ms-th-ic i:nth-child(2) { height: 75%; opacity: .6; } .ms-th-ic i:nth-child(3) { height: 100%; }
.ms-th-ic2 { background: #fff1e0; } .ms-th-ic2 i { background: #e8590c; height: 55%; } .ms-th-ic2 i:nth-child(2) { height: 100%; opacity: 1; } .ms-th-ic2 i:nth-child(3) { height: 55%; }
.ms-th-ic3 { background: #e3f6ee; } .ms-th-ic3 i { background: #12805c; height: 30%; } .ms-th-ic3 i:nth-child(2) { height: 100%; opacity: 1; } .ms-th-ic3 i:nth-child(3) { height: 30%; }
@media (prefers-reduced-motion: reduce) { .lm *, .lm *::before { animation: none !important; } .lm-line { stroke-dashoffset: 0; } .lm-area { opacity: .12; } }
.st-wk > :not(.st-wk-bar) { grid-column: var(--s) / -1; max-width: 42ch; }
.st-gantt-scale span { white-space: nowrap; }
@media (max-width: 1000px) { .st-wk > :not(.st-wk-bar) { grid-column: 1 / -1; } }
.pr-h1 { max-width: 13ch; }
.pr-facts { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pr-facts li { display: grid; gap: 6px; padding: 26px 24px; border-left: 1px solid var(--line); }
.pr-facts li:first-child { border-left: 0; padding-left: 0; }
.pr-facts b { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -0.04em; line-height: 1; color: var(--sun); }
.pr-facts span { font-size: 15px; line-height: 1.4; color: var(--ink-muted); }
.pr .pr-calc { padding-top: 140px; }
.pr .pr-calc .hm-head { margin-bottom: 48px; }
.pr-exs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hm a.pr-ex { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); text-decoration: none; transition: border-color 150ms, transform 200ms; }
.hm a.pr-ex:hover { border-color: var(--sun); transform: translateY(-4px); color: var(--ink); }
.pr-ex-img { aspect-ratio: 4 / 3; overflow: hidden; }
.pr-ex-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms; }
.pr-ex:hover .pr-ex-img img { transform: scale(1.05); }
.pr-ex-b { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; }
.pr-ex-k { font-family: var(--font-mono); font-size: 13px; color: var(--sun-ink); }
.pr-ex-p { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.035em; line-height: 1.05; white-space: nowrap; }
.pr-ex-m { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.pr-ex-t { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.pr-ex-go { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--sun); }
.pr-cmp-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); }
.pr-cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16px; }
.pr-cmp th, .pr-cmp td { padding: 20px 24px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.pr-cmp tbody tr:last-child th, .pr-cmp tbody tr:last-child td { border-bottom: 0; }
.pr-cmp thead th { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.pr-cmp tbody th { width: 22%; font-weight: 600; color: var(--ink-muted); font-size: 15px; }
.pr-cmp td { color: var(--ink); }
.pr-cmp td { white-space: normal; }
.pr-cmp td > span:last-child { vertical-align: middle; }
.pr-cmp .pr-us { background: rgba(251, 188, 0, .08); box-shadow: inset 2px 0 0 var(--sun), inset -2px 0 0 var(--sun); }
.pr-cmp thead .pr-us { box-shadow: inset 2px 0 0 var(--sun), inset -2px 0 0 var(--sun), inset 0 2px 0 var(--sun); }
.pr-cmp tbody tr:last-child .pr-us { box-shadow: inset 2px 0 0 var(--sun), inset -2px 0 0 var(--sun), inset 0 -2px 0 var(--sun); }
.pr-us-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--sun); color: var(--on-sun); font-size: 15px; }
.pr-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; vertical-align: middle; font-weight: 800; font-size: 15px; line-height: 1; }
.pr-ic svg { width: 14px; height: 14px; }
.pr-yes { background: var(--sun); color: var(--on-sun); }
.pr-no { background: rgba(255, 107, 87, .16); color: var(--flare); }
.pr-mid { background: rgba(255, 255, 255, .08); color: var(--ink-faint); }
.pr-src { margin: 16px 0 0; font-size: 13px; color: var(--ink-faint); }
.pr-hrs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.pr-hrs-copy .hm-h2 { margin-bottom: 24px; }
.pr-hrs-copy .hm-lead { margin: 0; }
.pr-hrs-copy .hm-list { margin: 28px 0 0; }
.pr-rp { margin: 0; padding: 22px; border-radius: var(--radius-lg); background: #0b141a; border: 1px solid var(--line-strong); box-shadow: 14px 14px 0 0 var(--sun); }
.pr-rp-top { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pr-rp-top > span:last-child { display: grid; gap: 2px; }
.pr-rp-top b { font-size: 15px; } .pr-rp-top small { font-size: 12.5px; color: var(--ink-faint); }
.pr-rp-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); color: var(--on-sun); font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 15px; }
.pr-rp-msg { position: relative; margin-top: 18px; padding: 18px 20px 14px; border-radius: 4px 16px 16px 16px; background: #1f2c33; }
.pr-rp-h { margin: 0 0 10px; font-weight: 700; font-size: 16px; }
.pr-rp-l { list-style: none; margin: 0; padding: 0; }
.pr-rp-l li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); font-size: 15px; }
.pr-rp-d { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.pr-rp-l b, .pr-rp-sum b { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pr-rp-sum { display: flex; justify-content: space-between; padding: 12px 0 14px; font-weight: 700; }
.pr-rp-sum b { color: var(--sun); font-size: 15px; }
.pr-rp-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pr-rp-bar i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--sun); transform-origin: left; }
.pr-rp-foot { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-muted); }
.pr-rp-foot b { color: var(--ink); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.pr-rp-bar i { animation: pr-bar linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
@keyframes pr-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
} }
.pr-afs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pr-af { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); }
.pr-af:first-child { background: var(--sun); color: var(--on-sun); border-color: var(--sun); }
.pr-af-k { font-family: var(--font-mono); font-size: 13px; color: var(--sun-ink); }
.pr-af:first-child .pr-af-k { color: var(--on-sun); opacity: .75; }
.pr-af-p { font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 2.8vw, 42px); letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.pr-af p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.pr-af:first-child p { color: var(--on-sun); opacity: .85; }
@media (max-width: 1100px) {
.pr-exs, .pr-afs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-facts li:nth-child(3) { border-left: 0; padding-left: 0; }
.pr-facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
.pr-hrs { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 640px) {
.pr-facts { margin-top: 48px; }
.pr-facts li { padding: 18px 14px; } .pr-facts li:nth-child(odd) { padding-left: 0; }
.pr-facts span { font-size: 13.5px; }
.pr .pr-calc { padding-top: 88px; }
.pr .pr-calc .hm-head { margin-bottom: 32px; }
.pr-exs, .pr-afs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pr-cmp { min-width: 0; font-size: 14px; }
.pr-cmp thead { display: none; }
.pr-cmp, .pr-cmp tbody, .pr-cmp tr, .pr-cmp th, .pr-cmp td { display: block; width: auto; }
.pr-cmp tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.pr-cmp tbody tr:last-child { border-bottom: 0; }
.pr-cmp th, .pr-cmp td { padding: 6px 0; border: 0 !important; box-shadow: none !important; background: none !important; }
.pr-cmp tbody th { width: auto; padding-bottom: 8px; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); }
.pr-cmp td { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
.pr-cmp td .pr-ic { margin: 0; }
.pr-cmp td::after { grid-column: 2; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
.pr-cmp td:nth-of-type(1)::after { content: "SellWell Studio"; color: var(--sun-ink); }
.pr-cmp td:nth-of-type(2)::after { content: "Typical agency"; }
.pr-cmp td:nth-of-type(3)::after { content: "DIY site builder"; }
.pr-rp { padding: 16px; box-shadow: 8px 8px 0 0 var(--sun); }
.pr-rp-msg { padding: 14px 14px 12px; }
.pr-rp-l li { grid-template-columns: 32px minmax(0, 1fr) auto; font-size: 14px; }
}
.pr .pr-ex-sec, .pr .pr-cmp-sec, .pr .pr-hrs-sec, .pr .pr-af-sec { padding-top: 140px; }
@media (max-width: 640px) { .pr .pr-ex-sec, .pr .pr-cmp-sec, .pr .pr-hrs-sec, .pr .pr-af-sec { padding-top: 88px; } }
.ft-top { grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1100px) { .ft-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 40px; }
.cmp-more-h { margin: 0; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.cmp-more-l { display: flex; flex-wrap: wrap; gap: 10px; }
.hm .cmp-more-l a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid currentColor; color: inherit; font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color 150ms, color 150ms; }
.hm .cmp-more-l a svg { width: 16px; height: 16px; }
.hm .cmp-more-l a:hover { background: #002020; border-color: #002020; color: #fbbc00; }
.cp-h1 { max-width: 14ch; }
.cp-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 72px; }
.cp-pick-c { padding: 30px 32px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); }
.cp-pick-us { background: var(--sun); color: var(--on-sun); border-color: var(--sun); }
.cp-pick-h { margin: 0 0 16px; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.cp-pick .hm-list { margin: 0; }
.cp-pick-us .hm-list li { border-color: rgba(0, 32, 32, .18); }
.cp-pick-us .hm-list svg { color: var(--on-sun); }
.cp .cp-race-sec, .cp .cp-tab-sec, .cp .cp-cost-sec, .cp .cp-sw-sec, .cp .cp-oth-sec { padding-top: 140px; }
.cp-race { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.cp-lane { padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); }
.cp-lane-us { display: flex; flex-direction: column; gap: 16px; border-color: var(--sun); box-shadow: 10px 10px 0 0 var(--sun); }
.cp-lane-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 20px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
.cp-lane-h b { font-family: var(--font-display); font-weight: 900; font-size: 28px; letter-spacing: -0.03em; color: var(--ink); }
.cp-lane-us .cp-lane-h { margin: 0 0 4px; }
.cp-lane-us .cp-lane-h b { color: var(--sun); }
.cp-sts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cp-st { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); border: 1px dashed var(--line-strong); font-size: 16px; }
.cp-st-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); }
.cp-msg { padding: 16px 18px; border-radius: 16px 16px 4px 16px; background: var(--sun); color: var(--on-sun); }
.cp-msg-k { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11.5px; opacity: .7; }
.cp-msg p { margin: 0; font-family: var(--font-mono); font-size: 17px; font-weight: 600; }
.cp-done { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
.cp-st { animation: cp-step 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
.cp-msg { animation: cp-pop 9s ease-in-out infinite; }
.cp-done { animation: cp-done 9s ease-in-out infinite; }
@keyframes cp-step { 0% { opacity: .35; border-style: dashed; } 8%, 92% { opacity: 1; border-style: solid; border-color: var(--line-strong); } 100% { opacity: .35; } }
@keyframes cp-pop { 0% { opacity: 0; transform: translateY(8px); } 5%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cp-done { 0%, 9% { opacity: 0; transform: scale(.9); } 13%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
}
.cp-tab { min-width: 0; }
.cp-tab thead th, .cp-tab td { width: 39%; }
.cp-costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cp-cost { padding: 30px 32px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); }
.cp-cost-us { border-color: var(--sun); }
.cp-cost-h { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.cp-cost-us .cp-cost-h { color: var(--sun); }
.cp-cost ul { list-style: none; margin: 0; padding: 0; }
.cp-cost li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.cp-cost li:last-child { border-bottom: 0; }
.cp-cost li > span { display: grid; gap: 3px; font-weight: 600; font-size: 16px; }
.cp-cost small { font-weight: 400; font-size: 14px; color: var(--ink-faint); line-height: 1.4; }
.cp-cost li b { flex: none; font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; white-space: nowrap; }
.cp-cost .in-cost-link { margin-top: 16px; }
.cp-sw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 56px; border-radius: var(--radius-lg); background: var(--sun); color: var(--on-sun); }
.cp-sw .hm-h2 { margin: 0; color: var(--on-sun); }
.cp-sw .hm-lead { margin: 0 0 24px; color: var(--on-sun); opacity: .85; }
.cp-oths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hm a.cp-oth { display: grid; gap: 4px; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); text-decoration: none; transition: border-color 150ms, transform 200ms; }
.hm a.cp-oth:hover { border-color: var(--sun); transform: translateY(-4px); color: var(--ink); }
.cp-oth-k { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.cp-oth b { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.cp-oth svg { margin-top: 10px; color: var(--sun); }
@media (max-width: 1100px) {
.cp-race, .cp-costs, .cp-sw { grid-template-columns: minmax(0, 1fr); }
.cp-sw { gap: 20px; padding: 40px; }
.cp-oths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.cp-pick { grid-template-columns: minmax(0, 1fr); margin-top: 48px; gap: 14px; }
.cp-pick-c, .cp-cost { padding: 22px 20px; }
.cp .cp-race-sec, .cp .cp-tab-sec, .cp .cp-cost-sec, .cp .cp-sw-sec, .cp .cp-oth-sec { padding-top: 88px; }
.cp-lane { padding: 20px; }
.cp-lane-us { box-shadow: 6px 6px 0 0 var(--sun); }
.cp-st { padding: 12px 14px; font-size: 15px; }
.cp-sw { padding: 28px 22px; }
.cp-oths { grid-template-columns: minmax(0, 1fr); }
.cp-tab td:nth-of-type(1)::after { content: "SellWell Studio"; }
.cp-tab td:nth-of-type(2)::after { content: attr(data-them); }
.cp-cost li b { font-size: 19px; }
}
.hm .cp-sw a.sw-btn, .hm .cp-sw a.sw-btn:hover { background: #002020; border-color: #002020; color: #ffffff; }
.hm .cp-sw a.sw-btn:hover { background: #003434; }
.cp-lane-us .cp-msg { margin-top: auto; }
.cp-lane-us .cp-done { margin-bottom: auto; }
@media (max-width: 640px) {
.cp-h1 .sw-hl { white-space: normal; }
.cp-h1 .sw-hl-marker { background: var(--sun); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cp-h1 .sw-hl-marker::before { display: none; }
.cp-tab thead th, .cp-tab td { width: auto; }
.cp-cost li { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
}
.hm section.lt { position: relative; background: var(--surface); color: var(--ink); border-image: linear-gradient(var(--surface) 0 0) fill 0 / / 0 100vw; margin-top: 140px; padding-top: 128px !important; padding-bottom: 128px; }
.hm section.lt + section { padding-top: 140px; }
.hm .lt .hm-lead { color: var(--ink-muted); }
@media (max-width: 640px) {
.hm section.lt { margin-top: 88px; padding-top: 72px !important; padding-bottom: 72px; }
.hm section.lt + section { padding-top: 88px; }
}
.cp-oths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cp-oths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cp-oths { grid-template-columns: minmax(0, 1fr); } }
.ft-top { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); }
@media (max-width: 1100px) { .ft-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hm-work-all { display: flex; justify-content: center; margin-top: 56px; }
.wk-h1 { max-width: 12ch; }
.wk .wk-list { padding-top: 96px; }
.wk-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.wk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color 150ms, color 150ms, border-color 150ms; user-select: none; }
.wk-chip b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--ink-faint); }
.wk-chip:hover { border-color: var(--sun); }
.wk-r:checked + .wk-chip { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
.wk-r:checked + .wk-chip b { color: var(--on-sun); opacity: .7; }
.wk-r:focus-visible + .wk-chip { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.wk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 40px; margin-top: 40px; }
.wk-card { display: flex; flex-direction: column; gap: 22px; }
.hm a.wk-shot { display: block; overflow: hidden; border-radius: var(--radius-lg); background: #ffffff; box-shadow: 0 0 0 1px #dcd6c4; transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms; }
.hm a.wk-shot:hover { transform: translate(-4px, -4px); box-shadow: 0 0 0 1px #dcd6c4, 10px 10px 0 0 var(--sun); }
.wk-shot .site-bar { display: flex; }
.wk-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; background: #001717; }
.wk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wk-where { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.wk-name { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -0.035em; line-height: 1; }
.wk-text { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.5; color: var(--ink-muted); }
.hm a.wk-visit { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sun); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.hm a.wk-visit:hover { color: var(--ink); }
.wk-filter:has(#wk-all:checked) .wk-feat { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.wk-filter:has(#wk-all:checked) .wk-feat .wk-name { font-size: clamp(40px, 4.4vw, 64px); }
.wk-filter:has(#wk-all:checked) .wk-feat .wk-body { display: flex; flex-direction: column; gap: 18px; }
.wk-body { display: flex; flex-direction: column; gap: 14px; }
.wk-filter:has(#wk-fin:checked) .wk-card:not([data-cat="fin"]),
.wk-filter:has(#wk-tech:checked) .wk-card:not([data-cat="tech"]),
.wk-filter:has(#wk-pro:checked) .wk-card:not([data-cat="pro"]),
.wk-filter:has(#wk-prop:checked) .wk-card:not([data-cat="prop"]),
.wk-filter:has(#wk-health:checked) .wk-card:not([data-cat="health"]) { display: none; }
@media (prefers-reduced-motion: no-preference) {
.wk-card { animation: wk-in 400ms ease both; }
@keyframes wk-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1000px) {
.wk-filter:has(#wk-all:checked) .wk-feat { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.wk-grid { gap: 56px 24px; }
}
@media (max-width: 640px) {
.wk .wk-list { padding-top: 56px; }
.wk-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: none; }
.wk-chip { flex: none; }
.wk-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-left: 0; margin-right: 0; }
.wk-text { font-size: 16px; }
.hm-work-all { margin-top: 40px; }
}
.hm a.wk-shot, .hm a.wk-shot:hover, .hm a.wk-shot * { text-decoration: none; color: #46605c; }
.hm-svc-row { position: relative; }
.hm a.hm-svc-link { color: inherit; text-decoration: none; }
.hm a.hm-svc-link::after { content: ""; position: absolute; inset: 0; }
.hm a.hm-svc-link:hover, .hm a.hm-svc-link:focus-visible { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--sun-ink); }
.sv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.sv-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.sv-eyebrow-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sun); color: var(--on-sun); }
.sv-h1 { max-width: 13ch; }
.sv-lead { max-width: 38ch; margin-top: 32px; }
.sv-cta { margin-top: 32px; justify-content: flex-start; }
.sv-card { padding: 32px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: 12px 12px 0 0 var(--sun); }
.sv-card-k { margin: 0 0 12px; font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.sv-card-price { display: grid; gap: 4px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.sv-card-price b { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 3.2vw, 46px); letter-spacing: -0.04em; line-height: 1; color: var(--sun); white-space: nowrap; }
.sv-card-price span { font-size: 14px; color: var(--ink-muted); }
.sv-card .hm-list { margin: 0; }
.sv .sv-inc-sec, .sv .sv-steps-sec, .sv .sv-fit-sec, .sv .sv-oth-sec { padding-top: 140px; }
.sv-incs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sv-inc { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.sv-inc-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sun); color: var(--on-sun); }
.sv-inc-ic svg { width: 18px; height: 18px; }
.sv-inc b { margin-top: 8px; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; line-height: 1.15; }
.sv-inc p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-muted); }
.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--sun); }
.sv-step { position: relative; display: grid; gap: 10px; align-content: start; padding: 32px 28px 8px 0; }
.sv-step::before { content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 6px var(--surface); }
.sv-step-n { font-family: var(--font-mono); font-size: 13px; color: var(--sun-ink); }
.sv-step b { font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing: -0.03em; line-height: 1; }
.sv-step p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.sv-nofit .sv-x { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; font-weight: 800; color: var(--flare); }
.sv-fit { margin-top: 0; }
.sv-oths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-oth-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: 12px; background: var(--sun-soft); color: var(--sun-ink); }
@media (max-width: 1100px) {
.sv-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.sv-card { max-width: 480px; }
.sv-incs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}
@media (max-width: 640px) {
.sv .sv-inc-sec, .sv .sv-steps-sec, .sv .sv-fit-sec, .sv .sv-oth-sec { padding-top: 88px; }
.sv-card { padding: 24px 20px; box-shadow: 8px 8px 0 0 var(--sun); }
.sv-incs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sv-inc { padding: 22px 20px; }
.sv-steps { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--sun); margin-left: 8px; row-gap: 8px; }
.sv-step { padding: 4px 0 20px 28px; }
.sv-step::before { top: 4px; left: -9px; }
.sv-oths { grid-template-columns: minmax(0, 1fr); }
}
.sv-h1 { max-width: none; }
.sv-hero-grid { margin-top: 48px; align-items: start; }
.sv-lead { margin-top: 0; }
@media (max-width: 640px) {
.sv-hero-grid { margin-top: 28px; }
.sv-h1 .sw-hl { white-space: normal; }
.sv-h1 .sw-hl-marker { background: var(--sun); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sv-h1 .sw-hl-marker::before { display: none; }
}
@property --sa-n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.sa { position: relative; min-height: 420px; padding: 28px; box-sizing: border-box; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: 12px 12px 0 0 var(--sun); overflow: hidden; font-family: var(--font-sans); }
.sa *, .sa *::before, .sa *::after { animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.sa-win { border-radius: 14px; background: #ffffff; color: #002020; overflow: hidden; box-shadow: 0 18px 40px -18px #000; }
.sa-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #ece8da; border-bottom: 1px solid #dcd6c4; }
.sa-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9c2ad; }
.sa-bar span { margin-left: 8px; padding: 2px 10px; border-radius: 6px; background: #ffffff; font-family: var(--font-mono); font-size: 11px; color: #46605c; }
.sa-page { padding: 18px; }
.sa-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--mint-soft); color: var(--mint); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sa-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sa-msg { position: absolute; left: 28px; right: 28px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #001717; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 14px; color: var(--ink); box-shadow: 0 12px 30px -12px #000; }
.sa-msg > span:first-child::before { content: "› "; color: var(--sun); }
.sa-msg .sa-live { animation-name: sa-pop; }
.aw-nav { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #ece8da; font-size: 12px; font-weight: 600; color: #46605c; }
.aw-nav b { width: 70px; height: 12px; margin-right: auto; border-radius: 4px; background: #002020; }
.aw-nav .aw-new { padding: 2px 8px; border-radius: 6px; background: var(--sun); color: #002020; animation-name: aw-new; }
.aw-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; padding: 18px 0; }
.aw-copy { display: grid; gap: 8px; align-content: center; }
.aw-copy i { display: block; height: 14px; border-radius: 4px; background: #002020; transform-origin: left; }
.aw-copy .aw-l1 { width: 95%; animation-name: aw-l1; } .aw-copy .aw-l2 { width: 70%; animation-name: aw-l2; } .aw-copy .aw-l3 { width: 85%; height: 8px; background: #c9c2ad; animation-name: aw-l3; }
.aw-btn { display: block; width: 90px; height: 26px; margin-top: 6px; border-radius: 6px; background: var(--sun); animation-name: aw-btn; }
.aw-img { min-height: 110px; border-radius: 10px; background: linear-gradient(135deg, #0f5c57, #5ee6c0); animation-name: aw-img; }
.aw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.aw-cards i { height: 56px; border-radius: 8px; background: #f6f3ea; border: 1px solid #ece8da; animation-name: aw-card; }
.aw-cards i:nth-child(2) { animation-name: aw-card2; } .aw-cards i:nth-child(3) { animation-name: aw-card3; }
.aw-msg { animation-name: aw-msg; }
@keyframes aw-l1 { 0%, 4% { transform: scaleX(0); } 10%, 100% { transform: none; } }
@keyframes aw-l2 { 0%, 8% { transform: scaleX(0); } 14%, 100% { transform: none; } }
@keyframes aw-l3 { 0%, 12% { transform: scaleX(0); } 18%, 100% { transform: none; } }
@keyframes aw-btn { 0%, 16% { opacity: 0; transform: scale(.6); } 21%, 100% { opacity: 1; transform: none; } }
@keyframes aw-img { 0%, 6% { opacity: 0; transform: translateY(10px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes aw-card { 0%, 20% { opacity: 0; transform: translateY(10px); } 25%, 100% { opacity: 1; transform: none; } }
@keyframes aw-card2 { 0%, 23% { opacity: 0; transform: translateY(10px); } 28%, 100% { opacity: 1; transform: none; } }
@keyframes aw-card3 { 0%, 26% { opacity: 0; transform: translateY(10px); } 31%, 100% { opacity: 1; transform: none; } }
@keyframes aw-msg { 0%, 38% { opacity: 0; transform: translateY(14px); } 44%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes sa-pop { 0%, 56% { opacity: 0; transform: scale(.7); } 60%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes aw-new { 0%, 56% { opacity: 0; transform: translateY(-6px); max-width: 0; padding: 0; } 60%, 92% { opacity: 1; transform: none; max-width: 80px; padding: 2px 8px; } 98%, 100% { opacity: 0; max-width: 0; padding: 0; } }
.lp-page { display: grid; justify-items: center; gap: 12px; padding: 24px 18px 28px; text-align: center; }
.lp-tag { padding: 3px 10px; border-radius: 999px; background: #fff0c2; color: #8a5a00; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.lp-h { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -0.03em; }
.lp-price { position: relative; display: flex; align-items: baseline; gap: 10px; margin: 0; }
.lp-price s, .lp-price b { font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing: -0.03em; }
.lp-price s { color: #002020; text-decoration-color: transparent; animation-name: lp-old; }
.lp-price b { color: #b23c0b; animation-name: lp-new; }
.lp-price small { font-size: 12px; color: #46605c; animation-name: lp-new; }
.lp-cta { position: relative; padding: 12px 22px; border-radius: 10px; background: var(--sun); color: #002020; font-weight: 800; font-size: 15px; animation-name: lp-cta; }
.lp-cur { position: absolute; right: -14px; bottom: -16px; width: 22px; height: 22px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3l7.5 18 2.6-7.4L21.5 11z' fill='%23002020' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); animation-name: lp-cur; }
.lp-stat { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; font-size: 12px; color: #46605c; }
.lp-n { counter-reset: n var(--sa-n); font-family: var(--font-mono); font-size: 18px; color: #0a6e53; animation-name: lp-n; }
.lp-n::before { content: counter(n); }
.lp-msg { animation-name: lp-msg; }
@keyframes lp-msg { 0%, 4% { opacity: 0; transform: translateY(14px); } 10%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.lp-msg .sa-live { animation-name: lp-live; }
@keyframes lp-live { 0%, 18% { opacity: 0; transform: scale(.7); } 22%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes lp-old { 0%, 20% { text-decoration-color: transparent; opacity: 1; } 24%, 100% { text-decoration-color: #b23c0b; opacity: .45; } }
@keyframes lp-new { 0%, 22% { opacity: 0; transform: translateY(6px); } 27%, 100% { opacity: 1; transform: none; } }
@keyframes lp-cta { 0%, 34%, 40%, 52%, 58%, 70%, 76%, 100% { transform: none; } 37%, 55%, 73% { transform: scale(.94); } }
@keyframes lp-cur { 0%, 28% { opacity: 0; transform: translate(30px, 30px); } 33%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes lp-n { 0%, 30% { --sa-n: 128; } 90%, 100% { --sa-n: 141; } }
.sa-mig { display: flex; flex-direction: column; gap: 18px; }
.mg-sites { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
.mg-site { border-radius: 12px; overflow: hidden; background: #ffffff; box-shadow: 0 14px 30px -16px #000; }
.mg-body { position: relative; display: grid; gap: 7px; padding: 14px; min-height: 84px; align-content: start; }
.mg-body i { display: block; height: 10px; border-radius: 3px; background: #c9c2ad; }
.mg-body i:nth-child(1) { width: 80%; } .mg-body i:nth-child(2) { width: 60%; } .mg-body i:nth-child(3) { width: 70%; }
.mg-from { filter: grayscale(1); animation-name: mg-from; }
.mg-from .mg-body i { background: #b9b4a4; }
.mg-lock { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 6px; background: #fde3d8; color: #b23c0b; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }
.mg-to .mg-body i:nth-child(1) { background: #002020; } .mg-to .mg-body i:nth-child(2) { background: var(--sun); } .mg-to .mg-body i:nth-child(3) { background: #5ee6c0; }
.mg-to { animation-name: mg-to; }
.mg-to .sa-live { position: absolute; right: 10px; bottom: 10px; animation-name: mg-live; }
.mg-flow { display: flex; justify-content: center; gap: 5px; }
.mg-flow i { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); animation-name: mg-dot; animation-duration: 1.2s; }
.mg-flow i:nth-child(2) { animation-delay: .2s; } .mg-flow i:nth-child(3) { animation-delay: .4s; }
.mg-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mg-links li { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: #001717; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; animation-name: mg-row; animation-delay: calc(var(--i) * 1s); }
.mg-old { color: var(--ink-faint); text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-new { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-arr { color: var(--sun); }
.mg-ok { color: var(--mint); font-weight: 700; animation-name: mg-ok; animation-delay: calc(var(--i) * 1s); }
.mg-foot { display: flex; justify-content: space-between; margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); }
.mg-n { counter-reset: n var(--sa-n); color: var(--mint); animation-name: mg-n; } .mg-n::before { content: counter(n) " of 4"; }
@keyframes mg-from { 0%, 10% { opacity: 1; } 40%, 100% { opacity: .55; } }
@keyframes mg-to { 0%, 6% { opacity: 0; transform: translateX(-16px) scale(.96); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes mg-live { 0%, 64% { opacity: 0; transform: scale(.7); } 70%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mg-dot { 0%, 100% { opacity: .25; transform: translateX(-4px); } 50% { opacity: 1; transform: translateX(4px); } }
@keyframes mg-row { 0%, 18% { opacity: .35; } 24%, 94% { opacity: 1; border-color: var(--line-strong); } 100% { opacity: .35; } }
@keyframes mg-ok { 0%, 22% { opacity: 0; transform: scale(.6); } 27%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mg-n { 0%, 22% { --sa-n: 0; } 27% { --sa-n: 1; } 37% { --sa-n: 2; } 47% { --sa-n: 3; } 57%, 94% { --sa-n: 4; } 100% { --sa-n: 0; } }
.sa-ai { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px; }
.ai-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.ai-top b { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; }
.ai-dot { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--mint); animation-name: ai-ping; animation-duration: 1.6s; animation-timing-function: ease-out; }
.ai-chat { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: #001717; border: 1px solid var(--line); }
.ai-chat p { margin: 0; max-width: 92%; padding: 11px 13px; font-size: 14px; line-height: 1.4; }
.ai-u { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--sun); color: var(--on-sun); font-weight: 600; animation-name: ai-u; }
.ai-wait { display: flex; gap: 5px; align-self: flex-start; border-radius: 14px 14px 14px 4px; background: var(--surface-raised); animation-name: ai-wait; }
.ai-wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation-name: mg-dot; animation-duration: 1s; }
.ai-wait i:nth-child(2) { animation-delay: .15s; } .ai-wait i:nth-child(3) { animation-delay: .3s; }
.ai-a { align-self: flex-start; border-radius: 14px 14px 14px 4px; background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink); animation-name: ai-a; }
.ai-a .sa-live { margin-left: 4px; vertical-align: 1px; }
.ai-hours { align-self: start; padding: 16px; border-radius: 14px; background: #ffffff; color: #002020; box-shadow: 0 14px 30px -16px #000; }
.ai-hours p { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 8px 0; border-bottom: 1px dashed #dcd6c4; font-size: 13px; }
.ai-hours p:last-child { border-bottom: 0; }
.ai-hours .ai-hours-h { padding-top: 0; border: 0; font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.ai-mon { display: grid; justify-items: end; } .ai-mon > span { grid-area: 1 / 1; }
.ai-old { animation-name: ai-old; } .ai-new { padding: 0 6px; border-radius: 4px; background: #fde3d8; color: #b23c0b; animation-name: ai-new; }
@keyframes ai-ping { 0% { box-shadow: 0 0 0 0 rgba(94, 230, 192, .6); } 100% { box-shadow: 0 0 0 10px rgba(94, 230, 192, 0); } }
@keyframes ai-u { 0%, 6% { opacity: 0; transform: translateY(10px); } 12%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes ai-wait { 0%, 16% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } 20%, 36% { opacity: 1; max-height: 40px; padding-top: 11px; padding-bottom: 11px; } 40%, 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes ai-a { 0%, 38% { opacity: 0; transform: translateY(10px); } 44%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes ai-old { 0%, 44% { opacity: 1; } 48%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ai-new { 0%, 44% { opacity: 0; transform: scale(.8); } 48%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 640px) {
.sa { min-height: 0; padding: 18px; box-shadow: 8px 8px 0 0 var(--sun); }
.sa-web, .sa-lp { padding-bottom: 86px; }
.sa-msg { left: 18px; right: 18px; bottom: 16px; font-size: 12.5px; padding: 12px 14px; }
.aw-nav span:not(.aw-new) { display: none; }
.sa-ai { grid-template-columns: minmax(0, 1fr); }
.mg-links li { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); }
.mg-ok { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.sa *, .sa *::before { animation: none !important; }
.lp-n::before { content: "141"; } .mg-n::before { content: "4 of 4"; }
.ai-old, .ai-wait { display: none; }
}
.sa-web, .sa-lp { padding-bottom: 96px; }
@media (max-width: 640px) { .sa-web, .sa-lp { padding-bottom: 80px; } }
.sa-bar span { white-space: nowrap; }
@media (max-width: 640px) { .mg-site .sa-bar i { display: none; } .mg-site .sa-bar span { margin-left: 0; } .sa-lp { padding-bottom: 100px; } }
.sv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 24px; }
.sv-hero-copy .sv-h1 { font-size: clamp(44px, 4.5vw, 66px); line-height: .95; max-width: none; }
.sv-hero-copy .sv-lead { margin-top: 28px; max-width: 34ch; }
.sv-hero-copy .sv-cta { margin-top: 28px; }
@media (max-width: 1100px) { .sv-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .sv-hero-copy .sv-h1 { font-size: clamp(40px, 8vw, 72px); } }
@media (max-width: 640px) { .sv-hero-grid { margin-top: 8px; } .sv-hero-copy .sv-h1 { font-size: clamp(36px, 10vw, 44px); } }
.bl-h1 { max-width: 14ch; }
.bl-lead { max-width: 46ch; margin-top: 32px; }
.bl .bl-list { padding-top: 88px; }
.bl .bl-topics-sec, .bl .bl-rel-sec { padding-top: 128px; }
.bl-card { display: flex; flex-direction: column; gap: 22px; }
.hm a.bl-card-cv { display: block; border-radius: var(--radius-lg); overflow: hidden; transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms; }
.bl-card:hover .bl-card-cv { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 0 var(--sun); }
.bl-card-b { display: flex; flex-direction: column; gap: 12px; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.bl-card-t { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.03em; line-height: 1.05; }
.hm .bl-card-t a { color: var(--ink); text-decoration: none; }
.hm .bl-card-t a::after { content: ""; position: absolute; inset: 0; }
.bl-card { position: relative; }
.hm .bl-card-t a:hover { color: var(--ink); }
.bl-card-d { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink-muted); }
.bl-card-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sun-ink); }
.bl-feat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-bottom: 72px; }
.bl-feat .bl-card-t { font-size: clamp(32px, 3.6vw, 52px); }
.bl-feat .bl-card-d { font-size: 18px; }
.bl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
.bl-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.bl-topic { padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -0.02em; color: var(--ink-muted); }
.bl-topic.is-live { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.bl-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; background: var(--sun); color: #002020; }
.cv-pat { position: absolute; inset: 0; background: repeating-linear-gradient(-60deg, transparent 0 22px, rgba(0, 32, 32, .07) 22px 30px); }
.bl-cv-ai .cv-site { position: absolute; left: 9cqw; top: 14cqw; width: 50cqw; padding: 3.2cqw; border-radius: 2.4cqw; background: #ffffff; box-shadow: 2cqw 2cqw 0 0 #002020; font-size: 3.3cqw; }
.cv-bar { display: flex; gap: 1cqw; margin-bottom: 2.4cqw; } .cv-bar i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #dcd6c4; }
.bl-cv-ai .cv-site b { display: block; margin-bottom: 1.6cqw; font-family: var(--font-display); font-size: 4.4cqw; }
.bl-cv-ai .cv-site p { display: flex; gap: 2cqw; margin: 0; padding: 1.4cqw 0; border-top: 1px dashed #dcd6c4; }
.bl-cv-ai .cv-site p span:first-child { width: 9cqw; color: #46605c; }
.bl-cv-ai s { color: #8f8a77; } .bl-cv-ai em { font-style: normal; font-weight: 700; padding: 0 1cqw; border-radius: .8cqw; background: #fff0c2; }
.bl-cv-ai .cv-bub { position: absolute; right: 7cqw; bottom: 16cqw; max-width: 46cqw; padding: 2.6cqw 3.2cqw; border-radius: 3cqw 3cqw .8cqw 3cqw; background: #002020; color: #ffffff; font-family: var(--font-mono); font-size: 3.2cqw; line-height: 1.35; }
.cv-live { position: absolute; right: 7cqw; bottom: 8cqw; display: inline-flex; align-items: center; gap: 1.2cqw; padding: .8cqw 2.2cqw; border-radius: 99px; background: #d9f5ec; color: #0a6e53; font-family: var(--font-mono); font-size: 2.8cqw; font-weight: 700; text-transform: uppercase; }
.cv-live i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: currentColor; }
.bl-cv-cost { background: #002020; color: #ffffff; }
.bl-cv-cost .cv-pat { background: repeating-linear-gradient(-60deg, transparent 0 22px, rgba(251, 188, 0, .07) 22px 30px); }
.cv-bars { position: absolute; left: 8cqw; right: 26cqw; bottom: 10cqw; top: 12cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3cqw; align-items: end; }
.cv-bars span { position: relative; height: var(--h); border-radius: 1.4cqw 1.4cqw 0 0; background: #3c5f5c; }
.cv-bars span.cv-us { background: var(--sun); }
.cv-bars b { position: absolute; left: 0; right: 0; bottom: calc(100% + 1.4cqw); text-align: center; font-family: var(--font-mono); font-size: 2.6cqw; font-weight: 500; color: #a8c4bf; }
.cv-bars .cv-us b { color: var(--sun); font-weight: 700; }
.cv-dollar { position: absolute; right: 5cqw; top: 2cqw; font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 34cqw; line-height: 1; color: var(--sun); }
.bl-cv-aeo { background: #f6f3ea; }
.cv-ask { position: absolute; left: 8cqw; right: 8cqw; top: 10cqw; display: flex; align-items: center; gap: 2.4cqw; padding: 2.6cqw 3.2cqw; border-radius: 99px; background: #ffffff; border: 2px solid #002020; font-size: 3.4cqw; font-weight: 600; }
.cv-ask span { padding: .8cqw 2cqw; border-radius: 99px; background: #002020; color: var(--sun); font-family: var(--font-mono); font-size: 2.6cqw; }
.cv-ans { position: absolute; left: 14cqw; right: 8cqw; top: 27cqw; padding: 3cqw 3.4cqw; border-radius: 2.4cqw; background: #002020; color: #a8c4bf; font-size: 3cqw; box-shadow: 2cqw 2cqw 0 0 var(--sun); }
.cv-ans p { margin: 0 0 1.4cqw; } .cv-ans p:last-child { margin: 0; }
.cv-ans .cv-hit { padding: 1cqw 1.6cqw; border-radius: 1cqw; background: var(--sun); color: #002020; }
.bl-post-head { padding-top: 140px; }
.bl-post-head .bl-meta { margin-top: 40px; }
.bl-post-h1 { max-width: 20ch; margin: 22px 0 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: .98; letter-spacing: -0.045em; }
.bl-post-dek { max-width: 50ch; margin: 24px 0 0; font-size: 21px; line-height: 1.5; color: var(--ink-muted); }
.bl-byline { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; }
.bl-byline > span:last-child { display: grid; gap: 2px; font-size: 15px; } .bl-byline time { font-size: 13.5px; color: var(--ink-faint); }
.bl-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sun); color: var(--on-sun); font-family: var(--font-display); font-weight: 900; font-style: italic; }
.bl-post-cv { margin-top: 48px; border-radius: var(--radius-lg); overflow: hidden; }
.bl-post-cv .bl-cover { aspect-ratio: 21 / 9; }
.bl-post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; padding-top: 64px; }
.bl-prose { max-width: 70ch; font-size: 18.5px; line-height: 1.7; color: var(--ink-muted); }
.bl-prose h2 { margin: 56px 0 16px; font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); scroll-margin-top: 110px; }
.bl-prose p { margin: 0 0 20px; }
.bl-prose strong, .bl-prose em { color: var(--ink); }
.bl-prose ul, .bl-prose ol { margin: 0 0 24px; padding-left: 24px; }
.bl-prose li { margin-bottom: 10px; padding-left: 6px; }
.bl-prose li::marker { color: var(--sun); font-weight: 700; }
.hm .bl-prose a { color: var(--sun); text-decoration: underline; text-underline-offset: 3px; }
.bl-tk { padding: 26px 28px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.bl-tk-h, .bl-side-h, .bl-end-h { margin: 0 0 12px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--sun-ink); }
.bl-tk .hm-list { margin: 0; font-size: 16.5px; } .bl-tk .hm-list li { padding-left: 0; margin-bottom: 0; }
.bl-note { margin: 28px 0; padding: 22px 26px; border-radius: var(--radius-md); background: var(--sun); color: var(--on-sun); font-size: 17px; line-height: 1.55; }
.bl-note b { display: block; margin-bottom: 4px; }
.bl-src { margin-top: 32px !important; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--ink-faint); }
.bl-end { margin-top: 56px; padding: 32px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--sun); }
.bl-end-h { font-family: var(--font-display); font-weight: 900; font-size: 28px; text-transform: none; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.bl-end p { margin: 0 0 20px; }
.bl-side { position: sticky; top: 112px; padding: 24px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.bl-toc { margin: 0; padding: 0 0 0 20px; display: grid; gap: 10px; font-size: 15px; line-height: 1.4; }
.bl-toc li::marker { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.hm .bl-toc a { color: var(--ink-muted); text-decoration: none; } .hm .bl-toc a:hover { color: var(--sun); }
.hm a.bl-side-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); width: 100%; font-weight: 700; color: var(--sun); text-decoration: none; }
@media (max-width: 1100px) {
.bl-feat { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.bl-post-grid { grid-template-columns: minmax(0, 1fr); }
.bl-side { position: static; order: -1; }
}
@media (max-width: 640px) {
.bl .bl-list { padding-top: 56px; }
.bl .bl-topics-sec, .bl .bl-rel-sec { padding-top: 72px; }
.bl-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.bl-feat { margin-bottom: 48px; }
.bl-post-head { padding-top: 100px; }
.bl-post-dek { font-size: 18px; }
.bl-post-cv .bl-cover { aspect-ratio: 16 / 10; }
.bl-post-grid { padding-top: 40px; gap: 32px; }
.bl-prose { font-size: 17px; }
.bl-tk, .bl-end { padding: 22px 20px; }
.bl-topic { padding: 10px 16px; }
}
.bl-post-cv { max-width: 920px; }
.bl-post-cv .bl-cover { aspect-ratio: 16 / 10; }
@media (max-width: 640px) {
.bl-h1 .sw-hl { white-space: normal; }
.bl-h1 .sw-hl-marker { background: var(--sun); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bl-h1 .sw-hl-marker::before { display: none; }
}
.bl-toc { list-style: none; padding: 0; } .bl-toc li { padding-left: 14px; border-left: 2px solid var(--line); } .bl-toc li:hover { border-color: var(--sun); }
.bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
.bl-grid .bl-card-t { font-size: clamp(22px, 1.8vw, 26px); }
.bl-cv-copy { background: #f6f3ea; }
.cv-doc { position: absolute; left: 10cqw; right: 10cqw; top: 14cqw; display: grid; gap: 3cqw; justify-items: start; padding: 5cqw; border-radius: 2.4cqw; background: #ffffff; box-shadow: 2cqw 2cqw 0 0 var(--sun); }
.cv-doc s { font-size: 3.4cqw; color: #8f8a77; text-decoration-color: #b23c0b; text-decoration-thickness: .5cqw; }
.cv-doc b { font-family: var(--font-display); font-weight: 900; font-size: 6.2cqw; line-height: 1; letter-spacing: -0.03em; color: #002020; }
.cv-caret { display: inline-block; width: .7cqw; height: 6cqw; margin-left: .8cqw; vertical-align: -1cqw; background: #002020; animation: cv-blink 1s steps(1) infinite; }
@keyframes cv-blink { 50% { opacity: 0; } }
.cv-btn { padding: 1.6cqw 3.4cqw; border-radius: 1.4cqw; background: var(--sun); font-weight: 800; font-size: 3cqw; color: #002020; }
.bl-cv-seo { background: #d9f5ec; }
.cv-map { position: absolute; inset: 0; }
.cv-road { position: absolute; background: #ffffff; } .cv-road.r1 { left: 0; right: 0; top: 30%; height: 3cqw; transform: rotate(-8deg); } .cv-road.r2 { top: 0; bottom: 0; left: 30%; width: 3cqw; transform: rotate(12deg); } .cv-road.r3 { left: 0; right: 0; top: 72%; height: 2cqw; }
.cv-pin { position: absolute; left: 25%; top: 14%; width: 9cqw; height: 9cqw; border-radius: 50% 50% 50% 0; background: #b23c0b; transform: rotate(-45deg); box-shadow: 0 0 0 1.4cqw rgba(178, 60, 11, .2); }
.cv-pin::after { content: ""; position: absolute; inset: 2.8cqw; border-radius: 50%; background: #ffffff; }
.cv-local { position: absolute; right: 7cqw; bottom: 9cqw; width: 52cqw; display: grid; gap: 1.4cqw; padding: 3.6cqw 4cqw; border-radius: 2.4cqw; background: #ffffff; color: #002020; box-shadow: 2cqw 2cqw 0 0 #002020; font-size: 3cqw; }
.cv-local b { font-family: var(--font-display); font-size: 4.6cqw; }
.cv-stars { color: #e0a100; } .cv-stars em { font-style: normal; color: #002020; font-weight: 700; }
.cv-open { color: #0a6e53; font-weight: 600; }
.cv-acts { display: flex; gap: 1.6cqw; margin-top: 1cqw; } .cv-acts i { font-style: normal; padding: .8cqw 2cqw; border-radius: 99px; border: 1px solid #dcd6c4; font-size: 2.6cqw; }
.bl-cv-cro { background: var(--sun); }
.cv-chart { position: absolute; left: 6cqw; right: 6cqw; top: 10cqw; width: calc(100% - 12cqw); height: 30cqw; }
.cv-lbl { position: absolute; left: 7cqw; top: 6cqw; font-family: var(--font-mono); font-size: 3cqw; font-weight: 700; }
.cv-cta { position: absolute; left: 50%; bottom: 10cqw; transform: translateX(-50%); padding: 3cqw 6cqw; border-radius: 2cqw; background: #002020; color: #ffffff; font-weight: 800; font-size: 4cqw; white-space: nowrap; box-shadow: 1.4cqw 1.4cqw 0 0 #ffffff; }
.cv-ptr { position: absolute; left: 62%; bottom: 4cqw; width: 6cqw; height: 6cqw; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3l7.5 18 2.6-7.4L21.5 11z' fill='%23ffffff' stroke='%23002020' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bl-cv-cmp { background: #002020; }
.bl-cv-cmp .cv-pat { background: repeating-linear-gradient(-60deg, transparent 0 22px, rgba(251, 188, 0, .07) 22px 30px); }
.cv-cols { position: absolute; left: 7cqw; right: 7cqw; top: 12cqw; bottom: 12cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4cqw; }
.cv-cols > div { display: flex; flex-direction: column; gap: 2.4cqw; padding: 4cqw 3cqw; border-radius: 2cqw; background: #072d2c; border: 1px solid #4f807b; }
.cv-cols b { font-family: var(--font-display); font-size: 4cqw; color: #ffffff; margin-bottom: 1cqw; }
.cv-cols i { height: 2.4cqw; border-radius: 99px; background: #5ee6c0; opacity: .8; } .cv-cols i.x { background: #ff8a66; width: 60%; }
.cv-cols .cv-win { background: var(--sun); border-color: var(--sun); } .cv-cols .cv-win b { color: #002020; } .cv-cols .cv-win i { background: #002020; opacity: 1; }
.cv-vs { position: absolute; left: 50%; bottom: 3cqw; transform: translateX(-50%); font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 5cqw; color: var(--sun); }
@media (max-width: 1100px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bl-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cv-caret { animation: none; } }
.bl-byline img.bl-av { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-raised); border: 2px solid var(--sun); }
.bl-by-sub { font-size: 13.5px; color: var(--ink-faint); }
.bl-card-by { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.bl-card-by img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.hm-links { align-items: center; }
.nv-dd { position: relative; }
.hm-links .nv-top { display: inline-flex; align-items: center; gap: 4px; }
.nv-chev { transition: transform 200ms; }
.nv-dd:hover .nv-chev, .nv-dd:focus-within .nv-chev { transform: rotate(180deg); color: var(--sun); }
.nv-panel { position: absolute; top: 100%; left: 50%; z-index: 40; padding-top: 22px; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity 160ms, transform 200ms, visibility 0s 200ms; }
.nv-dd:hover .nv-panel, .nv-dd:focus-within .nv-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 160ms, transform 200ms, visibility 0s; }
.nv-panel > .nv-in, .nv-panel > .nv-all { background: var(--surface-raised); border: 1px solid var(--line-strong); }
.nv-in { display: grid; grid-auto-flow: column; gap: 28px; padding: 22px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0 !important; box-shadow: 0 24px 48px -20px #000; }
.nv-panel-svc .nv-in { grid-template-columns: 330px 170px; }
.nv-panel-cmp .nv-in { grid-template-columns: 180px 170px; }
.nv-col { display: grid; align-content: start; gap: 2px; }
.nv-k { margin: 0 0 8px; font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.hm-links .nv-panel a::after { display: none; }
.hm-links a.nv-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; margin: 0 -10px; border-radius: 10px; color: var(--ink); }
.hm-links a.nv-item:hover { background: rgba(255, 255, 255, .05); }
.nv-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--sun-soft); color: var(--sun); }
.nv-item b { display: block; font-size: 15px; font-weight: 700; } .nv-item small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-faint); font-weight: 400; }
.hm-links a.nv-link { padding: 7px 0; font-size: 15px; color: var(--ink-muted); }
.hm-links a.nv-link:hover { color: var(--sun); }
.hm-links a.nv-ai { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--sun); font-weight: 600; }
.hm-links a.nv-all { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface-sunken) !important; font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; box-shadow: 0 24px 48px -20px #000; }
.hm-links a.nv-all:hover { color: var(--sun); }
@media (prefers-reduced-motion: reduce) { .nv-panel, .nv-chev { transition: none; } }
.mm-sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 16px 34px; border-bottom: 1px solid var(--line); }
.mm-sub a { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.hm-menu-links > a:has(+ .mm-sub) { border-bottom: 0; }
.hm-menu { max-height: calc(100dvh - 68px); overflow-y: auto; }
.hm-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.hm .hm-legal a { color: var(--ink-faint); text-decoration: none; } .hm .hm-legal a:hover { color: var(--sun); }
.hm-nav-in { overflow: visible; }
.hm-nav-in .hm-progress { left: 18px; right: 18px; border-radius: 3px; }
.hm-menu-links .mm-sub a { display: inline-flex; align-items: center; min-height: 0; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-sans); font-weight: 600; font-stretch: 100%; font-size: 14px; line-height: 1.2; letter-spacing: 0; color: var(--ink); }
.hm-menu-links .mm-sub a:hover { color: var(--sun); border-color: var(--sun); }
.hb-lead { max-width: 640px; }
.hb-list { padding-top: 24px; }
.hb-svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hm a.hb-svc { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); text-decoration: none; transition: border-color 150ms, transform 200ms; }
.hm a.hb-svc:hover { border-color: var(--sun); transform: translateY(-4px); color: var(--ink); }
.hb-svc-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--sun) 16%, transparent); color: var(--sun); }
.hb-svc-t { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.03em; }
.hb-svc-d { color: var(--ink-muted); font-size: 16.5px; line-height: 1.6; }
.hb-price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-faint); }
.hb-price b { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); margin-right: 4px; }
.hb-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--sun); }
.hb-more svg { transition: transform 200ms; }
.hm a:hover .hb-more svg { transform: translateX(3px); }
.hb-inds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-note { margin: 28px 0 0; }
.hb-note a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hb-cmps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hb-cmps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm a.hb-cmp, .hm a.hb-read { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); text-decoration: none; transition: border-color 150ms, transform 200ms; }
.hm a.hb-cmp:hover, .hm a.hb-read:hover { border-color: var(--sun); transform: translateY(-4px); color: var(--ink); }
.hb-cmp-t { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 1.1; letter-spacing: -0.03em; }
.hb-cmp-d { flex: 1; color: var(--ink-muted); font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.hm a.hb-read { flex-direction: column; padding: 36px; background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
.hm a.hb-read:hover { color: var(--on-sun); border-color: var(--sun); }
.hb-read b { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.03em; max-width: 28ch; }
.hb-read .cp-oth-k, .hb-read .hb-more { color: var(--on-sun); }
.lg-date { margin: 20px 0 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
.lg-grid { padding-top: 24px; }
.lg-prose ul { margin: 0 0 20px; padding-left: 22px; }
.lg-prose li { margin: 0 0 10px; }
.lg-prose h2:first-child { margin-top: 0; }
@media (max-width: 1100px) {
.hb-cmps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.hb-svcs, .hb-cmps, .hb-cmps-2 { grid-template-columns: minmax(0, 1fr); }
.hm a.hb-svc, .hm a.hb-cmp, .hm a.hb-read { padding: 24px 20px; }
}
.hb-how-sec .sv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .hb-how-sec .sv-steps { grid-template-columns: minmax(0, 1fr); } }
.hb .hb-ind-sec, .hb .hb-how-sec, .hb .hb-cmp-sec, .hb .hb-ppl-sec, .hb .hb-read-sec { padding-top: 140px; }
.hb .hb-ppl-sec { padding-bottom: 140px; }
.hb .hb-ind-sec { padding-bottom: 140px; }
@media (max-width: 640px) {
.hb .hb-ind-sec, .hb .hb-how-sec, .hb .hb-cmp-sec, .hb .hb-ppl-sec, .hb .hb-read-sec { padding-top: 88px; }
.hb .hb-ppl-sec, .hb .hb-ind-sec { padding-bottom: 88px; }
}
.hb-lead { margin-top: 36px; }
@media (max-width: 640px) { .hb-lead { margin-top: 24px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ft-socs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hm a.ft-soc { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; transition: color 150ms, border-color 150ms; }
.hm a.ft-soc:hover { color: var(--sun); border-color: var(--sun); }
.bl-cv-cost { background: #0f5c57; }
.bl-cv-cost .cv-pat { background: repeating-linear-gradient(-60deg, transparent 0 22px, rgba(255, 255, 255, .06) 22px 30px); }
.bl-cv-cost .cv-bars span { background: rgba(255, 255, 255, .22); }
.bl-cv-cost .cv-bars span.cv-us { background: var(--sun); }
.bl-cv-cost .cv-bars b { color: #e0f2ee; }
.bl-cv-cost .cv-bars .cv-us b { color: var(--sun); }
.bl-cv-cmp { background: #ff8a66; }
.bl-cv-cmp .cv-pat { background: repeating-linear-gradient(-60deg, transparent 0 22px, rgba(0, 32, 32, .08) 22px 30px); }
.bl-cv-cmp .cv-cols > div:not(.cv-win) { background: #002020; border-color: #002020; }
.bl-cv-cmp .cv-cols .cv-win { box-shadow: 1.4cqw 1.4cqw 0 0 #002020; }
.bl-cv-cmp .cv-vs { color: #002020; }
.bl-cv-aeo { background: #5ee6c0; }
.bl-cv-copy { background: #fde3d8; }
.hm-links .nv-btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.hm-links .nv-btn:hover, .nv-dd:focus-within .nv-btn { color: var(--ink); }
.nv-panel-svc .nv-in, .nv-panel-who .nv-in { grid-template-columns: 300px; }
.hm-menu-links .mm-h { display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 12px 0 0; color: var(--ink); font-family: var(--font-display); font-weight: 900; font-stretch: 100%; font-size: 30px; line-height: 1; letter-spacing: -0.04em; }
.hm-menu-links .mm-h i { font-family: var(--font-mono); font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--sun-ink); }
@media (max-width: 1360px) and (min-width: 1001px) { .hm-links .nv-btn { font-size: 14px; } }
@media (max-width: 1180px) and (min-width: 1001px) { .hm-links .nv-btn { font-size: 13.5px; } }
.hm-who-sec, .hm-blog-sec { padding-top: 180px; }
.hw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hm a.hw-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); text-decoration: none; transition: border-color 150ms, transform 200ms; }
.hm a.hw-card:hover { border-color: var(--sun); transform: translateY(-4px); color: var(--ink); }
.hw-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.hw-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms; }
.hm a.hw-card:hover .hw-img img { transform: scale(1.05); }
.hw-ask { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #002020; color: #ffffff; font-family: var(--font-mono); font-size: 13px; line-height: 1.35; box-shadow: 4px 4px 0 0 var(--sun); }
.hw-b { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 22px 22px 24px; }
.hw-k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.hw-t { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1.05; letter-spacing: -0.03em; }
.hw-d { flex: 1; margin-bottom: 10px; color: var(--ink-muted); font-size: 16px; line-height: 1.55; }
.hw-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--sun); }
.hw-more svg { transition: transform 200ms; } .hm a.hw-card:hover .hw-more svg { transform: translateX(3px); }
.hm-blog-side { display: grid; gap: 20px; justify-items: start; }
.hm .hm-blog-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 1100px) { .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .hm-who-sec, .hm-blog-sec { padding-top: 112px; } .hm-blog-sec .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-blog-sec .bl-grid > :nth-child(3) { display: none; } }
@media (max-width: 640px) {
.hm-who-sec, .hm-blog-sec { padding-top: 88px; }
.hw-grid, .hm-blog-sec .bl-grid { grid-template-columns: minmax(0, 1fr); }
.hm-blog-sec .bl-grid > :nth-child(3) { display: flex; }
.hw-img { aspect-ratio: 16 / 9; }
}
.ft-top-btn { white-space: nowrap; flex: none; }
@media (max-width: 640px) { .ft-bottom { gap: 16px; } .hm-legal { gap: 6px 16px; } }
.cv-ask span { white-space: nowrap; flex: none; }
.hm .bl-prose a.sw-btn, .hm .bl-prose a.sw-btn:hover { color: #002020; text-decoration: none; }
.hm .bl-prose a.sw-btn svg { color: #002020; }