:root { --background: #fff; --foreground: #151619; --muted: #62656d; --border: #dedfe3; --surface: #f4f5f7; --blue: #124fc4; color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 4px; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2 { margin: 0; }
.wrap { width: min(1140px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 5; background: var(--background); padding: 12px 20px; }
.skip-link:focus { top: 12px; }
.site-header { min-height: 94px; display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.wordmark { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 20px; letter-spacing: -.6px; text-decoration: none; }
.wordmark img { border-radius: 9px; }
.site-header nav { display: flex; gap: 28px; font-size: 14px; }
.site-header nav a { padding-block: 12px; text-decoration: none; }
.site-header nav a:hover { color: var(--blue); }
.hero { padding-top: 74px; text-align: center; }
.eyebrow { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 18px; }
h1 { font-size: clamp(3.8rem, 7.3vw, 6.2rem); line-height: 1.025; font-weight: 650; letter-spacing: -.065em; }
.intro { max-width: 680px; margin: 27px auto 0; font-size: 21px; color: var(--muted); line-height: 1.5; }
.hero-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 28px 0 54px; }
.primary-link { background: var(--blue); color: #fff; border-radius: 999px; padding: 11px 21px; font-size: 16px; font-weight: 550; text-decoration: none; }
.primary-link span { margin-left: 16px; }
.availability { color: var(--muted); font-size: 14px; }
.ipad-landscape { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: #f2f2f7; box-shadow: 0 18px 42px #1516190b; }
.ipad-landscape img { width: 100%; height: auto; }
figcaption, .image-note { font-size: 13px; color: var(--muted); line-height: 1.5; }
.keyboard-detail figcaption { margin-top: 15px; }
.keyboard-section { padding-block: 132px; display: grid; grid-template-columns: 1fr .84fr; gap: 100px; align-items: center; }
h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.1; font-weight: 620; letter-spacing: -.045em; }
.fit-copy>p:not(.eyebrow) { margin-top: 28px; color: var(--muted); max-width: 430px; }
.plain-list { list-style: none; padding: 0; margin: 28px 0 0; font-size: 16px; }
.plain-list li { padding-block: 18px; border-top: 1px solid var(--border); color: var(--muted); }
.plain-list strong { color: var(--foreground); font-weight: 600; }
.app-screen img { border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 42px #1516190b; }
.app-screen figcaption { margin-top: 16px; }
.appearance-section { padding-block: 85px; background: var(--surface); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 45px; }
.section-heading>p { color: var(--muted); }
.appearance-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.appearance-pair .ipad-landscape { border-radius: 14px; }
.appearance-pair figcaption { margin-top: 13px; font-size: 15px; font-weight: 600; color: var(--foreground); }
.image-note { margin-top: 20px; }
.price-section { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding-block: 104px; border-bottom: 1px solid var(--border); }
.price-copy>p { margin-bottom: 18px; color: var(--muted); }
.questions-section { padding-block: 90px; display: grid; grid-template-columns: .85fr 1.25fr; gap: 90px; }
.question-trigger { padding: 22px 0; border-radius: 0; font-size: 17px; font-weight: 550; line-height: 1.4; align-items: center; gap: 15px; }
.question-answer { color: var(--muted); font-size: 16px; line-height: 1.65; padding-bottom: 24px; height: auto; }
.question-answer a { color: var(--blue); }
.site-footer { min-height: 100px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 25px; font-size: 14px; }
.byline { color: var(--muted); }
.feedback-section { display:grid; grid-template-columns:1fr 1fr; gap:90px; padding-block:90px; border-bottom:1px solid var(--border); }
.feedback-intro { margin-top:24px; color:var(--muted); }
.feedback-section label { display:block; font-size:16px; font-weight:600; margin-bottom:12px; }
.feedback-input { min-height:170px; font-size:17px; border:1px solid var(--border); padding:14px; background:var(--surface); resize:vertical; }
.feedback-privacy { font-size:14px; color:var(--muted); margin-block:14px 22px; }
.feedback-send { height:46px; padding-inline:22px; border-radius:24px; background:var(--blue); color:var(--background); font-size:16px; cursor:pointer; }
.feedback-send:hover { background:var(--blue); opacity:.9; }
.feedback-status { display:block; min-height:26px; margin-top:14px; font-size:15px; }
@media(max-width:800px) { .feedback-section { gap:40px; } }
@media(max-width:600px) { .feedback-section { grid-template-columns:1fr; gap:34px; padding-block:64px; } }
@media(prefers-color-scheme:dark) { :root { --background:#111214; --foreground:#f5f5f7; --muted:#b2b4bd; --border:#35363d; --surface:#1b1c20; --blue:#83b2ff; color-scheme:dark; } .primary-link { color:#111214; } }
@media(max-width:800px) { .wrap { width:calc(100% - 40px); } .site-header { min-height:80px; } .site-header nav { gap:16px; } .hero { padding-top:50px; } .keyboard-section { gap:40px; padding-block:80px; } .price-section,.questions-section { gap:40px; } .section-heading { align-items:flex-start; flex-direction:column; } }
@media(max-width:600px) { .site-header { align-items:flex-start; flex-direction:column; gap:8px; padding-block:20px; } .site-header nav { width:100%; justify-content:space-between; } .hero { padding-top:35px; } h1 { font-size:3.8rem; } .intro { font-size:18px; } .wide-only { display:none; } .hero-actions { flex-direction:column; gap:15px; margin-bottom:36px; } .keyboard-detail .ipad-landscape { border-radius:10px; } .keyboard-detail figcaption { font-size:12px; } .keyboard-section,.price-section,.questions-section { grid-template-columns:1fr; gap:34px; padding-block:64px; } .app-screen { max-width:380px; margin-inline:auto; } .appearance-section { padding-block:60px; } .appearance-pair { gap:12px; } .appearance-pair .ipad-landscape { border-radius:10px; } .site-footer { align-items:flex-start; flex-direction:column; gap:12px; padding-block:28px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }

.questions details { border-bottom:1px solid var(--border); }
.questions summary { cursor:pointer; padding:22px 0; font-weight:550; }
.questions details p { padding:0 0 24px; color:var(--muted); }
summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.feedback-copy > p:first-child { margin-bottom:26px; }
.feedback-copy .primary-link { display:inline-block; }
.support-section,.privacy-section { padding-block:70px; border-top:1px solid var(--border); }
.support-section h2,.privacy-section h2 { margin-bottom:28px; }
.support-section p,.privacy-section p { max-width:780px; margin-block:16px; color:var(--muted); }
.support-section ol { padding-left:24px; max-width:800px; }
.support-section li { padding:8px 0; }
.privacy-section h3 { margin-top:32px; }
@media(max-width:600px) { .site-header nav { flex-wrap:wrap; justify-content:flex-start; gap:8px 20px; } }

:root[data-theme="light"] { --background:#fff; --foreground:#151619; --muted:#62656d; --border:#dedfe3; --surface:#f4f5f7; --blue:#124fc4; color-scheme:light; }
:root[data-theme="dark"] { --background:#111214; --foreground:#f5f5f7; --muted:#b2b4bd; --border:#35363d; --surface:#1b1c20; --blue:#83b2ff; color-scheme:dark; }
:root[data-theme="light"] .primary-link { color:#fff; }
:root[data-theme="dark"] .primary-link { color:#111214; }
.theme-button { font:inherit; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 14px; cursor:pointer; }
.site-header nav { align-items:center; }

/* Crop the original captures at presentation time; retain their original pixels. */
.keyboard-crop { position:relative; overflow:hidden; aspect-ratio:3.8; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.keyboard-crop img { position:absolute; bottom:0; left:0; width:100%; height:auto; }
.appearance-pair { grid-template-columns:1fr; gap:36px; }
@media(min-width:1000px) { .appearance-pair { grid-template-columns:1fr 1fr; gap:28px; } }

.product-shot { overflow: hidden; border-radius: 20px; }
.product-shot img { display: block; width: 100%; height: auto; }
.keyboard-section { grid-template-columns: .9fr 1.25fr; gap: 64px; }
@media (max-width: 800px) {
  .keyboard-section { grid-template-columns: 1fr; gap: 36px; }
  .product-shot { border-radius: 12px; }
}

/* Keep the device at a readable size instead of stretching it across the page. */
.hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 56px; text-align: left; padding-block: 96px 80px; }
.hero-copy { min-width: 0; }
.hero h1 { font-size: clamp(3.8rem, 5.5vw, 5rem); }
.hero-actions { align-items: flex-start; margin-bottom: 0; }
.hero .keyboard-detail { width: 100%; max-width: 640px; justify-self: end; }
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding-block: 48px 32px; }
  .hero h1 { font-size: clamp(3.8rem, 9vw, 5rem); }
  .hero .keyboard-detail { max-width: 640px; justify-self: center; }
}
/* Progress follows the scroll; nothing loops or runs while the page is idle. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 801px) {
    .hero .keyboard-detail {
      animation: hero-device-scroll linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes hero-device-scroll {
  from { transform: translateY(24px) rotate(-1deg); }
  to { transform: translateY(-40px) rotate(1deg); }
}

/* The policy is a quiet reading page, separate from the product presentation. */
.privacy-page .privacy-section { max-width: 780px; border-top: 0; }
.privacy-page h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 32px; }
.privacy-page h2 { font-size: 1.2rem; letter-spacing: -.02em; margin: 32px 0 8px; }
.privacy-page .site-footer { max-width: 780px; }
@media (max-width: 380px) { .hero h1 { font-size: 3.2rem; } }

/* A single mobile header row; navigation expands only when requested. */
.mobile-menu { display: none; }
@media (max-width: 800px) {
  .site-header { position: relative; flex-direction: row; align-items: center; gap: 16px; min-height: 80px; padding-block: 16px; }
  .site-header > nav { display: none; }
  .wordmark { white-space: nowrap; }
  .mobile-menu { display: block; position: relative; margin-left: auto; z-index: 3; }
  .mobile-menu summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 550; padding: 9px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu[open] summary { background: var(--foreground); color: var(--background); }
  .mobile-menu nav { position: absolute; top: calc(100% + 12px); right: 0; width: min(280px, calc(100vw - 40px)); padding: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--background); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 32px #0002; }
  .mobile-menu nav a { padding: 10px 12px; border-radius: 8px; }
}

.site-header > nav { margin-left: auto; }
.theme-icon { flex: 0 0 40px; width: 40px; height: 40px; padding: 9px; }
.theme-icon svg { display: block; width: 20px; height: 20px; }
.theme-icon .theme-sun { display: none; }
.theme-icon[data-appearance="dark"] .theme-sun { display: block; }
.theme-icon[data-appearance="dark"] .theme-moon { display: none; }
@media (max-width: 800px) {
  .site-header { gap: 8px; }
  .wordmark { font-size: 17px; gap: 8px; }
  .wordmark img { width: 28px; height: 28px; border-radius: 7px; }
  .mobile-menu summary { padding-inline: 12px; }
  .mobile-menu nav { right: -48px; }
}