/* ============================================================================
   useportal.net — faithful reconstruction (iter 2)
   Real fonts + real Framer assets. Frame model & tokens from live-DOM measurement:
     - text sections: 600px content column, centered (x=420 @1440)
     - split sections: 800px content column, centered (x=320 @1440)
     - body = Inter 16px / -0.02em / rgba(0,0,0,.75);  headings = Perfectly Nineties
   ============================================================================ */
@font-face { font-family:"Perfectly Nineties"; src:url("assets/fonts/PerfectlyNineties.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Myfont"; src:url("assets/fonts/Myfont.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root {
  --bg:#f7f7f7; --ink:#000; --ink-75:rgba(0,0,0,.75); --ink-60:rgba(0,0,0,.6); --ink-50:rgba(0,0,0,.5);
  --btn-ink:#535398; --blue:#0099ff; --teal:#19c3c3;
  /* Demo Dart scheme: warm board-game accents on cork/cream/ink neutrals */
  --dd-ink:#241c13; --dd-cream:#f6efdf; --dd-cork:#96683f;
  --dd-red:#e2574c; --dd-amber:#eda63a; --dd-teal:#2ea99e;
  --dd-blue:#5583d8; --dd-green:#63a552; --dd-plum:#9a68c8;
  --serif:"Bricolage Grotesque","Inter",system-ui,sans-serif; --sans:"Inter",system-ui,-apple-system,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.35; letter-spacing:-0.02em; -webkit-font-smoothing:antialiased; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }

.wrap   { width:100%; max-width:648px; margin:0 auto; padding:0 24px; }   /* content 600 */
.wrap-w { width:100%; max-width:848px; margin:0 auto; padding:0 24px; }   /* content 800 */
.wrap-xl{ width:100%; max-width:1000px; margin:0 auto; padding:0 24px; }

.h1 { font-family:var(--serif); font-weight:600; font-size:clamp(27px, 1.9vw + 20px, 47px); line-height:1.06; letter-spacing:-0.02em; }
.h2 { font-family:var(--serif); font-weight:550; font-size:35px; line-height:1.06; letter-spacing:-0.015em; text-wrap:balance; }
.sub { font-family:var(--sans); font-weight:700; font-size:19px; line-height:1.3; letter-spacing:-0.02em; }
.p  { font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.35; letter-spacing:-0.02em; color:var(--ink-75); max-width:590px; }
.p.white { color:#fff; }
.small { font-size:12px; line-height:1.4; letter-spacing:-0.02em; color:var(--ink-60); }

.section { padding:60px 0; }
.section + .section::before { content:""; display:block; width:600px; max-width:calc(100% - 48px); margin:-60px auto 60px; border-top:1px dotted rgba(0,0,0,.18); }
.lead-head { max-width:545px; margin-bottom:18px; text-wrap:balance; }
.lead-copy { max-width:590px; margin-bottom:14px; }

.btn { display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:-0.02em; border:0; cursor:pointer; border-radius:999px; }
.btn-white { background:#fff; color:var(--btn-ink); padding:14px 26px; box-shadow:0 14px 34px rgba(40,30,80,.18); }
.btn-blue  { background:#007aff; color:#fff; padding:16px 38px; }

/* ============================== HERO ============================== */
.hero { position:relative; background-color:#f7f7f7; background-image:url("assets/img/6CnligMRZTqS1M171eobYauJ90.png"); background-size:cover; background-position:center top; background-repeat:no-repeat; overflow:hidden; padding-bottom:70px; }
.hero-spark { position:absolute; z-index:3; width:64px; height:auto; pointer-events:none; }
.hero-spark-l { left:9%; top:210px; width:58px; }
.hero-spark-r { right:8%; top:215px; width:70px; }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:230px; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(247,247,247,0) 0%, rgba(247,247,247,0.7) 55%, rgba(247,247,247,0.97) 82%, #f7f7f7 100%); }
.hero::before { content:""; position:absolute; inset:0 0 50% 0; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(1.6px 1.6px at 6% 14%,rgba(255,255,255,.95),transparent),
    radial-gradient(1.3px 1.3px at 13% 26%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.4px 1.4px at 19% 9%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.7px 1.7px at 26% 19%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.2px 1.2px at 33% 31%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.5px 1.5px at 34% 12%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.3px 1.3px at 41% 24%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.8px 1.8px at 47% 7%,rgba(255,255,255,.95),transparent),
    radial-gradient(1.2px 1.2px at 52% 18%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.5px 1.5px at 58% 28%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.3px 1.3px at 63% 11%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.6px 1.6px at 69% 22%,rgba(255,255,255,.85),transparent),
    radial-gradient(1.2px 1.2px at 74% 33%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.5px 1.5px at 78% 14%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.3px 1.3px at 84% 25%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.7px 1.7px at 90% 9%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.2px 1.2px at 94% 20%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.4px 1.4px at 97% 31%,rgba(255,255,255,.75),transparent); }
.nav { position:relative; z-index:10; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:84px; max-width:1312px; margin:0 auto; padding:0 24px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand .logo { width:34px; height:34px; }
.brand .word { font-family:var(--serif); font-size:25px; color:#fff; letter-spacing:-0.01em; }
.nav-menu { display:flex; align-items:center; gap:4px; }
.nav-menu a { color:#fff; font-size:15px; font-weight:500; padding:8px 16px; border-radius:999px; }
.nav-menu a.active { background:rgba(255,255,255,.22); }
.nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0 9px; background:none; border:0; cursor:pointer; }
.nav-burger span { display:block; height:2px; width:100%; background:#fff; border-radius:2px; }

.hero-content { position:relative; z-index:5; text-align:center; padding:92px 24px 0; }
.hero-content h1 { color:#fff; max-width:760px; margin:0 auto 22px; }
.hero-content .p { max-width:472px; margin:0 auto 32px; text-align:center; color:#fff; }
.hero-mockup { width:min(876px,90%); margin:58px auto 0; position:relative; z-index:6; }
.hero-mockup img { width:100%; height:auto; border-radius:16px; box-shadow:0 30px 70px rgba(40,30,80,0.22); }

/* ============================== FEATURES ============================== */
.feature-cols { display:grid; grid-template-columns:302px auto; margin-top:74px; }
.feature-col { display:flex; flex-direction:column; gap:27px; }
.feat { display:flex; align-items:center; gap:16px; position:relative; height:36px; }
.feat img, .feat svg { width:36px; height:36px; flex:none; }
.feat .label { font-size:16px; letter-spacing:-0.02em; color:#000; white-space:nowrap; }

/* ============================== SPLITS ============================== */
.split { display:flex; align-items:center; justify-content:center; gap:64px; }
.split .copy { flex:0 1 auto; min-width:0; }
.split .media { flex:0 0 auto; display:flex; justify-content:center; }
.split .copy .sub { margin-bottom:14px; max-width:360px; }
.split .copy .p { max-width:360px; }

/* project-type cards */
.types { display:flex; flex-direction:column; gap:7px; width:340px; }
.type-card { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:12px; padding:11px 14px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.type-card img, .type-card svg { width:32px; height:32px; flex:none; }
.type-card .t { font-family:var(--serif); font-size:18px; line-height:1; }
.type-card .d { font-size:12px; line-height:1.35; color:var(--ink-50); margin-top:4px; letter-spacing:-0.01em; }

/* payment notification cards */
.pay-wrap { position:relative; width:310px; max-width:100%; margin:18px auto 0; transform:rotate(2deg); }
.pay-toast { position:absolute; top:-54px; right:-26px; transform:rotate(1.5deg); z-index:3; display:flex; align-items:center; gap:13px; background:#fff; border-radius:14px; padding:12px 18px; box-shadow:0 18px 40px rgba(0,0,0,.16); white-space:nowrap; }
.pay-toast img, .pay-toast svg { width:40px; height:40px; flex:none; }
.pay-toast .tt { font-weight:600; font-size:15px; letter-spacing:-0.02em; }
.pay-toast .ta { color:var(--dd-green); font-weight:600; font-size:13.5px; }
.pay-toast .time { color:var(--ink-50); font-size:11.5px; margin-left:6px; }
.pay-card { background:#fff; border-radius:16px; padding:4px 16px; box-shadow:0 18px 44px rgba(0,0,0,.10); }
.pay-row { position:relative; display:flex; align-items:center; gap:12px; padding:8px 4px; border-bottom:1px solid rgba(0,0,0,.06); }
.pay-row:last-child { border-bottom:0; }
.pay-row img.thumb { width:38px; height:28px; border-radius:6px; flex:none; object-fit:cover; }
.pay-row .pt { font-weight:600; font-size:13.5px; letter-spacing:-0.02em; }
.pay-row .ps { font-size:12px; color:var(--ink-50); display:flex; align-items:center; gap:6px; }
.pay-row .dot { width:4px; height:4px; border-radius:50%; background:rgba(0,0,0,.28); }
.pay-row::after { content:'↻'; position:absolute; left:30px; top:calc(50% + 2px); width:15px; height:15px; border-radius:50%; background:#f5a31a; color:#fff; font-size:9px; line-height:15px; text-align:center; font-weight:700; box-shadow:0 0 0 2px #fff; }

/* file-transfer cluster */
/* export formats: one video, three shapes (16:9 / 9:16 / 1:1), each styled
   like a tiny paused player */
.file-cluster { position:relative; height:274px; width:300px; max-width:100%; }
.file-cluster .fmt { position:absolute; border-radius:13px; box-shadow:0 18px 40px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.25); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.02em; }
.file-cluster .fmt small { font-weight:500; font-size:9.5px; opacity:.8; letter-spacing:.06em; }
.fmt-play { width:28px; height:28px; border-radius:999px; background:rgba(255,255,255,.24); display:flex; align-items:center; justify-content:center; }
.fmt-play svg { width:13px; height:13px; margin-left:1px; fill:#fff; }
.fmt-dur { position:absolute; right:8px; top:8px; font-size:9px; font-weight:600; letter-spacing:.03em; background:rgba(0,0,0,.26); padding:2px 6px; border-radius:5px; }
.fmt-bar { position:absolute; left:10px; right:10px; bottom:9px; height:3px; border-radius:2px; background:rgba(255,255,255,.30); overflow:hidden; }
.fmt-bar i { display:block; height:100%; border-radius:2px; background:#fff; opacity:.92; }
.fmt-wide   { left:0;   top:16%; width:176px; height:99px;  z-index:1; transform:rotate(-6deg); background:linear-gradient(135deg,#39b1a5,#22867c); }
.fmt-tall   { left:58%; top:2%;  width:104px; height:185px; z-index:3; transform:rotate(4deg);  background:linear-gradient(160deg,#e9695e,#c9433a); }
.fmt-square { left:19%; top:53%; width:124px; height:124px; z-index:2; transform:rotate(-2deg); background:linear-gradient(145deg,#6390e0,#3f66ba); }

/* contract */
.contract { position:relative; width:340px; max-width:100%; padding:14px 0; }
.ct-card { position:relative; z-index:2; width:296px; margin:0 auto; background:#fff; border-radius:18px; box-shadow:0 26px 60px rgba(0,0,0,.12); padding:22px 22px 24px; overflow:hidden; }
.ct-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; pointer-events:none; }
.ct-legal { position:relative; display:block; width:100%; opacity:.5; margin-bottom:20px; }
.ct-siglabel { position:relative; font-family:var(--sans); font-size:12px; letter-spacing:-0.01em; color:var(--ink-50); margin-bottom:8px; }
.ct-sigbox { position:relative; height:50px; background:#e9f1ff; border:1px solid #cdddfb; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.ct-scribble { width:96px; height:auto; }
.ct-sign { position:relative; display:block; width:100%; height:auto; }
.ct-ico { flex:none; width:24px; height:24px; border-radius:7px; background:#007AFF; display:inline-flex; align-items:center; justify-content:center; }
.ct-ico svg { width:24px; height:24px; display:block; }
.ct-pill { position:absolute; top:-8px; right:-30px; z-index:4; display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:999px; padding:7px 14px 7px 9px; box-shadow:0 14px 34px rgba(0,0,0,.14); }
.ct-pill img { width:152px; height:auto; display:block; }
.ct-behind { position:absolute; top:20px; left:-26px; z-index:1; display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:14px; padding:8px 14px 8px 9px; box-shadow:0 14px 34px rgba(0,0,0,.10); }
.ct-behind img { width:140px; height:auto; display:block; }
.split .copy.ct-copy .sub, .split .copy.ct-copy .p { max-width:340px; }

/* payments 2x2 */
.pay2 { display:grid; grid-template-columns:1fr 1fr; margin-top:48px; }
.pay2 .cell { padding:0; }
.pay2 .cell:nth-child(1),.pay2 .cell:nth-child(2){ padding-bottom:38px; }
.pay2 .cell:nth-child(3),.pay2 .cell:nth-child(4){ padding-top:38px; }
.pay2 .cell:nth-child(odd){ padding-right:46px; }
.pay2 .cell:nth-child(even){ padding-left:46px; }
.pay2 .cell:nth-child(1){ border-right:1px dashed rgba(0,0,0,.16); border-bottom:1px dashed rgba(0,0,0,.16); }
.pay2 .cell:nth-child(2){ border-bottom:1px dashed rgba(0,0,0,.16); }
.pay2 .cell:nth-child(3){ border-right:1px dashed rgba(0,0,0,.16); }
.pay2 .icons { display:flex; gap:0; margin-bottom:16px; height:48px; }
.pay2 .icons img + img { margin-left:-12px; }
.pay2 .icons img, .pay2 .icons svg { width:48px; height:48px; }
.pay2 h3 { font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:-0.02em; margin-bottom:8px; line-height:1.25; }
.click-pay { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:54px; }
.click-pay .sub { max-width:260px; }
.click-pay img { width:150px; height:auto; }

/* branding tablets: real generated sample videos, clickable. The stack starts
   spread across the full content column, then fans out further on scroll. */
.tablets { position:relative; height:280px; margin-top:56px; }
.tablets .tab-vid { position:absolute; top:8px; left:50%; width:380px; margin-left:-190px; padding:0; border:0; cursor:pointer; background:none; border-radius:13px; box-shadow:0 18px 44px rgba(0,0,0,.16); transform-origin:center 70%; will-change:transform; backface-visibility:hidden; transition:transform .8s cubic-bezier(.2,.9,.25,1); }
.tablets .tab-vid img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:13px; }
.tablets .tab-vid:nth-child(1){ z-index:4; transform:translateX(-110px); }
.tablets .tab-vid:nth-child(2){ z-index:3; transform:translateX(-37px); }
.tablets .tab-vid:nth-child(3){ z-index:2; transform:translateX(37px); }
.tablets .tab-vid:nth-child(4){ z-index:1; transform:translateX(110px); }
/* fan distance is capped so the outer cards always stay ~24px inside the
   viewport edge (card half-width 190px + margin), instead of overflowing
   off-screen on mid-size windows */
.tablets.fanned .tab-vid:nth-child(1){ transform:translateX(calc(-1 * min(372px, 50vw - 214px))) translateY(14px) rotate(-3.9deg); }
.tablets.fanned .tab-vid:nth-child(2){ transform:translateX(calc(-1 * min(124px, (50vw - 214px) / 3))) rotate(-1.3deg); }
.tablets.fanned .tab-vid:nth-child(3){ transform:translateX(min(124px, (50vw - 214px) / 3)) rotate(1.3deg); }
.tablets.fanned .tab-vid:nth-child(4){ transform:translateX(min(372px, 50vw - 214px)) translateY(14px) rotate(3.9deg); }
/* small play badge so they read as videos, like the hero photo */
.tab-vid .tab-play {
  position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:999px;
  background:rgba(18,15,12,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
  transition:transform .18s ease, background .18s ease;
}
.tab-vid:hover .tab-play { transform:scale(1.1); background:rgba(18,15,12,.75); }
.tab-vid .tab-play svg { width:16px; height:16px; margin-left:2px; fill:#fff; }

/* steps */
.steps { margin-top:60px; max-width:600px; }
.step { display:flex; gap:20px; padding-bottom:44px; position:relative; }
.step:last-child { padding-bottom:0; }
.step .num { width:35px; height:35px; border-radius:50%; flex:none; z-index:1; background:var(--dd-teal); color:#fff; font-weight:600; font-size:15px; display:grid; place-items:center; }
.step:not(:last-child)::before { content:""; position:absolute; left:16px; top:35px; bottom:0; border-left:2px dashed rgba(0,0,0,.14); }
.step h3 { font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:-0.02em; margin-bottom:5px; }
.step p { color:var(--ink-75); font-size:16px; line-height:1.4; letter-spacing:-0.02em; max-width:500px; }

/* pricing */
.price-row { display:flex; gap:26px; align-items:flex-start; margin-top:34px; }
.price-row img { width:74px; height:74px; flex:none; }
.price-body .pp { font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.4; letter-spacing:-0.02em; color:#000; max-width:52ch; }
.price-body .small { margin-top:14px; max-width:64ch; }

/* founder memo */
.memo-card { background:#fff; border-radius:22px; box-shadow:0 30px 70px rgba(0,0,0,.10); padding:44px 64px; max-width:660px; margin:0 auto; }
.memo-card .lbl { font-weight:700; font-size:16px; letter-spacing:-0.02em; margin-bottom:18px; }
.memo-card p { color:var(--ink-75); font-size:15px; line-height:1.6; letter-spacing:-0.02em; margin-bottom:15px; }
.memo-foot { display:flex; align-items:flex-end; justify-content:space-between; margin-top:26px; }
.memo-foot .sig { width:150px; }
.memo-foot .who { display:flex; align-items:center; gap:11px; }
.memo-foot .who img { width:41px; height:41px; border-radius:50%; }
.memo-foot .who b { font-size:14px; display:block; letter-spacing:-0.02em; }
.memo-foot .who span { font-size:12.5px; color:var(--ink-50); letter-spacing:-0.02em; }

/* footer CTA: same cream torn-paper note as the hero, pinned by a dart */
.cta { text-align:center; padding:clamp(36px, 4.5vw, 56px) 16px 30px; }
.cta-wrap { position:relative; max-width:960px; margin:0 auto; }
/* zero-size tip anchor rotated about the pin point, exactly like .dart-stuck
   in the hero (the dart sits outside .cta-paper so the torn mask can't clip it) */
.cta-dart { position:absolute; left:50%; top:34px; width:0; height:0; transform:rotate(-4deg); pointer-events:none; z-index:2; }
.cta-dart img { width:40px; max-width:none; transform:translate(-54.6%,-0.6%); transform-origin:54.6% 0.6%; filter:drop-shadow(2px 10px 9px rgba(0,0,0,.35)); }
.cta-paper {
  position:relative;
  /* fixed 100px top: the pinned dart (tip at 34px + ~52px of tail at its
     40px landing size) needs its own strip of paper above the headline */
  padding:100px clamp(22px, 6vw, 80px) clamp(40px, 5vw, 62px);
  background:
    repeating-linear-gradient(-42deg, rgba(120,90,50,.04) 0 3px, rgba(0,0,0,0) 3px 7px),
    #f6efdf;
  -webkit-mask:var(--torn) center / 100% 100% no-repeat;
  mask:var(--torn) center / 100% 100% no-repeat;
}
.cta h2 { font-size:clamp(28px, 3.4vw, 48px); color:#241708; max-width:820px; margin:0 auto 14px; }
.cta .p { max-width:472px; margin:0 auto 34px; text-align:center; color:rgba(40,26,12,.80); }

/* footer */
.foot { padding-top:76px; padding-bottom:48px; }
.foot-cols { display:flex; justify-content:space-between; gap:40px; }
.foot-text { max-width:360px; font-size:15px; line-height:1.55; letter-spacing:-0.02em; color:var(--ink-75); }
.foot-text a { color:#000; text-decoration:underline; text-underline-offset:2px; }
.foot-text .berlin { margin-top:16px; }
.foot-text .rights { margin-top:20px; color:var(--ink-50); font-size:12px; }
.foot-links { display:flex; flex-direction:column; gap:12px; text-align:right; font-size:15px; }
.foot-logo { margin:0 0 22px; }
.foot-logo img { width:200px; height:auto; display:block; }

/* ============================== JOIN BETA MODAL ============================== */
.beta-overlay { position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center; padding:90px 20px 40px; overflow:auto;
  background:rgba(35,40,75,0.38); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.beta-overlay.open { display:flex; animation:betaFade .2s ease; }
@keyframes betaFade { from{opacity:0} to{opacity:1} }
.beta-modal { position:relative; width:412px; max-width:100%; background:#fbfbfa; border-radius:24px; padding:42px 38px 30px; box-shadow:0 50px 120px rgba(20,20,50,0.35); animation:betaPop .22s ease; }
@keyframes betaPop { from{transform:translateY(12px) scale(.98); opacity:0} to{transform:none; opacity:1} }
.beta-close { position:absolute; top:14px; right:18px; background:none; border:0; font-size:26px; line-height:1; color:var(--ink-50); cursor:pointer; }
.beta-title { font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.04; text-align:center; letter-spacing:-0.01em; margin-bottom:14px; }
.beta-sub { font-size:14px; color:var(--ink-60); text-align:center; line-height:1.5; letter-spacing:-0.02em; max-width:300px; margin:0 auto 24px; }
.beta-form { display:flex; flex-direction:column; }
.beta-form input, .beta-form select { width:100%; border:0; border-bottom:1px dashed rgba(0,0,0,0.22); background:transparent; padding:15px 2px; font-family:var(--sans); font-size:15px; letter-spacing:-0.02em; color:var(--ink); outline:none; }
.beta-form input::placeholder { color:var(--ink-50); }
.beta-form input:focus, .beta-form select:focus { border-bottom:1.5px solid var(--blue); }
.beta-form select { color:var(--ink-50); appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 2px center; }
.beta-submit { background:#241c13; color:#fff; border-radius:12px; padding:15px; font-weight:600; font-size:15px; margin-top:24px; transition:background .15s ease; }
.beta-submit:hover { background:#3a2d1d; }
.beta-fine { font-size:12px; color:var(--ink-50); text-align:center; letter-spacing:-0.02em; margin-top:16px; }
.beta-fine a { color:var(--ink); text-decoration:underline; }

/* ============================== RESPONSIVE ============================== */
@media (max-width:810px) {
  .section { padding:50px 0; }
  .nav-inner { padding:0 24px; }
  .nav-menu { display:none; }
  .nav-burger { display:flex; }
  .feature-cols { grid-template-columns:1fr 1fr; gap:22px 40px; }
  .split { flex-direction:column; align-items:flex-start; gap:32px; }
  .split.rev { flex-direction:column-reverse; }
  .split .media { width:100%; }
  .types,.file-cluster,.contract,.pay-wrap { width:100%; max-width:420px; margin-left:auto; margin-right:auto; }
  /* single column: drop the 2x2 cross of dashed borders and use one
     divider between stacked cells instead */
  .pay2 { grid-template-columns:1fr; row-gap:0; }
  .pay2 .cell:nth-child(n){ border:0; padding:0 0 30px; }
  .pay2 .cell:nth-child(n) + .cell { border-top:1px dashed rgba(0,0,0,.16); padding-top:30px; }
  .pay2 .cell:last-child { padding-bottom:0; }
  .click-pay { flex-direction:column; align-items:flex-start; gap:22px; }
  .tablets { height:auto; display:flex; flex-direction:column; align-items:center; gap:14px; }
  .tablets .tab-vid { position:static; width:100%; max-width:420px; margin-left:0; transform:none !important; }
  .foot-cols { flex-direction:column; gap:22px; }
  .foot-links { text-align:left; }
  .memo-card { padding:32px 26px; }
}
@media (max-width:640px) {
  /* two columns of nowrap labels don't fit — one column, wrapping labels */
  .feature-cols { grid-template-columns:1fr; gap:20px; }
  .feat { height:auto; }
  .feat .label { white-space:normal; }
}
@media (max-width:480px) {
  .h2,.cta h2 { font-size:26px; }
  .hero-content { padding:60px 20px 0; }
  .hero-content h1 { max-width:340px; }
  .lead-head, .h2.lead-head { max-width:340px !important; }
  .tablets .tab-vid { width:100%; }
  .pay-toast { position:static; transform:none; margin-bottom:12px; }
  .price-row { flex-direction:column; }
}