@font-face { font-family:SpaceGrotesk; src:url('/assets/space-grotesk-700.ttf') format('truetype'); font-style:normal; font-weight:700; font-display:swap; }
:root { --ink:#171719; --muted:#66666b; --line:#dededb; --violet:#6849c9; --paper:#fff; --soft:#f4f3f0; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
img { display:block; width:100%; height:100%; object-fit:cover; }
figure,dl,dd,p,h1,h2,h3 { margin:0; }
button,a { -webkit-tap-highlight-color:transparent; }
*:focus-visible { outline:3px solid var(--violet); outline-offset:4px; }
.wrap { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
.site-header { height:76px; display:flex; align-items:center; gap:44px; }
.identity { display:flex; align-items:center; gap:18px; min-width:0; }
.brand { display:inline-flex; align-items:center; gap:8px; font:700 26px/1 SpaceGrotesk,Arial,sans-serif; letter-spacing:-1.7px; white-space:nowrap; }
.brand img { width:42px; height:42px; flex:none; object-fit:contain; }
.brand .brand-dot { color:var(--violet); }
.brand-tagline { padding-left:18px; border-left:1px solid var(--line); color:#515158; font-size:13px; line-height:1.25; white-space:nowrap; }
.site-header nav { display:flex; gap:34px; margin-left:auto; font-size:13px; }
.site-header nav a:hover,.footer a:hover,.under-link:hover { color:var(--violet); }
.header-action { padding:11px 18px; border:1px solid var(--ink); border-radius:50px; font-size:13px; font-weight:700; white-space:nowrap; }
.hero { display:grid; grid-template-columns:.79fr 1.21fr; gap:52px; align-items:center; padding-top:20px; }
.hero-copy { padding:24px 0 28px; }
.kicker { color:#68676b; font-size:11px; font-weight:700; letter-spacing:1.8px; line-height:1.5; }
.hero h1 { max-width:530px; font-size:clamp(47px,5vw,72px); line-height:1.03; letter-spacing:-3.8px; }
.nowrap { white-space:nowrap; }
.hero-sub { max-width:365px; margin-top:23px; color:#56565b; font-size:19px; line-height:1.5; }
.hero-purchase { display:flex; flex-direction:column; gap:7px; margin-top:29px; }
.price { font-size:34px; font-weight:700; letter-spacing:-1.4px; }
.price-detail { color:var(--muted); font-size:14px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:52px; padding:0 27px; border:0; background:var(--violet); color:#fff; border-radius:50px; font-size:14px; font-weight:700; text-align:center; white-space:nowrap; }
.button:hover { background:#5839ae; }
.hero-copy>.button { margin-top:25px; }
.hero-media { aspect-ratio:1.39; overflow:hidden; border-radius:18px; background:#e5ddd3; }
.hero-media img { object-position:50% 50%; }
figcaption { margin-top:12px; color:var(--muted); font-size:12px; line-height:1.5; text-align:center; }
.specs { margin-top:39px; padding:20px 0 25px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.specs dl { display:grid; grid-template-columns:repeat(4,1fr); }
.specs dl>div { padding:5px 0 4px 28px; border-right:1px solid var(--line); }
.specs dl>div:first-child { padding-left:0; }
.specs dl>div:last-child { border-right:0; }
.specs dt { color:var(--muted); font-size:13px; }
.specs dd { margin-top:8px; font-size:33px; font-weight:600; letter-spacing:-1.2px; }
.specs dd small { font-size:16px; font-weight:400; letter-spacing:0; }
.configuration { margin-top:48px; padding:36px; border-radius:22px; background:var(--soft); scroll-margin-top:28px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:27px; }
.section-heading h2,.transport h2 { margin-top:5px; font-size:clamp(33px,3.4vw,48px); line-height:1.08; letter-spacing:-2px; }
.section-heading>p { max-width:320px; color:var(--muted); font-size:14px; line-height:1.5; text-align:right; }
.configuration-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:34px; align-items:start; }
.configuration-figure { min-width:0; }
.configuration-media { aspect-ratio:4/3; overflow:hidden; border-radius:13px; background:#fff; }
.configuration-media img { object-fit:contain; }
.configuration-figure figcaption { margin-top:11px; }
.configuration-controls { min-width:0; padding:2px 0; }
.option-group+.option-group { margin-top:21px; }
.group-heading { display:flex; align-items:baseline; gap:12px; margin-bottom:11px; }
.group-heading h3 { font-size:14px; font-weight:700; }
.group-heading span { color:var(--muted); font-size:12px; }
.choice-grid { display:grid; gap:9px; }
.thirds { grid-template-columns:repeat(3,minmax(0,1fr)); }
.halves { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice { min-height:48px; display:flex; align-items:center; justify-content:center; gap:5px; padding:10px 11px; border:1px solid #d9d8d5; border-radius:9px; background:#fff; font-size:13px; line-height:1.35; text-align:center; }
.choice small { font-size:11px; white-space:nowrap; }
.choice.selected { border:2px solid var(--violet); background:#f5f1ff; color:#301a69; font-weight:700; }
.choice:hover { border-color:var(--violet); }
.selection-explained { margin-top:9px; color:var(--muted); font-size:12px; }
.white-option { margin-top:20px; color:var(--muted); font-size:13px; line-height:1.4; }
.configuration-total { display:flex; flex-direction:column; align-items:center; gap:11px; margin-top:24px; padding-top:21px; border-top:1px solid #d9d8d5; text-align:center; }
.configuration-total strong { font-size:28px; letter-spacing:-1px; }
.configuration-total .button { width:min(100%,290px); margin-top:3px; }
.under-link { border:0; background:none; color:var(--violet); font-size:13px; padding:5px; }
.gallery { margin-top:48px; scroll-margin-top:28px; }
.section-heading.compact { margin-bottom:22px; }
.gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.gallery-grid figure { min-width:0; }
.gallery-grid img { height:auto; aspect-ratio:1.58; border-radius:14px; }
.transport { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; margin-top:48px; scroll-margin-top:28px; }
.transport figure img { height:auto; aspect-ratio:1.42; border-radius:14px; }
.transport h2 { max-width:460px; margin-top:11px; }
.transport dl { margin-top:29px; border-top:1px solid var(--line); }
.transport dl>div { display:flex; justify-content:space-between; gap:24px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; }
.transport dt { color:var(--muted); }
.transport dd { font-weight:700; text-align:right; }
.provisional { margin-top:17px; color:var(--muted); font-size:12px; line-height:1.5; }
.included { display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; margin-top:48px; padding:31px 35px; border-radius:18px; background:#f4f3f0; scroll-margin-top:28px; }
.included-heading { display:flex; align-items:baseline; gap:23px; }
.included h2 { font-size:30px; line-height:1.15; letter-spacing:-1.2px; }
.included-heading a { color:var(--violet); font-size:13px; white-space:nowrap; }
.included-items { max-width:550px; margin-top:19px; font-size:16px; line-height:1.45; }
.included-finish { margin-top:8px; color:var(--muted); font-size:13px; }
.included-action { display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.included-action strong { font-size:30px; letter-spacing:-1px; }
.included-action .button { min-width:202px; }
.footer { margin-top:48px; border-top:1px solid var(--line); background:#fff; }
.footer-inner { padding:29px 0 23px; }
.footer-main { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-description { color:#535359; font-size:14px; line-height:1.45; text-align:right; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; padding-top:17px; border-top:1px solid var(--line); color:#77767c; font-size:12px; line-height:1.5; }
.footer-bottom a { color:var(--ink); font-size:13px; }
.footer-bottom a span { margin-left:5px; font-size:17px; line-height:0; }
.request-dialog { width:min(560px,calc(100% - 32px)); max-height:calc(100dvh - 36px); padding:0; border:1px solid var(--line); border-radius:20px; background:#fff; color:var(--ink); box-shadow:0 24px 80px #0003; }
.request-dialog::backdrop { background:#1717198c; }
.request-dialog[data-mode="delivery"] .request-note,
.request-dialog[data-mode="delivery"] .request-fields,
.request-dialog[data-mode="delivery"] .request-preview-label,
.request-dialog[data-mode="delivery"] #request-preview,
.request-dialog[data-mode="delivery"] .request-actions { display:none; }
.delivery-figure { display:none; }
.request-dialog[data-mode="delivery"] .delivery-figure { display:block; margin-top:22px; }
.delivery-figure img { height:auto; aspect-ratio:1.7; object-fit:cover; object-position:center 47%; border-radius:12px; }
.delivery-figure figcaption { margin-top:9px; font-size:11px; }
body:has(.request-dialog[open]) { overflow:hidden; }
.request-form { position:relative; padding:36px; }
.request-close { position:absolute; top:15px; right:16px; min-height:42px; padding:0 15px; border:0; border-radius:24px; background:#eeedeb; color:var(--ink); font-size:12px; }
.request-form h2 { margin:16px 80px 0 0; font-size:31px; line-height:1.1; letter-spacing:-1px; }
.request-summary { margin-top:16px; color:#55545a; font-size:14px; line-height:1.5; }
.request-dialog[data-mode="delivery"] .request-summary { max-width:430px; font-size:16px; line-height:1.55; color:var(--ink); }
.request-note { margin-top:18px; padding:12px 14px; border-radius:8px; background:#f2effa; color:#574388; font-size:13px; line-height:1.5; }
.request-fields { display:grid; gap:14px; margin-top:18px; }
.request-fields:empty { display:none; }
.request-fields label { display:grid; gap:7px; font-size:13px; font-weight:600; }
.request-fields input,.request-fields textarea { width:100%; min-height:46px; padding:10px 12px; border:1px solid #d5d4d1; border-radius:8px; background:#fff; color:var(--ink); font:400 14px/1.5 Arial,Helvetica,sans-serif; }
.request-fields textarea { min-height:112px; resize:vertical; }
.request-fields [aria-invalid="true"] { border-color:#ae342d; }
.request-field-note { color:var(--muted); font-size:12px; line-height:1.5; }
.request-preview-label { display:block; margin:20px 0 8px; color:var(--muted); font-size:12px; }
#request-preview { display:block; width:100%; min-height:150px; resize:vertical; padding:12px; border:1px solid #d5d4d1; border-radius:8px; background:#fff; color:var(--ink); font:12px/1.55 Arial,Helvetica,sans-serif; }
.request-actions { position:sticky; bottom:0; margin:17px -36px -36px; padding:12px 36px 18px; border-top:1px solid var(--line); background:#fff; }
.request-copy { width:100%; }
.request-copy:disabled { opacity:.65; cursor:progress; }
.request-status { min-height:18px; margin-top:10px; color:#574388; font-size:12px; line-height:1.5; }
@media (max-width:900px) {
  .identity { gap:11px; }
  .brand-tagline { padding-left:11px; font-size:11px; }
}
@media (max-width:1000px) {
  .wrap { width:calc(100% - 56px); }
  .hero { gap:30px; grid-template-columns:.87fr 1.13fr; }
  .hero h1 { font-size:clamp(43px,5vw,61px); }
  .configuration { padding:29px; }
  .configuration-grid { gap:25px; grid-template-columns:1fr 1fr; }
  .halves { grid-template-columns:1fr; }
  .transport { gap:40px; }
  .included-heading { display:block; }
  .included-heading a { display:inline-block; margin-top:9px; }
}
@media (max-width:760px) {
  .wrap { width:calc(100% - 40px); }
  .site-header { height:66px; gap:12px; }
  .brand { font-size:23px; }
  .brand img { width:36px; height:36px; }
  .site-header nav { display:none; }
  .header-action { margin-left:auto; padding:10px 13px; font-size:12px; }
  .hero { grid-template-columns:1fr; gap:23px; padding-top:17px; }
  .hero-copy { padding:0; }
  .hero h1 { max-width:600px; font-size:clamp(40px,9vw,54px); letter-spacing:-2.6px; }
  .hero-sub { margin-top:15px; font-size:17px; }
  .hero-purchase { margin-top:21px; }
  .hero-copy>.button { width:100%; margin-top:21px; }
  .hero-media { aspect-ratio:1.37; border-radius:12px; }
  .specs { margin-top:26px; padding:18px 0; }
  .specs dl { grid-template-columns:repeat(2,1fr); row-gap:17px; }
  .specs dl>div { padding:0 0 0 18px; }
  .specs dl>div:nth-child(3) { padding-left:0; }
  .specs dl>div:nth-child(2) { border-right:0; }
  .specs dt { font-size:12px; }
  .specs dd { font-size:26px; margin-top:5px; }
  .specs dd small { font-size:13px; }
  .configuration { margin-top:40px; padding:20px; border-radius:14px; }
  .section-heading { display:block; margin-bottom:21px; }
  .section-heading h2,.transport h2 { font-size:34px; letter-spacing:-1.4px; }
  .section-heading>p { max-width:480px; margin-top:10px; text-align:left; }
  .configuration-grid { grid-template-columns:1fr; gap:20px; }
  .halves { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .configuration-controls { padding:0; }
  .configuration-total { margin-top:22px; }
  .gallery { margin-top:46px; }
  .gallery-grid { gap:15px; }
  .transport { grid-template-columns:1fr; gap:28px; margin-top:50px; }
  .transport-copy { order:-1; }
  .included { grid-template-columns:1fr; gap:23px; margin-top:46px; }
  .included-action { align-items:flex-start; text-align:left; }
  .footer { margin-top:46px; }
  .footer-inner { padding:27px 0 21px; }
}
@media (max-width:510px) {
  .identity { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
  .brand { font-size:23px; }
  .brand-tagline { padding:0; border:0; font-size:11px; }
  .hero h1 { font-size:40px; }
  .price { font-size:30px; }
  .configuration { width:100%; padding:22px 20px; border-radius:0; }
  .halves { grid-template-columns:1fr; }
  .choice { min-height:46px; }
  .gallery-grid { grid-template-columns:1fr; gap:22px; }
  .transport dl>div { gap:12px; font-size:13px; }
  .transport dd { white-space:nowrap; }
  .included { width:calc(100% - 40px); padding:25px 20px; }
  .included-heading { display:block; }
  .included h2 { font-size:27px; }
  .included-heading a { display:inline-block; margin-top:9px; }
  .included-items { margin-top:16px; font-size:14px; }
  .included-action { align-items:center; text-align:center; }
  .included-action .button { width:100%; }
  .footer-main { flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-description { font-size:13px; text-align:left; }
  .footer-bottom { margin-top:19px; padding-top:14px; }
  .request-form { padding:23px; }
  .request-form h2 { margin-top:32px; font-size:26px; }
  .request-actions { margin:17px -23px -23px; padding:12px 23px 16px; }
}