:root {
  --ink: #0c0b0a;
  --ink-soft: #171512;
  --paper: #f3efe7;
  --paper-deep: #e9e2d6;
  --white: #fffdf8;
  --gold: #d9a441;
  --gold-light: #f0c974;
  --muted: #877f74;
  --line: rgba(32, 27, 21, .14);
  --shell: min(1200px, calc(100vw - 64px));
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  /* dark-section counterparts of --line / text ramp */
  --line-dark: rgba(255, 255, 255, .12);
  --line-dark-2: rgba(255, 255, 255, .06);
  --line-gold: rgba(217, 164, 65, .32);
  --soft: rgba(255, 255, 255, .72);
  --faint: rgba(255, 255, 255, .44);
  --ink-2: #12100e;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
p { line-height: 1.68; }
.site-shell { width: var(--shell); margin-inline: auto; }
.narrow-shell { max-width: 1040px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 200; left: 16px; top: -80px; padding: 12px 18px; background: var(--gold); color: var(--ink); transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: 72px; border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(to bottom, rgba(12,11,10,.9), rgba(12,11,10,.46)); backdrop-filter: blur(16px) saturate(140%); transition: background .3s, height .3s; }
.site-header.is-scrolled { height: 68px; background: rgba(12,11,10,.94); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.brand-logo { width: 42px; height: 42px; flex: none; object-fit: contain; padding: 3px; border: 1px solid rgba(217,164,65,.38); border-radius: 11px; background: #0d0d0f; }
.brand-copy { display: grid; gap: 4px; line-height: 1; }.brand-copy b { font-size: 14px; font-weight: 900; letter-spacing: .24em; }.brand-copy small { color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .42em; }
.site-nav { margin: auto; display: flex; align-items: center; gap: clamp(15px, 2vw, 31px); }
.site-nav a { position: relative; padding: 27px 0 24px; color: rgba(255,255,255,.64); font-size: 12px; font-weight: 600; letter-spacing: .03em; transition: color .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 1px; background: var(--gold); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-login { font-size: 12px; color: rgba(255,255,255,.72); }
.menu-toggle { display: none; border: 0; background: none; padding: 8px; color: white; }
.menu-toggle > span:not(.sr-only) { display: block; width: 24px; height: 1px; margin: 5px 0; background: currentColor; }

.button { position: relative; overflow: hidden; display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 25px; border: 1px solid transparent; border-radius: 13px; font-size: 12px; font-weight: 800; letter-spacing: .02em; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 40px; padding-inline: 18px; font-size: 11px; }
.button-white { background: #ffffff; color: var(--ink); border-color: rgba(32,27,21,.12); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.button-white:hover { background: #f7f5f0; border-color: rgba(32,27,21,.24); color: var(--ink); }
.button-gold { background: #e6ac35; color: var(--ink); box-shadow: none; }
.button-gold:hover { background: #f3bd4c; }
.button-ghost { border-color: rgba(255,255,255,.25); color: var(--white); }
.button-ghost:hover { border-color: var(--gold); }
.button-ink { background: var(--ink); color: var(--white); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.text-link { display: inline-flex; gap: 12px; align-items: center; margin-top: 12px; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.text-link b { color: var(--gold); font-size: 18px; transition: transform .2s; }
.text-link:hover b { transform: translateX(4px); }
.text-link-light { color: var(--white); }

.hero { position: relative; overflow: hidden; min-height: 810px; padding: 162px 0 90px; }
.hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 75% 42%, rgba(217,164,65,.08), transparent 35%), linear-gradient(100deg, rgba(255,255,255,.02), transparent 42%); }
.hero-glow { position: absolute; width: 580px; height: 580px; right: -170px; top: 90px; border-radius: 50%; border: 1px solid rgba(217,164,65,.13); box-shadow: 0 0 0 80px rgba(217,164,65,.025), 0 0 0 160px rgba(217,164,65,.018); }
.hero-grid, .page-hero-grid { position: relative; display: grid; grid-template-columns: minmax(420px, .92fr) minmax(520px, 1.08fr); gap: clamp(45px, 7vw, 110px); align-items: center; }
.eyebrow { margin: 0 0 20px; color: var(--gold-light); font-size: 10px; font-weight: 800; letter-spacing: .24em; }
.eyebrow-dark { color: #8a682a; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.018em; }
h1 { margin-bottom: 28px; font-size: clamp(54px, 5.7vw, 91px); line-height: 1.07; }
h1 em { color: var(--gold-light); font-style: normal; }
.gold-foil { background: linear-gradient(96deg,#9d772f 0%,#e7c578 24%,#fff4d6 42%,#e7c578 60%,#b98f3e 80%,#e7c578 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent!important; -webkit-text-fill-color:transparent; animation:testFoil 7s linear infinite; }
@keyframes testFoil { to { background-position:220% 0; } }
h2 { margin-bottom: 22px; font-size: clamp(38px, 4vw, 62px); line-height: 1.13; }
h3 { font-size: 18px; }
.hero-intro { max-width: 650px; color: rgba(255,255,255,.7); font-size: 17px; }
.hero-stats { display: flex; gap: clamp(28px, 4vw, 62px); margin: 64px 0 0; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.12); }
.hero-stats div { display: flex; gap: 13px; align-items: flex-start; }
.hero-stats dt { color: var(--gold-light); font-family: var(--serif); font-size: 33px; line-height: 1; }
.hero-stats dd { margin: 0; color: rgba(255,255,255,.5); font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: .06em; }
.machine-frame { position: relative; padding: 18px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.025); transform: rotate(1.2deg); }
.machine-frame::before { content: ""; position: absolute; z-index: -1; inset: 30px -20px -20px 30px; border: 1px solid rgba(217,164,65,.22); }
.machine-frame img { width: 100%; min-height: 530px; object-fit: cover; filter: saturate(.78) contrast(1.08); }
.machine-note { position: absolute; display: flex; align-items: center; gap: 9px; padding: 11px 15px; background: rgba(12,11,10,.9); border: 1px solid rgba(255,255,255,.14); font-size: 10px; letter-spacing: .04em; }
.machine-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(217,164,65,.15); }
.machine-note-one { left: -35px; top: 30%; }.machine-note-two { right: -25px; bottom: 15%; }

/* The split prototype keeps the navigation model, but inherits the visual
   language and product storytelling of the original one-page /about. */
.legacy-kicker { display:inline-flex; align-items:center; gap:10px; color:var(--gold-light); font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.legacy-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:#73d083; box-shadow:0 0 0 4px rgba(115,208,131,.13),0 0 18px rgba(115,208,131,.65); }
.legacy-hero h1 { font-size:clamp(64px,7vw,104px); line-height:.9; margin-top:30px; }.legacy-hero h1 span { display:block; }.legacy-hero .hero-intro { max-width:660px; color:rgba(255,255,255,.73); font-size:16px; }
.legacy-trust { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:58px 0 0; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); }.legacy-trust div { display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; padding-right:20px; }.legacy-trust b { color:var(--gold-light); font:600 28px/1 var(--serif); }.legacy-trust span { color:rgba(255,255,255,.4); font-size:9px; line-height:1.4; text-transform:uppercase; letter-spacing:.05em; }
.legacy-hero-media { position:relative; justify-self:end; width:min(390px,100%); }.legacy-phone { position:relative; overflow:hidden; padding:8px; border:1px solid rgba(217,164,65,.28); border-radius:32px; background:#11100e; box-shadow:0 35px 80px -35px rgba(0,0,0,.9),0 0 55px -30px rgba(217,164,65,.55); }.legacy-phone video { width:100%; aspect-ratio:9/15; object-fit:cover; border-radius:25px; }.legacy-float { position:absolute; z-index:3; left:-42px; top:28px; padding:12px 15px; border:1px solid rgba(217,164,65,.28); border-radius:12px; background:rgba(12,11,10,.92); font-size:10px; font-weight:800; }.legacy-live { position:absolute; z-index:3; left:22px; right:22px; bottom:22px; display:flex; gap:10px; align-items:center; padding:13px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(12,11,10,.82); backdrop-filter:blur(12px); }.legacy-live i { width:8px; height:8px; border-radius:50%; background:#ff4d5e; box-shadow:0 0 12px rgba(255,77,94,.75); }.legacy-live b,.legacy-live span { display:block; }.legacy-live b { font-size:10px; }.legacy-live span { margin-top:3px; color:rgba(255,255,255,.48); font-size:8px; }
.legacy-marquee { position:relative; overflow:hidden; padding:22px 0 20px; border-block:1px solid rgba(255,255,255,.08); background:linear-gradient(#100f0d,#151310 55%,#100f0d); color:rgba(255,255,255,.5); white-space:nowrap; }
.legacy-marquee::before,.legacy-marquee::after { content:""; position:absolute; z-index:2; top:0; bottom:0; width:16%; pointer-events:none; }
.legacy-marquee::before { left:0; background:linear-gradient(90deg,#100f0d,transparent); }
.legacy-marquee::after { right:0; background:linear-gradient(270deg,#100f0d,transparent); }
.lm-row { display:flex; width:max-content; }
.lm-track { display:flex; gap:26px; align-items:center; animation:legacyMarquee 44s linear infinite; will-change:transform; }
.lm-track-rev { animation-duration:56s; animation-direction:reverse; }
.legacy-marquee .lm-track > span,.legacy-marquee .lm-track > em { padding-right:0; font-family:var(--serif); font-size:clamp(15px,1.55vw,21px); font-style:normal; }
.legacy-marquee .lm-track > em { color:var(--gold-light); }
.legacy-marquee .lm-track > b { color:var(--gold); font-size:8px; opacity:.85; }
.lm-row-langs { margin-top:12px; }
.lm-row-langs .lm-track { gap:22px; }
.lm-row-langs .lm-track > span { color:rgba(255,255,255,.34); font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.lm-row-langs .lm-track > b { color:rgba(217,164,65,.55); font-size:11px; }
.lm-note { margin:16px 0 0; text-align:center; color:rgba(255,255,255,.3); font-size:10px; letter-spacing:.1em; text-transform:uppercase; white-space:normal; }
@media (max-width:640px) { .legacy-marquee { padding:16px 0 14px; }.legacy-marquee::before,.legacy-marquee::after { width:9%; }.lm-note { font-size:9px; letter-spacing:.06em; } }
@media (prefers-reduced-motion: reduce) { .lm-track { animation:none; } }
/* Каждая .lm-track уезжает на свою полную ширину: в ряду две одинаковые копии,
   поэтому на месте первой встаёт вторая и шва не видно. */
@keyframes legacyMarquee { to { transform:translateX(-100%); } }
.legacy-manifesto { padding:110px 0; background:#171510; }.legacy-manifesto-inner { max-width:1000px; margin:auto; }.legacy-manifesto .mf-tag { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }.legacy-manifesto blockquote { margin:28px 0; font:600 clamp(39px,5.2vw,68px)/1.08 var(--serif); }.legacy-manifesto blockquote em { color:var(--gold-light); }.legacy-sign { display:flex; gap:14px; align-items:center; color:rgba(255,255,255,.46); font-size:12px; }.legacy-sign i { width:44px; height:1px; background:var(--gold); }
.legacy-process { background:var(--paper); color:var(--ink); }
.legacy-process-head { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:end; margin-bottom:42px; }
.legacy-process-head p:last-child { color:#6c655d; }
.legacy-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.legacy-step { position:relative; min-width:0; padding:24px 24px 28px; border:1px solid rgba(32,27,21,.16); background:#faf7f1; box-shadow:0 16px 38px -32px rgba(40,30,15,.38); }
.legacy-step:not(:last-child)::after { content:""; position:absolute; z-index:2; left:calc(100% + 1px); top:82px; width:27px; height:18px; background:linear-gradient(#a27a37,#a27a37) left 8px/20px 2px no-repeat; }
.legacy-step:not(:last-child)::before { content:""; position:absolute; z-index:3; left:calc(100% + 16px); top:87px; width:8px; height:8px; border-top:2px solid #a27a37; border-right:2px solid #a27a37; transform:rotate(45deg); }
.legacy-step-number { display:block; color:#8b652c; font:600 36px/1 var(--serif); letter-spacing:.02em; }
.legacy-step-art { display:grid; place-items:center; height:110px; margin:16px 0 21px; border:1px solid rgba(150,117,59,.17); background:linear-gradient(145deg,#f4eddf,#fffdf8); color:#233763; }
.legacy-step-art svg { width:160px; height:96px; }
.step-art-paper { fill:#fffdf8; stroke:#a99471; stroke-width:1.5; }
.step-art-ink { stroke:currentColor; stroke-width:2; }
.step-art-guide { stroke:#aeb8c8; stroke-width:1.3; }
.step-art-accent { stroke:#aa7c32; stroke-width:2; }
.legacy-step h3 { margin:0 0 12px; font-size:17px; line-height:1.3; }
.legacy-step p { margin:0; color:#6b645b; font-size:13px; line-height:1.65; }

.section { position: relative; padding: 120px 0; }
.section-light { background: var(--paper); color: var(--ink); }
.section-paper { background: #f7f3eb; color: var(--ink); }
.section-heading { max-width: 760px; margin: 0 auto 60px; text-align: center; }
.section-heading > p:last-child { color: #6d665d; }
.section-heading-left { margin-left: 0; text-align: left; }
.large-copy { font-size: 19px; line-height: 1.65; }
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.route-card { position: relative; overflow: hidden; min-height: 390px; padding: 33px; border: 1px solid var(--line); background: #eee8dd; transition: transform .25s, box-shadow .25s; }
.route-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(32,25,16,.12); }
.route-card h3 { margin-top: 90px; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.route-card p { color: #6d665d; font-size: 13px; }
.route-card .text-link { position: absolute; left: 33px; bottom: 29px; }
.route-index { position: absolute; z-index: 3; top: 27px; right: 28px; color: #9b9287; font-size: 10px; letter-spacing: .14em; }
.route-card-featured { grid-column: span 2; background: #dfd6c6; }
.route-card-featured h3 { margin-top: 29px; }
.mini-studio { width: 68%; height: 170px; border: 1px solid rgba(0,0,0,.19); background: #151310; color: white; box-shadow: 20px 25px 45px rgba(38,30,20,.16); }
.mini-bar { height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 6px; color: #8d867c; }
.mini-bar i { width: 4px; height: 4px; border-radius: 50%; background: #725d36; }.mini-bar span { margin-left: auto; }
.mini-canvas { position: relative; height: 145px; margin: 0 0 0 34px; background: repeating-linear-gradient(#f8f4ea 0 21px, #d9d7cf 22px); color: #28231e; }
.mini-block { position: absolute; left: 15px; top: 18px; width: 69%; height: 75px; border: 1px solid var(--gold); padding: 5px; color: #9c7937; font-size: 6px; }
.mini-writing { position: absolute; left: 25px; top: 51px; font-family: cursive; font-size: 14px; transform: rotate(-2deg); }
.route-symbol { display: block; margin-top: 62px; color: #5b4b38; font-family: var(--serif); font-size: 70px; }.route-symbol-small { font-family: var(--sans); font-size: 20px; line-height: 1.25; font-weight: 700; }
.route-card-image { padding-top: 0; }.route-card-image img { width: calc(100% + 66px); height: 180px; margin-left: -33px; object-fit: cover; filter: grayscale(.2) sepia(.12); }.route-card-image h3 { margin-top: 28px; }
.route-card-dark { background: #171511; color: white; }.route-card-dark p, .route-card-dark .route-index { color: rgba(255,255,255,.55); }.route-card-dark .text-link { color: white; }
.support-orbit { display: grid; place-items: center; width: 92px; height: 92px; margin: 48px auto 0; border: 1px solid rgba(217,164,65,.3); border-radius: 50%; box-shadow: 0 0 0 17px rgba(217,164,65,.04), 0 0 0 34px rgba(217,164,65,.025); }.support-orbit i { width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 25px var(--gold); }.route-card-dark h3 { margin-top: 41px; }
.manifesto { background: #151310; }.manifesto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12vw; }.manifesto-copy p { color: rgba(255,255,255,.62); font-size: 16px; }
.telegram-band, .social-proof { background: var(--gold-light); color: var(--ink); padding: 65px 0; }.telegram-grid { display: grid; grid-template-columns: 90px 1fr auto; gap: 35px; align-items: center; }.telegram-grid h2 { margin-bottom: 12px; font-size: 39px; }.telegram-grid p:last-child { margin-bottom: 0; color: #5d4c2f; }.telegram-icon { display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid rgba(12,11,10,.3); border-radius: 50%; font-size: 28px; }

/* No min-height: text-only heroes (works, support) otherwise leave 150–240px
   of dead space under the copy. Padding alone gives them enough presence. */
.page-hero { position: relative; overflow: hidden; padding: 165px 0 100px; }
.page-hero h1 { font-size: clamp(52px, 5vw, 82px); }
.breadcrumbs { display: flex; gap: 10px; margin-bottom: 60px; color: rgba(255,255,255,.4); font-size: 10px; letter-spacing: .05em; }.breadcrumbs a:hover { color: var(--gold-light); }
.studio-window { border: 1px solid rgba(255,255,255,.16); background: #11100e; box-shadow: 0 40px 80px rgba(0,0,0,.35); transform: perspective(1300px) rotateY(-4deg) rotateX(1deg); }
.studio-window-bar { height: 42px; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.09); color: #777168; font-size: 8px; }.studio-window-bar div { display: flex; gap: 5px; }.studio-window-bar i { width: 6px; height: 6px; background: #4d4439; border-radius: 50%; }.studio-window-bar span { margin: auto; }.studio-window-bar b { font-weight: 500; }
.studio-window-body { display: grid; grid-template-columns: 38px 1fr 108px; min-height: 430px; }.studio-window-body aside { display: flex; flex-direction: column; align-items: center; gap: 13px; padding-top: 15px; border-right: 1px solid rgba(255,255,255,.08); color: #706a61; font-size: 9px; }.studio-window-body aside span { display: grid; place-items: center; width: 24px; height: 24px; }.studio-window-body aside .active { background: var(--gold); color: var(--ink); }
.studio-sheet { position: relative; margin: 25px; overflow: hidden; background: repeating-linear-gradient(#fbf7ee 0 28px, #d6d8d5 29px); color: #25211d; }.sheet-ruler { height: 13px; border-bottom: 1px solid #c9c4ba; background: repeating-linear-gradient(90deg, transparent 0 10px, #aaa 11px 12px); }
.text-block { position: absolute; padding: 9px; border: 1px solid var(--gold); }.text-block small { color: #956b1e; font-size: 6px; }.text-block strong { display: block; margin: 9px 0 4px; font-family: cursive; font-size: 23px; font-weight: 400; }.text-block p { font-family: cursive; font-size: 13px; line-height: 1.5; }.text-block i { position: absolute; width: 5px; height: 5px; border: 1px solid var(--gold); background: white; }.text-block i:nth-of-type(1){left:-3px;top:-3px}.text-block i:nth-of-type(2){right:-3px;top:-3px}.text-block i:nth-of-type(3){left:-3px;bottom:-3px}.text-block i:nth-of-type(4){right:-3px;bottom:-3px}.block-one { left: 10%; top: 20%; width: 73%; }.block-two { right: 7%; bottom: 12%; width: 42%; }.block-two p { margin: 9px 0 0; }
.studio-panel { padding: 18px 13px; border-left: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; color: #767067; font-size: 7px; }.studio-panel b { margin: 5px 0 17px; color: #d5d0c8; font-size: 8px; font-weight: 500; }.studio-panel .toggle-on { color: var(--gold-light); }
.split-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: center; }.split-feature p:not(.eyebrow) { color: #665f56; }
.alphabet-board { position: relative; min-height: 440px; padding: 52px; overflow: hidden; border: 1px solid #cfc5b6; background: #e9e1d4; }.alphabet-number { position: absolute; right: 25px; top: -32px; color: rgba(103,79,38,.1); font-family: var(--serif); font-size: 190px; }.alphabet-lines { position: relative; display: flex; flex-direction: column; gap: 25px; padding-top: 70px; font-family: cursive; font-size: 26px; }.progress-line { margin-top: 55px; height: 3px; background: #cbc0af; }.progress-line i { display: block; width: 100%; height: 100%; background: var(--gold); }.alphabet-board small { display: block; margin-top: 12px; color: #766e64; }
.cursive-section { overflow: hidden; }.cursive-demo { position: relative; margin: 60px 0; padding: 35px 50px 20px; color: var(--gold-light); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); }.pen-point { position: absolute; right: 4%; top: 45%; width: 10px; height: 10px; background: var(--gold-light); border-radius: 50%; box-shadow: 0 0 0 10px rgba(217,164,65,.12), 0 0 35px var(--gold); }.cursive-labels { display: flex; justify-content: space-between; color: rgba(255,255,255,.43); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.two-cards article { padding: 30px; border: 1px solid rgba(255,255,255,.12); }.two-cards article > span { color: var(--gold); font-size: 10px; }.two-cards h3 { margin-top: 28px; font-family: var(--serif); font-size: 25px; }.two-cards p { color: rgba(255,255,255,.58); }
.feature-matrix { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.feature-matrix article { min-height: 270px; padding: 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.feature-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #baa880; color: #806229; font-family: var(--serif); }.feature-matrix h3 { margin: 35px 0 12px; }.feature-matrix p { color: #6a635a; font-size: 13px; }
.assistant-section { background: #171510; }.assistant-grid { display: grid; grid-template-columns: minmax(480px, .9fr) 1fr; gap: 9vw; align-items: center; }.assistant-chat { padding: 18px; border: 1px solid rgba(255,255,255,.12); background: #0e0d0c; box-shadow: 0 30px 70px rgba(0,0,0,.28); }.chat-top { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.09); }.assistant-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 7px rgba(217,164,65,.12); }.chat-top b,.chat-top small { display: block; }.chat-top b { font-size: 11px; }.chat-top small { margin-top: 3px; color: #706b64; font-size: 8px; }.chat-user { width: 61%; margin: 23px 0 18px auto; padding: 12px 15px; background: #2a2722; font-size: 10px; }.chat-answer { padding: 15px; background: #1b1916; }.chat-answer img { width: 100%; height: 185px; object-fit: cover; }.chat-answer p { margin: 12px 0 7px; color: #b7b1a8; font-size: 10px; }.chat-answer a { color: var(--gold-light); font-size: 9px; }.chat-input { display: flex; justify-content: space-between; margin-top: 14px; padding: 13px; border: 1px solid rgba(255,255,255,.1); color: #6d6860; font-size: 9px; }.chat-input span { color: var(--gold); }.check-list { margin: 28px 0; padding: 0; list-style: none; }.check-list li { position: relative; padding: 11px 0 11px 28px; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.67); font-size: 13px; }.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); }
.cta-section,.detail-next,.support-cta { background: #201d18; }.cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; }.cta-inner h2 { font-size: 42px; }.cta-inner p:last-child { max-width: 750px; color: rgba(255,255,255,.58); }

.library-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 80px; }.library-heading > div:first-child { max-width: 810px; }.library-stats { display: flex; margin: 0 0 30px; }.library-stats div { min-width: 125px; padding: 0 23px; border-left: 1px solid rgba(255,255,255,.14); }.library-stats dt { color: var(--gold-light); font-family: var(--serif); font-size: 36px; }.library-stats dd { margin: 5px 0 0; color: rgba(255,255,255,.43); font-size: 9px; text-transform: uppercase; }
.catalog-toolbar { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 45px; }.filter-group { display: flex; gap: 8px; }.filter-group button { padding: 12px 17px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 11px; }.filter-group button span { margin-left: 7px; color: #9b9388; }.filter-group button.is-active { background: var(--ink); color: white; }.catalog-search { position: relative; width: 260px; }.catalog-search input { width: 100%; padding: 13px 35px 13px 15px; border: 0; border-bottom: 1px solid #a9a094; outline: 0; background: transparent; }.catalog-search b { position: absolute; right: 10px; top: 12px; }
.handwriting-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 18px; }.handwriting-card { position: relative; }.handwriting-card[hidden] { display: none; }.handwriting-preview { position: relative; display: block; overflow: hidden; aspect-ratio: 2.25/1; border: 1px solid #d7cfc2; background: white; }.handwriting-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }.handwriting-card:hover .handwriting-preview img { transform: scale(1.025); }.pack-badge { position: absolute; left: 12px; top: 12px; padding: 6px 9px; background: rgba(12,11,10,.85); color: white; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }.pack-badge-static { position: static; display: inline-flex; margin-bottom: 25px; }.handwriting-info { display: flex; justify-content: space-between; gap: 20px; padding: 19px 3px 8px; }.handwriting-info p { margin-bottom: 4px; color: #8c8378; font-size: 9px; text-transform: uppercase; }.handwriting-info h2 { margin: 0; font-family: var(--sans); font-size: 17px; font-weight: 700; }.pack-arrow { color: #9b772f; }.pack-meta { display: flex; gap: 15px; padding: 0 3px; color: #8b8379; font-size: 9px; }.card-hit { position: absolute; inset: 0; z-index: 3; }.catalog-empty,.catalog-unavailable { padding: 80px 20px; text-align: center; }.library-note { background: #171510; }.subscription-card { padding: 42px; border: 1px solid rgba(217,164,65,.3); background: #201d18; }.subscription-card > span { color: var(--gold); font-size: 9px; letter-spacing: .18em; }.subscription-card h3 { margin-top: 22px; font-family: var(--serif); font-size: 28px; }.subscription-card p { color: rgba(255,255,255,.58)!important; }
.pack-detail-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: center; }.pack-author { color: var(--gold-light); font-size: 12px; }.pack-language-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; }.pack-language-list span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.65); font-size: 9px; }.access-caption { margin-top: 13px; color: rgba(255,255,255,.4); font-size: 9px; }.pack-cover-large { margin: 0; padding: 16px; border: 1px solid rgba(255,255,255,.14); }.pack-cover-large img { width: 100%; min-height: 360px; object-fit: cover; background: white; }.pack-cover-large figcaption { padding: 12px 3px 0; color: rgba(255,255,255,.38); font-size: 9px; }.glyph-table-wrap { overflow-x: auto; border: 1px solid var(--line); }.glyph-table { width: 100%; border-collapse: collapse; font-size: 12px; }.glyph-table th { padding: 16px; background: #e6ded0; color: #71695f; text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }.glyph-table td { padding: 13px 16px; border-top: 1px solid var(--line); }.glyph-table tbody tr:hover { background: #f0e9dd; }.glyph-char { font-family: var(--serif); font-size: 23px; }.status-ready { color: #456a45; font-weight: 700; }

.machine-product-shot { position: relative; }.machine-product-shot img { width: 100%; height: 530px; object-fit: cover; border: 1px solid rgba(255,255,255,.12); }.product-tag { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: rgba(12,11,10,.9); border: 1px solid rgba(255,255,255,.16); font-size: 9px; }.product-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }.tag-pen { right: -15px; top: 23%; }.tag-paper { left: -25px; bottom: 17%; }.tag-motion { right: 8%; bottom: -15px; }
.process-line { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }.process-line article { padding: 34px 30px; border-right: 1px solid var(--line); }.process-line article:last-child { border: 0; }.process-line span,.order-steps span { color: #98752e; font-size: 10px; }.process-line h3,.order-steps h3 { margin-top: 50px; }.process-line p,.order-steps p { color: #6c655d; font-size: 13px; }.machine-motion { background: #161411; }.media-feature { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: center; }.video-frame { position: relative; padding: 12px; border: 1px solid rgba(255,255,255,.15); }.video-frame video { width: 100%; max-height: 600px; background: black; }.video-caption { position: absolute; left: 25px; bottom: 25px; padding: 8px 12px; background: rgba(0,0,0,.7); font-size: 9px; }.kit-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }.kit-grid article { background: #ece5da; }.kit-grid img { width: 100%; aspect-ratio: 1.15; object-fit: cover; }.kit-grid h3,.kit-grid p { margin-inline: 22px; }.kit-grid h3 { margin-top: 22px; }.kit-grid p { color: #71695f; font-size: 12px; }.first-start { background: #1a1815; }.setup-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }.setup-grid figure { margin: 0; border: 1px solid rgba(255,255,255,.12); }.setup-grid img { width: 100%; aspect-ratio: 1.45; object-fit: cover; }.setup-grid figcaption { display: flex; flex-direction: column; gap: 6px; padding: 18px; }.setup-grid b { font-size: 13px; }.setup-grid span { color: rgba(255,255,255,.48); font-size: 11px; }.help-strip { display: grid; grid-template-columns: 180px 1fr auto; gap: 30px; align-items: center; margin-top: 45px; padding: 27px; border: 1px solid rgba(217,164,65,.3); }.help-strip > span { color: var(--gold-light); font-family: var(--serif); font-size: 18px; }.help-strip p { margin: 0; color: rgba(255,255,255,.58); font-size: 12px; }.help-strip a { color: var(--gold-light); font-size: 11px; font-weight: 700; }

.works-heading { max-width: 870px; }.works-feature-video { margin-top: 60px; }.works-feature-video video { width: 100%; max-height: 650px; object-fit: cover; background: black; }.works-feature-video > div { display: flex; justify-content: space-between; gap: 40px; padding-top: 17px; color: rgba(255,255,255,.48); font-size: 10px; }.works-feature-video p { max-width: 500px; margin: 0; }.works-hero { padding-bottom: 0; }.media-mosaic { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 340px; gap: 16px; }.media-mosaic figure { position: relative; margin: 0; overflow: hidden; background: #ded7cc; }.media-mosaic img,.media-mosaic video { width: 100%; height: 100%; object-fit: cover; }.media-mosaic figcaption { position: absolute; left: 13px; bottom: 13px; padding: 8px 11px; background: rgba(12,11,10,.8); color: white; font-size: 9px; }.media-tall { grid-row: span 2; }.media-wide { grid-column: span 2; }.comparison-section { background: #171510; }.comparison-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; align-items: center; }.line-comparison { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.13); }.line-comparison > div { min-height: 260px; padding: 28px; }.line-comparison > div + div { border-left: 1px solid rgba(255,255,255,.13); }.line-comparison small { color: rgba(255,255,255,.35); font-size: 9px; text-transform: uppercase; }.line-comparison p { margin: 60px 0 43px; font-size: 22px; white-space: nowrap; }.line-comparison span { color: rgba(255,255,255,.38); font-size: 9px; }.typed-line { font-family: serif; letter-spacing: 1px; }.live-line p { color: var(--gold-light); font-family: cursive; transform: rotate(-2deg); }

.delivery-card { padding: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.025); }.delivery-card img { width: 100%; height: 380px; object-fit: cover; }.delivery-route { display: flex; justify-content: space-between; padding: 14px 5px 20px; color: var(--gold-light); font-size: 10px; letter-spacing: .14em; }.delivery-card dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; padding: 20px 5px 7px; }.delivery-card dl div { display: flex; gap: 10px; align-items: center; }.delivery-card dt { color: var(--gold); font-size: 9px; }.delivery-card dd { margin: 0; color: rgba(255,255,255,.55); font-size: 9px; }.contact-note { margin-top: 20px; color: rgba(255,255,255,.45); font-size: 11px; }.contact-note a { color: var(--gold-light); }.order-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }.order-steps article { min-height: 300px; padding: 30px; border: 1px solid var(--line); }.delivery-details { background: #171510; }.detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: start; }.document-panel { border-top: 1px solid rgba(255,255,255,.2); }.document-panel h3 { padding: 20px 0; }.document-panel a { display: flex; justify-content: space-between; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.62); font-size: 12px; }.document-panel a:hover { color: var(--gold-light); }.aftercare-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.aftercare-grid a { min-height: 300px; padding: 30px; border: 1px solid var(--line); }.aftercare-grid span { color: #98752e; font-size: 10px; }.aftercare-grid h3 { margin-top: 55px; }.aftercare-grid p { color: #6d665d; font-size: 13px; }.aftercare-grid b { display: block; margin-top: 32px; color: #886728; font-size: 11px; }

.support-hero { text-align: center; }.support-glow { position: absolute; left: 50%; top: 40%; width: 500px; height: 500px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(217,164,65,.14), transparent 65%); }.support-heading { position: relative; max-width: 1000px; }.support-heading .breadcrumbs { justify-content: center; }.support-heading .hero-intro { margin-inline: auto; }.support-ladder article { position: relative; display: grid; grid-template-columns: 75px 130px 1fr 130px; gap: 35px; align-items: start; padding: 60px 40px; border-top: 1px solid var(--line); }.support-ladder article:last-child { border-bottom: 1px solid var(--line); }.ladder-number { color: #92702c; font-size: 10px; }.ladder-icon { display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid #a9956f; border-radius: 50%; color: #8b6827; font-family: var(--serif); font-size: 22px; }.assistant-pulse i { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 10px rgba(217,164,65,.15),0 0 0 22px rgba(217,164,65,.06); }.support-ladder h2 { margin-bottom: 16px; font-size: 38px; }.support-ladder p { max-width: 750px; color: #665f56; }.plain-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }.plain-list li { padding: 7px 10px; border: 1px solid var(--line); color: #716a61; font-size: 9px; }.ladder-time { color: #8c8378; font-size: 9px; text-align: right; text-transform: uppercase; letter-spacing: .1em; }.support-ladder .ladder-premium { margin-top: 25px; border: 0; background: var(--ink); color: white; }.ladder-premium p { color: rgba(255,255,255,.6); }.premium-note { padding-left: 17px; border-left: 2px solid var(--gold); color: rgba(255,255,255,.8)!important; }.support-photo-section { background: #171510; }.support-photo-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 10vw; align-items: center; }.support-photo-stack { position: relative; min-height: 600px; }.support-photo-stack img:first-child { width: 78%; height: 450px; object-fit: cover; }.support-photo-stack img:nth-child(2) { position: absolute; right: 0; bottom: 0; width: 58%; height: 300px; object-fit: cover; border: 10px solid #171510; }.support-photo-stack span { position: absolute; left: 25px; bottom: 105px; padding: 13px 17px; background: var(--gold); color: var(--ink); font-size: 10px; font-weight: 700; }.topic-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.topic-links a { position: relative; min-height: 220px; padding: 27px; border: 1px solid var(--line); }.topic-links span { font-family: var(--serif); font-size: 20px; }.topic-links p { margin-top: 45px; color: #6d665d; font-size: 11px; }.topic-links b { position: absolute; right: 25px; bottom: 22px; color: #906d29; }

.site-footer { padding-top: 75px; background: #0a0908; border-top: 1px solid rgba(255,255,255,.09); }.footer-lead { display: grid; grid-template-columns: 1fr auto; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.1); }.footer-lead p { max-width: 670px; margin: 25px 0 0; color: rgba(255,255,255,.44); font-size: 12px; }.footer-actions { display: flex; gap: 11px; align-items: center; }.footer-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 50px; padding: 55px 0; }.footer-grid section { display: flex; flex-direction: column; gap: 12px; }.footer-grid h2 { margin-bottom: 10px; color: rgba(255,255,255,.35); font-family: var(--sans); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }.footer-grid a { width: fit-content; color: rgba(255,255,255,.68); font-size: 11px; }.footer-grid a:hover { color: var(--gold-light); }.footer-bottom { display: flex; justify-content: space-between; padding: 20px 0 28px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.28); font-size: 9px; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.is-visible[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } .button { transition: none; } }

@media (max-width: 1120px) {
  :root { --shell: min(100% - 44px, 1000px); }
  .site-nav { gap: 16px; }.site-nav a { font-size: 10px; }.header-login { display: none; }
  .hero-grid,.page-hero-grid { grid-template-columns: 1fr 1fr; gap: 35px; }.route-grid { grid-template-columns: repeat(2,1fr); }.handwriting-grid { grid-template-columns: repeat(2,1fr); }
  .feature-matrix { grid-template-columns: repeat(2,1fr); }.kit-grid,.topic-links { grid-template-columns: repeat(2,1fr); }.process-line,.order-steps { grid-template-columns: repeat(2,1fr); }.process-line article:nth-child(2) { border-right: 0; }
  .support-ladder article { grid-template-columns: 55px 95px 1fr; }.ladder-time { display: none; }
}
@media (max-width: 820px) {
  :root { --shell: calc(100vw - 34px); }.site-header { height: 68px; }.header-inner { justify-content: space-between; }.menu-toggle { display: block; margin-left: auto; }.header-actions .button { display: none; }
  .site-nav { position: fixed; inset: 68px 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px 22px; background: rgba(12,11,10,.98); border-bottom: 1px solid rgba(255,255,255,.1); }.site-nav.is-open { display: flex; }.site-nav a { padding: 13px 4px; font-size: 12px; }.site-nav a[aria-current="page"]::after { bottom: 8px; right: auto; width: 25px; }
  .hero,.page-hero { min-height: auto; padding: 120px 0 70px; }.hero-grid,.page-hero-grid,.split-feature,.manifesto-grid,.assistant-grid,.pack-detail-grid,.media-feature,.comparison-grid,.detail-columns,.support-photo-grid { grid-template-columns: 1fr; }.hero-machine { margin-top: 25px; }.machine-frame img { min-height: 420px; }.hero-stats { margin-top: 45px; }
  h1 { font-size: clamp(44px, 12vw, 65px); }.page-hero h1 { font-size: clamp(43px, 11vw, 62px); } h2 { font-size: 38px; }.section { padding: 82px 0; }
  .route-card-featured { grid-column: auto; }.route-card-featured .mini-studio { width: 86%; }.route-card-featured h3 { margin-top: 34px; }
  .telegram-grid { grid-template-columns: 62px 1fr; }.telegram-grid .button { grid-column: 2; justify-self: start; }.telegram-icon { width: 58px; height: 58px; }.library-heading { grid-template-columns: 1fr; gap: 30px; }.library-stats { flex-wrap: wrap; }.catalog-toolbar { flex-direction: column; }.catalog-search { width: 100%; }.studio-window { transform: none; }.studio-window-body { grid-template-columns: 32px 1fr; }.studio-panel { display: none; }
  .cta-inner { grid-template-columns: 1fr; gap: 25px; }.media-mosaic { grid-template-columns: repeat(2,1fr); }.media-tall,.media-wide { grid-column: auto; grid-row: auto; }.support-ladder article { grid-template-columns: 45px 1fr; gap: 22px; padding: 45px 20px; }.ladder-icon { grid-column: 2; grid-row: 1; width: 70px; height: 70px; }.support-ladder article > div:nth-child(3) { grid-column: 2; }.help-strip { grid-template-columns: 1fr; }.footer-lead { grid-template-columns: 1fr; }.footer-grid { grid-template-columns: repeat(2,1fr); }
  .legacy-hero h1 { font-size:clamp(58px,15vw,82px); }.legacy-hero-media { justify-self:start; width:min(350px,100%); }.legacy-manifesto { padding:80px 0; }.legacy-process-head { grid-template-columns:1fr; }.legacy-steps { grid-template-columns:1fr; gap:34px; }.legacy-step { padding:22px; }.legacy-step:not(:last-child)::after { left:50%; top:100%; width:2px; height:27px; background:#a27a37; }.legacy-step:not(:last-child)::before { left:calc(50% - 4px); top:calc(100% + 18px); transform:rotate(135deg); }
}
@media (max-width: 560px) {
  .brand-copy b { font-size:11px; }.brand-copy small { font-size:7px; }.brand-logo { width:38px; height:38px; }.header-actions { display: none; }.hero { padding-top: 110px; }.hero-intro { font-size: 15px; }.button-row .button { width: 100%; }.hero-stats { gap: 18px; justify-content: space-between; }.hero-stats div { display: block; }.hero-stats dt { margin-bottom: 8px; }.machine-frame { padding: 9px; }.machine-frame img { min-height: 330px; }.machine-note { display: none; }
  .route-grid,.handwriting-grid,.two-cards,.feature-matrix,.process-line,.kit-grid,.setup-grid,.order-steps,.aftercare-grid,.topic-links { grid-template-columns: 1fr; }.route-card { min-height: 360px; }.route-card-featured { min-height: 460px; }.mini-studio { width: 100%!important; }.section-heading { text-align: left; }.section { padding: 70px 0; }.alphabet-board { min-height: 350px; padding: 25px; }.alphabet-lines { font-size: 20px; }.cursive-demo { padding: 15px; }.cursive-labels { display: none; }.feature-matrix { border: 0; }.feature-matrix article { border-left: 1px solid var(--line); }
  .library-stats div { min-width: 95px; padding: 0 12px; }.filter-group { overflow-x: auto; }.filter-group button { white-space: nowrap; }.pack-cover-large img { min-height: 220px; }.glyph-table { min-width: 650px; }.machine-product-shot img { height: 370px; }.product-tag { display: none; }.process-line article { border-right: 0; border-bottom: 1px solid var(--line); }.media-mosaic { grid-template-columns: 1fr; grid-auto-rows: 340px; }.line-comparison { grid-template-columns: 1fr; }.line-comparison > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.13); }.line-comparison p { white-space: normal; }.delivery-card dl { grid-template-columns: 1fr; gap: 12px; }.support-ladder article { display: block; }.ladder-icon { margin: 20px 0; }.support-photo-stack { min-height: 470px; }.support-photo-stack img:first-child { height: 340px; }.support-photo-stack img:nth-child(2) { height: 220px; }.footer-actions { flex-direction: column; align-items: stretch; }.footer-grid { gap: 38px 25px; }.footer-bottom { flex-direction: column; gap: 8px; }
  .legacy-trust { gap:15px; }.legacy-trust div { display:block; padding:0; }.legacy-trust b { display:block; margin-bottom:7px; }.legacy-hero-media { width:min(330px,100%); }.legacy-float { left:-5px; }.legacy-manifesto blockquote { font-size:38px; }
}

/* =====================================================================
   RESTORED PRODUCT STORYTELLING
   Sections recovered from the original one-page /about, re-cut to the
   split navigation model and the paper/gold palette of this prototype.
   ===================================================================== */

/* ---- shared section rhythm ---------------------------------------- */
.section-dark { background: var(--ink-soft); color: var(--white); }
.section-tight { padding-top: 0; }
.section-dark p, .section-dark .large-copy { color: var(--soft); }
.lede { max-width: 62ch; color: var(--soft); font-size: 17px; line-height: 1.7; }
.section-light .lede, .section-paper .lede { color: #665f56; }

/* ---- digital → handwriting transform ------------------------------ */
.transform { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.tf-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 240px; padding: 30px; border: 1px solid var(--line-dark); }
.tf-before { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
.section-light .tf-before, .section-paper .tf-before { border-color: var(--line); background: #e9e2d6; }
.tf-after { border-color: rgba(217,164,65,.42); background: linear-gradient(180deg, #faf7f0, #f4f0e4); box-shadow: 0 30px 70px -34px rgba(217,164,65,.5); }
.tf-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-light .tf-before .tf-label, .section-paper .tf-before .tf-label { color: #8a8277; }
.tf-label-gold { color: #8a682a; }
.tf-digital { color: var(--soft); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; }
.section-light .tf-before .tf-digital, .section-paper .tf-before .tf-digital { color: #5f584f; }
.tf-rule { position: absolute; left: 30px; right: 30px; height: 1px; background: rgba(120,140,210,.26); pointer-events: none; }
.tf-rule:nth-of-type(1) { bottom: 74px; } .tf-rule:nth-of-type(2) { bottom: 41px; } .tf-rule:nth-of-type(3) { bottom: 8px; }
.tf-hand { position: relative; z-index: 1; color: #1c2d63; font-family: "Caveat", cursive; font-weight: 600; font-size: clamp(26px, 3.1vw, 37px); line-height: 1.5; }
.tf-arrow { align-self: center; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid rgba(217,164,65,.4); border-radius: 50%; background: rgba(217,164,65,.09); color: var(--gold); }
.section-light .tf-arrow, .section-paper .tf-arrow { color: #8a682a; }
.tf-arrow svg { width: 23px; height: 23px; }
.math-after { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: #1c2d63; font-family: "Caveat", cursive; font-weight: 700; font-size: clamp(27px, 3.2vw, 42px); line-height: 1.1; }
.math-frac { display: inline-flex; flex-direction: column; text-align: center; }
.math-num { padding: 0 10px 2px; }
.math-den { margin-top: 2px; padding: 4px 10px 0; border-top: 2px solid #1c2d63; }
.math-after .sup { font-size: .62em; vertical-align: super; }

/* ---- handwritten paper demos (graph / geometry / table) ------------ */
.paper-demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.paper-demo-card { position: relative; overflow: hidden; min-height: 265px; padding: 24px; border: 1px solid rgba(217,164,65,.34); background: linear-gradient(180deg, #faf7f0, #f3efe3); box-shadow: 0 26px 70px -44px rgba(217,164,65,.45); }
.paper-demo-label { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #9b7835; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.paper-demo-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #b98f3e; box-shadow: 0 0 0 5px rgba(185,143,62,.14); }
.human-lines { position: absolute; left: 24px; right: 24px; top: 62px; bottom: 20px; opacity: .5; background: repeating-linear-gradient(180deg, transparent 0 35px, rgba(69,103,184,.26) 36px, transparent 37px); }
.human-svg { position: relative; z-index: 1; width: 100%; height: 180px; overflow: visible; }
.human-svg .ink { fill: none; stroke: #1c2d63; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.human-svg .guide { fill: none; stroke: #1c2d63; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; opacity: .76; }
.human-svg .arc { fill: none; stroke: #1c2d63; stroke-width: 1.7; stroke-linecap: round; opacity: .82; }
.human-svg .tick { fill: none; stroke: #1c2d63; stroke-width: 2.1; stroke-linecap: round; opacity: .9; }
.human-svg .dash { stroke-dasharray: 5 6; }
.human-svg text { fill: #1c2d63; font-family: "Caveat", cursive; font-size: 18px; font-weight: 700; }
.table-human { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; color: #1c2d63; font-family: "Caveat", cursive; font-size: 24px; font-weight: 700; }
.table-human span { position: relative; display: flex; min-height: 44px; align-items: center; justify-content: center; }
.table-human span::before { content: ""; position: absolute; left: 5px; right: 5px; top: 0; border-top: 2px solid #1c2d63; border-radius: 50%; opacity: .86; transform: rotate(var(--rot, 0deg)); }
.table-human span::after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 0; border-left: 2px solid #1c2d63; border-radius: 50%; opacity: .78; transform: rotate(var(--vrot, 0deg)); }
.table-human span:nth-child(3n)::before { right: 0; }
.table-human span:nth-child(1) { --rot:-.4deg; --vrot:.5deg } .table-human span:nth-child(2) { --rot:.35deg; --vrot:-.25deg } .table-human span:nth-child(3) { --rot:-.2deg; --vrot:.15deg }
.table-human span:nth-child(4) { --rot:.25deg; --vrot:-.35deg } .table-human span:nth-child(5) { --rot:-.15deg; --vrot:.25deg } .table-human span:nth-child(6) { --rot:.45deg; --vrot:-.15deg }
.table-human span:nth-child(7) { --rot:-.35deg; --vrot:.4deg } .table-human span:nth-child(8) { --rot:.2deg; --vrot:-.3deg } .table-human span:nth-child(9) { --rot:-.25deg; --vrot:.2deg }
.paper-demo-note { position: relative; z-index: 1; margin: 14px 0 0; color: #4a4436; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
/* ---- reel gallery (real footage, no edits) ------------------------ */
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reel { position: relative; overflow: hidden; margin: 0; aspect-ratio: 9/12; border: 1px solid var(--line-dark); background: #0e0f12; cursor: zoom-in; }
.reel img, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.reel:hover img, .reel:hover video { transform: scale(1.045); }
.reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.05) 34%, rgba(0,0,0,.82)); }
.reel figcaption { position: absolute; left: 15px; right: 15px; bottom: 14px; z-index: 2; }
.reel-tag { display: inline-flex; align-items: center; margin-bottom: 10px; padding: 5px 11px; border: 1px solid rgba(217,164,65,.36); border-radius: 999px; background: rgba(217,164,65,.16); color: var(--gold-light); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reel figcaption b { display: block; color: var(--white); font-size: 15px; line-height: 1.2; }
.reel-play { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(217,164,65,.4); border-radius: 50%; background: rgba(9,10,12,.62); backdrop-filter: blur(8px); color: var(--gold-light); }
.reel-play svg { width: 14px; height: 14px; margin-left: 1px; }
.reels-foot { display: flex; gap: 10px; align-items: center; margin-top: 18px; color: var(--faint); font-size: 13px; }
.reels-foot svg { flex: none; width: 16px; height: 16px; color: var(--gold); }

/* ---- machine spec / highlights ------------------------------------ */
.machine-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0 4px; }
.machine-highlights div { min-height: 92px; padding: 15px 14px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.035); }
.machine-highlights b { display: block; margin-bottom: 9px; color: var(--gold-light); font-family: var(--serif); font-size: 26px; line-height: 1; }
.machine-highlights span { display: block; color: var(--faint); font-size: 11px; font-weight: 700; line-height: 1.35; }
.machine-software-note { position:relative; overflow:hidden; margin-top:24px; padding:24px 26px 25px; border:1px solid rgba(217,164,65,.34); background:linear-gradient(120deg,rgba(217,164,65,.11),rgba(255,255,255,.025)); }
.machine-software-note::after { content:"↗"; position:absolute; right:18px; top:12px; color:rgba(217,164,65,.2); font:500 42px/1 var(--serif); }
.machine-software-note > span { display:block; margin-bottom:16px; color:var(--gold-light); font-size:9px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.machine-software-note h3 { max-width:460px; margin:0 0 10px; color:var(--white); font:500 clamp(23px,2.3vw,31px)/1.1 var(--serif); letter-spacing:-.015em; }
.machine-software-note p { margin:0; color:var(--soft); font-size:12.5px; line-height:1.7; }
.spec-list { display: grid; margin: 28px 0 0; }
.spec-list div { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-dark-2); }
.spec-list div:last-child { border-bottom: 1px solid var(--line-dark-2); }
.spec-list dt { flex: none; width: 118px; padding-top: 2px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.spec-list dd { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.55; }

/* ---- feature matrix on dark --------------------------------------- */
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card { position: relative; overflow: hidden; min-height: 210px; padding: 26px 24px; border: 1px solid var(--line-dark); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.feature-card:hover { transform: translateY(-4px); border-color: var(--line-gold); }
.feature-card .f-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border: 1px solid var(--line-gold); background: rgba(217,164,65,.1); color: var(--gold); }
.feature-card .f-ico svg { width: 23px; height: 23px; }
.feature-card b { display: block; margin-bottom: 10px; font-size: 17px; }
.feature-card span { display: block; color: var(--faint); font-size: 13.5px; line-height: 1.6; }

/* ---- studio inputs / outcome / languages --------------------------- */
.studio-inputs { margin-top: 28px; }
.studio-inputs-label { margin-bottom: 16px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.studio-inputs ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: si; }
.studio-inputs li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 15px; align-items: start; counter-increment: si; padding: 16px 18px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.035); transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.studio-inputs li:hover { border-color: var(--line-gold); background: rgba(217,164,65,.06); transform: translateY(-2px); }
.studio-inputs li::before { content: counter(si); grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-gold); background: rgba(217,164,65,.08); color: var(--gold-light); font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1; }
.studio-inputs b { font-size: 15px; }
.studio-inputs span { margin-top: 4px; color: var(--faint); font-size: 13px; line-height: 1.55; }
.studio-outcome { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.studio-outcome div { padding: 16px; border: 1px solid var(--line-gold); background: rgba(217,164,65,.06); }
.studio-outcome b { display: block; margin-bottom: 7px; color: var(--gold-light); font-size: 14px; }
.studio-outcome span { display: block; color: var(--soft); font-size: 12.5px; line-height: 1.5; }
.disclosure { overflow: hidden; margin-top: 24px; border: 1px solid var(--line-dark); background: rgba(0,0,0,.24); }
.disclosure summary { display: flex; gap: 18px; align-items: center; justify-content: space-between; min-height: 64px; padding: 18px 20px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 900; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--line-gold); border-radius: 50%; color: var(--gold); font-size: 22px; line-height: 1; transition: transform .25s var(--ease), background .25s var(--ease); }
.disclosure[open] summary::after { content: "−"; background: rgba(217,164,65,.1); transform: rotate(180deg); }
.disclosure-body { padding: 0 20px 20px; border-top: 1px solid var(--line-dark-2); color: var(--soft); }
.disclosure-body p { max-width: 68ch; margin: 18px 0 0; font-size: 14px; line-height: 1.7; }
.language-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 142px), 1fr)); gap: 10px; margin-top: 18px; }
.language-grid span { display: flex; min-height: 42px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.035); color: var(--soft); font-size: 12.5px; font-weight: 800; overflow-wrap: anywhere; }
.diacritic-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.diacritic-strip span { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border: 1px solid rgba(217,164,65,.24); border-radius: 999px; background: rgba(217,164,65,.07); color: var(--gold-light); font-size: 12.5px; font-weight: 800; }
.control-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; }
.control-list span { display: flex; gap: 10px; align-items: center; min-height: 46px; padding: 11px 13px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.035); color: var(--soft); font-size: 12px; font-weight: 800; line-height: 1.35; }
.control-list span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(217,164,65,.7); }

/* ---- release 2026 -------------------------------------------------- */
.release-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.release-metrics div { padding: 16px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.025); }
.release-metrics b { display: block; color: var(--gold-light); font-family: var(--serif); font-size: 30px; line-height: 1; }
.release-metrics span { display: block; margin-top: 7px; color: var(--faint); font-size: 9px; line-height: 1.35; text-transform: uppercase; letter-spacing: .06em; }
.release-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 42px; }
.release-card { min-height: 240px; padding: 26px; border: 1px solid var(--line-dark); background: rgba(0,0,0,.3); }
.release-card-wide { grid-column: span 2; }
.release-no { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.release-card h3 { margin: 30px 0 12px; font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: 1.05; }
.release-card p { color: var(--faint); font-size: 13px; line-height: 1.65; }
.release-card strong { color: var(--gold-light); }
.cursive-line { margin: 26px 0 5px; padding: 22px 20px; border: 1px solid rgba(217,164,65,.2); background: repeating-linear-gradient(transparent 0 30px, rgba(118,151,196,.12) 31px); color: var(--gold-light); font-family: "Caveat", cursive; font-size: clamp(26px, 4vw, 44px); font-weight: 600; line-height: 1.1; transform: rotate(-1deg); }
.assistant-demo { display: grid; grid-template-columns: 150px 1fr; gap: 14px; margin-top: 22px; }
.assistant-demo img { width: 150px; height: 112px; object-fit: cover; }
.assistant-demo div { padding: 14px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.03); }
.assistant-demo b { display: block; color: var(--gold-light); font-size: 12px; }
.assistant-demo span { display: block; margin-top: 7px; color: var(--faint); font-size: 11px; line-height: 1.5; }
.support-ribbon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid var(--line-gold); background: var(--line-gold); }
.support-ribbon article { padding: 24px; background: var(--ink-2); }
.support-ribbon i { color: var(--gold); font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.support-ribbon b { display: block; margin: 18px 0 7px; font-size: 14px; }
.support-ribbon p { margin: 0; color: var(--faint); font-size: 12px; line-height: 1.55; }
.support-ribbon a { color: var(--gold-light); }
.font-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.font-card { overflow: hidden; margin: 0; border: 1px solid var(--line-dark); background: #f7f0e5; }
.font-card img { width: 100%; aspect-ratio: 2.18/1; object-fit: cover; }
.font-card figcaption { padding: 10px 12px; background: var(--ink-2); color: var(--white); font-size: 11px; font-weight: 700; }

/* ---- media lightbox ------------------------------------------------ */
.media-viewer { position: fixed; z-index: 200; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(3,4,6,.94); backdrop-filter: blur(18px); overscroll-behavior: contain; touch-action: none; }
.media-viewer.open { display: flex; }
.media-viewer-stage { position: relative; display: grid; place-items: center; overflow: hidden; width: 100%; height: 100%; }
#mediaViewerContent { display: grid; place-items: center; overflow: hidden; width: 100%; height: 100%; touch-action: none; }
.media-viewer-stage img, .media-viewer-stage video { width: auto; height: auto; max-width: min(1160px, 92vw); max-height: 86dvh; object-fit: contain; background: #050608; box-shadow: 0 34px 90px rgba(0,0,0,.62); transform-origin: center center; will-change: transform; touch-action: none; user-select: none; }
.media-viewer-stage img { cursor: zoom-in; }
.media-viewer-stage img.zoomed { cursor: grab; }
.media-viewer-top { position: fixed; z-index: 8; left: clamp(12px,2.4vw,30px); right: clamp(12px,2.4vw,30px); top: clamp(12px,2.4vw,24px); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.media-viewer-caption { max-width: min(560px, calc(100vw - 96px)); padding: 11px 14px; border: 1px solid var(--line-dark); background: rgba(12,13,16,.74); backdrop-filter: blur(12px); pointer-events: auto; }
.media-viewer-caption b { display: block; margin-bottom: 3px; color: var(--white); font-size: 13px; }
.media-viewer-caption span { display: block; color: var(--faint); font-size: 11.5px; line-height: 1.45; }
.media-viewer-close, .media-viewer-nav { display: grid; place-items: center; border: 1px solid var(--line-dark); background: rgba(12,13,16,.78); backdrop-filter: blur(12px); color: var(--white); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.media-viewer-close { flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; pointer-events: auto; }
.media-viewer-close:hover, .media-viewer-nav:hover { border-color: var(--gold); color: var(--gold-light); }
.media-viewer-nav { position: fixed; z-index: 8; top: 50%; width: 52px; height: 52px; border-radius: 50%; font-size: 29px; line-height: 1; transform: translateY(-50%); pointer-events: auto; }
.media-viewer-prev { left: clamp(8px,2.2vw,30px); } .media-viewer-next { right: clamp(8px,2.2vw,30px); }
.media-viewer-count { position: fixed; z-index: 8; left: 50%; bottom: clamp(12px,2.2vw,22px); padding: 8px 13px; border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(12,13,16,.74); color: var(--soft); font-size: 12px; font-weight: 700; transform: translateX(-50%); }
.media-viewer-hint { position: fixed; z-index: 8; left: 50%; bottom: calc(clamp(12px,2.2vw,22px) + 44px); color: var(--faint); font-size: 11px; transform: translateX(-50%); pointer-events: none; }
body.media-viewer-open { overflow: hidden; }

/* ---- restored-section responsive ----------------------------------- */
@media (max-width: 1120px) {
  .reels { grid-template-columns: repeat(3, 1fr); }
  .control-list { grid-template-columns: repeat(2, 1fr); }
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .font-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .transform { grid-template-columns: 1fr; }
  .tf-arrow { margin: -2px auto; transform: rotate(90deg); }
  .paper-demo-grid { grid-template-columns: 1fr; }
  .release-grid { grid-template-columns: 1fr; }
  .release-card-wide { grid-column: auto; }
  .support-ribbon { grid-template-columns: 1fr; }
  .studio-outcome { grid-template-columns: 1fr; }
  .machine-highlights { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .assistant-demo { grid-template-columns: 92px 1fr; }
  .assistant-demo img { width: 92px; height: 100%; }
}
@media (max-width: 560px) {
  .reels { grid-template-columns: 1fr 1fr; gap: 10px; }
  .reel figcaption { left: 11px; right: 11px; bottom: 11px; }
  .reel figcaption b { font-size: 13px; }
  .feature-cards, .control-list, .language-grid, .font-gallery { grid-template-columns: 1fr; }
  .machine-highlights { grid-template-columns: 1fr; gap: 8px; }
  .machine-highlights div { min-height: 0; padding: 13px 14px; }
  .machine-software-note { margin-top:18px; padding:21px 20px 22px; }
  .machine-software-note::after { right:12px; font-size:34px; }
  .spec-list dt { width: 94px; }
  .tf-card { min-height: 0; padding: 22px; }
  .paper-demo-card { min-height: 236px; padding: 20px; }
  .human-lines { left: 20px; right: 20px; top: 58px; }
  .human-svg { height: 160px; }
  .media-viewer-hint { display: none; }
  .media-viewer-stage img, .media-viewer-stage video { max-width: 86vw; max-height: 78dvh; }
}
/* ---- route grid: closing full-width card --------------------------
   Six cards in a 3-col grid with one featured double leave a single
   orphan on the last row. The support card closes the grid instead. */
.route-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 56px); align-items: center; min-height: 0; padding: 34px; }
.route-card-wide .support-orbit { margin: 0; }
.route-card-wide h3 { margin: 0 0 10px; }
.route-card-wide p { max-width: 60ch; margin: 0; }
.route-card-wide .text-link { position: static; margin: 0; white-space: nowrap; }
.route-card-wide .route-index { top: 18px; right: 20px; }
@media (max-width: 820px) {
  .route-card-wide { grid-template-columns: 1fr; gap: 18px; padding: 30px; }
  .route-card-wide .support-orbit { width: 68px; height: 68px; }
}
.section-aside { margin: 26px 0 0; color: #6d665d; font-size: 13.5px; }
.section-aside a { border-bottom: 1px solid rgba(217,164,65,.5); color: #8a682a; font-weight: 700; }
.section-aside a:hover { border-bottom-color: var(--gold); }
.section-dark .section-aside { color: var(--faint); }
.section-dark .section-aside a { color: var(--gold-light); }

/* ---- order band (conversion point of the old one-pager) ------------ */
.order-band { position: relative; overflow: hidden; background: var(--ink-2); }
.order-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 110% at 100% 0%, rgba(231,197,120,.2), transparent 52%), radial-gradient(60% 90% at 6% 100%, rgba(217,164,65,.12), transparent 55%), repeating-linear-gradient(0deg, rgba(217,164,65,.045) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, rgba(217,164,65,.045) 0 1px, transparent 1px 34px); }
.order-band-inner { position: relative; display: grid; grid-template-columns: minmax(0,1.3fr) auto; gap: clamp(28px, 5vw, 56px); align-items: center; padding: clamp(30px, 5vw, 56px); border: 1px solid var(--line-gold); background: rgba(9,10,12,.72); }
.order-band-inner h2 { margin-bottom: 16px; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.03; }
.order-band-actions { display: flex; flex-direction: column; gap: 11px; min-width: 250px; }
.order-band-actions .button { width: 100%; }
.order-band-actions small { color: var(--faint); font-size: 11.5px; text-align: center; }
@media (max-width: 820px) { .order-band-inner { grid-template-columns: 1fr; } .order-band-actions { min-width: 0; } }

/* ---- metric row (works on both paper and ink backgrounds) ---------- */
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.metric-row dt { color: #8a682a; font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1; }
.metric-row dd { margin: 8px 0 0; color: #6b645b; font-size: 10px; line-height: 1.45; text-transform: uppercase; letter-spacing: .05em; }
.section-dark .metric-row, .manifesto .metric-row { border-top-color: var(--line-dark-2); }
.section-dark .metric-row dt, .manifesto .metric-row dt { color: var(--gold-light); }
.section-dark .metric-row dd, .manifesto .metric-row dd { color: var(--faint); }
@media (max-width: 560px) { .metric-row { grid-template-columns: 1fr; gap: 14px; } }

/* ---- studio video frame -------------------------------------------- */
.studio-video-wrap { padding: 10px; border: 1px solid var(--line-dark); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); box-shadow: 0 38px 90px -44px rgba(0,0,0,.9); cursor: zoom-in; }
.studio-video-frame { position: relative; overflow: hidden; aspect-ratio: 16/9; background: #050608; }
.studio-video-frame video { width: 100%; height: 100%; object-fit: cover; }
.studio-video-label { position: absolute; left: 14px; bottom: 14px; display: inline-flex; gap: 8px; align-items: center; padding: 8px 11px; border: 1px solid rgba(217,164,65,.36); border-radius: 999px; background: rgba(8,9,11,.72); backdrop-filter: blur(12px); color: var(--gold-light); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.studio-video-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #73d083; box-shadow: 0 0 12px rgba(115,208,131,.86); }
/* dark sections keep the light-section split-feature layout but not its ink */
.section-dark .split-feature p:not(.eyebrow) { color: var(--soft); }
.section-dark .section-heading > p:last-child { color: var(--soft); }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .text-link { color: var(--white); }
   A split site needs an explicit "where to go next" or every page
   becomes a dead end. Mirrors the reading order of the old one-pager. */
.pager { border-top: 1px solid var(--line-dark-2); background: var(--ink); }
.pager-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-dark-2); }
.pager a { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 148px; justify-content: center; padding: 32px clamp(20px, 3vw, 40px); background: var(--ink); transition: background .25s var(--ease); }
.pager a:hover { background: var(--ink-soft); }
.pager a > small { color: var(--faint); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.pager a > b { color: var(--white); font-family: var(--serif); font-size: clamp(21px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.01em; }
.pager a > span { color: var(--faint); font-size: 12px; line-height: 1.5; }
.pager-next { text-align: right; align-items: flex-end; }
.pager-prev small::before { content: "← "; color: var(--gold); }
.pager-next small::after { content: " →"; color: var(--gold); }
.pager a:only-child { grid-column: span 2; }
@media (max-width: 560px) {
  .pager-inner { grid-template-columns: 1fr; }
  .pager a { min-height: 118px; padding: 24px 20px; }
  .pager-next { text-align: left; align-items: flex-start; }
  .pager a:only-child { grid-column: auto; }
}

/* Support stack: two overlapping frames. They used to be bare <img> siblings,
   so the viewer only ever saw the first one — now each is its own figure. */
.support-photo-stack .stack-shot { position: relative; margin: 0; overflow: hidden; cursor: zoom-in; background: #0a0b0d; }
.support-photo-stack .stack-shot img { width: 100%; height: 100%; object-fit: cover; }
.support-photo-stack .stack-shot:first-child { width: 78%; height: 450px; }
.support-photo-stack .stack-shot-inset { position: absolute; right: 0; bottom: 0; width: 58%; height: 300px; border: 10px solid #171510; }
@media (max-width: 820px) {
  .support-photo-stack .stack-shot:first-child { height: 340px; }
  .support-photo-stack .stack-shot-inset { height: 220px; }
}

/* Assistant chat bubble: the answer photo is a vertical 3:4 shot, and a
   fixed 185px cover crop hid everything it was meant to show. */
.chat-answer img { height: auto; max-height: 300px; aspect-ratio: 3/4; object-fit: contain; background: #0a0b0d; cursor: zoom-in; }
.chat-photo { display: block; }
.chat-answer p { font-size: 12.5px; line-height: 1.55; }
.chat-answer a { font-size: 11px; font-weight: 700; }

/* ---- documentary photos must stay whole ----------------------------
   Kit, setup and assistant shots are vertical (3:4) frames with captions
   burned into the image. Cropping them to a landscape slot cut the caption
   off, so these grids letterbox instead of cover: the photo is always fully
   readable, on desktop and phone alike, and the viewer shows it 1:1. */
.kit-grid img,
.setup-grid img,
.assistant-demo img,
.photo-fit img { object-fit: contain; background: #0a0b0d; }
.kit-grid img { aspect-ratio: 3/4; }
.setup-grid img { aspect-ratio: 3/4; }
.assistant-demo img { width: 150px; height: auto; aspect-ratio: 3/4; }
.assistant-demo { align-items: start; }

/* Cards that open the viewer should say so on hover. */
.kit-grid article, .setup-grid figure, .assistant-demo, .machine-shot, .stock-figure { cursor: zoom-in; }
.kit-grid article:focus-visible, .setup-grid figure:focus-visible,
.machine-shot:focus-visible, .stock-figure:focus-visible,
[data-viewer]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- machine: three angles instead of one photo -------------------
   One hero shot could not show the bed, the gantry and the front panel at
   once. The lead frame carries the tags, two supporting frames sit beside it. */
.machine-gallery { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; gap: 12px; }
.machine-shot { position: relative; overflow: hidden; margin: 0; border: 1px solid var(--line-dark); background: #0a0b0d; }
.machine-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.machine-shot:hover img { transform: scale(1.035); }
.machine-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(6,7,8,.72)); }
.machine-shot figcaption { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; color: var(--soft); font-size: 11.5px; font-weight: 700; }
.machine-shot figcaption i { display: block; margin-bottom: 4px; color: var(--gold); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.machine-shot-lead { grid-row: span 2; }
.machine-shot-lead img { aspect-ratio: 1.36; }
.machine-gallery .machine-shot:not(.machine-shot-lead) img { aspect-ratio: 1.6; }
.machine-gallery .product-tag { z-index: 3; }
/* Преимущества вынесены из-под фото в отдельную строку — фото ничем не перекрыто. */
.machine-perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.machine-perks li { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.03); color: var(--soft); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.machine-perks li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; }
.machine-turntable-section { overflow:hidden; background:#e9e2d6; color:var(--ink); }
.machine-turntable-section .section-heading { max-width:760px; margin:0 auto clamp(28px,4vw,44px); }
.machine-turntable { position:relative; max-width:1120px; margin:0 auto; outline:none; }
.machine-turntable-stage { position:relative; overflow:hidden; min-height:clamp(300px,57vw,720px); border:1px solid rgba(32,27,21,.16); background:#dedbd4; cursor:grab; touch-action:none; user-select:none; }
.machine-turntable-stage:active { cursor:grabbing; }
.machine-turntable-stage img { display:block; width:100%; height:100%; min-height:inherit; object-fit:contain; pointer-events:none; transform-origin:center center; will-change:transform; }
.machine-turntable-drag,.machine-turntable-state { position:absolute; z-index:2; padding:9px 12px; border:1px solid rgba(32,27,21,.18); background:rgba(255,253,248,.83); color:#463a2b; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(8px); }
.machine-turntable-drag { left:16px; bottom:16px; }
.machine-turntable-state { right:16px; bottom:16px; }
.machine-turntable-arrow { position:absolute; z-index:3; top:50%; display:grid; width:46px; height:46px; place-items:center; border:1px solid rgba(32,27,21,.2); border-radius:50%; background:rgba(255,253,248,.82); color:#2b241c; font:400 34px/1 var(--serif); transform:translateY(-50%); cursor:pointer; }
.machine-turntable-arrow--prev { left:16px; }.machine-turntable-arrow--next { right:16px; }
.machine-turntable-controls { display:flex; justify-content:center; gap:12px; padding-top:16px; }
.machine-turntable-close { display:none; }
.machine-turntable.is-fullscreen { position:fixed; z-index:300; inset:0; display:grid; place-items:center; max-width:none; padding:clamp(12px,3vw,32px); background:rgba(3,4,6,.97); }
.machine-turntable.is-fullscreen .machine-turntable-stage { width:min(1500px,100%); height:min(84dvh,940px); min-height:0; border-color:rgba(255,255,255,.14); background:#dedbd4; }
.machine-turntable.is-fullscreen .machine-turntable-stage img { min-height:0; }
.machine-turntable.is-fullscreen .machine-turntable-controls { position:fixed; z-index:4; bottom:clamp(16px,3vw,30px); }
.machine-turntable-fullscreen-btn { width: 52px; padding: 0; min-height: 52px; flex: none; }
.machine-turntable.is-fullscreen .machine-turntable-close { position:fixed; z-index:5; top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); display:grid; width:46px; height:46px; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(12,13,16,.85); color:#fff; font-size:28px; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.machine-turntable.is-fullscreen .machine-turntable-close:hover { border-color: var(--gold); color: var(--gold-light); }
.machine-turntable:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
@media(max-width:640px){ .machine-turntable-stage { min-height:290px; } .machine-turntable-drag { left:10px; bottom:10px; }.machine-turntable-state { right:10px; bottom:10px; }.machine-turntable-drag,.machine-turntable-state { padding:7px 8px; font-size:8px; }.machine-turntable-arrow { width:38px; height:38px; }.machine-turntable-arrow--prev { left:8px; }.machine-turntable-arrow--next { right:8px; }.machine-turntable-controls { display:flex; justify-content:center; gap:8px; }.machine-turntable-controls .button { min-height:48px; padding-inline:14px; }.machine-turntable-fullscreen-btn { width:48px; padding:0; flex:none; }.machine-turntable.is-fullscreen { padding:0; }.machine-turntable.is-fullscreen .machine-turntable-stage { width:100%; height:100dvh; }.machine-turntable.is-fullscreen .machine-turntable-drag { display:none; }.machine-turntable.is-fullscreen .machine-turntable-controls { width:calc(100% - 32px); max-width:320px; display:flex; justify-content:center; }.machine-turntable.is-fullscreen .machine-turntable-close { top:12px; right:12px; } }
.machine-offer { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; max-width: 480px; margin: 24px 0 4px; padding: 18px 20px; border: 1px solid rgba(217,164,65,.38); background: rgba(217,164,65,.08); }
.machine-offer strong { color: var(--gold-light); font-family: var(--serif); font-size: clamp(31px,4vw,48px); line-height: 1; }
.machine-offer > span { color: var(--soft); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.machine-offer p { grid-column: 1 / -1; margin: 9px 0 0; color: var(--faint); font-size: 12px; }
.buyer-benefit-card { padding: clamp(28px,4vw,48px); border: 1px solid rgba(35,30,24,.16); background: #ece5da; }
.buyer-benefit-card strong { color: #98752e; font-family: var(--serif); font-size: clamp(50px,8vw,88px); line-height: .9; }
.buyer-benefit-card h3 { margin: 12px 0; font-size: clamp(23px,3vw,34px); }
.buyer-benefit-card p { color: #6c655d; }

/* Delivery geography: a deliberate transition from the dark hero to paper. */
.russian-flag-band { display: block; width: 100%; height: 48px; background: linear-gradient(to bottom,#fff 0 33.333%,#0039a6 33.333% 66.666%,#d52b1e 66.666% 100%); }
.delivery-country-marquee { position: relative; z-index: 3; overflow: hidden; height: 48px; margin: 0; padding: 0; border: 0; background: #11100e; color: #fff; box-shadow: none; }
.country-marquee-window { position: relative; overflow: hidden; height: 100%; padding: 0; }
.country-marquee-window::before,.country-marquee-window::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: min(10vw,150px); pointer-events: none; }
.country-marquee-window::before { left: 0; background: linear-gradient(90deg,#0b0b0c,transparent); }
.country-marquee-window::after { right: 0; background: linear-gradient(270deg,#21190d,transparent); }
.country-marquee-track { display: flex; width: max-content; height: 100%; animation: delivery-countries 82s linear infinite; will-change: transform; }
.country-marquee-sequence { display: flex; align-items: stretch; flex: none; height: 100%; }
.country-marquee-item { display: block; flex: none; width: 72px; height: 100%; margin: 0 6px 0 0; padding: 0; overflow: hidden; }
.country-flag { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; box-shadow: none; }
@keyframes delivery-countries { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .russian-flag-band { height: 42px; }
  .delivery-country-marquee { height: 42px; padding: 0; }
  .country-marquee-item { width: 63px; margin-right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .country-marquee-track { width: auto; animation: none; }
  .country-marquee-sequence { flex-wrap: wrap; justify-content: center; row-gap: 12px; padding: 0 24px; }
  .country-marquee-sequence[aria-hidden="true"] { display: none; }
}

/* ---- built, flashed and calibrated by hand ------------------------- */
.build-note { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-gold); }
.build-note article { padding: 30px 26px; border-right: 1px solid var(--line-dark); }
.build-note article:last-child { border-right: 0; }
.build-note b { display: block; margin-bottom: 9px; color: var(--gold-light); font-family: var(--serif); font-size: 21px; font-weight: 600; }
.build-note p { margin: 0; color: var(--faint); font-size: 12.5px; line-height: 1.6; }
.build-note i { display: block; margin-bottom: 13px; color: var(--gold); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

/* ---- in stock: boxes plus two clips ------------------------------- */
.stock-grid { display: grid; grid-template-columns: .82fr 1fr 1fr; gap: 12px; }
.stock-figure { position: relative; overflow: hidden; margin: 0; border: 1px solid var(--line-dark); background: #0a0b0d; }
.stock-figure img, .stock-figure video { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; }
.stock-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 52%, rgba(6,7,8,.8)); }
.stock-figure figcaption { position: absolute; z-index: 2; left: 15px; right: 15px; bottom: 14px; }
.stock-figure figcaption b { display: block; color: var(--white); font-size: 14px; }
.stock-figure figcaption span { display: block; margin-top: 5px; color: var(--faint); font-size: 11.5px; line-height: 1.45; }
.stock-badge { position: absolute; z-index: 3; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line-gold); border-radius: 999px; background: rgba(9,10,12,.66); backdrop-filter: blur(8px); color: var(--gold-light); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stock-badge i { width: 6px; height: 6px; border-radius: 50%; background: #57d38a; box-shadow: 0 0 9px #57d38a; }

@media (max-width: 1120px) {
  .machine-gallery { grid-template-columns: 1fr 1fr; }
  .machine-shot-lead { grid-row: auto; grid-column: span 2; }
  .machine-shot-lead img { aspect-ratio: 1.7; }
  .build-note { grid-template-columns: 1fr; }
  .build-note article { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .build-note article:last-child { border-bottom: 0; }
}
@media (max-width: 820px) {
  .stock-grid { grid-template-columns: 1fr 1fr; }
  .stock-figure:first-child { grid-column: span 2; }
  .stock-figure:first-child img { aspect-ratio: 1.5; }
}
@media (max-width: 560px) {
  .machine-gallery { grid-template-columns: 1fr; }
  .machine-shot-lead { grid-column: auto; }
  .machine-shot img, .machine-gallery .machine-shot:not(.machine-shot-lead) img { aspect-ratio: 1.45; }
  .stock-grid { grid-template-columns: 1fr; }
  .stock-figure:first-child { grid-column: auto; }
  .stock-figure:first-child img { aspect-ratio: 3/4; }
  .assistant-demo { grid-template-columns: 1fr; }
  .assistant-demo img { width: 100%; max-width: 260px; }
}

/* ── Первый экран /about+test: суммарно сэкономленное время ──────────────── */
/* Обычная секция в потоке: занимает первый экран, но не перехватывает скролл
   и не мешает остальным разделам. */
.saved-hero { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 100svh; padding: 118px 0 72px; background: var(--ink); }
.saved-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,164,65,.32), transparent); }
/* Разлинованный лист — то, что этими часами не пришлось заполнять вручную. */
.saved-hero-rules { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size: 100% 42px; -webkit-mask-image: radial-gradient(ellipse 82% 62% at 50% 46%, #000 18%, transparent 78%); mask-image: radial-gradient(ellipse 82% 62% at 50% 46%, #000 18%, transparent 78%); }
.saved-hero-glow { position: absolute; width: min(940px, 128vw); aspect-ratio: 1; left: 50%; top: 43%; translate: -50% -50%; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(217,164,65,.13), rgba(217,164,65,.04) 42%, transparent 68%); }
.saved-hero-inner { position: relative; text-align: center; }
.saved-hero-kicker { margin: 0 0 clamp(20px, 3vw, 34px); color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; }
.saved-hero-figure { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 20px); align-items: baseline; justify-content: center; margin: 0; font-weight: 400; }
.saved-hero-figure .shf-value { color: var(--gold-light); font-family: var(--serif); font-size: clamp(88px, 17vw, 232px); font-weight: 600; line-height: .82; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 30px 90px rgba(217,164,65,.22); }
.saved-hero-figure .shf-unit { color: var(--white); font-family: var(--serif); font-size: clamp(30px, 4.6vw, 62px); font-style: italic; line-height: 1; }
.saved-hero-lede { max-width: 620px; margin: clamp(22px, 3vw, 34px) auto 0; color: rgba(255,255,255,.76); font-size: clamp(16px, 1.7vw, 21px); line-height: 1.5; }
.saved-hero-meta { display: flex; flex-wrap: wrap; gap: clamp(18px, 3.4vw, 46px); align-items: center; justify-content: center; margin-top: clamp(38px, 5vw, 60px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid rgba(255,255,255,.1); }
.saved-hero-meta div { display: grid; gap: 6px; }
.saved-hero-meta b { color: var(--white); font-family: var(--serif); font-size: clamp(22px, 2.5vw, 31px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.saved-hero-meta span { color: rgba(255,255,255,.44); font-size: 10px; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; }
.saved-hero-meta i { width: 1px; height: 34px; background: rgba(255,255,255,.12); }
.saved-hero-scroll { display: inline-flex; gap: 10px; align-items: center; margin-top: clamp(40px, 5vw, 62px); color: rgba(255,255,255,.5); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; transition: color .25s; }
.saved-hero-scroll:hover { color: var(--gold); }
.saved-hero-scroll svg { width: 17px; height: 17px; animation: savedHeroNudge 2.1s var(--ease) infinite; }
@keyframes savedHeroNudge { 0%, 100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(5px); opacity: 1; } }
/* Секция сама себе первый экран — у идущего следом hero верхний отступ лишний. */
.saved-hero + .hero { padding-top: clamp(64px, 8vw, 104px); }

@media (max-width: 860px) {
  .saved-hero { min-height: 92svh; padding: 104px 0 60px; }
  .saved-hero-meta i { display: none; }
  .saved-hero-meta { gap: 22px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .saved-hero-scroll svg { animation: none; }
}

/* ── /about+test/studio: новые блоки после переработки ────────────────────
   Страница Studio описывает каждую функцию ровно один раз, поэтому здесь
   появились несколько узких компонентов: список пресетов страницы, доска
   вариативности и светлый вариант spec-list/metric-row. */

/* Подзаголовок внутри колонки split-feature — там, где нет своего h2. */
.sub-head { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; }
.section-dark .sub-head { color: var(--white); }

/* Готовые пресеты страницы: карточки-строки с золотой линейкой слева. */
.preset-list { display: grid; gap: 10px; }
.preset-list article { position: relative; padding: 18px 20px 18px 24px; border: 1px solid var(--line); background: rgba(255,255,255,.5); }
.preset-list article::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.preset-list b { display: block; margin-bottom: 7px; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.preset-list span { display: block; color: #6a635a; font-size: 13px; line-height: 1.6; }
.preset-list .preset-own::before { background: repeating-linear-gradient(180deg, var(--gold) 0 6px, transparent 6px 12px); }

/* spec-list на светлой секции: та же сетка, но чернильная типографика. */
.spec-list-light div { border-top-color: var(--line); }
.spec-list-light div:last-child { border-bottom-color: var(--line); }
.spec-list-light dt { color: #8a682a; }
.spec-list-light dd { color: #55504a; }

/* metric-row внутри тёмной секции слитного письма. */
.metric-row-dark { border-top-color: var(--line-dark); }
.metric-row-dark dt { color: var(--gold-light); }
.metric-row-dark dd { color: var(--faint); }

/* Крупный вариант plain-list: там, где это список функций, а не теги. */
.plain-list-lg { flex-direction: column; gap: 9px; }
.plain-list-lg li { width: 100%; padding: 12px 15px; font-size: 12.5px; font-weight: 700; }

/* Доска вариативности: три строки одного слова с растущим разбросом. */
.vary-board { display: grid; gap: 14px; padding: clamp(22px, 3vw, 34px); border: 1px solid #cfc5b6; background: #e9e1d4; }
.vary-row small { display: block; margin-bottom: 8px; color: #8d8375; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.vary-row p { margin: 0; color: #1c2d63; font-family: "Caveat", cursive; font-size: clamp(27px, 3.4vw, 40px); font-weight: 600; line-height: 1.25; }
.vary-row + .vary-row { padding-top: 14px; border-top: 1px solid #cfc5b6; }
.vary-flat { letter-spacing: .01em; }
/* Каждое слово получает свой микро-поворот и масштаб — то, что делает
   вариативность в движке, показано здесь чисто оформительски. */
.vary-live span { display: inline-block; }
.vary-live span:nth-child(1) { transform: rotate(-.8deg) scale(1.015); }
.vary-live span:nth-child(2) { transform: rotate(.6deg) scale(.985) translateY(1px); }
.vary-live span:nth-child(3) { transform: rotate(-.35deg) scale(1.03) translateY(-1px); }
.vary-wild span:nth-child(1) { transform: rotate(-2.2deg) scale(1.05) skewX(-3deg); }
.vary-wild span:nth-child(2) { transform: rotate(1.8deg) scale(.95) skewX(2deg) translateY(2px); }
.vary-wild span:nth-child(3) { transform: rotate(-1.4deg) scale(1.08) skewX(-4deg) translateY(-2px); }

@media (max-width: 900px) {
  .preset-list article { padding: 16px 16px 16px 20px; }
  .metric-row-dark { grid-template-columns: 1fr; gap: 16px; }
}

/* ── /about+test/handwritings: языки на светлой секции ────────────────────
   language-grid и diacritic-strip рисовались для тёмного фона Studio; после
   переезда раздела на страницу почерков нужен чернильный вариант. */
.language-grid-light span { border-color: var(--line); background: rgba(255,255,255,.55); color: #55504a; }
.diacritic-strip-light span { border-color: rgba(217,164,65,.4); background: rgba(217,164,65,.1); color: #8a682a; }
.language-grid-light, .diacritic-strip-light { margin-top: 26px; }

/* ── /about/studio: режим 3D-принтера ────────────────────────────────────
   help-strip рисовался для тёмной секции машины; на светлой секции Studio
   нужен чернильный вариант той же полосы. */
.help-strip-light { border-color: rgba(217,164,65,.45); background: rgba(217,164,65,.06); }
.help-strip-light > span { color: #8a682a; }
.help-strip-light p { color: #665f56 !important; }
.help-strip-light a { color: #8a682a; }
.printer-steps { margin-top: 60px; }
.printer-steps article { min-height: 260px; padding: 28px; border: 1px solid var(--line); }
.printer-client-proof { display:grid; grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr); gap:clamp(28px,5vw,72px); align-items:center; overflow:hidden; margin:clamp(48px,7vw,82px) 0 0; padding:clamp(16px,2vw,24px); border:1px solid rgba(217,164,65,.34); background:linear-gradient(125deg,#101114 0%,#171510 62%,#211b11 100%); box-shadow:0 34px 80px -54px rgba(21,16,8,.9); color:var(--white); cursor:zoom-in; }
.printer-client-video { position:relative; overflow:hidden; aspect-ratio:9/16; max-height:560px; background:#050608; }
.printer-client-video::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(3,4,6,.04) 45%,rgba(3,4,6,.72)); }
.printer-client-video video { display:block; width:100%; height:100%; object-fit:cover; }
.printer-client-badge,.printer-client-expand { position:absolute; z-index:1; display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.2); background:rgba(7,8,10,.74); backdrop-filter:blur(12px); text-transform:uppercase; }
.printer-client-badge { top:14px; left:14px; gap:8px; padding:8px 11px; color:var(--gold-light); font-size:9px; font-weight:850; letter-spacing:.14em; }
.printer-client-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#73d083; box-shadow:0 0 12px rgba(115,208,131,.82); }
.printer-client-expand { right:14px; bottom:14px; gap:9px; padding:9px 11px; color:rgba(255,255,255,.82); font-size:9px; font-weight:750; letter-spacing:.1em; }
.printer-client-expand b { color:var(--gold-light); font-size:14px; line-height:1; }
.printer-client-proof figcaption { max-width:590px; padding-right:clamp(4px,3vw,32px); }
.printer-client-kicker { display:block; margin-bottom:20px; color:var(--gold-light); font-size:9px; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
.printer-client-proof h3 { max-width:620px; margin:0 0 18px; color:var(--white); font:500 clamp(28px,3.6vw,46px)/1.06 var(--serif); letter-spacing:-.025em; }
.printer-client-proof figcaption p { max-width:58ch; margin:0; color:rgba(255,255,255,.62); font-size:13.5px; line-height:1.72; }
.printer-client-note { display:flex; align-items:center; gap:9px; margin-top:28px; color:rgba(255,255,255,.45); font-size:10px; font-weight:700; letter-spacing:.04em; }
.printer-client-note i { width:18px; height:1px; background:var(--gold); }
.printer-client-proof:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }

@media(max-width:760px){
  .printer-client-proof { grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:24px; }
  .printer-client-proof figcaption { padding-right:4px; }
  .printer-client-proof h3 { font-size:clamp(24px,6vw,34px); }
}
@media(max-width:560px){
  .printer-client-proof { grid-template-columns:1fr; margin-top:42px; padding:12px 12px 24px; }
  .printer-client-video { width:100%; max-height:none; aspect-ratio:9/13; }
  .printer-client-proof figcaption { padding:0 8px; }
  .printer-client-kicker { margin-bottom:13px; }
  .printer-client-proof h3 { margin-bottom:14px; }
  .printer-client-note { margin-top:20px; }
}

/* ── Естественная кривизна строк и рукописные помарки ─────────────────── */
.natural-story { position: relative; overflow: hidden; background: #12100d; }
.natural-story::before { content:""; position:absolute; inset:-20% -10%; pointer-events:none; background:radial-gradient(circle at 18% 42%,rgba(217,164,65,.13),transparent 31%),radial-gradient(circle at 85% 70%,rgba(52,77,139,.12),transparent 28%); }
.natural-story .site-shell { position:relative; }
.natural-story-heading { max-width:900px; margin-inline:auto; }
.natural-story-heading > p:last-child { max-width:760px; margin-inline:auto; color:rgba(255,255,255,.62); }
.natural-story-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); gap:clamp(32px,5vw,74px); align-items:center; margin-top:58px; }
.natural-photo { position:relative; overflow:hidden; margin:0; min-width:0; border:1px solid rgba(217,164,65,.42); border-radius:3px; background:#f7f3ec; box-shadow:0 42px 100px -50px rgba(0,0,0,.9),0 0 70px -42px rgba(217,164,65,.62); transform:rotate(-.6deg); }
.natural-photo img { display:block; width:100%; height:auto; }
.natural-photo figcaption { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:14px 18px; border-top:1px solid rgba(32,27,21,.1); color:#746b60; font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.natural-photo figcaption b { color:#8a682a; }
.natural-story-copy { min-width:0; }
.natural-story-copy > article { display:grid; grid-template-columns:38px 1fr; gap:16px; padding:22px 0; border-top:1px solid rgba(255,255,255,.1); }.natural-story-copy > article:last-of-type { border-bottom:1px solid rgba(255,255,255,.1); }
.natural-index { color:var(--gold-light); font:600 24px/1 var(--serif); }.natural-story-copy h3 { margin:0 0 8px; font-size:20px; }.natural-story-copy article p { margin:0; color:rgba(255,255,255,.62); font-size:13px; line-height:1.65; }
.natural-compat { margin-top:22px; padding:19px 20px; border-left:2px solid var(--gold); background:rgba(217,164,65,.07); }.natural-compat b { display:block; margin-bottom:7px; color:var(--gold-light); font-size:12px; }.natural-compat p { margin:0; color:rgba(255,255,255,.58); font-size:12px; line-height:1.65; }
.natural-default { display:flex; align-items:center; gap:9px; margin:18px 0 0; color:rgba(255,255,255,.5); font-size:11px; }.natural-default i { width:7px; height:7px; border:1px solid var(--gold); border-radius:50%; }

.natural-studio-section { background:#171510; }
.natural-studio-showcase { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:clamp(28px,4vw,58px); align-items:start; margin-top:48px; }
.natural-studio-photo { transform:none; }
.natural-studio-photo figcaption span { color:#5f574e; }
.natural-studio-features { display:grid; border-top:1px solid var(--line-dark); border-left:1px solid var(--line-dark); }
.natural-studio-features article { min-height:270px; padding:30px; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.natural-studio-features article > span { color:var(--gold-light); font-size:10px; font-weight:800; letter-spacing:.14em; }
.natural-studio-features h3 { margin:38px 0 12px; font-size:21px; }
.natural-studio-features p { margin:0; color:rgba(255,255,255,.61); font-size:13px; line-height:1.7; }
.natural-strike-section { margin-top:64px; }
.natural-strike-head { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:24px; }
.natural-strike-head .eyebrow { margin-bottom:10px; }
.natural-strike-head h3 { margin:0; font:500 clamp(27px,3vw,42px)/1.08 var(--serif); }
.natural-strike-head > p { max-width:380px; margin:0; color:rgba(255,255,255,.55); font-size:12px; line-height:1.65; }
.natural-strike-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line-dark); border-left:1px solid var(--line-dark); }
.natural-strike-grid article { min-width:0; padding:24px; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.natural-strike-grid article > span { color:var(--gold-light); font-size:9px; font-weight:800; letter-spacing:.14em; }
.natural-strike-grid h4 { margin:22px 0 7px; font-size:17px; }
.natural-strike-grid article > p { min-height:42px; margin:0; color:rgba(255,255,255,.48); font-size:11px; line-height:1.55; }
.natural-strike-sample { position:relative; display:flex; align-items:center; gap:18px; overflow:hidden; height:106px; margin-top:20px; padding:0 20px; border:1px solid rgba(217,164,65,.2); border-radius:12px; background:rgba(255,255,255,.025); }
.natural-strike-sample em { font:600 clamp(28px,2.35vw,35px)/1 "Caveat",cursive; white-space:nowrap; }
.natural-false-word { position:relative; display:inline-flex; flex:0 0 auto; align-items:center; color:#dcc58f; }
.natural-false-word svg { position:absolute; z-index:2; top:50%; left:-8%; width:116%; height:64px; overflow:visible; transform:translateY(-50%); pointer-events:none; }
.natural-false-word path { fill:none; stroke:#e8c36d; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.natural-true-word { position:relative; z-index:1; color:#f5ead3; }
.natural-studio-compat { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start; margin-top:24px; padding:28px; border:1px solid rgba(217,164,65,.28); background:linear-gradient(110deg,rgba(217,164,65,.09),rgba(255,255,255,.015)); }.natural-studio-compat b { display:block; margin-bottom:8px; color:var(--gold-light); font-size:12px; }.natural-studio-compat p { margin:0; color:rgba(255,255,255,.58); font-size:12px; line-height:1.7; }.natural-studio-compat strong { color:rgba(255,255,255,.82); }

@media(max-width:980px){
  .natural-story-grid { grid-template-columns:1fr; }.natural-story-copy { max-width:760px; }.natural-studio-showcase { grid-template-columns:1fr; }.natural-studio-features { grid-template-columns:repeat(2,minmax(0,1fr)); }.natural-studio-features article { min-height:240px; }.natural-studio-compat { grid-template-columns:1fr; gap:24px; }
}
@media(max-width:560px){
  .natural-story-grid { margin-top:36px; }.natural-photo { transform:none; margin-inline:-4px; }.natural-photo figcaption { padding:12px 14px; }.natural-story-copy > article { grid-template-columns:30px 1fr; gap:12px; padding:19px 0; }.natural-index { font-size:20px; }.natural-studio-showcase { margin-top:34px; }.natural-studio-photo { margin-inline:0; }.natural-studio-photo figcaption { display:grid; gap:5px; }.natural-studio-features { grid-template-columns:1fr; border-left:0; }.natural-studio-features article { min-height:0; padding:25px 4px; border-right:0; }.natural-studio-features h3 { margin-top:24px; }.natural-strike-section { margin-top:48px; }.natural-strike-head { display:grid; gap:14px; }.natural-strike-grid { grid-template-columns:1fr; border-left:0; }.natural-strike-grid article { padding:24px 4px; border-right:0; }.natural-strike-grid article > p { min-height:0; }.natural-strike-sample { height:96px; }.natural-studio-compat { padding:20px; }
}

/* ── Копирование почерка по фотографиям ─────────────────────────────────
   Прямой оффер на главной и наглядное «фото → почерк» на странице Studio. */
.photo-copy-launch { position:relative; overflow:hidden; padding:clamp(76px,9vw,124px) 0; background:#e9e2d6; color:var(--ink); }
.photo-copy-launch::before { content:none; }
.photo-copy-launch .site-shell { position:relative; }
.photo-copy-launch-bar { display:flex; justify-content:space-between; gap:24px; align-items:center; padding-bottom:20px; border-bottom:1px solid rgba(32,27,21,.18); color:#6e665d; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.photo-copy-launch-bar span { display:flex; gap:10px; align-items:center; color:#7c5f28; }
.photo-copy-launch-bar i { width:7px; height:7px; border-radius:50%; background:#3f7d50; box-shadow:0 0 0 4px rgba(63,125,80,.1); }
.photo-copy-launch-bar b { color:#645d54; font-weight:700; }
.photo-copy-launch-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr); gap:clamp(48px,7vw,96px); align-items:center; padding-top:clamp(45px,6vw,76px); }
.photo-copy-launch-copy h2 { max-width:820px; margin-bottom:25px; font-size:clamp(46px,5.4vw,78px); line-height:1.02; }
.photo-copy-launch-copy h2 em { color:#8a682a; font-style:normal; }
.photo-copy-launch-copy > p:last-of-type { max-width:720px; margin-bottom:0; color:#5f584f; font-size:clamp(15px,1.45vw,18px); }
.photo-copy-actions { display:flex; flex-wrap:wrap; gap:24px; align-items:center; margin-top:34px; }
.photo-copy-actions .button { min-height:50px; padding-inline:24px; }
.photo-copy-link { display:inline-flex; gap:14px; align-items:center; padding-bottom:7px; border-bottom:1px solid rgba(32,27,21,.35); color:#2e2924; font-size:12px; font-weight:850; letter-spacing:.025em; transition:border-color .2s; }
.photo-copy-link b { color:#8a682a; font-size:19px; transition:transform .2s; }
.photo-copy-link:hover { border-bottom-color:#8a682a; }
.photo-copy-link:hover b { transform:translateX(4px); }
.photo-copy-workflow { min-width:0; padding:clamp(25px,3vw,38px); border:1px solid rgba(32,27,21,.17); border-radius:4px; background:rgba(249,245,238,.86); box-shadow:0 25px 65px rgba(56,43,25,.1); backdrop-filter:blur(8px); }
.photo-copy-result-head { display:flex; justify-content:space-between; gap:18px; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(32,27,21,.15); }
.photo-copy-result-head span { color:#8a682a; font-size:9px; font-weight:850; letter-spacing:.15em; }
.photo-copy-result-head b { color:#36302a; font-size:12px; }
.photo-copy-alphabet { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:22px 0; }
.photo-copy-alphabet span { display:grid; place-items:center; min-height:54px; border:1px solid rgba(138,104,42,.16); background:rgba(255,255,255,.46); color:#40372d; font:600 25px/1 "Caveat",cursive; transform:rotate(var(--letter-turn,0deg)); }
.photo-copy-alphabet span:nth-child(3n+1) { --letter-turn:-1.5deg; }.photo-copy-alphabet span:nth-child(3n+2) { --letter-turn:1deg; }
.photo-copy-facts { display:grid; grid-template-columns:repeat(3,1fr); margin:0; padding:19px 0; border-top:1px solid rgba(32,27,21,.15); border-bottom:1px solid rgba(32,27,21,.15); }
.photo-copy-facts div { padding:0 13px; border-right:1px solid rgba(32,27,21,.12); }.photo-copy-facts div:first-child { padding-left:0; }.photo-copy-facts div:last-child { padding-right:0; border-right:0; }
.photo-copy-facts dt { color:#76551c; font:600 25px/1 var(--serif); }.photo-copy-facts dd { margin:7px 0 0; color:#665e54; font-size:10px; line-height:1.4; }
.photo-copy-result-note { margin:18px 0 0; color:#5f584f; font-size:12px; line-height:1.65; }
.photo-copy-link:focus-visible { outline:2px solid #8a682a; outline-offset:6px; }

.photo-handwriting-detail { position:relative; overflow:hidden; background:#f4efe6; color:var(--ink); }
.photo-handwriting-detail::before { content:""; position:absolute; inset:0; opacity:.28; pointer-events:none; background-image:linear-gradient(rgba(71,88,118,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(71,88,118,.1) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 78%,transparent); }
.photo-handwriting-detail .site-shell { position:relative; }
.photo-handwriting-lead { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:clamp(44px,8vw,104px); align-items:end; }
.photo-handwriting-lead h2 { max-width:700px; margin-bottom:0; font-size:clamp(43px,4.7vw,70px); line-height:1.04; }
.photo-handwriting-intro { padding-left:clamp(24px,3vw,42px); border-left:1px solid rgba(32,27,21,.18); }
.photo-handwriting-intro p { margin:0; color:#5d564e; font-size:15px; line-height:1.72; }
.photo-handwriting-intro p + p { margin-top:18px; }
.photo-handwriting-intro strong { color:#302a24; font-weight:800; }
.photo-handwriting-showcase { display:grid; grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr); gap:24px; align-items:stretch; margin-top:clamp(50px,7vw,82px); }
.photo-showcase-stage { min-width:0; padding:clamp(24px,3vw,36px); border:1px solid rgba(32,27,21,.17); background:rgba(255,252,247,.78); }
.photo-showcase-label { display:block; margin-bottom:22px; color:#7c5d26; font-size:9px; font-weight:850; letter-spacing:.16em; }
.photo-showcase-stage > p { max-width:450px; margin:22px 0 0; color:#625a51; font-size:12px; line-height:1.6; }
.photo-source-pages { position:relative; height:190px; }
.photo-source-pages i { position:absolute; display:block; width:58%; height:165px; padding:30px 18px 14px; border:1px solid rgba(32,27,21,.16); background:repeating-linear-gradient(to bottom,#faf7ef 0,#faf7ef 20px,#b8c4d4 21px); box-shadow:0 12px 24px rgba(48,39,29,.1); transform-origin:bottom center; }
.photo-source-pages i::before { content:""; position:absolute; top:0; bottom:0; left:18px; width:1px; background:rgba(183,91,91,.38); }
.photo-source-pages i:nth-child(1) { left:0; transform:rotate(-7deg); }.photo-source-pages i:nth-child(2) { left:21%; z-index:2; transform:rotate(2deg); }.photo-source-pages i:nth-child(3) { right:0; transform:rotate(8deg); }
.photo-source-pages b { color:#2f4c76; font:500 18px/1.15 "Caveat",cursive; }
.photo-showcase-arrow { display:grid; place-content:center; justify-items:center; gap:7px; color:#896628; text-align:center; }
.photo-showcase-arrow span { font:400 42px/1 var(--serif); }.photo-showcase-arrow small { font-size:8px; font-weight:850; letter-spacing:.12em; line-height:1.45; text-transform:uppercase; }
.photo-result-sheet { min-height:190px; padding:24px 26px; border:1px solid rgba(32,27,21,.14); background:repeating-linear-gradient(to bottom,#fffdf8 0,#fffdf8 27px,#cbd4df 28px); box-shadow:0 12px 24px rgba(48,39,29,.08); transform:rotate(-1deg); }
.photo-result-sheet small { display:block; margin-bottom:21px; color:#886a35; font-size:8px; font-weight:850; letter-spacing:.14em; }
.photo-result-sheet strong,.photo-result-sheet em { display:block; color:#243d65; font-family:"Caveat",cursive; font-weight:600; }.photo-result-sheet strong { font-size:clamp(24px,3vw,36px); line-height:1.35; }.photo-result-sheet em { margin-top:13px; font-size:18px; }
.photo-handwriting-proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:20px; border:1px solid rgba(32,27,21,.17); background:#2f2a25; }
.photo-handwriting-proof div { min-width:0; padding:21px 25px; border-right:1px solid rgba(255,255,255,.12); }.photo-handwriting-proof div:last-child { border-right:0; }
.photo-handwriting-proof b { display:block; margin-bottom:6px; color:#e8c873; font:600 20px/1.2 var(--serif); }.photo-handwriting-proof span { color:rgba(255,255,255,.61); font-size:11px; line-height:1.5; }
.photo-handwriting-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:clamp(36px,5vw,58px) 0 0; padding:0; border-top:1px solid rgba(32,27,21,.18); list-style:none; }
.photo-handwriting-steps li { min-width:0; min-height:265px; padding:30px clamp(22px,3vw,36px) 28px 0; border-right:1px solid rgba(32,27,21,.16); }
.photo-handwriting-steps li + li { padding-left:clamp(22px,3vw,36px); }
.photo-handwriting-steps li:last-child { border-right:0; }
.photo-handwriting-steps li > span { color:#8a682a; font:600 28px/1 var(--serif); }
.photo-handwriting-steps h3 { margin:45px 0 14px; font-family:var(--serif); font-size:25px; font-weight:600; }
.photo-handwriting-steps p { margin:0; color:#676057; font-size:13px; line-height:1.67; }
.photo-handwriting-access { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center; margin-top:22px; padding:clamp(25px,3vw,36px); border:1px solid rgba(32,27,21,.18); background:#e8dfd1; }
.photo-handwriting-access span { display:block; margin-bottom:10px; color:#8a682a; font-size:9px; font-weight:850; letter-spacing:.16em; }
.photo-handwriting-access p { max-width:820px; margin:0; color:#5e574f; font-size:13px; line-height:1.65; }
.photo-handwriting-access p b { color:#2f2a25; }
.photo-handwriting-access .button { white-space:nowrap; }

@media(max-width:900px){
  .photo-copy-launch-grid,.photo-handwriting-lead { grid-template-columns:1fr; }
  .photo-handwriting-intro { padding:24px 0 0; border-top:1px solid rgba(32,27,21,.18); border-left:0; }
  .photo-handwriting-showcase { grid-template-columns:1fr; }
  .photo-showcase-arrow { display:flex; justify-content:center; align-items:center; gap:14px; transform:rotate(90deg); }.photo-showcase-arrow small { transform:rotate(-90deg); }
  .photo-handwriting-access { grid-template-columns:1fr; }
  .photo-handwriting-access .button { justify-self:start; }
}
@media(max-width:640px){
  .photo-copy-launch { padding:70px 0; }
  .photo-copy-launch-bar { display:grid; gap:10px; }
  .photo-copy-launch-grid { gap:42px; padding-top:40px; }
  .photo-copy-launch-copy h2 { font-size:clamp(34px,10.8vw,58px); }
  .photo-copy-actions { display:grid; gap:18px; }.photo-copy-actions .button { width:100%; text-align:center; }.photo-copy-link { justify-self:start; }
  .photo-copy-facts dt { font-size:22px; }.photo-copy-facts dd { font-size:9px; }
  .photo-handwriting-showcase { margin-top:42px; }.photo-showcase-stage { padding:22px 18px; }.photo-source-pages { height:162px; }.photo-source-pages i { height:143px; padding-inline:14px; }.photo-result-sheet { min-height:170px; padding:20px; }
  .photo-handwriting-proof { grid-template-columns:1fr; }.photo-handwriting-proof div { border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }.photo-handwriting-proof div:last-child { border-bottom:0; }
  .photo-handwriting-steps { grid-template-columns:1fr; }
  .photo-handwriting-steps li,.photo-handwriting-steps li + li { min-height:0; padding:25px 0 30px; border-right:0; border-bottom:1px solid rgba(32,27,21,.16); }
  .photo-handwriting-steps li:last-child { border-bottom:0; }
  .photo-handwriting-steps h3 { margin-top:28px; }
  .photo-handwriting-access { padding:22px; }
  .photo-handwriting-access .button { width:100%; white-space:normal; text-align:center; }
}
/* Full notebook examples, shared by the home page and Studio story. */
.notes-preview { min-width:0; margin:0; padding:20px; background:#d9d0c1; border:1px solid #c4b8a6; }
.notes-paper { max-width:360px; margin:0 auto; padding:24px 20px 20px 35px; border:1px solid #d7d0c3; border-left:3px solid #b77d78; background:#fffdf7; color:#304568; transform:rotate(-2deg); }
.notes-paper h3 { margin:0 0 13px; font:600 25px/1.1 "Caveat",cursive; color:#304568; }
.notes-paper p { margin:0 0 12px; font:500 21px/1.2 "Caveat",cursive; color:#304568; }
.notes-paper p:last-child { margin-bottom:0; }
.notes-preview figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-top:22px; color:#534839; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.notes-preview figcaption b { font-size:23px; }
.photo-handwriting-detail::before { content:none; }
.photo-showcase-stage { display:flex; flex-direction:column; background:#ebe4d8; }
.photo-showcase-stage .notes-preview { flex:1; display:flex; align-items:center; padding:14px 8px; background:none; border:0; }
.photo-showcase-stage .notes-paper { width:100%; }
.notes-preview--result .notes-paper { transform:rotate(1.5deg); }
.photo-handwriting-showcase { grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr); gap:20px; }
@media(max-width:900px) { .photo-handwriting-showcase { grid-template-columns:1fr; } }
@media(max-width:640px) { .notes-paper { padding:20px 10px 20px 22px; } .notes-paper p { font-size:clamp(17px,5.1vw,21px); } .notes-paper h3 { font-size:23px; } .notes-preview { padding:18px 12px; } }