:root {
  --paper: #f5efe4;
  --paper-deep: #e9dfcf;
  --ink: #161614;
  --muted: #6f6a61;
  --line: rgba(22, 22, 20, 0.18);
  --blue: #165dff;
  --white: #fffdf8;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(22, 93, 255, 0.42); outline-offset: 4px; }

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 48px), var(--max));
  min-height: 88px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 750; letter-spacing: -0.04em; }
.brand-mark { position: relative; width: 28px; height: 32px; border-radius: 55% 45% 52% 48%; background: var(--ink); transform: rotate(-8deg); overflow: hidden; }
.brand-mark::after { content: ""; position: absolute; inset: -8px -2px 10px 12px; border-radius: 50%; background: var(--paper); transform: rotate(18deg); }
.nav { display: flex; align-items: center; gap: 30px; color: #4e4a43; font-size: 14px; font-weight: 600; }
.nav a { transition: color 180ms ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav-cta { padding: 10px 17px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink) !important; }
.menu-button { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); }
.menu-button svg { width: 25px; height: 25px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
  gap: clamp(50px, 8vw, 118px);
  align-items: center;
  width: min(calc(100% - 48px), var(--max));
  min-height: calc(100svh - 88px);
  margin: 0 auto;
  padding: 72px 0 88px;
}
.hero-copy h1 { max-width: 650px; margin: 0; font-family: var(--serif); font-size: clamp(58px, 7vw, 104px); font-weight: 400; line-height: 0.92; letter-spacing: -0.062em; }
.hero-copy p { max-width: 530px; margin: 34px 0 0; color: var(--muted); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; letter-spacing: -0.02em; }
.actions { display: flex; align-items: center; gap: 22px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--white); font-size: 15px; font-weight: 700; transition: transform 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-2px); }
.text-link { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; }
.text-link svg { width: 17px; transition: transform 180ms ease; }
.text-link:hover svg { transform: translateX(4px); }
.hero-media { position: relative; aspect-ratio: 0.96; }
.hero-media::before { content: ""; position: absolute; inset: 11% 4% 3% 16%; border: 1px solid var(--line); border-radius: 48% 48% 24px 24px; }
.portrait-main { position: absolute; inset: 0 11% 8% 18%; width: 71%; height: 88%; object-fit: cover; border-radius: 46% 46% 24px 24px; box-shadow: 0 35px 80px rgba(50, 39, 21, 0.17); }
.portrait-secondary { position: absolute; right: 0; bottom: 0; width: 35%; aspect-ratio: 0.76; object-fit: cover; border: 10px solid var(--paper); border-radius: 120px 120px 18px 18px; box-shadow: 0 20px 55px rgba(50, 39, 21, 0.18); }
.media-caption { position: absolute; left: 0; bottom: 2%; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }

.section { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 132px 0; }
.section-kicker { margin: 0 0 24px; color: var(--muted); font-size: 13px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.section-title { max-width: 860px; margin: 0; font-family: var(--serif); font-size: clamp(43px, 5vw, 74px); font-weight: 400; line-height: 1.02; letter-spacing: -0.045em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 82px; border-top: 1px solid var(--ink); }
.step { position: relative; min-height: 280px; padding: 30px 34px 22px 0; border-bottom: 1px solid var(--line); }
.step + .step { padding-left: 34px; border-left: 1px solid var(--line); }
.step-number { display: block; margin-bottom: 66px; color: var(--blue); font-family: var(--serif); font-size: 27px; }
.step h3 { margin: 0 0 12px; font-size: 21px; letter-spacing: -0.035em; }
.step p { max-width: 310px; margin: 0; color: var(--muted); font-size: 15px; }
.showcase { padding-top: 34px; }
.showcase-frame { position: relative; overflow: hidden; border-radius: 24px; background: #d8d3ca; }
.showcase-frame img { width: 100%; aspect-ratio: 1.84; object-fit: cover; }
.showcase-labels { position: absolute; inset: auto 22px 22px; display: flex; justify-content: space-between; pointer-events: none; }
.showcase-labels span { padding: 8px 13px; border-radius: 999px; background: rgba(255, 253, 248, 0.9); font-size: 12px; font-weight: 750; backdrop-filter: blur(8px); }
.privacy-band { background: var(--ink); color: var(--white); }
.privacy-inner { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 80px; align-items: end; width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 125px 0; }
.privacy-inner h2 { max-width: 800px; margin: 0; font-family: var(--serif); font-size: clamp(52px, 6vw, 90px); font-weight: 400; line-height: 0.98; letter-spacing: -0.05em; }
.privacy-copy p { margin: 0 0 28px; color: #bbb8b1; font-size: 17px; }
.privacy-copy .text-link { color: var(--white); }

.site-footer { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 55px 0 38px; }
.footer-main { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 64px; }
.footer-line { max-width: 360px; margin: 20px 0 0; color: var(--muted); font-family: var(--serif); font-size: 25px; line-height: 1.2; }
.footer-links { display: flex; align-items: flex-start; gap: 28px; font-size: 14px; font-weight: 650; }
.footer-meta { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

.legal-hero { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 96px 0 68px; border-bottom: 1px solid var(--ink); }
.legal-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(58px, 8vw, 112px); font-weight: 400; line-height: 0.94; letter-spacing: -0.06em; }
.legal-meta { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-top: 46px; }
.legal-meta p { max-width: 570px; margin: 0; color: var(--muted); font-size: 18px; }
.legal-meta time { color: var(--muted); font-size: 13px; white-space: nowrap; }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 720px); gap: clamp(60px, 10vw, 160px); justify-content: start; width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 80px 0 130px; }
.toc { position: sticky; top: 28px; align-self: start; display: grid; gap: 5px; }
.toc a { padding: 5px 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.toc a:hover { color: var(--blue); }
.legal-copy { min-width: 0; }
.legal-copy section { scroll-margin-top: 28px; padding: 0 0 62px; }
.legal-copy h2 { margin: 0 0 21px; font-family: var(--serif); font-size: 37px; font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; }
.legal-copy h3 { margin: 28px 0 9px; font-size: 16px; letter-spacing: -0.01em; }
.legal-copy p, .legal-copy li { color: #4e4a43; }
.legal-copy p { margin: 0 0 18px; }
.legal-copy ul { margin: 16px 0 22px; padding-left: 22px; }
.legal-copy li { margin-bottom: 9px; }
.legal-copy a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.legal-note { padding: 20px 22px; border-left: 3px solid var(--blue); background: rgba(255, 253, 248, 0.55); }

.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
.support-panel { min-height: 230px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,248,.4); }
.support-panel h2 { margin: 0 0 15px; font-family: var(--serif); font-size: 34px; font-weight: 400; }
.support-panel p { margin: 0 0 25px; color: var(--muted); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 24px 0; font-size: 17px; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--blue); font-size: 22px; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 720px; margin: -8px 0 24px; color: var(--muted); }

@media (max-width: 900px) {
  .site-header { min-height: 72px; }
  .menu-button { display: grid; place-items: center; }
  .nav { position: absolute; top: 72px; left: 0; right: 0; display: none; align-items: stretch; gap: 0; padding: 14px 0 22px; border-bottom: 1px solid var(--line); background: var(--paper); }
  .nav.is-open { display: grid; }
  .nav a { padding: 11px 0; }
  .nav-cta { margin-top: 8px; text-align: center; }
  .hero { grid-template-columns: 1fr; gap: 45px; min-height: auto; padding: 65px 0 85px; }
  .hero-copy h1 { max-width: 720px; }
  .hero-media { width: min(100%, 650px); margin-left: auto; }
  .privacy-inner { grid-template-columns: 1fr; align-items: start; }
  .legal-layout { grid-template-columns: 1fr; gap: 50px; }
  .toc { position: static; grid-template-columns: repeat(2, 1fr); padding-bottom: 30px; border-bottom: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .site-header, .hero, .section, .privacy-inner, .site-footer, .legal-hero, .legal-layout { width: min(calc(100% - 32px), var(--max)); }
  .brand { font-size: 19px; }
  .hero { padding-top: 48px; }
  .hero-copy h1 { font-size: clamp(54px, 17vw, 76px); }
  .hero-copy p { margin-top: 24px; font-size: 17px; }
  .actions { align-items: flex-start; flex-direction: column; margin-top: 30px; }
  .button { width: 100%; }
  .hero-media { width: 100%; }
  .portrait-main { inset-left: 12%; width: 78%; }
  .portrait-secondary { width: 38%; border-width: 7px; }
  .section { padding: 92px 0; }
  .steps { grid-template-columns: 1fr; margin-top: 52px; }
  .step { min-height: auto; padding: 25px 0 32px !important; border-left: 0 !important; }
  .step-number { margin-bottom: 28px; }
  .showcase-frame img { aspect-ratio: .95; object-position: center; }
  .privacy-inner { padding: 88px 0; }
  .privacy-inner h2 { font-size: 54px; }
  .footer-main { flex-direction: column; padding-bottom: 45px; }
  .footer-links { flex-wrap: wrap; gap: 16px 24px; }
  .footer-meta { flex-direction: column; gap: 6px; }
  .legal-hero { padding: 65px 0 44px; }
  .legal-meta { align-items: flex-start; flex-direction: column; margin-top: 30px; }
  .legal-layout { padding: 52px 0 90px; }
  .toc { grid-template-columns: 1fr 1fr; gap: 2px 18px; }
  .legal-copy section { padding-bottom: 48px; }
  .support-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Beyz-inspired Portrea direction */
.beyz-layout { --paper:#fff; --ink:#090a0c; --muted:#4f5156; --line:#e7e7e9; background:#fff; color:#090a0c; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; }
.b-shell { width:min(100% - 48px,1120px); margin-inline:auto; }
.b-site-header { height:72px; background:#fff; border-bottom:1px solid #ececef; }
.b-header-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:100%; }
.b-brand { display:inline-flex; align-items:center; justify-self:start; gap:10px; font-size:20px; font-weight:700; letter-spacing:-.035em; }
.b-brand img { width:34px; height:34px; border-radius:9px; }
.b-main-nav { display:flex; align-items:center; gap:34px; font-size:14px; font-weight:540; }
.b-main-nav a,.b-header-cta { transition:opacity 160ms ease; }.b-main-nav a:hover,.b-header-cta:hover { opacity:.55; }
.b-header-cta { justify-self:end; padding:9px 16px; border-radius:9px; background:#090a0c; color:#fff; font-size:14px; font-weight:620; }
.b-home-hero { min-height:621px; overflow:hidden; background:#fff; }
.b-hero-shell { display:grid; grid-template-columns:1fr 1fr; align-items:center; width:min(100% - 48px,1000px); min-height:621px; margin-inline:auto; }
.b-hero-copy { width:min(100%,450px); padding-bottom:4px; }
.b-hero-copy h1 { margin:0; font-size:clamp(52px,5vw,64px); font-weight:730; line-height:.98; letter-spacing:-.06em; }
.b-hero-copy p { margin:25px 0 27px; color:#4f5156; font-size:17px; line-height:1.5; letter-spacing:-.015em; }
.store-button { display:inline-flex; align-items:center; min-width:168px; height:54px; gap:11px; padding:8px 17px 9px 15px; border-radius:10px; background:#08090a; color:#fff; }
.store-button svg { width:27px; height:27px; flex:0 0 auto; }.store-button span { display:grid; font-size:19px; font-weight:520; line-height:1; letter-spacing:-.025em; }.store-button small { margin-bottom:3px; font-size:10px; font-weight:500; letter-spacing:0; }
.b-hero-product { display:grid; place-items:end center; align-self:end; height:590px; padding-top:56px; }
.campaign-hero { width:244px; height:auto; max-height:552px; border-radius:28px 28px 0 0; object-fit:contain; box-shadow:0 28px 70px rgba(0,25,70,.24); }
.phone { position:relative; width:244px; aspect-ratio:9/19.6; padding:8px; border-radius:48px; background:linear-gradient(145deg,#44464b,#111215 46%,#35363a); box-shadow:0 28px 70px rgba(0,0,0,.21),inset 0 0 0 1px rgba(255,255,255,.28); }
.phone::before { content:""; position:absolute; z-index:4; top:16px; left:50%; width:78px; height:23px; border-radius:14px; background:#08090a; transform:translateX(-50%); }
.phone-side { position:absolute; left:-3px; width:3px; border-radius:3px 0 0 3px; background:#202125; }.phone-side-top { top:91px; height:36px; }.phone-side-bottom { top:140px; height:58px; }
.phone-screen { position:relative; width:100%; height:100%; overflow:hidden; border-radius:40px; background:#f7f7f9; }
.app-preview { padding:47px 12px 32px; }.app-top { display:flex; justify-content:space-between; align-items:center; color:#1c1c1e; font-size:12px; font-weight:700; }.app-top b { padding:5px 7px; border-radius:7px; background:#e8f2ff; color:#007aff; font-size:8px; }.app-heading { margin:24px 0 11px; font-size:18px; font-weight:800; letter-spacing:-.05em; }
.portrait-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.portrait-grid img { width:100%; height:154px; border-radius:12px; object-fit:cover; }
.app-tabs { position:absolute; inset:auto 0 0; display:flex; justify-content:space-around; padding:13px 8px 15px; border-top:1px solid #dedee2; background:rgba(250,250,252,.94); color:#77777e; font-size:8px; font-weight:650; }.app-tabs span:first-child { color:#007aff; }
.b-film-section { min-height:999px; padding:92px 24px 88px; overflow:hidden; background:#070809; color:#fff; }
.b-film-heading { max-width:730px; margin:0 auto 62px; text-align:center; }.b-film-heading h2,.b-feature-copy h2,.b-closing h2 { margin:0; font-size:clamp(44px,5vw,62px); font-weight:720; line-height:1; letter-spacing:-.06em; }.b-film-heading p { max-width:490px; margin:20px auto 0; color:#a8a9ad; font-size:17px; }
.portrait-showcase { display:grid; grid-template-columns:repeat(3,216px); justify-content:center; gap:clamp(42px,7vw,96px); }.portrait-showcase article { padding-top:30px; }.portrait-showcase article.showcase-center { padding-top:0; }
.portrait-device { width:216px; height:497px; padding:7px; border-radius:39px; background:#25272a; box-shadow:0 24px 50px rgba(0,0,0,.42); }.portrait-device img { width:100%; height:100%; border-radius:33px; object-fit:cover; }.portrait-showcase article>div:last-child { display:flex; align-items:baseline; gap:13px; margin-top:19px; }.portrait-showcase span { color:#777a80; font-size:12px; font-weight:650; }.portrait-showcase h3 { margin:0; font-size:17px; font-weight:630; letter-spacing:-.03em; }
.campaign-device { width:216px; height:497px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:28px; background:#061124; box-shadow:0 24px 50px rgba(0,0,0,.42); }.campaign-device img { width:100%; height:100%; object-fit:contain; }
.b-feature-story { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:694px; padding:76px max(24px,calc((100vw - 1000px)/2)); background:#fff; }.b-feature-media { display:grid; place-items:center; }.b-feature-media .phone { width:226px; }.result-preview>img { width:100%; height:100%; object-fit:cover; }.result-preview>div { position:absolute; inset:auto 10px 12px; display:grid; gap:2px; padding:12px; border-radius:14px; background:rgba(255,255,255,.93); backdrop-filter:blur(12px); }.result-preview span { color:#73757a; font-size:9px; }.result-preview b { font-size:12px; }
.campaign-feature { width:226px; max-height:518px; border-radius:28px; object-fit:cover; box-shadow:0 24px 60px rgba(0,25,70,.2); }
.b-feature-copy { width:min(100%,455px); }.story-list { margin-top:42px; border-top:1px solid #dcdde0; }.story-list article { display:grid; grid-template-columns:36px 1fr; gap:18px; padding:19px 0; border-bottom:1px solid #dcdde0; }.story-list article>span { padding-top:2px; color:#8d8f94; font-size:12px; font-weight:650; }.story-list h3 { margin:0 0 4px; font-size:17px; font-weight:680; letter-spacing:-.025em; }.story-list p { margin:0; color:#65676c; font-size:14px; line-height:1.45; }
.b-closing { min-height:422px; display:grid; place-items:center; background:#08090a; color:#fff; text-align:center; }.b-closing-inner { padding:70px 24px; }.b-closing p { margin:18px 0 27px; color:#a7a8ac; font-size:17px; }.store-button-light { background:#fff; color:#08090a; }
.b-footer { background:#fff; }.b-footer-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:102px; font-size:13px; }.b-footer-brand { justify-self:start; font-size:19px; font-weight:730; letter-spacing:-.04em; }.b-footer nav { display:flex; gap:28px; }.b-footer p { justify-self:end; margin:0; color:#76787d; }

body:not(.beyz-layout) { --paper:#fff; --ink:#090a0c; --muted:#5f6166; --line:#e2e3e5; background:#fff; color:#090a0c; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; }
body:not(.beyz-layout) .site-header { min-height:72px; border-color:#ececef; }.site-header .brand-mark { background:#090a0c; }.site-header .brand-mark::after { background:#fff; }
body:not(.beyz-layout) .nav-cta { border:0; border-radius:9px; background:#090a0c; color:#fff!important; }.legal-hero { padding-top:88px; }.legal-hero h1 { font-family:inherit; font-size:clamp(58px,7vw,90px); font-weight:730; line-height:.98; letter-spacing:-.065em; }.legal-copy h2,.support-panel h2 { font-family:inherit; font-weight:700; letter-spacing:-.045em; }.footer-line { font-family:inherit; font-size:22px; font-weight:650; letter-spacing:-.035em; }

@media (max-width:760px) {
  .b-shell { width:min(100% - 32px,1120px); }.b-header-inner { display:flex; justify-content:space-between; gap:16px; }.b-main-nav { gap:0; margin-left:auto; }.b-nav-desktop { display:none; }.b-header-cta { display:none; }
  .b-hero-shell { grid-template-columns:minmax(0,1fr); width:min(100% - 32px,520px); padding-top:66px; }.b-home-hero { min-height:auto; }.b-hero-copy { width:100%; margin-inline:auto; text-align:center; }.b-hero-copy h1 { font-size:clamp(43px,12vw,58px); overflow-wrap:anywhere; }.b-hero-copy p { max-width:440px; margin-inline:auto; }.b-hero-product { height:552px; padding-top:50px; }
  .b-film-section { padding:76px 20px; }.portrait-showcase { grid-template-columns:1fr; gap:60px; }.portrait-showcase article,.portrait-showcase article.showcase-center { width:216px; margin-inline:auto; padding-top:0; }
  .b-feature-story { grid-template-columns:1fr; gap:70px; padding:76px 24px; }.b-feature-copy { width:min(100%,500px); margin-inline:auto; }.b-footer-inner { grid-template-columns:1fr; gap:20px; padding-block:34px; text-align:center; }.b-footer-brand,.b-footer p { justify-self:center; }.b-footer nav { justify-content:center; }
}