@font-face{ font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/static/fonts/playfair-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122} @font-face{ font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/static/fonts/playfair-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{ font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122} @font-face{ font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} :root{ --ground: #FDFCFC; --panel: #FAF5F4; --card: #FFFFFF; --line: #ECE6E4; --line-soft: #F3EEEC; --ink: #26262A; --ink-2: #55525A; --muted: #8E878C; --rose: #DFA3AD; --rose-strong: #CE8894; --rose-deep: #B05F6D; --blush: #F7D9DF; --rose-line: #EFC5CE; --sage: #A6BFA7; --sage-deep: #567F5E; --sage-soft: #E9F0E9; --sage-line: #CBDCCC; --warn: #A97A34; --warn-soft: #F5ECDC; --petal-r: 16px 16px 16px 5px; --shadow-sm: 0 1px 2px rgba(38,38,42,.05); --shadow-md: 0 14px 40px rgba(38,38,42,.10); --shadow-pop: 0 24px 70px rgba(176,95,109,.18); --fd: 'Playfair Display', Georgia, serif; --fb: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif; color-scheme: light} html{ scroll-behavior: smooth} html, body{ overflow-x: clip} body{ margin: 0; background: var(--ground); color: var(--ink); font-family: var(--fb); font-size: 16.5px; line-height: 1.58; -webkit-font-smoothing: antialiased} body::after{ content: ""; position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .022; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} .wrap{ max-width: 1120px; margin: 0 auto; padding: 0 22px} h1, h2, h3{ font-family: var(--fd); font-weight: 700; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.012em} p{ margin: 0} a{ color: var(--rose-deep); text-decoration: none} a:hover{ color: var(--rose-strong)} .eyebrow{ font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 14px} .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font: 600 16px/1 var(--fb); padding: 15px 24px; white-space: nowrap; transition: background .18s ease, box-shadow .22s ease, transform .18s ease} .btn.primary{ background: var(--rose-deep); color: #fff; box-shadow: 0 6px 18px rgba(176,95,109,.28)} .btn.primary:hover{ background: var(--rose-strong); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(176,95,109,.34); color: #fff} .btn.soft{ background: var(--card); border-color: var(--rose-line); color: var(--rose-deep)} .btn.soft:hover{ background: var(--blush); transform: translateY(-1px)} .btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{ outline: 2px solid var(--rose); outline-offset: 2px} .lang-suggest{ background: var(--blush); border-bottom: 1px solid var(--rose-line); font-size: 14px; color: var(--ink-2)} .lang-suggest .wrap{ display: flex; align-items: center; gap: 10px; padding: 9px 22px} .lang-suggest a{ font-weight: 650} .lang-suggest button{ margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px} .lang-suggest.hide{ display: none} header.site{ position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ground) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft)} .nav{ display: flex; align-items: center; gap: 8px; padding: 13px 14px} .brand{ display: inline-flex; align-items: center; gap: 5px; flex: none} .brand .mark img, .brand .mark svg{ display: block; height: 46px; width: 46px} .brand .word svg{ display: block; width: auto; height: clamp(20px, calc(32vw - 95px), 34px)} .word svg path{ stroke: #2F2F33; stroke-width: 8} .word svg circle{ stroke: var(--rose); stroke-width: 6} .langs{ display: inline-flex; gap: 2px; margin-left: auto} .langs a{ font: 650 13px/1 var(--fb); color: var(--muted); padding: 7px 8px; border-radius: 8px} .langs a.on{ color: var(--rose-deep); background: var(--blush)} details.langs{ display: block; position: relative} details.langs summary{ list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 650 13px/1 var(--fb); color: var(--ink-2); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card)} details.langs summary::-webkit-details-marker{ display: none} details.langs summary::after{ content: ""; width: 6px; height: 6px; flex: none; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s ease} details.langs[open] summary::after{ transform: rotate(-135deg); margin-top: 3px} details.langs nav{ position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 96px; display: grid; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 5px; box-shadow: var(--shadow-md)} details.langs nav a{ color: var(--ink-2); padding: 10px 12px} details.langs nav a:hover{ background: var(--panel); color: var(--ink)} .nav .signin{ font-weight: 600; font-size: 15px; color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; padding: 11px 4px} .nav .signin span{ display: none} .nav .signin svg{ width: 22px; height: 22px} .nav .btn{ padding: 10px 16px; font-size: 14.5px} .hero{ position: relative; overflow: hidden; padding: 52px 0 64px} .hero::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(640px 420px at 88% 4%, rgba(223,163,173,.20), transparent 62%), radial-gradient(520px 380px at 2% 96%, rgba(166,191,167,.14), transparent 60%)} .hero .wrap{ position: relative; display: grid; gap: 46px} .hero h1{ font-size: clamp(42px, 11vw, 74px)} .hero .sig{ display: block; margin-top: 12px; height: 16px; width: 210px} .hero .sig path{ fill: none; stroke: var(--rose); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 250; stroke-dashoffset: 250; animation: sig-draw 900ms 400ms ease-out forwards} @keyframes sig-draw{ to{ stroke-dashoffset: 0}} .hero .sub{ margin-top: 20px; font-size: 18px; color: var(--ink-2); max-width: 32em} .hero .cta-row{ margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px} .hero .micro{ font-size: 13.5px; color: var(--muted)} .founders{ margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--rose-line); border-radius: var(--petal-r); padding: 11px 15px; font-size: 14px; color: var(--ink-2); box-shadow: var(--shadow-sm)} .founders .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--rose); flex: none; animation: pulse 2.4s ease-in-out infinite} @keyframes pulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(223,163,173,.5)} 55%{ box-shadow: 0 0 0 7px rgba(223,163,173,0)}} .founders b{ color: var(--rose-deep); font-weight: 700} .hero .in1{ animation: rise .6s .05s cubic-bezier(.16,1,.3,1) both} .hero .in2{ animation: rise .6s .15s cubic-bezier(.16,1,.3,1) both} .hero .in3{ animation: rise .6s .25s cubic-bezier(.16,1,.3,1) both} .hero .in4{ animation: rise .6s .38s cubic-bezier(.16,1,.3,1) both} @keyframes rise{ from{ opacity: 0; transform: translateY(18px)} to{ opacity: 1; transform: none}} .petals{ position: absolute; inset: 0; pointer-events: none; overflow: hidden} .petal{ position: absolute; top: -34px; width: 15px; height: 11px; opacity: 0; filter: blur(.4px); background: var(--rose); border-radius: 85% 15% 75% 25% / 65% 35% 65% 35%; animation: lp-fall linear infinite} .petal.b{ background: var(--blush)} .petal.s{ background: var(--sage)} @keyframes lp-fall{ 0%{ transform: translate(0,-34px) rotate(0); opacity: 0} 7%{ opacity: .55} 52%{ transform: translate(30px,46vh) rotate(150deg); opacity: .38} 100%{ transform: translate(-16px,94vh) rotate(330deg); opacity: 0}} .stage{ display: grid; justify-items: center; gap: 12px} .p3d{ perspective: 1300px; animation: ph-float 7s ease-in-out infinite} @keyframes ph-float{ 50%{ transform: translateY(-7px)}} .phone{ width: 292px; border-radius: 48px; padding: 9px; position: relative; background: linear-gradient(160deg, #3B3B41, #1E1E22 55%, #33333A); box-shadow: var(--shadow-md), var(--shadow-pop); transition: transform .5s cubic-bezier(.16,1,.3,1)} .phone::before{ content: ""; position: absolute; right: -2.5px; top: 120px; width: 2.5px; height: 56px; border-radius: 2px; background: #4A4A52} .phone::after{ content: ""; position: absolute; left: -2.5px; top: 100px; width: 2.5px; height: 30px; border-radius: 2px; background: #4A4A52} .screen{ position: relative; background: #FDFCFC; border-radius: 40px; padding: 12px 12px 14px; min-height: 560px; display: flex; flex-direction: column; gap: 9px; overflow: hidden} .island{ position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 86px; height: 24px; border-radius: 999px; background: #131316} .sbar{ display: flex; justify-content: space-between; align-items: center; padding: 4px 10px 0; font: 650 12px/1 var(--fb); color: var(--ink)} .sbar .r{ display: inline-flex; gap: 4px; align-items: center} .sbar .cell{ display: inline-flex; gap: 1.5px; align-items: flex-end} .sbar .cell i{ width: 2.5px; background: var(--ink); border-radius: 1px} .sbar .cell i:nth-child(1){height:4px} .sbar .cell i:nth-child(2){height:6px} .sbar .cell i:nth-child(3){height:8px} .sbar .cell i:nth-child(4){height:10px} .sbar .bat{ width: 20px; height: 10px; border: 1px solid var(--ink); border-radius: 3px; position: relative} .sbar .bat::before{ content: ""; position: absolute; inset: 1.5px; right: 5px; background: var(--sage-deep); border-radius: 1px} .appbar{ display: flex; align-items: center; gap: 7px; padding: 10px 6px 2px} .appbar svg{ height: 20px; width: 20px} .appbar b{ font: 700 13.5px/1 var(--fb)} .appbar span{ margin-left: auto; font: 500 11.5px/1 var(--fb); color: var(--muted)} .vcard{ background: var(--card); border: 1px solid var(--line); border-radius: var(--petal-r); padding: 11px 13px; box-shadow: var(--shadow-sm)} .v-order, .v-build, .bloom, .v-margin, .tray, .vstems{ opacity: 0} .play .v-order{ animation: v-in .5s .5s cubic-bezier(.16,1,.3,1) both} .v-order .t{ font-weight: 650; font-size: 13.5px} .v-order .d{ font-size: 11.5px; color: var(--muted); margin-top: 3px} .v-order .pill{ float: right; font: 700 10px/1 var(--fb); color: var(--rose-deep); background: var(--blush); border-radius: 999px; padding: 4px 8px} .play .v-build{ animation: v-in .5s 1.2s both} .v-build .cap{ font: 700 10px/1 var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px} .v-build .row{ display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; border-top: 1px dashed var(--line-soft); opacity: 0} .play .v-build .row{ animation: v-fly .45s cubic-bezier(.16,1,.3,1) both} .play .v-build .row:nth-of-type(1){ animation-delay: 1.5s} .play .v-build .row:nth-of-type(2){ animation-delay: 1.85s} .play .v-build .row:nth-of-type(3){ animation-delay: 2.2s} .v-build .row .c{ color: var(--muted); font-variant-numeric: tabular-nums} @keyframes v-in{ from{ opacity: 0; transform: translateY(16px)} to{ opacity: 1; transform: none}} @keyframes v-fly{ from{ opacity: 0; transform: translateX(-20px) rotate(-2deg)} to{ opacity: 1; transform: none}} .bloom{ display: grid; place-items: center; padding: 4px 0 0; position: relative} .play .bloom{ animation: bloom-in .8s 2.7s cubic-bezier(.2,1.4,.4,1) both} .bloom svg{ height: 100px; width: 100px} .play .bloom svg{ animation: bq-breath 4s 3.6s ease-in-out infinite} .bloom .add{ position: absolute; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 1px 4px rgba(38,38,42,.18); animation: sg-pop .45s cubic-bezier(.2,1.6,.4,1) both} @keyframes bloom-in{ from{ opacity: 0; transform: scale(.55) rotate(-8deg)} to{ opacity: 1; transform: none}} @keyframes bq-breath{ 0%,100%{ transform: scale(1)} 50%{ transform: scale(1.04)}} .v-margin{ align-self: center; display: inline-flex; align-items: baseline; gap: 8px; background: var(--sage-soft); border: 1px solid var(--sage-line); border-radius: 999px; padding: 9px 18px} .play .v-margin{ animation: sg-pop .55s 3.3s cubic-bezier(.2,1.6,.4,1) both} .v-margin b{ font-family: var(--fd); font-size: 20px; color: var(--sage-deep); font-variant-numeric: tabular-nums} .v-margin span{ font: 700 12px/1 var(--fb); color: var(--sage-deep)} @keyframes sg-pop{ 0%{ opacity: 0; transform: scale(.6)} 70%{ opacity: 1; transform: scale(1.09)} 100%{ opacity: 1; transform: scale(1)}} .tray{ display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 2px 0} .play .tray{ animation: v-in .5s 3.9s both} .play .vstems{ animation: v-in .5s 4s both} .tray button{ border: 1px solid var(--rose-line); background: var(--card); color: var(--rose-deep); font: 650 11px/1 var(--fb); border-radius: 999px; padding: 8px 10px; cursor: pointer; transition: transform .15s ease, background .15s ease} .tray button:hover{ background: var(--blush)} .tray button:active{ transform: scale(.9)} .tray button:disabled{ opacity: .45; cursor: default} .tray .reset{ color: var(--muted); border-color: var(--line)} .vstems{ text-align: center; font: 600 10.5px/1.4 var(--fb); color: var(--muted); min-height: 13px} .settled .v-order, .settled .v-build, .settled .v-build .row, .settled .bloom, .settled .bloom svg, .settled .v-margin, .settled .tray, .settled .vstems{ animation: none !important; opacity: 1 !important; transform: none !important} .homebar{ margin-top: auto; align-self: center; width: 110px; height: 4px; border-radius: 999px; background: var(--line)} .stage .note{ font-size: 12px; color: var(--muted)} section{ padding: 60px 0; position: relative} section.alt{ background: var(--panel); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft)} h2{ font-size: clamp(28px, 6.8vw, 40px)} .lead{ margin-top: 14px; color: var(--ink-2); max-width: 36em} .pq{ padding: 56px 0 30px; text-align: center} .pq p{ font-family: var(--fd); font-style: italic; font-weight: 500; font-size: clamp(22px, 5.6vw, 34px); line-height: 1.3; color: var(--ink); max-width: 24em; margin: 0 auto; text-wrap: balance} .pq .who{ margin-top: 16px; font: 650 12px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep)} .assemble{ height: 170vh; position: relative} .asm-sticky{ --asm-h: min(600px, 82dvh); position: sticky; top: calc((100dvh - var(--asm-h)) / 2); height: var(--asm-h); display: grid; place-items: center; align-content: center; padding: 10px 0; box-sizing: border-box; gap: 14px; overflow: hidden; background: radial-gradient(480px 380px at 50% 46%, rgba(223,163,173,.13), transparent 68%)} .asm-foot{ display: grid; place-items: center; min-height: 46px} .asm-foot > *{ grid-area: 1 / 1} .asm-cap{ font: 650 12px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); text-align: center} .asm-stage{ position: relative; width: min(100vw, 470px); max-height: 62dvh; aspect-ratio: 1 / 1} .asm-stage > *{ position: absolute; inset: 0} .asm-stage svg{ width: 100%; height: 100%; display: block} .asm-ghost{ opacity: .085; filter: grayscale(.35)} .asm-live svg path{ opacity: 0; transform-box: fill-box; transform-origin: center; will-change: transform, opacity} .asm-chip{ display: inline-flex; align-items: baseline; gap: 8px; background: var(--sage-soft); border: 1px solid var(--sage-line); border-radius: 999px; padding: 9px 18px; opacity: 0} .asm-chip.on{ animation: sg-pop .5s cubic-bezier(.2,1.6,.4,1) both} .asm-chip b{ font-family: var(--fd); font-size: 20px; color: var(--sage-deep); font-variant-numeric: tabular-nums} .asm-chip span{ font: 700 12px/1 var(--fb); color: var(--sage-deep)} .vign{ display: grid; gap: 44px; margin-top: 36px} .vign article{ display: grid; gap: 18px; align-content: start} .kicker{ font-size: 13px; font-weight: 700; color: var(--rose-deep); letter-spacing: .04em} .vign h3{ font-size: 23px} .vign .vtext{ font-size: 15.5px; margin-top: 10px; color: var(--ink-2)} .mock{ background: var(--card); border: 1px solid var(--line); border-radius: var(--petal-r); padding: 17px; box-shadow: var(--shadow-md); font-size: 13px; transition: transform .3s ease, box-shadow .3s ease} .mock:hover{ transform: translateY(-3px); box-shadow: var(--shadow-pop)} .mock .cap{ font: 700 10.5px/1 var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px} .mock .line{ display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line-soft); font-variant-numeric: tabular-nums} .mock .line .c{ color: var(--muted)} .mock .total{ border-top: 1px solid var(--line); font-weight: 650} .mock .bar{ height: 9px; border-radius: 999px; background: var(--line-soft); margin-top: 12px; overflow: hidden} .mock .bar i{ display: block; height: 100%; width: 62%; border-radius: 999px; background: linear-gradient(90deg, var(--rose) 0 55%, var(--sage) 78% 100%); transition: width .35s cubic-bezier(.16,1,.3,1)} .mock .foot{ display: flex; justify-content: space-between; margin-top: 9px; font-size: 12.5px; color: var(--muted)} .mock .foot b{ color: var(--sage-deep); font-variant-numeric: tabular-nums} .slider{ margin-top: 14px; background: var(--blush); border: 1px solid var(--rose-line); border-radius: 14px; padding: 13px 14px 11px; display: grid; gap: 9px} .slider .top{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px} .slider label{ font: 700 13.5px/1.3 var(--fb); color: var(--ink)} .slider output{ font: 800 17px/1 var(--fb); color: var(--rose-deep); font-variant-numeric: tabular-nums; flex: none} .slider input{ width: 100%; height: 30px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer} .slider input::-webkit-slider-runnable-track{ height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--rose) 0%, var(--rose-line) 100%)} .slider input::-webkit-slider-thumb{ -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9.5px; border-radius: 50%; background: var(--rose-deep); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(176,95,109,.45)} .slider input::-moz-range-track{ height: 7px; border-radius: 999px; background: var(--rose-line)} .slider input::-moz-range-thumb{ width: 22px; height: 22px; border-radius: 50%; background: var(--rose-deep); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(176,95,109,.45)} .try{ font-size: 11.5px; color: var(--ink-2); margin: 0} .chip{ display: inline-block; font: 700 10.5px/1 var(--fb); border-radius: 999px; padding: 4px 9px} .chip.ok{ color: var(--sage-deep); background: var(--sage-soft); border: 1px solid var(--sage-line)} .chip.warn{ color: var(--warn); background: var(--warn-soft)} .chip.rose{ color: var(--rose-deep); background: var(--blush)} .dayrow{ display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--line-soft)} .dayrow:first-of-type{ border-top: 0} .dayrow .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--rose); flex: none} .dayrow .dot.g{ background: var(--sage)} .dayrow .who{ min-width: 0} .dayrow .who b{ display: block; font-weight: 650; font-size: 13px} .dayrow .who span{ font-size: 11.5px; color: var(--muted)} .dayrow .chip{ margin-left: auto; flex: none} .storemock .tiles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px} .storemock .tile{ background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 8px; font-size: 11px; color: var(--ink-2)} .storemock .tile .ph{ height: 46px; border-radius: 9px; background: linear-gradient(145deg, var(--blush), var(--rose-line)); margin-bottom: 6px} .storemock .tile:nth-child(2) .ph{ background: linear-gradient(145deg, var(--sage-soft), var(--sage-line))} .storemock .flow{ text-align: center; color: var(--muted); font-size: 12px; padding: 8px 0 2px} .storemock .dayrow{ border-top: 1px dashed var(--line-soft)} .feat{ margin: 28px 0 0; padding: 0; list-style: none; display: grid} .feat li{ position: relative; padding: 14px 0 14px 28px; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: 15.5px} .feat li::before{ content: ""; position: absolute; left: 2px; top: 20px; width: 12px; height: 9px; background: var(--rose); border-radius: 85% 15% 75% 25% / 65% 35% 65% 35%} .feat li b{ color: var(--ink); font-weight: 650} .founders-note{ background: var(--blush); border: 1px solid var(--rose-line); border-radius: var(--petal-r); padding: 15px 17px; margin-top: 26px; font-size: 15px; color: var(--ink)} .founders-note b{ color: var(--rose-deep)} .plans{ display: grid; gap: 18px; margin-top: 24px} .plan{ background: var(--card); border: 1px solid var(--line); border-radius: 20px 20px 20px 6px; padding: 24px 22px; display: flex; flex-direction: column; gap: 15px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease} .plan:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--rose-line)} .plan.hi{ border-color: var(--rose-line); box-shadow: var(--shadow-md); position: relative} .plan.hi::before{ content: attr(data-badge); position: absolute; top: -12px; left: 20px; background: var(--rose-deep); color: #fff; font: 700 11px/1 var(--fb); letter-spacing: .04em; border-radius: 999px; padding: 5px 11px} .plan h3{ font-size: 22px} .plan .for{ font-size: 13.5px; color: var(--muted); margin-top: 3px} .price{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap} .price b{ font-family: var(--fd); font-size: 48px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em} .price .per{ color: var(--muted); font-size: 14px} .price .later{ font-size: 12.5px; color: var(--muted); margin-left: auto} .plan ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 14.5px; color: var(--ink-2)} .plan ul li{ padding-left: 20px; position: relative} .plan ul li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--sage)} .plan .btn{ margin-top: auto} .plans-foot{ margin-top: 18px; font-size: 13.5px; color: var(--muted); max-width: 46em} .faq{ display: grid; margin-top: 22px} .faq details{ border-top: 1px solid var(--line-soft)} .faq details:last-child{ border-bottom: 1px solid var(--line-soft)} .faq summary{ cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 17px 0; font-weight: 650; font-size: 16.5px} .faq summary::-webkit-details-marker{ display: none} .faq summary::after{ content: "+"; font-family: var(--fd); font-size: 22px; color: var(--rose-deep); flex: none; transition: transform .2s ease} .faq details[open] summary::after{ transform: rotate(45deg)} .faq .a{ padding: 0 0 19px; color: var(--ink-2); max-width: 44em} .about .card-a{ background: var(--card); border: 1px solid var(--line); border-radius: var(--petal-r); padding: 28px 24px; box-shadow: var(--shadow-sm)} .about p{ color: var(--ink-2); max-width: 42em} .about .sign{ margin-top: 16px; font-family: var(--fd); font-style: italic; color: var(--ink)} footer.site{ padding: 40px 0 50px; color: var(--muted); font-size: 13.5px} footer.site .wrap{ display: grid; gap: 18px} footer.site .brandrow{ display: flex; align-items: center; gap: 9px} footer.site .brandrow svg{ height: 26px; width: 26px} footer.site .brandrow .word svg{ height: 16px; width: auto} footer.site .row{ display: flex; flex-wrap: wrap; gap: 8px 20px} footer.site a{ color: var(--ink-2)} .legal{ max-width: 760px; margin: 0 auto; padding: 40px 22px 70px} .legal h1{ font-size: clamp(30px, 7vw, 44px); margin-bottom: 8px} .legal .updated{ color: var(--muted); font-size: 13.5px; margin-bottom: 26px} .legal h2{ font-size: 21px; font-family: var(--fb); font-weight: 700; letter-spacing: 0; margin: 30px 0 8px} .legal p, .legal li{ color: var(--ink-2); font-size: 15.5px} .legal ul{ padding-left: 22px; margin: 8px 0} .legal .notice{ background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--ink-2); margin: 20px 0} .rv{ opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1)} .rv.in{ opacity: 1; transform: none} .rv.d1{ transition-delay: .07s} .rv.d2{ transition-delay: .14s} .rv.d3{ transition-delay: .21s} @media (min-width: 768px){ .nav{ padding: 14px 22px; gap: 16px} .brand .word svg{ height: 34px} .nav .signin span{ display: inline} .nav .signin svg{ display: none} .hero{ padding: 84px 0 96px} .hero .wrap{ grid-template-columns: 1.08fr .92fr; align-items: center; gap: 56px} .p3d .phone{ transform: rotateY(-9deg) rotateX(3deg) rotateZ(.5deg)} .p3d:hover .phone{ transform: rotateY(-2deg) rotateX(1deg)} .vign{ grid-template-columns: repeat(3, 1fr); gap: 30px} .feat{ grid-template-columns: 1fr 1fr; column-gap: 48px} .plans{ grid-template-columns: repeat(3, 1fr); align-items: stretch} .plan.hi{ transform: translateY(-10px)} .plan.hi:hover{ transform: translateY(-14px)}} @media (min-width: 1024px){ .hero .cta-row{ flex-direction: row; align-items: center; gap: 18px}} @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto} .petals, body::after{ display: none} .hero .sig path{ animation: none; stroke-dashoffset: 0} .hero .in1, .hero .in2, .hero .in3, .hero .in4, .v-order, .v-build, .v-build .row, .bloom, .bloom svg, .v-margin, .tray, .vstems, .founders .dot{ animation: none; opacity: 1; transform: none} .rv{ opacity: 1; transform: none; transition: none} .btn, .mock, .plan, .phone{ transition: none} .p3d{ animation: none} .p3d .phone{ transform: none} .assemble{ height: auto} .asm-sticky{ position: static; height: auto; padding: 56px 0}} .storemock .tile img.ph{ width: 100%; height: 46px; object-fit: cover; border-radius: 9px; margin-bottom: 6px; background: var(--blush)} .about .card-a{ display: grid; gap: 20px} .about .a-photo{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--petal-r); border: 1px solid var(--line)} @media (min-width: 768px){ .storemock .tile img.ph{ height: 56px} .about .card-a{ grid-template-columns: 300px 1fr; gap: 28px; align-items: center} .about .a-photo{ aspect-ratio: 4 / 5}} @view-transition{ navigation: auto} ::view-transition-old(root){ animation: vt-out 150ms cubic-bezier(.4, 0, 1, 1) both} ::view-transition-new(root){ animation: vt-in 300ms cubic-bezier(.16, 1, .3, 1) both} @keyframes vt-out{ to{ opacity: 0}} @keyframes vt-in{ from{ opacity: 0; transform: translateY(10px)}} @media (prefers-reduced-motion: reduce){ @view-transition{ navigation: none}}
/*# sourceMappingURL=landing.css.map */