/* FREEJUICE — rebuilt from the Newcomer Framer template (values measured at 1440 and 390 px). */
:root {
  --ink: #131314; --ink2: #46474e; --mute: #8a8b92; --card: #f6f6f6; --line: #ececec; --bg: #fff;
  --red: #e31937;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.wrap { width: min(1250px, calc(100% - 40px)); margin: 0 auto; }
.center { text-align: center; }

/* logos: Simple Icons SVGs used as masks so they take any colour */
.lg { display: inline-block; width: 18px; height: 18px; background: currentColor; flex: none;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.lg.red { color: var(--red); }
.lg-tesla { --m: url(../assets/logos/tesla.svg); }
.lg-volkswagen { --m: url(../assets/logos/volkswagen.svg); }
.lg-bmw { --m: url(../assets/logos/bmw.svg); }
.lg-hyundai { --m: url(../assets/logos/hyundai.svg); }
.lg-kia { --m: url(../assets/logos/kia.svg); }
.lg-polestar { --m: url(../assets/logos/polestar.svg); }
.lg-gmail { --m: url(../assets/logos/gmail.svg); color: #ea4335; }
.lg-icloud { --m: url(../assets/logos/icloud.svg); color: #3693f3; }

/* line icons */
.ic { display: inline-block; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-check { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ic-shield { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.2-4.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 10.5L12 4l8 6.5V20h-5v-6H9v6H4z'/%3E%3C/svg%3E"); }
.ic-receipt { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-vault { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 8.8V7M12 17v-1.8M15.2 12H17M7 12h1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-wallet { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 7h14a2 2 0 012 2v9a2 2 0 01-2 2H4z'/%3E%3Cpath d='M4 7V6a2 2 0 012-2h10v3'/%3E%3Ccircle cx='16' cy='13.5' r='1.2' fill='%23000'/%3E%3C/svg%3E"); }
.ic-clock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.ic-bolt { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.5h6L10 21l8-10.5h-6z'/%3E%3C/svg%3E"); }
.ic-mail { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E"); }

/* NAV */
.nav { position: fixed; inset: 0 0 auto 0; height: 64px; background: #fff; border-bottom: 1px solid var(--line); z-index: 50;
  display: flex; align-items: center; padding: 0 24px; }
/* NOTICE: always on top of every page (not affiliated, no wallet connection) */
:root { --notice: 32px; }
body { padding-top: var(--notice); }
.notice { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--notice); display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 16px; background: #0a0a0a; color: rgba(255, 255, 255, .8); font-size: 13px; white-space: nowrap; }
.notice b { color: #fff; font-weight: 600; }
.nav { top: var(--notice); }
.wordmark { font-family: var(--serif); font-size: 26px; line-height: 32.5px; letter-spacing: -.26px; color: var(--ink2); display: inline-flex; align-items: center; gap: 8px; }
.wordmark .lg { width: 18px; height: 18px; color: var(--red); }
.wordmark.small { font-size: 22px; line-height: 28.6px; letter-spacing: -.22px; }
.wordmark.small .lg { width: 15px; height: 15px; }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 32px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--ink2); line-height: 28px; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border: 0; border-radius: 8px;
  background: var(--ink); color: #fff; font: 500 15px/18px var(--sans); cursor: pointer; white-space: nowrap; transition: opacity .2s; }
.btn:hover { opacity: .85; }
.nav-cta { margin-left: auto; height: 42px; }
.burger { display: none; margin-left: auto; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.burger span:first-child { top: 16px; } .burger span:last-child { top: 23px; }
.nav.open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav.open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu { display: none; }

/* type */
h1 { font-family: var(--serif); font-weight: 400; font-size: 120px; line-height: 132px; letter-spacing: -3.6px; color: var(--ink); }
.h64 { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 64px; letter-spacing: -2.56px; }
.h36 { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 45px; letter-spacing: -.36px; }
.p16, .lead { font-size: 16px; line-height: 24px; letter-spacing: -.16px; color: var(--ink2); }

/* HERO */
.hero { padding-top: 64px; }
.hero-in { position: relative; height: 936px; }
.hero-copy { position: absolute; left: 0; top: 299px; width: 620px; }
.lead { width: 460px; }
.email-form { display: flex; gap: 10px; margin-top: 36px; }
.email-form input { width: 300px; height: 46px; border: 1px solid #e3e3e5; border-radius: 8px; padding: 0 14px; font: 400 15px var(--sans); color: var(--ink); outline: none; background: #fff; transition: border-color .2s; }
.email-form input:focus { border-color: var(--ink); }
.email-form input::placeholder { color: #9a9ba1; }
.joinrow { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 16px; line-height: 24px; letter-spacing: -.16px; color: var(--ink2); }
.stack { display: inline-flex; padding-left: 5px; }
.stack > * { width: 24px; height: 24px; border-radius: 40px; margin-left: -5px; border: 2px solid #fff; box-sizing: content-box; }
.stack .on-white { background: var(--red); -webkit-mask: none; mask: none; position: relative; }
.stack .on-white::after { content: ''; position: absolute; inset: 5px; background: #fff; -webkit-mask: url(../assets/logos/tesla.svg) center / contain no-repeat; mask: url(../assets/logos/tesla.svg) center / contain no-repeat; }
.hero-art { position: absolute; left: 552px; top: 126px; width: 698px; height: 613px; }

/* hand phones: frame image on top, our screen mapped under its transparent hole */
.hand { position: relative; width: 100%; }
.hand .frame { position: relative; width: 100%; height: auto; z-index: 2; pointer-events: none; }
.hand .screen { position: absolute; left: 0; top: 0; width: 393px; height: 852px; transform-origin: 0 0; z-index: 1; overflow: hidden; border-radius: 54px; background: #fff; }
.hero-art .hand { width: 664px; margin: 0 auto; }

/* flat phones (cards) */
.phone { position: absolute; width: 300px; height: 620px; overflow: hidden; }
.phone .frame { position: absolute; z-index: 2; pointer-events: none; max-width: none; }
.phone .screen { position: absolute; z-index: 1; overflow: hidden; background: #fff; transform-origin: 0 0; width: 393px; height: 852px; border-radius: 58px; }

/* phone screen content (393 × 852 design px) */
.scr { width: 393px; height: 852px; position: relative; background: #fff; color: var(--ink); font-family: var(--sans); padding: 0 22px; }
.scr-grey { background: #e9e9ea; }
.sb { height: 59px; display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 0 18px; font-size: 16px; }
.sb b { font-weight: 600; letter-spacing: -.2px; }
.isl { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.sig { width: 66px; height: 13px; background:
  linear-gradient(#131314, #131314) 0 9px / 3px 4px no-repeat, linear-gradient(#131314, #131314) 5px 6px / 3px 7px no-repeat,
  linear-gradient(#131314, #131314) 10px 3px / 3px 10px no-repeat, linear-gradient(#131314, #131314) 15px 0 / 3px 13px no-repeat,
  linear-gradient(#131314, #131314) 40px 1px / 24px 11px no-repeat; border-radius: 2px; }
.st { font-family: var(--serif); font-size: 36px; line-height: 40px; margin-top: 18px; letter-spacing: -.4px; }
.ss { font-size: 14px; color: var(--mute); margin-top: 2px; }
.lbl { font-size: 13px; color: var(--mute); margin: 22px 0 6px; }
.row { display: flex; align-items: center; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.row .ic { width: 20px; height: 20px; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 15px 14px; margin-bottom: 8px; background: var(--card); border-radius: 12px; font-size: 15px; }
.lrow .lg, .lrow .ic { width: 18px; height: 18px; }
.lrow em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--mute); }
.rc { margin-top: 22px; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 10px 30px -14px rgba(19,19,20,.18); }
.rc-h { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.rc-h span { margin-left: auto; font-weight: 600; }
.rc-m { font-size: 13px; color: var(--mute); margin: 4px 0 14px 28px; }
.rc-l { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink2); padding: 9px 0; border-top: 1px solid var(--line); }
.rc-pay { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: var(--ink); color: #fff; border-radius: 12px; padding: 13px 14px; font-size: 15px; font-weight: 500; }
.rc-pay img, .tk { width: 22px; height: 22px; border-radius: 50%; }
.mail-ghost { margin: 120px auto 0; width: 290px; text-align: center; color: #b8b8bc; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mail-ghost .lg { width: 64px; height: 64px; color: #cfcfd2; }
.mail-ghost b { font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 40px; color: #c9c9cc; }
.mail-ghost span { font-size: 14px; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 410px; background: #fff; border-radius: 26px 26px 0 0; padding: 14px 22px 0; }
.grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: #d6d6d8; margin: 0 auto 12px; }
.srow { display: flex; align-items: center; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--line); font-size: 16px; }
.srow .ic { width: 22px; height: 22px; } .srow .ic-check { margin-left: auto; }
.srow.first { padding-top: 6px; }
.thumb { width: 54px; height: 54px; border-radius: 10px; background: var(--card); display: grid; place-items: center; }
.thumb .lg { width: 26px; height: 26px; }
.sbtn { margin: 22px auto 0; width: 230px; height: 52px; border-radius: 8px; background: #000; color: #fff; display: grid; place-items: center; font-size: 18px; }
.tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; border-top: 1px solid var(--line); display: flex; justify-content: space-around; padding-top: 12px; background: #fff; }
.tabs span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: #9a9ba1; }
.tabs span.on { color: var(--ink); }
.shot { margin-top: 18px; height: 150px; border-radius: 16px; background: #0d0d0e; color: #fff; display: flex; align-items: center; gap: 16px; padding: 0 22px; }
.shot .lg { width: 34px; height: 34px; color: #fff; }
.shot b { display: block; font-size: 18px; font-weight: 500; }
.shot span { font-size: 14px; color: #9a9ba1; }
.wbig { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; }
.wbig img { width: 42px; height: 42px; border-radius: 50%; }
.wbig b { display: block; font-size: 17px; } .wbig span { font-size: 13px; color: var(--mute); }
.wbig strong { margin-left: auto; font-family: var(--serif); font-weight: 400; font-size: 30px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.tile { border: 1px solid var(--line); border-radius: 14px; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.tile .lg, .tile .ic { width: 26px; height: 26px; margin-bottom: 4px; }
.tile b { font-size: 14px; font-weight: 500; } .tile span { font-size: 12px; color: var(--mute); }
.obtn { margin-top: 14px; height: 46px; border: 1.5px solid var(--ink); border-radius: 8px; display: grid; place-items: center; font-size: 15px; }
.okc { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); margin: 70px auto 0; display: grid; place-items: center; color: #fff; }
.okc .ic { width: 30px; height: 30px; }
.okt { text-align: center; font-family: var(--serif); font-size: 40px; line-height: 44px; margin-top: 18px; }
.oks { text-align: center; color: var(--mute); font-size: 14px; margin: 4px 0 30px; }
/* hero screen */
.hs-top { display: grid; place-items: center; margin-top: 120px; }
.ring { width: 150px; height: 150px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 20px 50px -24px rgba(227,25,55,.45); }
.ring .lg { width: 70px; height: 70px; }
.hs-title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 42px; text-align: center; margin-top: 64px; letter-spacing: -.4px; }
.hs-sub { text-align: center; color: var(--ink2); font-size: 14px; margin-top: 12px; }
.hs-btn { margin: 70px 0 0; height: 56px; border-radius: 10px; background: #000; color: #fff; display: grid; place-items: center; font-size: 17px; }
.hs-link { text-align: center; font-size: 14px; color: var(--ink2); margin-top: 24px; text-decoration: underline; text-underline-offset: 3px; }
.hs-foot { text-align: center; font-size: 12px; color: var(--mute); margin-top: 26px; letter-spacing: .4px; }

/* FEATURES — cards are flow stacks: padding, text, 86px gap, phone (measured on all three breakpoints) */
.features { padding-top: 64px; }
.grid-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.card { position: relative; background: var(--card); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 56px 24px 0; }
.card .ctext { text-align: center; width: min(480px, 100%); flex: none; }
.card .ctext .p16 { margin-top: 12px; }
.card .phone { position: relative; flex: none; margin-top: 86px; }
.card-a { grid-column: 1 / -1; height: 620px; }
.card-a .phone { height: 626px; }
.card-b, .card-c { height: 580px; }
.card-b { justify-content: flex-end; padding: 0 24px 56px; }
.card-b .phone { margin: 0 0 86px; }
.card-d { grid-column: 1 / -1; height: 460px; flex-direction: row; align-items: flex-start; justify-content: space-between; padding: 106px 165px 0; }
.card-d .phone { margin: 0; }
.card-d .ctext { width: 440px; align-self: center; margin-top: -106px; }

/* ANY EV */
.apps { padding: 150px 0 0; }
.apps-in { position: relative; height: 620px; }
.apps-copy { position: absolute; left: 0; top: 230px; width: 560px; }
.apps-copy .p16 { margin-top: 24px; }
.chips { margin-top: 24px; width: 560px; height: 100px; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.chip-row { height: 44px; overflow: hidden; }
.track { display: flex; gap: 16px; width: max-content; will-change: transform; }
.chip { width: 176px; height: 44px; border-radius: 12px; background: var(--card); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); flex: none; }
.chip .lg { width: 18px; height: 18px; }
.apps-phone { right: 40px; left: auto; top: 0; }

/* VAULT */
.vault { padding: 260px 0 0; }
.vault .h64 { width: 640px; margin: 0 auto; }
.narrow { width: 460px; margin: 16px auto 0; }
.vault-feed { margin-top: 56px; overflow: hidden; }
.vault-feed .vtrack { display: flex; gap: 24px; width: max-content; }
.vcard { width: 380px; height: 480px; flex: none; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px -12px rgba(19,19,20,.1); position: relative; text-align: center; padding: 0 20px; }
.vcard .vk { position: absolute; left: 20px; top: 20px; font-size: 13px; font-weight: 500; color: var(--ink2); }
.vcard .vd { margin-top: 176px; font-size: 13px; font-weight: 500; color: var(--ink2); }
.vcard .vt { font-family: var(--serif); font-size: 36px; line-height: 45px; margin-top: 16px; }
.vcard .vx { font-size: 16px; line-height: 24px; color: var(--ink2); margin-top: 12px; }
.vault-foot { text-align: center; margin-top: 32px; font-size: 15px; font-weight: 500; color: var(--ink2); }
.vault-foot a { text-decoration: underline; text-underline-offset: 3px; }

/* FINAL */
.final { padding: 200px 0 0; }
.card-final { height: 560px; }
.final-copy { position: absolute; left: 80px; top: 177px; }
.final-copy .p16 { margin-top: 0; }
.final-copy .email-form { margin-top: 32px; }
.hand-final { position: absolute; left: 851px; top: 0; width: 399px; }

/* FOOTER */
.foot { margin-top: 100px; border-top: 1px solid var(--line); padding: 31px 56px 28px; }
.foot-row { display: flex; align-items: center; gap: 32px; font-size: 16px; line-height: 24px; letter-spacing: -.16px; color: var(--ink2); }
.foot-row .ca { margin-left: auto; }
.foot-row .ca code { font-family: var(--sans); background: var(--card); padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.disclaimer { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; line-height: 18px; color: var(--mute); }
.disclaimer .lg { width: 13px; height: 13px; color: var(--mute); }

/* appear animations (measured: 40px rise + fade, ~0.7 s) */
.appear-load, .appear { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.appear-side { opacity: 0; transform: translateX(-10px); transition: opacity .8s var(--ease) .6s, transform .8s var(--ease) .6s; }
.on.appear-load, .on.appear, .on.appear-side { opacity: 1; transform: none; }
.hero-art.appear-load { transform: translateY(40px); }
.hero-art.appear-load.on { transform: none; }
.card-d .ctext.appear, .card .ctext { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .appear-load, .appear, .appear-side { opacity: 1; transform: none; transition: none; } }

/* TABLET (810–1199, measured at 1024 and 810): hero stays side by side, 32px gutters */
@media (max-width: 1199px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: block; z-index: 3; }
  .menu { position: fixed; inset: calc(64px + var(--notice)) 0 0 0; background: #fff; display: flex; flex-direction: column; padding: 16px 16px 0; gap: 0;
    opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
  .nav.open { border-bottom-color: transparent; }
  .nav.open .menu { opacity: 1; pointer-events: auto; }
  .menu a { font-size: 17px; font-weight: 500; line-height: 52px; color: var(--ink2); }
  .menu a.btn { margin-top: 12px; height: 42px; line-height: 42px; color: #fff; font-size: 16px; }
  .wrap { width: calc(100% - 64px); }
  .hero-in { height: 530px; }
  .hero-copy { top: 32px; width: 400px; }
  .lead { width: 400px; }
  .hero-art { left: auto; right: 0; top: 173px; width: 389px; height: 342px; }
  .hero-art .hand { width: 371px; }
  .grid-cards { gap: 24px 32px; }
  .card { padding-top: 48px; }
  .card-a { height: 560px; }
  .card-b, .card-c { height: 540px; }
  .card-b { padding: 0 24px 48px; }
  .card-d { height: 440px; padding: 98px calc(24px + (100% - 746px) * .0654) 0; justify-content: flex-start; gap: 96px; }
  .card-d .ctext { width: auto; flex: 1; margin-top: -98px; }
  .apps { padding-top: 110px; }
  .apps-copy { top: 198px; width: 380px; }
  .chips { width: 380px; }
  .apps-phone { right: 0; }
  .vault { padding-top: 200px; }
  .final-copy { left: 48px; }
  .hand-final { left: auto; right: 0; top: auto; bottom: 0; width: 300px; }
}
/* PHONE (< 810, measured at 390): everything stacks, card order A, C, B, D like the template */
@media (max-width: 809px) {
  :root { --notice: 44px; }
  .notice { flex-wrap: wrap; align-content: center; gap: 0 5px; white-space: normal; text-align: center; font-size: 12px; line-height: 1.3; }
  .notice .n-long { display: none; }
  .nav { padding: 0 16px; }
  .wrap { width: calc(100% - 40px); }
  .hero-in { height: auto; padding-top: 40px; }
  .hero-copy { position: static; width: auto; }
  h1 { width: 100%; }
  .lead { width: auto; }
  .email-form input { width: auto; flex: 1; min-width: 0; }
  .email-form .btn { padding: 0 18px; }
  .hero-art { position: relative; left: 0; right: 0; top: 0; width: 100%; height: auto; margin-top: 28px; }
  .hero-art .hand { width: 333px; max-width: 100%; }
  .features { padding-top: 72px; }
  .grid-cards { grid-template-columns: 1fr; gap: 16px; }
  .card { padding-top: 40px; }
  .card-a { height: 540px; }
  .card-b, .card-c, .card-d { height: 520px; }
  .card-c { order: 2; } .card-b { order: 3; padding: 0 24px 40px; } .card-d { order: 4; }
  .card-d { flex-direction: column-reverse; justify-content: flex-end; align-items: center; padding: 40px 24px 0; gap: 0; }
  .card-d .ctext { flex: none; width: 100%; margin: 0; align-self: auto; }
  .card-d .phone { margin-top: 86px; }
  .apps { padding-top: 144px; }
  .apps-in { height: auto; }
  .apps-copy { position: static; width: auto; }
  .chips { width: 100%; }
  .chip { width: 106px; font-size: 14px; gap: 6px; }
  .chip .lg { width: 15px; height: 15px; }
  .apps-phone { display: none; }
  .vault { padding-top: 184px; }
  .vault .h64 { width: auto; }
  .narrow { width: auto; }
  .final { padding-top: 145px; }
  .card-final { height: auto; border-radius: 20px; align-items: stretch; padding: 40px 0 0; }
  .final-copy { position: static; padding: 0 24px; }
  .final-copy .email-form { margin-top: 32px; }
  .hand-final { position: relative; left: 0; right: 0; top: 0; bottom: auto; width: 100%; margin-top: 40px; }
  .foot { padding: 31px 12px 28px; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-row .ca { margin-left: 0; }
}

/* CLAIM PAGE (same tokens as the landing: grey 24px cards, serif titles, black buttons) */
.claim { padding: 144px 0 0; max-width: 860px; }
.claim-head { text-align: center; margin-bottom: 48px; }
.claim-head .p16 { margin-top: 16px; }
.preview-note { margin-top: 14px; font-size: 14px; color: var(--mute); }
.card.step { display: flex; flex-direction: row; align-items: flex-start; gap: 28px; padding: 40px; margin-bottom: 16px; transition: opacity .4s var(--ease); }
.step.locked { opacity: .45; pointer-events: none; }
.step-n { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid #d9d9dc; display: grid; place-items: center; font-family: var(--serif); font-size: 20px; color: var(--ink2); }
.step.done .step-n { background: var(--ink); color: #fff; border-color: var(--ink); }
.step-body { flex: 1; min-width: 0; }
.step-body .p16 { margin-top: 8px; }
.step .email-form { margin-top: 24px; }
.msg { margin-top: 14px; font-size: 15px; color: var(--ink2); min-height: 1px; }
.msg.bad { color: var(--red); }
.wallet-row { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.wallet-row .or { color: var(--mute); font-size: 15px; }
.wallet-row input, .fields input, .fields select { height: 46px; border: 1px solid #e3e3e5; border-radius: 8px; padding: 0 14px; font: 400 15px var(--sans); color: var(--ink); background: #fff; outline: none; }
.wallet-row input { flex: 1; min-width: 220px; }
.wallet-row input:focus, .fields input:focus, .fields select:focus { border-color: var(--ink); }
.seg { display: inline-flex; gap: 4px; padding: 4px; margin-top: 20px; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.seg button { height: 38px; padding: 0 16px; border: 0; border-radius: 7px; background: none; font: 500 15px var(--sans); color: var(--ink2); cursor: pointer; }
.seg button.on { background: var(--ink); color: #fff; }
.tab { margin-top: 20px; }
.inbox { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 0 8px 0 16px; height: 54px; background: #fff; border: 1px solid #e3e3e5; border-radius: 10px; }
.inbox code { font: 500 15px var(--sans); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy { height: 38px; padding: 0 14px; border: 0; border-radius: 7px; background: var(--card); font: 500 14px var(--sans); cursor: pointer; }
.hint { margin-top: 12px; font-size: 14px; color: var(--mute); }
.drop { display: block; position: relative; margin-top: 20px; border: 1.5px dashed #d0d0d4; border-radius: 14px; background: #fff; cursor: pointer; min-height: 160px; overflow: hidden; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 160px; color: var(--ink2); font-size: 14px; }
.drop-empty .lg { width: 26px; height: 26px; margin-bottom: 4px; }
.drop-empty b { font-weight: 500; font-size: 16px; color: var(--ink); }
.drop.has .drop-empty { display: none; }
.drop img { max-height: 320px; margin: 0 auto; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.fields label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink2); }
.money { display: flex; gap: 8px; } .money input { flex: 1; min-width: 0; }
.calc { margin: 16px 0; font-size: 15px; color: var(--ink); min-height: 1px; }
.fine { margin: 24px 0 0; font-size: 14px; line-height: 21px; color: var(--mute); text-align: center; }
/* TERMS */
.terms { padding: 144px 0 0; max-width: 720px; }
.terms h1 { font-size: 64px; line-height: 64px; letter-spacing: -2.56px; margin-bottom: 32px; }
.terms h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 34px; margin: 36px 0 10px; }
.terms p, .terms li { font-size: 16px; line-height: 25px; color: var(--ink2); }
.terms ul { padding-left: 20px; } .terms li { margin: 4px 0; }
@media (max-width: 809px) {
  .claim, .terms { padding-top: 104px; }
  .card.step { padding: 24px; gap: 16px; flex-direction: column; }
  .fields { grid-template-columns: 1fr; }
  .seg { display: flex; } .seg button { flex: 1; padding: 0 8px; font-size: 14px; }
}
.ic-x { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.status-line { margin-top: 14px; font-size: 15px; color: var(--ink); min-height: 1px; }
.how { list-style: none; margin-top: 16px; display: grid; gap: 6px; font-size: 15px; color: var(--ink2); }
.how b { color: var(--ink); font-weight: 500; margin-right: 6px; }
.drop.small, .drop.small .drop-empty { min-height: 110px; }
.drop.small .ic { width: 24px; height: 24px; margin-bottom: 4px; }
.drop.picked { border-style: solid; border-color: var(--ink); }
.tab .btn { margin-top: 18px; }
.btn:disabled { opacity: .35; cursor: default; }
.soon-pane .btn { margin-top: 20px; }
.result { margin-top: 24px; background: #fff; border-radius: 14px; padding: 22px 22px 18px; border: 1px solid var(--line); }
.r-head { font-family: var(--serif); font-size: 28px; line-height: 34px; }
.r-paid .r-head { color: var(--ink); }
.r-rejected .r-head { color: var(--red); }
.r-order { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 20px; }
.r-order div { display: flex; flex-direction: column; gap: 2px; }
.r-order span { font-size: 13px; color: var(--mute); }
.r-order b { font-size: 15px; font-weight: 500; }
.r-checks { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); }
.r-checks li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.r-checks li .ic { width: 18px; height: 18px; margin-top: 2px; }
.r-checks li.ko .ic { color: var(--red); }
.r-checks li span { display: flex; flex-direction: column; gap: 2px; }
.r-checks b { font-weight: 500; }
.r-checks em { font-style: normal; font-size: 14px; color: var(--mute); }
.r-tx { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.history { margin-top: 40px; }
.hist-list { margin-top: 16px; border-top: 1px solid var(--line); }
.hrow { display: grid; grid-template-columns: 1.1fr 1.4fr .8fr .6fr .3fr; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink2); }
.hrow .hst { color: var(--ink); text-transform: capitalize; }
.hrow .hst-rejected { color: var(--red); }
.hrow a { text-decoration: underline; }
@media (max-width: 809px) { .hrow { grid-template-columns: 1fr 1fr; } .r-head { font-size: 24px; line-height: 30px; } }
.fwd { margin-top: 26px; padding-top: 22px; border-top: 1px solid #e3e3e5; }
.fwd .inbox { margin-top: 0; }
.fwd b { font-weight: 500; color: var(--ink); }
.gmail { margin-top: 12px; font-size: 15px; color: var(--ink2); }
.gmail a, .linkish { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.r-sub { margin-top: 6px; font-size: 15px; color: var(--ink2); }
.r-verified .r-head { color: var(--ink); }
.r-checks li.wait .ic { color: var(--mute); }
.r-checks li.wait b { color: var(--ink2); }
#f-photo .msg { margin-top: 12px; }