/* =============================================================================
   cartt — one fixed 1800x2612 artboard (hero + how it works) scaled to the
   viewport, then an ordinary responsive document beneath it.
   ========================================================================== */

@font-face { font-family:"Geist Mono"; src:url(../assets/fonts/geist-mono.woff2) format("woff2");
             font-weight:100 900; font-style:normal; font-display:swap }
@font-face { font-family:"Playfair Display"; src:url(../assets/fonts/playfair-italic.woff2) format("woff2");
             font-weight:400 700; font-style:italic; font-display:swap }
@font-face { font-family:"Inter"; src:url(../assets/fonts/inter.woff2) format("woff2");
             font-weight:100 900; font-style:normal; font-display:swap }

:root {
  --ink:#000e23; --stage:#000c1e;
  --artboard-width:1800; --artboard-height:2612;
  --artboard-scale:1; --viewport-width:100vw;
  --hero-offset:0px;
  --hero-top-shift:0px;
  --hero-content-scale:1;
  --hero-title-size:65.512px;
  --hero-title-leading:1.1;
  --hero-title-line:calc(var(--hero-title-size) * var(--hero-title-leading));
  --problem-heading-shift:0px; --problem-card-shift:0px;
  --problem-card-scale:1; --problem-caption-shift:0px;
  --aeonik:"Inter","Aeonik","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --entrance-ease:cubic-bezier(0.22,1,0.36,1);
  --entrance-ease-soft:cubic-bezier(0.16,1,0.3,1);
  --entrance-shift:22px;
  --hair:rgba(0,14,35,.13);
  --flow-pad:clamp(18px,1.61vw,34px);
}

/* ---------------------------------------------------------------- base ---- */
* { box-sizing:border-box }
html { scroll-behavior:smooth; background:#fff; scrollbar-gutter:stable }
body { margin:0; min-width:320px; overflow-x:hidden; background:#fff; color:var(--ink);
       font-family:var(--aeonik); -webkit-font-smoothing:antialiased }
::selection { color:#fff; background:#2372ae }
p,h1,h2,h3,h4,span,em,td,th,li { user-select:text }
img { -webkit-user-drag:none; user-select:none }
a,button { -webkit-tap-highlight-color:transparent }

.site-shell { position:relative; margin:0 auto; width:100%; height:100vh; overflow:hidden; background:#fff }
.artboard { position:absolute; inset:0 auto auto 0; width:1800px; height:2612px; overflow:hidden;
            transform-origin:top left; background:#fff }
.page-surface { position:absolute; z-index:0; left:52.592px; top:50px; width:1700.406px;
                height:3570.481px; background:#fff }
.hero, .problem { position:absolute; inset:0 }

/* ============================================================ SECTION 1 ==== */
.hero-sky { position:absolute; z-index:1; left:52.592px; top:50px; width:1700.406px;
            height:calc(1147.749px + var(--hero-offset)); overflow:hidden; background:#2372ae }
.hero-panel { left:70.779px; top:150.027px; width:821.409px;
              height:calc(1029.539px + var(--hero-offset)); background:#fff }

.cloud-layer { position:absolute; display:block; max-width:none; object-fit:cover; pointer-events:none }
.cloud-layer--wide { left:-14.914px; top:-380.352px; width:2038.81px; height:2038.81px }
.cloud-layer--shift { top:-208.82px }
.cloud-layer--computer { left:659.754px; top:-9.098px; width:1207.359px; height:1207.359px }
.cloud-layer--live { aspect-ratio:1; mask-image:linear-gradient(to right,transparent 0,#000 8%);
                     opacity:0; transition:opacity 420ms ease }
.cloud-layer--live[data-playing] { opacity:1 }
@media (min-width:1280px) {
  /* the artboard's copy column is 521.797px and the third line runs 9px past it
     — at this size the lines are set, not flowed */
  .hero-copy h1 span { white-space:nowrap }
  .cloud-layer--wide { content:url(https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/60fdb0d8-1e5e-4e7b-ace7-50b782304c5b.png) }
  .cloud-layer--computer { mask-image:linear-gradient(to right,transparent 0 16%,#000 32%) }
}
@media (prefers-reduced-motion:reduce) { .cloud-layer--live { transition:none } }

.nav-left,.nav-right,.hero-panel { position:absolute; z-index:2; border-radius:4.041px }
.nav-left { left:70.779px; top:68.188px; width:821.409px; height:72.745px; background:#fff }
.nav-right { left:902.291px; top:68.188px; width:832.522px; height:72.745px;
             background:rgba(255,255,255,.1); backdrop-filter:blur(19.55px) }

.navigation { position:absolute; z-index:10; inset:0; pointer-events:none }
.navigation a, .nav-links { pointer-events:auto }
.brand-mark,.wordmark,.login-button,.nav-links { position:absolute }
.brand-mark { left:84.924px; top:85.359px; width:42.434px; height:42.434px }
.brand-mark img { width:100%; height:100%; display:block; border-radius:9px; object-fit:cover }
.wordmark { left:788.123px; top:93.441px; width:79.152px; height:19.706px; text-decoration:none }
.wordmark span { display:block; width:100%; color:var(--ink); font-family:var(--mono);
                 font-size:18.84px; font-weight:500; line-height:19.706px; letter-spacing:-0.53px;
                 white-space:nowrap }
.nav-links { left:929.568px; top:91.426px; display:flex; align-items:center; gap:63.652px }
.nav-x { display:grid; place-items:center; width:16.5px; height:16.5px }
.nav-x img { width:100%; height:100%; display:block; opacity:.84 }
.nav-x span { display:none }
.nav-x:hover img { opacity:1 }
.nav-links a, .login-button { color:rgba(255,255,255,.84); font-family:var(--aeonik);
   font-size:14.268px; font-weight:700; line-height:26.158px; letter-spacing:-0.143px;
   text-decoration:none; white-space:nowrap }
.login-button { left:1587.307px; top:78.285px; width:136.734px; height:53.158px; display:grid;
                place-items:center; border-radius:2.378px; color:#252525; background:#fff }
.nav-toggle { display:none }
.nav-drawer { display:contents }

.hero-dots { position:absolute; z-index:4; left:457.74px; top:344.014px; display:flex; gap:8.081px;
             transform:translateY(var(--hero-top-shift)) scale(var(--hero-content-scale));
             transform-origin:23.25px 0 }
.hero-dots i { width:10.103px; height:10.103px; display:block; background:var(--ink) }

.hero-copy { position:absolute; z-index:4; inset:0; color:#000; text-align:center;
             transform:translateY(var(--hero-top-shift)) scale(var(--hero-content-scale));
             transform-origin:481.2px 344.014px }
.hero-copy h1 { position:absolute; left:220.309px; top:407.66px; width:521.797px; margin:0;
                text-transform:uppercase }
.hero-copy h1 span { display:block; font-family:var(--mono); font-size:var(--hero-title-size);
                     font-weight:400; line-height:var(--hero-title-leading); letter-spacing:-3.931px }
.hero-copy h1 span:nth-of-type(2) { margin-top:var(--hero-title-line) }
.hero-copy h1 em { position:absolute; z-index:1; left:0; top:65.512px; width:100%;
                   font-family:"Playfair Display",Georgia,serif; font-size:73.557px; font-weight:400;
                   line-height:0.95; letter-spacing:-4.413px; text-transform:none }
.hero-copy > p { position:absolute; left:310.23px; top:656.207px; width:342.506px; margin:0;
                 font-family:var(--aeonik); font-size:16.165px; line-height:1.2; letter-spacing:-0.323px }
.trial-button { position:absolute; left:381.965px; top:759.258px; width:198.683px; height:56.579px;
                display:grid; place-items:center; border-radius:2.021px; color:#fff;
                background:var(--ink); font-family:var(--mono); font-size:14.145px; font-weight:500;
                line-height:1; letter-spacing:-0.283px; text-decoration:none; text-transform:uppercase }

.insight-card { position:absolute; z-index:4; left:922.498px; top:901.719px; width:312.196px;
                height:265.72px; margin:0; border-radius:3.031px; color:#fff;
                background:rgba(255,255,255,.2); backdrop-filter:blur(31.169px);
                transform:translateY(var(--hero-offset)) }
.diamond-grid { position:absolute; left:19.196px; top:19.198px; width:54.929px; height:54.929px;
                display:grid; grid-template-columns:repeat(3,15.474px); grid-auto-rows:15.474px;
                gap:4.253px }
.diamond-grid i { width:10.941px; height:10.941px; place-self:center; transform:rotate(45deg);
                  border-radius:0.608px; background:#fff }
.diamond-grid i.outline { border:0.608px solid #fff; background:transparent }
.insight-card h2 { position:absolute; left:18.187px; top:176.814px; margin:0; font-family:var(--mono);
                   font-size:20.207px; font-weight:400; line-height:1.1; letter-spacing:-1.212px;
                   text-transform:uppercase }
.insight-card p { position:absolute; left:18.187px; top:213.183px; width:231.368px; margin:0;
                  font-family:var(--aeonik); font-size:15.155px; line-height:1.2; letter-spacing:-0.303px }
.insight-card h2, .insight-card p { transition:opacity 260ms ease }
.insight-card[data-swapping] h2, .insight-card[data-swapping] p { opacity:0 }

.trusted-block { position:absolute; z-index:4; left:150.595px; top:1058.322px; width:660.766px;
                 height:99.012px; transform:translateY(var(--hero-offset)) }
.trusted-block > p { position:absolute; left:190.957px; top:0; margin:0; color:#4a4a4a;
                     font-family:var(--mono); font-size:14.145px; font-weight:500; line-height:1;
                     letter-spacing:-0.283px; text-transform:uppercase; white-space:nowrap }
.partner-strip { position:absolute; left:42.435px; top:47.482px; width:612.268px; height:25.259px;
                 overflow:hidden }
.partner-rail { position:absolute; inset:0 auto auto 0; width:max-content; height:25.622px;
                display:flex; align-items:center; animation:brand-rail-loop 18s linear infinite;
                will-change:transform }
.partner-rail span { flex:0 0 auto; padding-right:46.5px; color:#c2c2c2; font-family:var(--mono);
                     font-size:13.13px; font-weight:500; line-height:25.622px; letter-spacing:-0.4px;
                     text-transform:uppercase; white-space:nowrap; opacity:.92 }
/* the list is printed twice, each item carrying its own trailing gap, so one
   copy is exactly half the rail and -50% wraps with no seam */
@keyframes brand-rail-loop { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (hover:hover) { .partner-strip:hover .partner-rail { animation-play-state:paused } }
.partner-fade { position:absolute; z-index:2; top:22.226px; width:113.158px; height:76.786px;
                background:linear-gradient(90deg,#fff 31.7%,rgba(255,255,255,0) 93.304%) }
.partner-fade--left { left:0 }
.partner-fade--right { right:0; transform:rotate(180deg) }

.hero-divider { position:absolute; z-index:5; left:71.791px; top:1018.918px; width:820.398px;
                height:1.01px; background:rgba(0,14,35,.12); transform:translateY(var(--hero-offset)) }
.carousel-controls { position:absolute; z-index:5; left:1620.643px; top:1116.922px; display:flex;
                     gap:2.023px; transform:translateY(var(--hero-offset)) }
.carousel-button { width:50.517px; height:50.517px; display:grid; place-items:center; padding:0;
                   border:0; border-radius:3.031px; cursor:pointer; background:rgba(255,255,255,.2);
                   backdrop-filter:blur(31.169px) }
.carousel-button img { width:16.165px; height:16.165px }
#previous-slide img { transform:rotate(90deg) }
#next-slide img { transform:rotate(-90deg) }
.carousel-button:focus-visible,.trial-button:focus-visible,.navigation a:focus-visible {
   outline:3px solid #fff; outline-offset:4px }

/* ============================================================ SECTION 2 ==== */
.problem { z-index:6; pointer-events:none; transform:translateY(var(--hero-offset)) }
.section-kicker,.problem > h2,.card-caption,.card-caption * { pointer-events:auto; user-select:text }
.section-kicker { position:absolute; left:80px; top:1233px; width:1645.252px; height:14px;
   display:flex; align-items:center; justify-content:space-between; color:#4a4a4a;
   font-family:var(--mono); font-size:14.145px; font-weight:500; line-height:1;
   letter-spacing:-0.283px; text-transform:uppercase }
.section-kicker i { width:10.103px; height:10.103px; display:block; opacity:.3; background:var(--ink) }
.section-divider { position:absolute; left:47px; top:1280.555px; width:1706px; height:1.01px;
                   background:rgba(0,14,35,.13) }
.problem > h2 { position:absolute; left:522px; top:1391px; width:756.979px; margin:0; color:#000;
   font-family:var(--mono); font-size:44.748px; font-weight:400; line-height:1.1;
   letter-spacing:-2.685px; text-align:center; text-transform:uppercase;
   transform:translateY(var(--problem-heading-shift)) }
.problem-card { position:absolute; width:821px; height:538px; overflow:hidden; border-radius:4.041px;
                background:rgba(224,224,224,.3) }
.card-one { left:71px; top:1535px; transform:translateY(var(--problem-card-shift)) scale(var(--problem-card-scale));
            transform-origin:top center }
.card-two { left:904px; top:1535px; transform:translateY(var(--problem-card-shift)) scale(var(--problem-card-scale));
            transform-origin:top center }
.card-three { left:71px; top:2225px; transform:translateY(var(--problem-caption-shift)) }
.card-four { left:904px; top:2225px; transform:translateY(var(--problem-caption-shift)) }
.card-grid { position:absolute; z-index:1; left:7px; top:7px; width:809.466px; height:525.446px;
             transform:rotate(180deg); opacity:.34 }
.panel-face { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column;
              justify-content:center; gap:13px; padding:0 97px }
.panel-tag { color:rgba(0,14,35,.38); font-family:var(--mono); font-size:14.145px; font-weight:500;
             line-height:1; letter-spacing:-0.283px; text-transform:uppercase }
.panel-word { margin:0; font-family:var(--mono); font-size:44.748px; font-weight:400; line-height:1;
              letter-spacing:-2.685px; text-transform:uppercase; color:rgba(0,14,35,.34) }
.panel-line { margin:0; font-family:var(--aeonik); font-size:16.165px; line-height:1.2;
              letter-spacing:-0.323px; color:rgba(0,14,35,.45) }
.problem-card[data-owned] .panel-word { color:var(--ink) }
.problem-card[data-owned] .panel-line { color:rgba(0,14,35,.62) }
.card-caption { position:absolute; color:#000 }
.caption-one { left:90px; top:2102px; transform:translateY(var(--problem-caption-shift)) }
.caption-two { left:941px; top:2105px; transform:translateY(var(--problem-caption-shift)) }
.card-caption h3 { width:522px; margin:0; font-family:var(--mono); font-size:24px; font-weight:400;
                   line-height:1.1; letter-spacing:-1.44px; text-transform:uppercase }
.card-caption p { margin:7px 0 0; font-family:var(--aeonik); font-size:16.165px; line-height:1.2;
                  letter-spacing:-0.323px; opacity:.6; white-space:nowrap }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } .partner-rail { animation:none } }

/* ======================================================= TABLET <=1279 ===== */
@media (max-width:1279px) {
  .hero { inset:auto; left:52.592px; top:50px; width:var(--viewport-width,100vw);
    height:auto; min-height:100vh; min-height:100dvh;
    transform:scale(calc(1 / var(--artboard-scale,1))); transform-origin:0 0;
    --v:1vw; --v:min(1vw,1.5svh);
    --pad:clamp(14px,2.1vw,26px);
    --card-pad:clamp(24px,3.4vw,46px);
    --sky-pad:clamp(16px,2.2vw,28px);
    --nav-h:clamp(54px,5.4vw,72.745px);
    --nav-gap:9.094px;
    --radius:4.041px;
    --hero-title-size:clamp(40px,calc(var(--v) * 4.6),65.512px);
    --hero-title-line:calc(var(--hero-title-size) * var(--hero-title-leading));
    --body-size:clamp(15px,1.25vw,16.165px);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(288px,0.8fr);
    grid-template-rows:var(--nav-h) var(--nav-gap) auto auto auto minmax(auto,1fr);
    column-gap:var(--pad); padding:var(--pad) }

  .hero-copy,.hero-dots,.insight-card,.trusted-block,.hero-divider,.carousel-controls { transform:none }

  .nav-left,.nav-right { position:relative; inset:auto; width:auto; height:auto; grid-row:1 }
  .nav-left { grid-column:1 } .nav-right { grid-column:2 }
  .hero-panel { position:relative; inset:auto; width:auto; height:auto; grid-row:3/-1; grid-column:1 }
  .hero-sky { position:relative; inset:auto; width:auto; height:auto; grid-row:1/-1; grid-column:1/-1;
              margin:calc(var(--pad) * -1) }
  .cloud-layer--wide,.cloud-layer--shift { inset:0; width:100%; height:100%; object-fit:cover;
                                           object-position:50% 20% }
  .cloud-layer--computer { left:38.8%; top:-0.79%; width:73%; height:auto }
  .sky-credit { left:var(--pad); right:var(--pad); top:auto; bottom:var(--pad); width:auto;
                font-size:clamp(15px,2.1vw,24px); letter-spacing:-0.05em }
  .navigation { display:contents }

  .brand-mark,.wordmark { position:relative; inset:auto; z-index:11; grid-row:1; grid-column:1;
                          align-self:center }
  .brand-mark { justify-self:start; margin-inline-start:clamp(12px,1.4vw,18.187px);
                width:clamp(30px,3.1vw,42.434px); height:clamp(30px,3.1vw,42.434px) }
  .wordmark { justify-self:end; margin-inline-end:clamp(14px,1.6vw,24.153px);
              width:clamp(58px,5.8vw,79.152px); height:auto; aspect-ratio:79.152/19.706 }
  .wordmark span { font-size:clamp(13.8px,1.38vw,18.84px); line-height:1 }

  .nav-toggle { display:grid; place-items:center; position:relative; z-index:11; grid-row:1;
    grid-column:2; justify-self:end; align-self:center; margin-inline-end:clamp(10px,1.2vw,16px);
    width:46px; height:46px; padding:0; border:0; pointer-events:auto; border-radius:2.378px;
    background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent }
  .nav-toggle-bars { display:grid; gap:4.5px; width:20px }
  .nav-toggle-bars i { display:block; height:2px; background:rgba(255,255,255,.84);
                       transition:transform 180ms ease, opacity 120ms ease }
  [data-nav-open="true"] .nav-toggle-bars i:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
  [data-nav-open="true"] .nav-toggle-bars i:nth-child(2) { opacity:0 }
  [data-nav-open="true"] .nav-toggle-bars i:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

  .nav-drawer { display:grid; position:absolute; z-index:12;
    top:calc(var(--pad) + var(--nav-h) + 8px); right:var(--pad);
    width:min(300px,calc(100% - var(--pad)*2)); gap:14px; padding:14px;
    border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
    background:rgba(0,14,35,.9); backdrop-filter:blur(19.55px); pointer-events:auto;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms }
  [data-nav-open="true"] .nav-drawer { opacity:1; visibility:visible; transform:none; transition-delay:0s }
  .nav-links { position:relative; inset:auto; display:grid; gap:2px }
  .nav-links a { display:flex; align-items:center; min-height:44px; padding-inline:10px;
                 border-radius:2.378px }
  /* in the drawer it is a row like the others, so it gets its handle back */
  .nav-x { width:auto; height:auto; gap:9px; grid-auto-flow:column; justify-content:flex-start }
  .nav-x img { width:14px; height:14px }
  .nav-x span { display:inline }
  .nav-links a:hover { background:rgba(255,255,255,.08) }
  .login-button { position:relative; inset:auto; width:100%; height:48px }

  .hero-dots { position:relative; inset:auto; grid-row:3; grid-column:1; justify-self:center;
               margin-top:var(--card-pad) }
  .hero-copy { position:relative; inset:auto; grid-row:4; grid-column:1; display:flex;
               flex-direction:column; align-items:center; padding-inline:var(--card-pad);
               margin-top:clamp(22px,calc(var(--v)*3.4),52px) }
  .hero-copy h1 { position:relative; left:auto; top:auto; width:100%; text-wrap:balance }
  .hero-copy h1 span { letter-spacing:-0.06em }
  .hero-copy h1 em { top:var(--hero-title-size); font-size:calc(var(--hero-title-size) * 1.1228);
                     letter-spacing:-0.06em }
  .hero-copy > p { position:relative; left:auto; top:auto; width:min(100%,44ch);
                   margin-top:clamp(16px,calc(var(--v)*2.2),34px); font-size:var(--body-size);
                   letter-spacing:-0.02em }
  .trial-button { position:relative; left:auto; top:auto; margin-top:clamp(18px,calc(var(--v)*2.6),38px);
                  width:198.683px; min-height:52px; height:auto }
  .hero-divider { position:relative; inset:auto; grid-row:5; grid-column:1; width:auto;
                  margin:clamp(24px,calc(var(--v)*3.6),54px) var(--card-pad) 0 }

  /* auto margins would make this grid item shrink to the label's own width and
     leave the rail a 250px slit — pin it to the column instead. */
  .trusted-block { position:relative; inset:auto; grid-row:6; grid-column:1; display:flex;
    flex-direction:column; align-items:center; gap:clamp(14px,1.8vw,22px); width:100%; height:auto;
    max-width:612.268px; align-self:start; justify-self:center;
    margin:clamp(18px,calc(var(--v)*2.6),34px) auto var(--card-pad) }
  .trusted-block > p { position:relative; left:auto; top:auto; text-align:center }
  .partner-strip { position:relative; left:auto; top:auto; width:100% }
  .partner-fade { top:auto; bottom:0; height:25.259px; width:clamp(30px,9%,113.158px) }

  .insight-card { position:relative; inset:auto; z-index:5; grid-row:3/-1; grid-column:2;
    align-self:end; justify-self:start; display:flex; flex-direction:column; width:auto; height:auto;
    max-width:min(312.196px,calc(100% - var(--sky-pad)*2 - 104px)); min-height:0;
    margin:var(--sky-pad); padding:19.196px }
  .diamond-grid { position:relative; inset:auto }
  .insight-card h2 { position:relative; left:auto; top:auto; margin-top:clamp(40px,6vw,82px);
                     font-size:clamp(17px,1.6vw,20.207px); letter-spacing:-0.06em }
  .insight-card p { position:relative; left:auto; top:auto; width:auto; margin-top:8px;
                    font-size:clamp(13.5px,1.2vw,15.155px); letter-spacing:-0.02em }
  .carousel-controls { position:relative; inset:auto; z-index:5; grid-row:3/-1; grid-column:2;
                       align-self:end; justify-self:end; margin:var(--sky-pad) }
  .carousel-button { width:44px; height:44px }

  /* ---- problem ---- */
  .problem { inset:auto; left:52.592px; top:calc(1197.749px + var(--hero-offset));
    width:var(--viewport-width,100vw); height:auto;
    transform:scale(calc(1 / var(--artboard-scale,1))); transform-origin:0 0;
    --pad:clamp(14px,2.1vw,26px); --card-gap:clamp(8px,0.9vw,12px); --row-gap:clamp(34px,4.1vw,70px);
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"kick kick" "rule rule" "head head" "c1 c2" "p1 p2" "c3 c4";
    column-gap:var(--card-gap);
    padding:clamp(20px,2.1vw,35.25px) var(--pad) clamp(40px,5vw,88px) }
  .problem > h2,.problem-card,.card-caption { transform:none }
  .section-kicker { position:relative; inset:auto; grid-area:kick; width:auto; letter-spacing:-0.02em }
  .section-divider { position:relative; inset:auto; grid-area:rule; width:auto;
                     margin:clamp(18px,2vw,33.6px) calc(var(--pad) * -1) 0 }
  .problem > h2 { position:relative; left:auto; top:auto; grid-area:head; width:auto;
                  margin-top:clamp(48px,6.4vw,109.4px); font-size:clamp(26px,5.5vw,44.748px);
                  letter-spacing:-0.06em }
  .problem-card { position:relative; inset:auto; width:auto; height:auto; aspect-ratio:821/538 }
  .card-one{grid-area:c1} .card-two{grid-area:c2} .card-three{grid-area:c3} .card-four{grid-area:c4}
  .card-one,.card-two { margin-top:clamp(24px,2.7vw,45.6px) }
  .card-three,.card-four { margin-top:var(--row-gap) }
  .card-grid { left:0.8526%; top:1.3011%; width:98.5951%; height:97.6666% }
  .panel-face { padding:0 clamp(18px,3.4vw,54px); gap:clamp(8px,0.9vw,13px) }
  .panel-tag { font-size:clamp(11px,1.1vw,14.145px) }
  .panel-word { font-size:clamp(22px,3.6vw,44.748px); letter-spacing:-0.06em }
  .panel-line { font-size:clamp(13px,1.25vw,16.165px); letter-spacing:-0.02em }
  .card-caption { position:relative; inset:auto; margin-top:clamp(16px,1.7vw,29px);
                  padding-inline-start:2.314% }
  .caption-one{grid-area:p1} .caption-two{grid-area:p2}
  .card-caption h3 { width:auto; font-size:clamp(18px,1.9vw,24px); letter-spacing:-0.06em }
  .card-caption p { white-space:normal; font-size:clamp(14.5px,1.25vw,16.165px); letter-spacing:-0.02em }
}

/* ====================================================== STACKED <=895 ====== */
@media (max-width:895px) {
  .hero { --sky-band:clamp(240px,min(41vw,30svh),420px);
    --hero-title-size:clamp(36px,min(7vw,9svh),65.512px);
    grid-template-columns:minmax(0,1fr) var(--nav-h);
    grid-template-rows:var(--nav-h) var(--nav-gap) auto auto auto auto var(--pad)
                       minmax(var(--sky-band),1fr) }
  .hero-panel { grid-row:3/7; grid-column:1/-1 }
  .hero-dots,.hero-copy,.hero-divider,.trusted-block { grid-column:1/-1 }
  .nav-toggle { justify-self:center; margin-inline:0 }
  .cloud-layer--wide,.cloud-layer--shift { object-position:50% 50% }
  .cloud-layer--shift { top:14% }
  .cloud-layer--computer { left:50%; top:auto;
    bottom:calc(var(--sky-band)/2 - var(--viewport-width,100vw) * 0.627);
    width:calc(var(--viewport-width,100vw) * 1.1); height:auto; translate:-50% 0 }
  .cloud-layer--live { mask-image:linear-gradient(to bottom,transparent 0,#000 8%) }
  .insight-card,.carousel-controls { grid-row:8; grid-column:1/-1 }
  .problem { grid-template-columns:minmax(0,1fr);
             grid-template-areas:"kick" "rule" "head" "c1" "p1" "c2" "p2" "c3" "c4" }
  .card-two { margin-top:var(--row-gap) }
  .card-four { margin-top:var(--card-gap) }
}

/* ======================================================= MOBILE <=475 ====== */
@media (max-width:475px) {
  :root { --entrance-shift:14px }
  .hero { --sky-band:clamp(390px,92vw,450px);
          --hero-title-size:clamp(29px,min(7vw,9svh),65.512px);
          --card-pad:clamp(20px,5vw,46px) }
  .insight-card { justify-self:stretch; max-width:none;
                  margin-bottom:calc(var(--sky-pad) + 54px) }
  .insight-card h2 { margin-top:clamp(24px,7vw,82px) }
  .cloud-layer--computer { bottom:calc(var(--sky-band) * 0.81 - var(--viewport-width,100vw) * 0.79315);
                           width:calc(var(--viewport-width,100vw) * 1.45) }
  .trusted-block > p { white-space:normal; text-wrap:balance }
  .problem { padding-bottom:clamp(32px,9vw,88px) }
  .problem > h2 { margin-top:clamp(36px,11vw,109.4px); text-wrap:pretty }
  .card-one,.card-two { margin-top:clamp(20px,6vw,45.6px) }
  .card-caption { margin-top:clamp(13px,4vw,29px) }
  .motion-ready .hero-copy h1 span:first-child,
  .motion-ready .hero-copy h1 em,
  .motion-ready .hero-copy h1 span:nth-of-type(2) { animation-duration:680ms }
}

/* ==================================================== ENTRANCE MOTION ====== */
@keyframes entrance-wipe-right { from { clip-path:inset(0 100% 0 0) } to { clip-path:inset(0) } }
@keyframes entrance-wipe-down  { from { clip-path:inset(0 0 100% 0) } to { clip-path:inset(0) } }
@keyframes entrance-nav-content { from { opacity:0; translate:0 -12px } to { opacity:1; translate:none } }
@keyframes entrance-type { from { opacity:0; translate:0 var(--entrance-shift); clip-path:inset(0 0 100% 0) }
                           to { opacity:1; translate:none; clip-path:inset(-20% -20% -20% -20%) } }
@keyframes entrance-rise { from { opacity:0; translate:0 var(--entrance-shift) } to { opacity:1; translate:none } }
@keyframes entrance-scale-in { from { opacity:0; scale:0.985; translate:0 12px } to { opacity:1; scale:1; translate:none } }

.motion-ready .hero-sky { animation:entrance-wipe-down 980ms var(--entrance-ease-soft) both }
.motion-ready .nav-left { animation:entrance-wipe-right 820ms var(--entrance-ease) 120ms both }
.motion-ready .nav-right { animation:entrance-wipe-right 820ms var(--entrance-ease) 200ms both }
.motion-ready .hero-panel { animation:entrance-wipe-down 900ms var(--entrance-ease) 260ms both }
.motion-ready .brand-mark { animation:entrance-nav-content 620ms var(--entrance-ease) 300ms both }
.motion-ready .wordmark { animation:entrance-nav-content 620ms var(--entrance-ease) 360ms both }
.motion-ready .nav-links a:nth-child(1) { animation:entrance-nav-content 620ms var(--entrance-ease) 380ms both }
.motion-ready .nav-links a:nth-child(2) { animation:entrance-nav-content 620ms var(--entrance-ease) 420ms both }
.motion-ready .nav-links a:nth-child(3) { animation:entrance-nav-content 620ms var(--entrance-ease) 460ms both }
.motion-ready .nav-links a:nth-child(4) { animation:entrance-nav-content 620ms var(--entrance-ease) 500ms both }
.motion-ready .nav-links a:nth-child(5) { animation:entrance-nav-content 620ms var(--entrance-ease) 540ms both }
.motion-ready .login-button { animation:entrance-nav-content 620ms var(--entrance-ease) 580ms both }
.motion-ready .nav-toggle { animation:entrance-nav-content 620ms var(--entrance-ease) 380ms both }
.motion-ready .hero-dots { animation:entrance-rise 720ms var(--entrance-ease) 420ms both }
.motion-ready .hero-copy h1 span:first-child { animation:entrance-type 880ms var(--entrance-ease) 460ms both }
.motion-ready .hero-copy h1 em { animation:entrance-type 880ms var(--entrance-ease) 560ms both }
.motion-ready .hero-copy h1 span:nth-of-type(2) { animation:entrance-type 880ms var(--entrance-ease) 640ms both }
.motion-ready .hero-copy > p { animation:entrance-rise 760ms var(--entrance-ease) 720ms both }
.motion-ready .trial-button { animation:entrance-rise 760ms var(--entrance-ease) 780ms both }
.motion-ready .hero-divider { animation:entrance-wipe-right 900ms var(--entrance-ease) 700ms both }
.motion-ready .insight-card { animation:entrance-scale-in 860ms var(--entrance-ease-soft) 640ms both }
.motion-ready .carousel-controls { animation:entrance-rise 760ms var(--entrance-ease) 760ms both }
.motion-ready .trusted-block { animation:entrance-rise 820ms var(--entrance-ease) 820ms both }
@media (prefers-reduced-motion:reduce) {
  .motion-ready * { animation:none !important }
  .nav-drawer,.nav-toggle-bars i { transition:none }
}

/* ========================================================= FLOW DOCUMENT === */
.flow { position:relative; z-index:1; background:#fff;
  --f-label:clamp(12.5px,0.83vw,17px);
  --f-body:clamp(14.5px,0.95vw,19.5px);
  --f-small:clamp(13px,0.8vw,16px);
  --f-head:clamp(26px,2.61vw,53px) }
@media (max-width:1279px) { .flow { --flow-pad:clamp(14px,2.1vw,26px) } }

.band { position:relative; padding:clamp(54px,5.4vw,114px) var(--flow-pad) 0 }
.band:last-of-type { padding-bottom:clamp(54px,5.4vw,114px) }
.band-kicker { display:flex; align-items:center; justify-content:space-between; color:#4a4a4a;
  font-family:var(--mono); font-size:var(--f-label); font-weight:500; line-height:1;
  letter-spacing:-0.02em; text-transform:uppercase }
.band-kicker i { width:clamp(8px,0.59vw,12px); height:clamp(8px,0.59vw,12px); display:block;
                 opacity:.3; background:var(--ink) }
.band-rule { height:1px; margin:clamp(18px,2vw,38px) calc(var(--flow-pad) * -1) 0;
             background:var(--hair) }
.band-head { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:end; gap:clamp(20px,2.4vw,52px); margin-top:clamp(44px,5.6vw,116px) }
.band-head h2 { margin:0; font-family:var(--mono); font-size:var(--f-head); font-weight:400;
  line-height:1.06; letter-spacing:-0.06em; text-transform:uppercase }
.band-lede { margin:0; max-width:52ch; color:rgba(0,14,35,.62); font-size:var(--f-body);
             line-height:1.35; letter-spacing:-0.02em }
.band-foot { margin:clamp(20px,2vw,40px) 0 0; color:rgba(0,14,35,.45);
  font-family:var(--mono); font-size:var(--f-small); letter-spacing:-0.02em; text-transform:uppercase }
.band-foot a { color:rgba(0,14,35,.75); text-underline-offset:3px }
@media (max-width:895px) { .band-head { grid-template-columns:minmax(0,1fr) } }

/* ---------------------------------------------------------------- spaces -- */
.spaces-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:clamp(14px,1.6vw,30px); margin-top:clamp(26px,2.6vw,54px) }
.spaces-stats { display:flex; gap:clamp(18px,2.2vw,50px); margin:0 }
.spaces-stats div { display:grid; gap:5px }
.spaces-stats dt { color:rgba(0,14,35,.42); font-family:var(--mono); font-size:var(--f-small);
                   text-transform:uppercase; letter-spacing:-0.02em }
.spaces-stats dd { margin:0; font-family:var(--mono); font-size:var(--f-body); letter-spacing:-0.03em }
.btn--ghost { padding-inline:18px }

.spaces-table td.strong, .ledger td.strong { font-family:var(--aeonik); font-weight:500 }
.ledger .muted { color:rgba(0,14,35,.45) }
.ledger .sub { display:block; color:rgba(0,14,35,.4) }
.ledger td.nowrap { white-space:nowrap }
.ledger td.right { text-align:right; padding-right:0 }
.ledger tr[data-active="true"] td { background:rgba(224,224,224,.4) }
.row-buy { min-height:34px; padding:0 14px; border:1px solid var(--ink); border-radius:2.021px;
  color:var(--ink); background:transparent; font-family:var(--mono);
  font-size:clamp(11px,0.7vw,14px); letter-spacing:-0.02em; text-transform:uppercase; cursor:pointer;
  white-space:nowrap; transition:color 160ms ease, background 160ms ease }
.row-buy:hover { color:#fff; background:var(--ink) }

/* ----------------------------------------------------------- slot chips -- */
.slot-host { position:relative }
/* A chip is planted inside whatever it sells — a headline at 65px, a rail, a
   footer column — so every typographic property has to be nailed down. */
.slot-chip { position:absolute; z-index:40; display:none !important; margin:0; padding:4px 7px;
  width:auto !important; height:auto !important; border-radius:2px;
  color:#fff !important; background:var(--ink) !important;
  font-family:var(--mono) !important; font-size:12.5px !important; font-weight:500 !important;
  font-style:normal !important; line-height:1.25 !important; letter-spacing:-0.02em !important;
  text-transform:uppercase !important; text-align:left !important; white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
  opacity:1 !important; cursor:pointer; pointer-events:auto; user-select:none }
.slot-chip[data-owned] { background:rgba(0,14,35,.72) }
.slot-chip[data-active="true"] { background:#2372ae }
.slot-chip--above { left:0; bottom:100%; margin-bottom:7px }
.slot-chip--below { left:0; top:100%; margin-top:7px }
.slot-chip--above-right { right:0; bottom:100%; margin-bottom:7px }
.slot-chip--below-right { right:0; top:100%; margin-top:7px }
.slot-chip--inside { left:50%; bottom:18px; translate:-50% 0 }
.slot-chip--inside-bottom { left:18px; bottom:18px }
.slot-host:hover > .slot-chip, [data-slot-host]:hover > .slot-chip,
.slot-chip:focus-visible { display:inline-block !important }
:root[data-spaces="true"] .slot-chip { display:inline-block !important }
:root[data-spaces="true"] .slot-host,
:root[data-spaces="true"] [data-slot-host] { outline:1px dashed rgba(0,14,35,.38); outline-offset:4px }
:root[data-spaces="true"] .hero-sky, :root[data-spaces="true"] .insight-card,
:root[data-spaces="true"] .login-button, :root[data-spaces="true"] .site-footer .slot-host {
  outline-color:rgba(255,255,255,.55) }
.slot-linked { cursor:pointer }
.mark-text { display:grid; place-items:center; width:100%; height:100%; font-family:var(--mono);
  font-size:15px; font-weight:500; letter-spacing:-0.06em; color:var(--ink);
  border:1.4px solid var(--ink); border-radius:3px; text-transform:uppercase }
.sky-credit { position:absolute; z-index:3; left:922.498px; top:196px; width:760px; margin:0;
  color:#fff; font-family:var(--mono); font-size:24px; font-weight:400; line-height:1.15;
  letter-spacing:-1.1px; text-transform:uppercase; text-shadow:0 1px 26px rgba(0,14,35,.4) }
.sky-credit[hidden] { display:none }

/* ------------------------------------------------------------------ pair -- */
.pair-shell { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,0.92fr);
  gap:clamp(10px,1.1vw,22px); margin-top:clamp(30px,3vw,62px); align-items:start }
@media (max-width:1100px) { .pair-shell { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
@media (max-width:760px) { .pair-shell { grid-template-columns:minmax(0,1fr) } }
.pair-label { margin-bottom:clamp(10px,0.9vw,16px); color:rgba(0,14,35,.42); font-family:var(--mono);
  font-size:var(--f-small); letter-spacing:-0.02em; text-transform:uppercase }
.order-card,.coin-card,.run-card { border:1px solid var(--hair); border-radius:4.041px;
  padding:clamp(14px,1.2vw,24px); background:#fff }
.order-card { display:block }

.order-body h3 { margin:0; font-family:var(--mono); font-size:clamp(16px,1.15vw,23px);
                 font-weight:400; line-height:1.1; letter-spacing:-0.05em; text-transform:uppercase }
.order-body > p { margin:8px 0 0; color:rgba(0,14,35,.55); font-size:var(--f-small); line-height:1.3;
                  letter-spacing:-0.02em }
.order-lines { margin:clamp(14px,1.2vw,22px) 0 0; display:grid; gap:7px }
.order-lines div { display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.order-lines dt { color:rgba(0,14,35,.5); font-family:var(--mono); font-size:var(--f-small);
                  text-transform:uppercase; letter-spacing:-0.02em }
.order-lines dd { margin:0; font-family:var(--mono); font-size:var(--f-small); letter-spacing:-0.03em }
.order-total { margin-top:5px; padding-top:9px; border-top:1px solid var(--hair) }
.order-total dt,.order-total dd { color:var(--ink); font-size:var(--f-body) }
.order-rate { margin:10px 0 0; color:rgba(0,14,35,.4); font-family:var(--mono);
              font-size:clamp(11px,0.7vw,14px); text-transform:uppercase; letter-spacing:-0.02em }

.field { display:grid; gap:6px; margin-bottom:clamp(10px,0.9vw,16px) }
.field[hidden], .btn[hidden] { display:none }
.field label { color:rgba(0,14,35,.5); font-family:var(--mono); font-size:var(--f-small);
               text-transform:uppercase; letter-spacing:-0.02em }
.field label span { text-transform:none; color:rgba(0,14,35,.32) }
.field input { width:100%; min-height:clamp(40px,3vw,52px); padding:0 12px; border:1px solid var(--hair);
  border-radius:2.021px; color:var(--ink); background:#fff; font-family:var(--mono);
  font-size:var(--f-body); letter-spacing:-0.03em }
.field input:focus { outline:0; border-color:var(--ink) }
.coin-split { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
              gap:clamp(8px,0.8vw,14px) }
.coin-facts { margin:clamp(14px,1.2vw,22px) 0 0; padding-top:clamp(12px,1vw,18px);
              border-top:1px solid var(--hair); display:grid; gap:7px }
.coin-facts div { display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.coin-facts dt { color:rgba(0,14,35,.5); font-family:var(--mono); font-size:var(--f-small);
                 text-transform:uppercase; letter-spacing:-0.02em }
.coin-facts dd { margin:0; font-family:var(--mono); font-size:var(--f-small); letter-spacing:-0.03em;
                 text-align:right }

.run-card { display:grid; gap:9px }
.btn { min-height:clamp(44px,3.2vw,56px); display:grid; place-items:center; padding:0 14px;
  border:1px solid var(--ink); border-radius:2.021px; color:var(--ink); background:transparent;
  font-family:var(--mono); font-size:clamp(12px,0.78vw,15.5px); font-weight:500;
  letter-spacing:-0.02em; text-transform:uppercase; cursor:pointer;
  transition:color 160ms ease, background 160ms ease, border-color 160ms ease }
.btn:hover:not(:disabled) { color:#fff; background:var(--ink) }
.btn--primary { color:#fff; background:var(--ink) }
.btn--primary:hover:not(:disabled) { color:var(--ink); background:transparent }
.btn:disabled { border-color:var(--hair); color:rgba(0,14,35,.3); cursor:not-allowed }
.btn[data-busy="true"] { opacity:.6; pointer-events:none }
.steps { margin:clamp(6px,0.6vw,12px) 0 0; padding:0; list-style:none; display:grid; gap:8px }
.steps li { display:flex; align-items:center; gap:9px; color:rgba(0,14,35,.5);
  font-family:var(--mono); font-size:var(--f-small); letter-spacing:-0.02em; min-width:0 }
.steps .dot { flex:0 0 8px; width:8px; height:8px; background:rgba(0,14,35,.18) }
.steps li[data-state="done"] { color:var(--ink) }
.steps li[data-state="done"] .dot { background:var(--ink) }
.steps li[data-state="live"] .dot { background:#2372ae; animation:pulse 1.2s ease-in-out infinite }
.steps li[data-state="fail"] { color:#a8332a } .steps li[data-state="fail"] .dot { background:#a8332a }
.steps .txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.steps a { color:inherit; text-underline-offset:3px }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.run-note { margin:clamp(6px,0.6vw,12px) 0 0; color:rgba(0,14,35,.4); font-size:var(--f-small);
            line-height:1.3; letter-spacing:-0.02em }

/* -------------------------------------------------------------- receipts -- */
.table-wrap { margin-top:clamp(28px,2.8vw,58px); overflow-x:auto; min-width:0 }
.ledger { width:100%; min-width:0; border-collapse:collapse; font-family:var(--mono);
          font-size:var(--f-small); letter-spacing:-0.02em }
.ledger th { padding:0 14px 12px 0; color:rgba(0,14,35,.42); font-weight:500; text-align:left;
             text-transform:uppercase; border-bottom:1px solid var(--hair); white-space:nowrap }
.ledger td { padding:14px 14px 14px 0; border-bottom:1px solid var(--hair); vertical-align:top;
             white-space:nowrap }
.ledger td.item { white-space:normal; min-width:180px; font-family:var(--aeonik) }
.ledger a { color:var(--ink); text-underline-offset:3px }
.ledger tr.empty td { color:rgba(0,14,35,.4); border-bottom:0; text-transform:uppercase;
                       white-space:normal; padding-top:16px }
.ledger[data-empty="true"] thead { display:none }
.ledger tbody tr:hover td { background:rgba(224,224,224,.25) }

/* ------------------------------------------------------------------- faq -- */
.faq-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
            gap:clamp(20px,2.2vw,46px) clamp(16px,1.6vw,34px); margin-top:clamp(30px,3vw,62px) }
@media (max-width:1100px) { .faq-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px) { .faq-grid { grid-template-columns:minmax(0,1fr) } }
.faq-item { padding-top:clamp(14px,1.2vw,22px); border-top:1px solid var(--hair) }
.faq-item h3 { margin:0 0 9px; font-family:var(--mono); font-size:clamp(14px,1vw,20px);
               font-weight:400; line-height:1.15; letter-spacing:-0.05em; text-transform:uppercase }
.faq-item p { margin:0; color:rgba(0,14,35,.6); font-size:var(--f-small); line-height:1.4;
              letter-spacing:-0.02em }

/* ---------------------------------------------------------------- footer -- */
.site-footer { margin-top:0; padding:clamp(40px,4vw,84px) var(--flow-pad)
               clamp(20px,1.8vw,34px); color:#fff; background:var(--ink) }
.foot-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
            gap:clamp(28px,3vw,60px) }
@media (max-width:760px) { .foot-top { grid-template-columns:minmax(0,1fr) } }
.foot-brand img { display:block }
.foot-mark { border-radius:8px }
.foot-word { display:block; margin-top:14px; font-family:var(--mono);
             font-size:clamp(22px,1.9vw,38px); letter-spacing:-0.06em }
.foot-brand p { margin:10px 0 0; max-width:34ch; color:rgba(255,255,255,.5); font-size:var(--f-small);
                line-height:1.35; letter-spacing:-0.02em }
.foot-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.6vw,34px) }
.foot-cols h4 { margin:0 0 14px; color:rgba(255,255,255,.4); font-family:var(--mono);
  font-size:var(--f-small); font-weight:500; letter-spacing:-0.02em; text-transform:uppercase }
.foot-cols a { display:block; margin-bottom:9px; color:rgba(255,255,255,.82); font-size:var(--f-small);
               letter-spacing:-0.02em; text-decoration:none }
.foot-cols a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px }
.foot-bottom { display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  margin-top:clamp(34px,3.4vw,72px); padding-top:clamp(14px,1.2vw,24px);
  border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.4); font-family:var(--mono);
  font-size:clamp(11px,0.7vw,14px); letter-spacing:-0.02em; text-transform:uppercase }
.btn:focus-visible,.p-buy:focus-visible,.field input:focus-visible,.foot-cols a:focus-visible,
.band-foot a:focus-visible,.ledger a:focus-visible { outline:2px solid var(--ink); outline-offset:2px }
.site-footer a:focus-visible { outline-color:#fff }

/* ------------------------------------------ tables become cards on a phone -- */
@media (max-width:760px) {
  .table-wrap { overflow-x:visible }
  .ledger { display:block }
  .ledger thead { display:none }
  .ledger tbody, .ledger tr, .ledger td { display:block; width:auto }
  .ledger tr { display:grid; gap:5px 12px; padding:15px 0; border-bottom:1px solid var(--hair);
               align-items:baseline }
  .ledger td { padding:0; border:0; white-space:normal }
  .ledger tbody tr:hover td { background:transparent }

  .spaces-table tr { grid-template-columns:minmax(0,1fr) auto;
                     grid-template-areas:"name price" "where where" "owner coin" "buy buy" }
  .spaces-table td:nth-child(1) { grid-area:name; font-size:var(--f-body) }
  .spaces-table td:nth-child(2) { grid-area:where }
  .spaces-table td:nth-child(3) { grid-area:price; text-align:right }
  .spaces-table td:nth-child(3) .sub { display:inline; margin-left:6px }
  .spaces-table td:nth-child(4) { grid-area:owner }
  .spaces-table td:nth-child(5) { grid-area:coin; text-align:right }
  .spaces-table td:nth-child(6) { grid-area:buy; margin-top:9px; text-align:left }
  .spaces-table .row-buy { width:100%; min-height:42px }

  #ledger tr { grid-template-columns:minmax(0,1fr) auto;
               grid-template-areas:"space when" "line line" "paid owner" "tx tx" }
  #ledger td:nth-child(1) { grid-area:when; text-align:right }
  #ledger td:nth-child(2) { grid-area:space; font-size:var(--f-body) }
  #ledger td:nth-child(3) { grid-area:line }
  #ledger td:nth-child(4) { grid-area:paid }
  #ledger td:nth-child(5) { grid-area:owner; text-align:right }
  #ledger td:nth-child(6) { grid-area:tx }
  #ledger tr.empty { display:block }
  .ledger tr.empty td { grid-area:auto }
}

/* ----------------------------------------------------- what you already own -- */
.mine { margin-top:clamp(26px,2.6vw,54px); padding-top:clamp(14px,1.3vw,24px);
        border-top:1px solid var(--hair) }
.mine-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.mine-label { font-family:var(--mono); font-size:var(--f-small); letter-spacing:-0.02em;
              text-transform:uppercase }
.mine-hint { color:rgba(0,14,35,.45); font-family:var(--mono); font-size:var(--f-small);
             letter-spacing:-0.02em; text-transform:uppercase }
.mine-list:not(:empty) { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,0.8vw,14px); margin-top:clamp(12px,1.1vw,20px) }
@media (max-width:1100px) { .mine-list:not(:empty) { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px) { .mine-list:not(:empty) { grid-template-columns:minmax(0,1fr) } }
.mine-card { display:grid; gap:5px; padding:clamp(11px,0.9vw,16px); text-align:left; cursor:pointer;
  border:1px solid var(--hair); border-radius:4.041px; background:#fff; min-width:0;
  transition:border-color 160ms ease, background 160ms ease }
.mine-card:hover { border-color:var(--ink) }
.mine-card[data-active="true"] { border-color:var(--ink); background:rgba(224,224,224,.35) }
.mine-name { font-family:var(--mono); font-size:var(--f-small); letter-spacing:-0.03em;
             text-transform:uppercase }
.mine-line { color:rgba(0,14,35,.55); font-size:var(--f-small); letter-spacing:-0.02em;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mine-coin { color:rgba(0,14,35,.4); font-family:var(--mono); font-size:clamp(10.5px,0.66vw,13px);
             letter-spacing:-0.02em; text-transform:uppercase }
.slot-chip[data-yours="true"] { background:#1f6f43 !important }
:root[data-spaces="true"] [data-slot] { cursor:pointer }

/* ------------------------------------------------------------ the network -- */
.chain-badge { margin:0 0 3px; padding:9px 11px; border:1px solid var(--hair); border-radius:2.021px;
  color:rgba(0,14,35,.55); font-family:var(--mono); font-size:var(--f-small); letter-spacing:-0.02em;
  text-transform:uppercase }
.chain-badge[data-state="ok"] { color:#1f6f43; border-color:rgba(31,111,67,.35);
                                background:rgba(31,111,67,.06) }
.chain-badge[data-state="bad"] { color:#a8332a; border-color:rgba(168,51,42,.4);
                                 background:rgba(168,51,42,.06) }
.btn--warn { color:#fff; background:#a8332a; border-color:#a8332a }
.btn--warn:hover:not(:disabled) { color:#a8332a; background:transparent }

/* --------------------------------------------------------- wallet choice -- */
.wallet-pick { display:grid; gap:6px; padding:11px; border:1px solid var(--hair);
               border-radius:2.021px; background:rgba(224,224,224,.28) }
.wallet-pick[hidden] { display:none }
.pick-label { color:rgba(0,14,35,.5); font-family:var(--mono); font-size:var(--f-small);
              letter-spacing:-0.02em; text-transform:uppercase }
.pick-item { min-height:40px; padding:0 12px; text-align:left; cursor:pointer;
  border:1px solid var(--hair); border-radius:2.021px; background:#fff; color:var(--ink);
  font-family:var(--mono); font-size:var(--f-small); letter-spacing:-0.02em;
  text-transform:uppercase; transition:border-color 160ms ease }
.pick-item:hover { border-color:var(--ink) }