@font-face {
  font-family: 'Kantumruy Pro'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/assets/fonts/kantumruy-pro-latin.woff2') format('woff2');
}
:root {
  color-scheme: only light;
  --green: #245d45; --green-hover: #194e38; --paper: #eff4e8; --ink: #17211d;
  --selected: #e6f1df; --muted: #4b6252; --rule: #cbd9c9; --stage-rule: #86a995;
  --font-display: 'Kantumruy Pro', sans-serif; --font-body: 'Kantumruy Pro', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --accent: var(--green); --accent-hover: var(--green-hover); --accent-soft: #e0ebdc;
  --bg: var(--paper); --bg-sunken: #e3eddd; --fg-1: var(--ink); --fg-2: #354b3c; --fg-3: var(--muted);
  --border: var(--rule); --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --page-gutter: clamp(24px, 4.56vw, 70px);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 100px; scrollbar-color: #79917b var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-body); font-size: 18px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
a { color: var(--green); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--green-hover); }
img { max-width: 100%; height: auto; }
svg { display: block; flex: none; width: 24px; height: 24px; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; }
h1, h2, h3 { text-wrap: balance; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: #c2dbb9; color: var(--ink); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.showroom :focus-visible, .product-hero :focus-visible { outline-color: #d8ebcd; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 16px; z-index: 100; padding: 10px 16px; color: var(--ink); background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 20; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px var(--page-gutter); background: var(--paper); }
.site-brand { display: inline-flex; align-items: center; gap: 18px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-brand:hover { color: var(--ink); }
.site-brand img { width: 42px; height: 60px; object-fit: contain; }
.brand-japanese { font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif; font-size: clamp(19px, 2vw, 31px); font-weight: 700; line-height: 1; letter-spacing: 0; }
.brand-name { font-size: clamp(21px, 2vw, 31px); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.site-navigation { display: flex; align-items: center; gap: clamp(32px, 3.3vw, 52px); }
.site-navigation a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 22px; }
.site-navigation a:hover, .site-navigation a[aria-current] { color: var(--green); text-decoration: underline; }
.menu-button { display: none; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 10px; border: 0; color: var(--ink); background: transparent; cursor: pointer; }
[hidden] { display: none !important; }
.showroom { background: var(--green); color: #fff; scroll-margin-top: 76px; }
.showroom-inner { max-width: 1600px; margin-inline: auto; padding: 36px var(--page-gutter) 36px; display: grid; grid-template-columns: 2fr 3fr; gap: clamp(36px, 4.17vw, 64px); align-items: start; }
.app-index { padding-top: 27px; min-width: 0; }
.app-index h1 { font-size: clamp(42px, 4.62vw, 71px); line-height: 1.06; margin-bottom: 29px; letter-spacing: -.035em; white-space: nowrap; }
.app-choices { display: grid; }
.app-choice { display: grid; grid-template-columns: 48px minmax(0, 1fr) 25px; align-items: center; gap: 16px; min-height: 98px; padding: 15px 24px; color: #fff; text-decoration: none; border-bottom: 1px solid var(--stage-rule); }
.app-choice:first-child { min-height: 88px; margin-bottom: 12px; }
.app-choice:last-child { border-bottom: 0; }
.app-choice:hover { color: #fff; background: #2d694f; }
.app-choice.is-selected { color: var(--ink); background: var(--selected); border-color: transparent; border-radius: 10px; }
.app-choice.is-selected:hover { background: #dcecd3; color: var(--ink); }
.choice-icon { width: 48px; height: 48px; object-fit: contain; border-radius: 22%; }
.choice-copy { display: grid; gap: 1px; min-width: 0; }
.choice-name { font-weight: 600; font-size: clamp(22px, 1.76vw, 27px); line-height: 1.25; letter-spacing: -.02em; }
.choice-task { color: #e1eee0; font-size: 20px; line-height: 1.4; }
.is-selected .choice-task { color: #425647; }
.app-choice svg { width: 25px; height: 25px; }
.app-preview { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 96px; position: relative; }
.preview-figure { order: -1; width: 100%; aspect-ratio: 798 / 549; margin: 0 0 24px; overflow: hidden; border-radius: 12px; }
.preview-link { display: block; height: 100%; overflow: hidden; color: #fff; }
.preview-image { display: block; max-width: none; }
.proof-keys .preview-image { width: 124%; height: auto; margin: -12% 0 0 -12%; }
.proof-popover .preview-link { display: flex; justify-content: center; align-items: center; }
.proof-popover .preview-image { width: auto; height: 100%; max-width: 100%; object-fit: contain; margin: 0; }
.preview-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: center; gap: 16px 24px; }
.preview-details h2 { grid-column: 1 / -1; grid-row: 1; font-size: 42px; line-height: 1.14; align-self: center; letter-spacing: -.025em; }
.selected-action { grid-column: 2; grid-row: 3; min-width: 283px; min-height: 60px; display: inline-flex; justify-content: center; align-items: center; gap: 16px; padding: 12px 28px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 24px; font-weight: 600; text-decoration: none; white-space: normal; }
.selected-action:hover { color: var(--ink); background: var(--selected); }
.selected-action svg { width: 25px; height: 25px; }
.selected-description { grid-column: 1 / -1; grid-row: 2; font-size: 20px; color: #fff; line-height: 1.4; }
.selected-meta { grid-column: 1; grid-row: 3; font-size: 17px; line-height: 1.45; text-align: left; color: #e4f0df; }
.app-preview[aria-busy] .selected-action { cursor: progress; }
.maker-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; max-width: 1536px; margin-inline: auto; padding: 44px var(--page-gutter) 60px; }
.maker-note { font-size: 27px; line-height: 1.4; letter-spacing: -.03em; }
.maker-support { padding-left: 60px; border-left: 1px solid var(--rule); }
.maker-support h2 { font-size: 26px; margin-bottom: 5px; }
.maker-support p { font-size: 20px; color: var(--muted); line-height: 1.45; max-width: 65ch; }
@media (max-width: 1120px) and (min-width: 761px) {
  .showroom-inner { grid-template-columns: 41fr 59fr; gap: 32px; }
  .app-index h1 { white-space: normal; font-size: 48px; }
  .app-choice { padding-inline: 22px; min-height: 90px; }
  .choice-task { font-size: 17px; }
  .preview-details { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .preview-details h2 { grid-column: 1 / -1; grid-row: 1; font-size: 34px; }
  .selected-description { width: 100%; font-size: 18px; }
  .selected-meta { width: 100%; text-align: left; }
  .selected-action { order: 2; min-width: 0; font-size: 20px; min-height: 52px; margin-left: 0; }
  .selected-description { order: 1; }
  .selected-meta { order: 3; }
}
@media (max-width: 760px) {
  :root { --page-gutter: 24px; }
  html { scroll-padding-top: 84px; }
  .site-header { min-height: 70px; padding: 8px 20px; gap: 12px; flex-wrap: wrap; }
  .site-brand { gap: 10px; }
  .site-brand img { width: 27px; height: 43px; }
  .brand-japanese { font-size: 17px; }
  .brand-name { font-size: 20px; letter-spacing: -.04em; }
  .has-js .menu-button { display: inline-flex; margin-left: auto; }
  .site-navigation { gap: 28px; flex-basis: 100%; }
  .site-navigation a { font-size: 18px; }
  .has-js .site-navigation { display: none; padding: 8px 0 6px; }
  .has-js .site-navigation.is-open { display: flex; }
  .showroom-inner { display: flex; flex-direction: column; gap: 28px; padding-block: 30px 36px; }
  .app-index { padding: 0; width: 100%; }
  .app-index h1 { font-size: clamp(36px, 8.7vw, 48px); margin-bottom: 24px; white-space: normal; }
  .app-choice { grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 12px; }
  .choice-icon { width: 40px; height: 40px; }
  .app-choice, .app-choice:first-child { min-height: 73px; padding: 13px 18px; margin-bottom: 0; }
  .choice-name { font-size: 22px; }
  .choice-task { font-size: 15px; }
  .app-choice svg { width: 22px; height: 22px; }
  .app-preview { width: 100%; }
  .preview-details { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
  .preview-details h2 { grid-column: 1 / -1; grid-row: 1; font-size: 34px; }
  .selected-description { order: 1; font-size: 18px; }
  .selected-action { order: 2; min-width: 0; width: 100%; min-height: 54px; font-size: 20px; }
  .selected-meta { order: 3; font-size: 15px; text-align: left; }
  .preview-figure { order: 0; aspect-ratio: 1 / 1.05; margin-bottom: 0; }
  .proof-keys .preview-image { width: 124%; }
  .proof-popover { aspect-ratio: 1 / 1.3; }
  .maker-section { grid-template-columns: 1fr; gap: 24px; padding-block: 36px 44px; }
  .maker-note { font-size: 24px; }
  .maker-support { border-left: 0; padding: 24px 0 0; border-top: 1px solid var(--rule); }
  .maker-support h2 { font-size: 24px; }
  .maker-support p { font-size: 17px; }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 14px; }
  .site-brand { gap: 8px; }
  .brand-japanese { font-size: 15px; }
  .brand-name { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Shared product and reading surfaces. */
.shell, .keys-types-inner, .keys-features-inner, .keys-devices-inner, .mm-shot-inner { width: min(100%, 1380px); margin-inline: auto; padding-inline: var(--page-gutter); }
.shell > section { margin-block: 64px; }
.shell h2, .keys-types-h, .keys-devices-h, .mm-shot-h { font-size: clamp(28px, 2.65vw, 40px); }
.shell p, .keys-types-sub, .keys-devices-sub { max-width: 70ch; }
.ak-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font-weight: 600; text-decoration: none; line-height: 1.35; text-align: center; }
.ak-btn-primary { background: var(--green); color: #fff; }
.ak-btn-primary:hover { background: var(--green-hover); color: #fff; }
.ak-btn-secondary { border: 1px solid var(--green); color: var(--green); }
.ak-btn-secondary:hover { background: var(--selected); }
.ak-btn-ghost { text-decoration: underline; padding-inline: 8px; }
.ak-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.product-hero { background: var(--green); color: #fff; }
.product-hero-grid { max-width: 1536px; margin-inline: auto; padding: 56px var(--page-gutter) 64px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 96px); }
.product-hero h1 { font-size: clamp(44px, 4.65vw, 72px); margin-bottom: 24px; }
.product-task { font-size: clamp(27px, 2.35vw, 36px); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; max-width: 25ch; margin-bottom: 22px; }
.product-hero .sub { font-size: 20px; line-height: 1.55; max-width: 50ch; color: #edf4e9; }
.product-hero .ak-btn-primary { background: var(--paper); color: var(--ink); }
.product-hero .ak-btn-primary:hover { background: #dcecd3; }
.product-hero a:not(.ak-btn-primary) { color: #f0f6ec; }
.product-meta { font-size: 17px; margin-top: 20px; color: #e4f0df; }
.product-note, .product-policy { font-size: 16px; margin-top: 10px; color: #e4f0df; }
.product-hero-shot { display: flex; justify-content: center; align-items: center; min-width: 0; }
.product-hero-shot a { display: block; }
.product-hero-shot img { display: block; width: auto; max-height: 670px; object-fit: contain; }
.product-keys-shot { overflow: hidden; border-radius: 12px; }
.product-keys-shot img { max-height: none; width: 124%; max-width: none; margin: -12% 0 -5% -12%; }
.preview-hero .product-hero-grid { display: block; padding-block: 64px 72px; }
.preview-hero .product-hero-copy { max-width: 840px; }
.preview-hero .sub { max-width: 65ch; }
.keys-types, .keys-devices { padding-block: 64px; }
.keys-types-sub, .keys-devices-sub { margin-top: 18px; color: var(--fg-2); }
.keys-type-grid { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.keys-type-grid li { padding-block: 20px; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.keys-type-name { font-size: 24px; font-weight: 700; }
.keys-type-hint { color: var(--fg-2); max-width: 52ch; }
.keys-feature, .mm-shot-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 80px); }
.keys-feature { padding-block: 64px; border-top: 1px solid var(--rule); }
.keys-feature h3 { font-size: clamp(27px, 2.6vw, 38px); margin-bottom: 20px; }
.keys-feature p, .mm-shot-copy p { color: var(--fg-2); max-width: 65ch; }
.keys-feature-reverse .keys-feature-copy { order: 2; }
.keys-shot img { display: block; margin-inline: auto; max-height: 720px; width: auto; object-fit: contain; }
.keys-shot-phone img { max-height: 620px; }
.keys-feature-bullets, .mm-shot-bullets { padding-left: 22px; color: var(--fg-2); margin: 24px 0 0; }
.keys-feature-bullets li, .mm-shot-bullets li { padding-left: 6px; margin-block: 8px; }
.keys-devices { background: #e3eddd; }
.keys-devices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
.keys-devices-grid img { max-height: 550px; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; margin-top: 32px; }
.pillar { border-top: 1px solid var(--rule); padding-top: 22px; }
.pillar h3 { font-size: 24px; margin-bottom: 12px; max-width: 33ch; }
.pillar-body { color: var(--fg-2); }
.pillar h3 { color: var(--ink); }
.mm-shot { padding-block: 64px; }
.mm-shot-alt { background: #e3eddd; }
.mm-shot-copy h2 { margin-bottom: 20px; }
.mm-shot-figure img { display: block; width: auto; max-height: 650px; margin-inline: auto; object-fit: contain; }
.mm-history-inner { grid-template-columns: 1fr 1.2fr; }
.mm-history-figure img { width: 100%; }
#faq, #download, #how, #tour { scroll-margin-top: 100px; }
summary { cursor: pointer; padding: 18px 4px; font-size: 20px; font-weight: 600; }
details { border-top: 1px solid var(--rule); }
details:last-child { border-bottom: 1px solid var(--rule); }
details p { padding: 0 4px 24px; color: var(--fg-2); }
.content-h1, .blog-index-title { font-size: clamp(38px, 4vw, 60px); padding-top: 52px; margin-bottom: 20px; }
.crumb { display: inline-block; margin-top: 36px; }
.crumb + .content-h1 { padding-top: 24px; }
.lede, .blog-index-lede, .reading-lede { font-size: 22px; line-height: 1.5; max-width: 65ch; color: var(--fg-2); }
.content-effective { color: var(--muted); margin-block: 16px 32px; font-size: 16px; }
.content-body { max-width: 840px; padding-block: 28px 64px; }
.content-body h2, .reading-page h2, .post-body h2 { font-size: clamp(26px, 2.6vw, 36px); margin: 40px 0 16px; }
.content-body h3, .post-body h3 { font-size: 24px; margin: 28px 0 12px; }
.content-body p, .reading-page p, .post-body p { margin-block: 0 20px; }
.content-body li, .post-body li { margin-bottom: 8px; }
code { font-family: var(--font-mono); font-size: .86em; overflow-wrap: anywhere; }
pre { background: #e3eddd; border-radius: 8px; padding: 22px; overflow: auto; }
pre code { white-space: pre-wrap; }
.contact-card { margin-block: 32px; padding-block: 24px; border-block: 1px solid var(--rule); }
.contact-card .label { font-weight: 600; }
.contact-card .email { display: inline-block; margin-block: 12px; font-size: 24px; overflow-wrap: anywhere; }
.contact-card .response { color: var(--fg-2); }
.reading-page, .post { width: min(100%, 980px); margin-inline: auto; padding: 56px var(--page-gutter) 80px; }
.reading-page h1, .post-title { font-size: clamp(40px, 4vw, 62px); margin-bottom: 24px; }
.reading-page section { margin-top: 44px; }
.reading-page p { max-width: 70ch; }
.blog-index { padding-bottom: 64px; }
.blog-index-list { list-style: none; padding: 0; margin: 36px 0 0; max-width: 980px; }
.blog-index-post { display: block; padding: 30px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.blog-index-post h2 { font-size: clamp(26px, 2.5vw, 36px); margin: 12px 0; max-width: 35ch; }
.blog-index-post p { color: var(--fg-2); }
.blog-index-post time { font-size: 16px; color: var(--muted); }
.blog-index-post:hover h2 { text-decoration: underline; text-underline-offset: .15em; }
.post { width: min(100%, 1020px); padding-inline: 0; }
.post-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; font-size: 16px; color: var(--muted); }
.post-lede { font-size: 23px; color: var(--fg-2); margin-bottom: 40px; }
.post-body { max-width: 70ch; }
.post-body a { overflow-wrap: anywhere; }
.post-body table { display: block; overflow-x: auto; border-collapse: collapse; margin-block: 28px; font-variant-numeric: tabular-nums; }
.post-body td, .post-body th { padding: 12px 16px; border-bottom: 1px solid var(--rule); text-align: left; min-width: 120px; }
.post-cta { padding: 28px 0; margin-block: 36px; border-block: 1px solid var(--rule); }
.post-foot { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 28px; }
.post-foot-author { display: flex; align-items: center; gap: 18px; }
.post-foot-avatar { width: 48px; height: 64px; object-fit: contain; }
.post-foot-name { font-weight: 700; }
.post-foot-bio { color: var(--fg-2); }
.error-page { min-height: 55vh; }
.error-page .ak-btn { margin-top: 12px; }
.in-development { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; border-top: 1px solid var(--rule); padding-block: 52px 64px; }
.in-development h2 { font-size: 38px; margin-bottom: 16px; }
.in-development h3 { font-size: 28px; margin-bottom: 14px; }
.in-development h3 a { color: var(--ink); }
.in-development p { color: var(--fg-2); margin-bottom: 16px; }
.development-list article + article { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rule); }
.development-status { font-size: 16px; }
.site-footer { width: min(100%, 1536px); margin-inline: auto; padding: 44px var(--page-gutter) 30px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; font-size: 17px; }
.footer-name { color: var(--ink); font-weight: 700; font-size: 25px; text-decoration: none; }
.footer-intro p { color: var(--fg-2); margin: 8px 0 18px; }
.footer-apps, .footer-studio { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.site-footer nav a { display: inline-block; padding-block: 4px; }
.footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: start; gap: 20px 32px; border-top: 1px solid var(--rule); padding-top: 24px; font-size: 14px; color: var(--muted); }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (min-width: 1121px) {
  .showroom-inner { padding-bottom: 26px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .product-hero-grid { gap: 28px; }
  .product-hero .sub { font-size: 18px; }
  .product-meta { font-size: 15px; }
  .site-footer { grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .product-hero-grid, .keys-feature, .mm-shot-inner, .mm-history-inner { grid-template-columns: 1fr; gap: 32px; }
  .product-hero-grid { padding-block: 36px 40px; }
  .product-hero h1 { font-size: 44px; margin-bottom: 20px; }
  .product-task { font-size: 28px; }
  .product-hero .sub { font-size: 18px; }
  .product-meta { font-size: 16px; }
  .product-hero .ak-hero-ctas { display: grid; gap: 12px; }
  .product-hero .ak-btn { width: 100%; }
  .product-hero-shot img { max-height: 520px; }
  .product-keys-shot img { max-height: none; }
  .preview-hero .product-hero-grid { padding-block: 36px 44px; }
  .keys-type-grid, .pillars { grid-template-columns: 1fr; gap: 0; }
  .pillars .pillar { margin-top: 24px; }
  .keys-feature, .mm-shot, .keys-types, .keys-devices { padding-block: 40px; }
  .keys-feature-reverse .keys-feature-copy { order: 0; }
  .mm-shot-figure-first { order: 2; }
  .keys-devices-grid { grid-template-columns: 1fr; gap: 32px; }
  .keys-devices-grid img { max-height: 580px; }
  .keys-shot img, .mm-shot-figure img { max-height: 580px; }
  .shell > section { margin-block: 40px; }
  .content-h1, .blog-index-title { padding-top: 36px; }
  .reading-page, .post { padding-block: 36px 48px; }
  .reading-lede, .post-lede, .lede, .blog-index-lede { font-size: 20px; }
  .post { padding-inline: 0; }
  .in-development { grid-template-columns: 1fr; gap: 24px; padding-block: 36px 44px; }
  .in-development h2 { font-size: 32px; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-intro a { overflow-wrap: anywhere; }
  .footer-apps a, .footer-studio a { min-height: 44px; }
  .footer-legal { font-size: 14px; gap: 16px; }
  .footer-legal nav { gap: 4px 16px; }
  .footer-legal nav a { min-height: 44px; }
}

.site-navigation a[href="/#products"][aria-current] { font-weight: 500; text-decoration: none; }

/* Existing product identities and the confirmed maker introduction. */
.product-identity { display: flex; align-items: center; gap: 22px; margin-bottom: 24px; }
.product-identity h1 { margin-bottom: 0; min-width: 0; }
.product-icon { width: 72px; height: 72px; object-fit: contain; border-radius: 22%; flex: none; }
.maker-professional-link { display: inline-block; margin-top: 18px; min-height: 44px; padding-block: 8px; font-size: 18px; }
@media (max-width: 760px) {
  .product-identity { gap: 16px; margin-bottom: 20px; }
  .product-icon { width: 56px; height: 56px; }
  .product-identity h1 { font-size: clamp(28px, 7.7vw, 44px); }
  .selected-action { padding-inline: 20px; }
}
@media (max-width: 360px) {
  .app-choice { gap: 10px; padding-inline: 14px; grid-template-columns: 36px minmax(0, 1fr) 22px; }
  .choice-icon { width: 36px; height: 36px; }
  .choice-name { font-size: 20px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .showroom-inner { display: flex; flex-direction: column; gap: 32px; }
  .app-index { width: 100%; padding-top: 0; }
  .app-preview { width: 100%; }
  .preview-figure { order: 0; margin-bottom: 0; }
  .preview-details { margin-bottom: 24px; }
  .selected-action { margin-left: 0; }
  .product-identity { gap: 16px; }
  .product-icon { width: 56px; height: 56px; }
  .product-identity h1 { font-size: clamp(28px, 4vw, 44px); }
}

/* GameDrive extends the product showroom with supplied phone screenshots. */
.selected-offer { grid-column: 1 / -1; grid-row: 4; color: #e4f0df; font-size: 17px; }
.proof-phone .preview-link { display: flex; justify-content: center; align-items: center; }
.proof-phone .preview-image { width: auto; height: 100%; max-width: 100%; object-fit: contain; border-radius: 12px; }
.gamedrive-hero .ak-btn:disabled { opacity: 1; cursor: default; border: 0; background: var(--paper); color: var(--ink); }
.gamedrive-screen-pair img { border-radius: 12px; }
.gamedrive-hero-intro { align-items: start; padding-block: var(--space-6) var(--space-8); }
.gamedrive-hero-title .product-task { max-width: 26ch; margin-bottom: 0; }
.gamedrive-hero-scene { position: relative; width: 100%; aspect-ratio: 12 / 5; overflow: hidden; background: var(--green); }
.gamedrive-hero-poster, .gamedrive-hero-video, .gamedrive-hero-fallback { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }
.gamedrive-hero-video, .gamedrive-hero-fallback { position: absolute; inset: 0; }
.hero-motion-toggle { position: absolute; right: 16px; bottom: 16px; min-width: 74px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.35; font-weight: 600; cursor: pointer; }
.hero-motion-toggle:hover { background: var(--selected); }
.gamedrive-hero .hero-motion-toggle:focus-visible { outline-color: var(--ink); outline-offset: 3px; }
@media (max-width: 760px) {
  .gamedrive-hero-intro { gap: var(--space-5); padding-block: var(--space-5) 40px; }
  .hero-motion-toggle { right: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gamedrive-hero-video, .gamedrive-hero-fallback, .hero-motion-toggle { display: none !important; }
}
.gamedrive-screen-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; }
.gamedrive-screen-pair figure { min-width: 0; }
.gamedrive-screen-pair a { display: block; }
.gamedrive-screen-pair img { display: block; width: 100%; height: auto; }
.gamedrive-privacy { padding-block: 64px; }
.gamedrive-privacy h2 { margin-bottom: 22px; }
.gamedrive-privacy p { color: var(--fg-2); }
.gamedrive-fine-print { margin-top: 32px; font-size: 16px; }
.gamedrive-policy-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 24px; }
.gamedrive-policy-links a { display: inline-flex; align-items: center; min-height: 44px; }
.eula-source { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .proof-phone { aspect-ratio: 1 / 1.3; }
  .gamedrive-screen-pair { gap: 12px; }
  .gamedrive-privacy { padding-block: 40px; }
}

/* Related paragraphs in GameDrive’s safari-day story. */
.gamedrive-story-section .mm-shot-copy p + p { margin-top: var(--space-4); }

/* Reel choices extend the showroom’s flat, ruled information groups. */
.gamedrive-customisation { margin-top: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 80px); align-items: start; }
.gamedrive-customisation-intro h3 { font-size: clamp(27px, 2.6vw, 38px); margin-bottom: 20px; }
.gamedrive-customisation-intro p { color: var(--fg-2); max-width: 65ch; }
.gamedrive-editing-proof { grid-column: 2; grid-row: 1 / 3; position: sticky; top: 100px; }
.gamedrive-editing-options { margin: var(--space-6) 0 0; grid-column: 1; }
.gamedrive-editing-options > div { border-top: 1px solid var(--rule); padding-block: var(--space-5); }
.gamedrive-editing-options dt { font-weight: 600; font-size: 22px; line-height: 1.3; margin-bottom: 8px; }
.gamedrive-editing-options dd { margin: 0; color: var(--fg-2); max-width: 65ch; }
@media (max-width: 760px) {
  .gamedrive-customisation { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-7); }
  .gamedrive-editing-proof { grid-column: 1; grid-row: auto; position: static; }
  .gamedrive-editing-options { margin-top: 0; }
}

/* Safari Pass uses the showroom's existing flat, ruled information rows. */
.gamedrive-pricing { padding-block: var(--space-8); }
.gamedrive-pricing h2 { max-width: 28ch; }
.gamedrive-pricing-intro { margin-top: 20px; color: var(--fg-2); }
.gamedrive-pricing-options { margin: var(--space-6) 0 0; }
.gamedrive-pricing-options > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.4fr); gap: 16px 32px; padding-block: var(--space-5); border-top: 1px solid var(--rule); }
.gamedrive-pricing-options > div:last-child { border-bottom: 1px solid var(--rule); }
.gamedrive-pricing-options dt { font-size: 22px; line-height: 1.3; font-weight: 600; }
.gamedrive-pricing-options dd { margin: 0; min-width: 0; }
.gamedrive-price { font-size: 20px; line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; }
.gamedrive-price span { display: block; font-size: 17px; font-weight: 400; color: var(--muted); }
.gamedrive-price-details { color: var(--fg-2); }
.gamedrive-enthusiasts { margin-top: var(--space-7); max-width: 70ch; }
.gamedrive-enthusiasts h3 { font-size: clamp(27px, 2.6vw, 38px); margin-bottom: 20px; }
.gamedrive-enthusiasts p { color: var(--fg-2); }
.gamedrive-enthusiasts p + p { margin-top: var(--space-4); }
.gamedrive-enthusiasts a { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-4); }
.selected-offer a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 760px) {
  .gamedrive-pricing { padding-block: 40px; }
  .gamedrive-pricing-options > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gamedrive-price span { display: inline; margin-left: 6px; }
  .gamedrive-price-details { padding-top: 8px; }
}

/* Contextual Meter captures retain the native readout, anchor and dropdown. */
.proof-meter-context { aspect-ratio: 798 / 680; }
.proof-meter-context .preview-image { height: 100%; width: auto; max-width: 100%; object-fit: contain; margin: 0; }
.meter-context-shot { scroll-margin-top: 96px; }
.meter-context-shot a { width: min(100%, 435px); }
.meter-context-shot img { width: 100%; max-width: 100%; max-height: none; height: auto; }
@media (max-width: 760px) {
  .proof-meter-context { aspect-ratio: 870 / 1600; }
  .meter-context-shot img { width: 100%; max-height: none; }
}

/* The selected GameDrive scene uses the approved, uncropped product film. */
.preview-video-figure { order: -1; aspect-ratio: 12 / 5; margin-bottom: 24px; border-radius: 0; }
.preview-video-figure .gamedrive-hero-poster,
.preview-video-figure .gamedrive-hero-video,
.preview-video-figure .gamedrive-hero-fallback { object-fit: contain; object-position: center; }
.preview-video-figure .hero-motion-toggle:focus-visible { outline-color: var(--ink); outline-offset: 3px; }