:root {
  color-scheme: light;
  --bg: #f8f6f0;
  --text: #14232b;
  --muted: #53636a;
  --soft-text: #718087;
  --surface: #fff;
  --border: #dce6e0;
  --accent: #087e78;
  --accent-soft: #e3f3eb;
  --primary-button: #142a31;
  --primary-hover: #096f6b;
  --secondary-button: #fff;
  --shadow: #173c3520;
  --halo: #cceadf;
  --preview-bg: #fff;
  --preview-text: #14232b;
  --preview-muted: #66777d;
  --preview-line: #e8eeea;
  --feature-section-bg: #e4f2e9;
  --detail-bg: #e9eff5;
  --detail-visual: #d9e6f0;
  --scenario-bg: #fff;
  --scenario-card: #f4f7f3;
  --scenario-card-alt: #e7f5ed;
  --scenario-line: #c4d2cb;
  --scenario-bar: #a9c9ba;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root {
  color-scheme: dark;
  --bg: #101a20;
  --text: #edf5f2;
  --muted: #b2c2c1;
  --soft-text: #94a8a8;
  --surface: #1b2b32;
  --border: #38515a;
  --accent: #78d9c0;
  --accent-soft: #22413e;
  --primary-button: #73d3b8;
  --primary-hover: #9ae4cf;
  --secondary-button: #1a2b32;
  --shadow: #0006;
  --halo: #28615a;
  --preview-bg: #20343a;
  --preview-text: #edf6f2;
  --preview-muted: #b0c5c2;
  --preview-line: #38535a;
  --feature-section-bg: #17382f;
  --detail-bg: #1a2a3a;
  --detail-visual: #29465b;
  --scenario-bg: #21383d;
  --scenario-card: #2a4145;
  --scenario-card-alt: #24504a;
  --scenario-line: #56716d;
  --scenario-bar: #547e76;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -70px; z-index: 30; background: var(--surface); padding: 12px 16px; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.site-header { position: relative; z-index: 20; min-height: 88px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; font-size: 1.27rem; font-weight: 800; letter-spacing: -.04em; }
.brand img, .footer-brand img { border-radius: 10px; }
.brand-accent { color: var(--accent); }
.main-nav { display: flex; justify-content: center; gap: 27px; font-size: .9rem; font-weight: 650; color: var(--muted); white-space: nowrap; }
.main-nav a:hover, .site-footer a:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; justify-self: end; }
.lang-menu > summary { height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text); font-size: .83rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.lang-menu > summary:hover { border-color: var(--accent); }
.lang-globe { width: 19px; height: 19px; flex: none; color: var(--accent); }
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::marker { content: ""; }
.lang-code { display: none; }
.lang-caret { display: block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 3px; }
.lang-menu[open] .lang-caret { transform: translateY(2px) rotate(225deg); }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; padding: 6px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: 0 15px 38px var(--shadow); }
.lang-list a { display: flex; justify-content: space-between; gap: 20px; padding: 10px 11px; border-radius: 8px; font-size: .86rem; }
.lang-list a:hover, .lang-list a:focus-visible, .lang-list a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.lang-list small { font-size: .7rem; font-weight: 750; opacity: .7; }

.hero { min-height: 660px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 42px; padding-block: 54px 95px; }
.eyebrow, .section-label { font-size: .75rem; letter-spacing: .13em; font-weight: 800; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--accent); }
.eyebrow-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.hero h1 { margin: 19px 0 22px; font-size: clamp(2.75rem, 5.4vw, 5.7rem); line-height: 1.05; letter-spacing: -.065em; font-weight: 800; }
.hero h1 span { color: var(--accent); }
.hero-lead { max-width: 550px; color: var(--muted); font-size: 1.1rem; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.button { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 17px; padding: 0 18px; border-radius: 12px; font-weight: 750; font-size: .91rem; }
.button-primary { background: var(--primary-button); color: #fff; box-shadow: 0 10px 23px var(--shadow); }
@media (prefers-color-scheme: dark) { .button-primary { color: #102029; } }
.button-primary:hover { background: var(--primary-hover); }
.button-secondary { border: 1px solid var(--border); background: var(--secondary-button); }
.button-secondary:hover { border-color: var(--accent); }
.trust-list { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 8px; margin: 27px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .82rem; }
.trust-list li::before { content: "✓"; margin-right: 7px; color: var(--accent); font-weight: 800; }

.hero-art { position: relative; min-height: 515px; display: grid; place-items: center; }
.art-halo { position: absolute; inset: 8% 0; background: radial-gradient(ellipse at 58% 44%, var(--halo), transparent 72%); filter: blur(5px); }
.preview-card { position: relative; background: var(--preview-bg); color: var(--preview-text); box-shadow: 0 28px 80px var(--shadow); border: 1px solid var(--border); }
.main-card { width: min(440px, 100%); min-height: 402px; padding: 27px 32px 34px; border-radius: 25px; transform: rotate(-2deg); }
.preview-top { display: flex; align-items: center; gap: 10px; padding-bottom: 28px; border-bottom: 1px solid var(--preview-line); font-size: .85rem; font-weight: 800; }
.preview-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #15232a; color: #ffc420; font-size: .65rem; }
.preview-dots { margin-left: auto; color: var(--preview-muted); letter-spacing: 3px; }
.preview-kicker { margin: 29px 0 7px; color: var(--accent); font-size: .67rem; font-weight: 800; letter-spacing: .13em; }
.main-card h2 { font-size: 1.52rem; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 25px; }
.preview-flow { display: grid; gap: 15px; }
.preview-flow > div { display: grid; grid-template-columns: 135px 1fr; gap: 8px; align-items: center; color: var(--preview-muted); font-size: .75rem; }
.bar { display: block; height: 13px; border-radius: 9px; background: var(--scenario-line); }
.bar-gross { width: 96%; background: #87cbb5; }
.bar-tax { width: 37%; background: #f0c95d; }
.bar-social { width: 49%; background: #aabac6; }
.preview-flow .net-row { margin-top: 4px; padding-top: 15px; border-top: 1px solid var(--preview-line); color: var(--preview-text); font-weight: 800; }
.bar-net { width: 72%; height: 17px; background: linear-gradient(90deg, #0d9995, #73c8aa); }
.compare-card { position: absolute; right: 0; bottom: 20px; width: 260px; min-height: 98px; padding: 18px; display: flex; align-items: center; gap: 13px; border-radius: 17px; transform: rotate(4deg); }
.compare-symbol { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 13px; background: var(--accent-soft); color: var(--accent); font-size: 1.5rem; font-weight: 700; }
.compare-card div { display: flex; flex-direction: column; line-height: 1.25; }
.compare-card small { font-size: .59rem; font-weight: 800; color: var(--accent); letter-spacing: .1em; }
.compare-card strong { margin: 4px 0; font-size: .87rem; }
.compare-card div span { font-size: .67rem; color: var(--preview-muted); }

.section { padding-block: 108px; }
.feature-section { background: var(--feature-section-bg); }
.section-heading { max-width: 690px; }
.section-label { color: var(--accent); margin: 0 0 15px; }
.section h2, .detail-copy h2 { font-size: clamp(2.3rem, 4vw, 4.1rem); line-height: 1.13; letter-spacing: -.025em; margin: 0 0 20px; }
.section-heading > p:last-child, .detail-copy > p:not(.section-label), .rules-copy p { font-size: 1.05rem; color: var(--muted); line-height: 1.75; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.feature-card { --card-accent: #ae7414; --card-accent-soft: #fff1ce; --card-surface: #fff9ea; --card-border: #e8d3a0; min-height: 315px; padding: 30px; border: 1px solid var(--card-border); border-top: 3px solid var(--card-accent); border-radius: 20px; background: var(--card-surface); box-shadow: 0 8px 35px var(--shadow); }
.feature-card:nth-child(2) { --card-accent: #087e78; --card-accent-soft: #d8f0e6; --card-surface: #ebf7f1; --card-border: #afd9c8; }
.feature-card:nth-child(3) { --card-accent: #4e68ae; --card-accent-soft: #e1eafb; --card-surface: #edf2ff; --card-border: #c4d2f0; }
.feature-number { font-size: .72rem; font-weight: 800; color: var(--card-accent); }
.feature-icon { display: grid; place-items: center; width: 49px; height: 49px; margin-top: 23px; border-radius: 13px; background: var(--card-accent-soft); color: var(--card-accent); font-size: 1.65rem; }
@media (prefers-color-scheme: dark) {
  .feature-card { --card-accent: #f1c96c; --card-accent-soft: #4b3d23; --card-surface: #302a21; --card-border: #665236; }
  .feature-card:nth-child(2) { --card-accent: #78d9c0; --card-accent-soft: #28594e; --card-surface: #1c3831; --card-border: #3e7a68; }
  .feature-card:nth-child(3) { --card-accent: #a8bbf2; --card-accent-soft: #34466d; --card-surface: #232f47; --card-border: #52658e; }
}
.feature-card h3 { font-size: 1.32rem; letter-spacing: -.02em; line-height: 1.23; margin: 23px 0 12px; }
.feature-card p { color: var(--muted); font-size: .93rem; line-height: 1.65; margin: 0; }

.detail-section { background: var(--detail-bg); padding-block: 110px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 9%; }
.detail-visual { min-height: 455px; display: grid; place-items: center; border-radius: 27px; background: radial-gradient(circle at 30% 30%, var(--halo), transparent 65%), var(--detail-visual); }
.scenario-window { width: min(465px, calc(100% - 40px)); padding: 27px 28px 22px; border-radius: 21px; background: var(--scenario-bg); box-shadow: 0 24px 65px var(--shadow); }
.scenario-header { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--preview-line); color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
.scenario-header span:last-child { font-size: 1.25rem; line-height: 1; }
.scenario-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.scenario-columns > div { min-height: 205px; padding: 19px 14px; border-radius: 13px; background: var(--scenario-card); }
.scenario-columns > div:last-child { background: var(--scenario-card-alt); }
.scenario-columns small { font-size: .59rem; font-weight: 800; color: var(--accent); letter-spacing: .08em; }
.scenario-line { display: block; height: 9px; border-radius: 6px; background: var(--scenario-line); margin-top: 17px; }
.scenario-line.long { width: 82%; }
.scenario-line.short { width: 50%; margin-top: 10px; }
.scenario-line.medium { width: 70%; }
.scenario-block { display: block; width: 65%; height: 50px; margin: 24px auto 0; border-radius: 12px 12px 4px 4px; background: var(--scenario-bar); }
.scenario-block.alternative { width: 81%; background: linear-gradient(180deg, #5dc7a8, #0b9890); }
.scenario-footer { display: flex; justify-content: space-between; margin-top: 18px; color: var(--soft-text); font-size: .63rem; }
.detail-copy h2 { max-width: 470px; }
.detail-copy > p:not(.section-label) { max-width: 500px; }
.detail-copy ul { padding: 0; list-style: none; margin: 30px 0 0; }
.detail-copy li { position: relative; margin: 11px 0; padding-left: 31px; font-weight: 700; font-size: .9rem; }
.detail-copy li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); }

.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; padding-block: 108px; }
.rules h2 { max-width: 430px; }
.rules-copy p { margin: 0 0 16px; }
.rules-copy .fine-print { padding-left: 18px; border-left: 3px solid #f5c640; font-size: .9rem; color: var(--soft-text); }

.availability { padding: 95px 0 100px; text-align: center; background: #13232b; color: #f5f8f6; }
@media (prefers-color-scheme: dark) { .availability { background: #0a1116; } }
.availability .section-label { color: #7adcc6; }
.availability h2 { max-width: 950px; margin: 25px auto 19px; font-size: clamp(2.5rem, 5.5vw, 5rem); line-height: 1.12; letter-spacing: -.045em; }
.availability-note { margin: 0; color: #b8c9c9; font-size: 1.05rem; }
.app-store-button { display: inline-flex; align-items: center; gap: 12px; min-width: 210px; margin-top: 40px; padding: 11px 20px 12px; border: 1px solid #3b4d58; border-radius: 12px; background: #101114; color: #fff; text-align: left; appearance: none; }
.app-store-button:disabled { opacity: 1; cursor: default; }
.apple-mark { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 37px; line-height: 1; }
.app-store-button small, .app-store-button strong { display: block; }
.app-store-button small { margin-bottom: 1px; font-size: 10px; line-height: 1.1; }
.app-store-button strong { font-size: 21px; line-height: 1.1; letter-spacing: -.02em; }
.site-footer { min-height: 110px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 24px; border-top: 1px solid var(--border); color: var(--soft-text); font-size: .83rem; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 800; font-size: 1.06rem; white-space: nowrap; }
.site-footer p { margin: 0; }
.footer-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px 22px; color: var(--text); font-weight: 700; }

.subpage-header { grid-template-columns: 1fr auto; }
.subpage-actions { gap: 10px; }
.subpage-back { min-height: 43px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); font-size: .83rem; font-weight: 750; white-space: nowrap; }
.subpage-back:hover { border-color: var(--accent); color: var(--accent); }
.subpage-main { padding-bottom: 110px; }
.subpage-hero { padding-block: 88px 76px; border-bottom: 1px solid var(--border); }
.subpage-hero h1 { max-width: 900px; margin: 14px 0 22px; font-size: clamp(3rem, 6vw, 5.9rem); line-height: 1.06; letter-spacing: -.055em; }
.subpage-hero h1 em { color: var(--accent); font-style: normal; }
.subpage-lead { max-width: 760px; margin: 0; color: var(--muted); font-size: 1.17rem; line-height: 1.7; }
.release-history { padding-top: 42px; }
.release-entry { display: grid; grid-template-columns: minmax(180px, .58fr) minmax(0, 1.42fr); gap: 70px; padding: 52px 0; border-bottom: 1px solid var(--border); }
.release-meta .section-label { margin-bottom: 12px; }
.release-version { margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.625rem); font-weight: 760; letter-spacing: -.03em; }
.release-copy h2 { margin: 0 0 16px; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.14; letter-spacing: -.035em; }
.release-copy p { max-width: 690px; margin: 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.7; }
.accessibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)) auto; gap: 36px; padding-top: 72px; }
.a11y-card, .a11y-note, .legal-panel { min-width: 0; border: 1px solid var(--border); border-radius: 23px; background: var(--surface); }
.a11y-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding: 46px; }
.a11y-card > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.a11y-card-wide, .a11y-note { grid-column: 1 / -1; }
.a11y-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.875rem; line-height: 1; }
.a11y-card h2 { margin: 16px 0 18px; font-size: clamp(2.125rem, 3.6vw, 3.125rem); line-height: 1.08; letter-spacing: -.045em; }
.a11y-note h2, .legal-panel h2 { margin: 12px 0 18px; line-height: 1.15; letter-spacing: -.035em; }
.legal-panel h2 { font-size: clamp(1.65rem, 3vw, 2.8rem); }
.a11y-note h2 { font-size: clamp(1.875rem, 3vw, 2.625rem); }
.a11y-card p:not(.section-label), .a11y-note p:not(.section-label), .legal-panel p:not(.section-label), .legal-panel address { color: var(--muted); font-size: 1rem; line-height: 1.75; }
.a11y-card p:not(.section-label) { margin: 0; }
.a11y-card strong, .a11y-note strong, .legal-panel strong { color: var(--text); }
.platform-list { display: flex; flex-wrap: wrap; gap: 10px; margin: auto 0 0; padding: 28px 0 0; list-style: none; }
.platform-list li { padding: 9px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .8rem; font-weight: 800; }
.a11y-note { padding: 46px; }
.a11y-note h3, .legal-panel h3 { margin: 32px 0 10px; font-size: 1.18rem; letter-spacing: -.02em; }
.a11y-note a, .legal-panel a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.page-date { margin-top: 36px; font-weight: 700; }
.legal-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; padding-top: 72px; align-items: start; }
.legal-panel { padding: 38px; }
.legal-panel address { margin-bottom: 18px; font-style: normal; }
.legal-panel p:not(.section-label) { margin: 0 0 18px; }
.legal-panel h3 + p { margin-top: 0; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; gap: 8px; }
  .hero-art { min-height: 500px; }
  .detail-grid, .rules { grid-template-columns: 1fr; gap: 45px; }
  .detail-copy { order: -1; }
  .legal-grid { grid-template-columns: 1fr; }
  .release-entry { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { display: none; }
  .site-footer { grid-template-columns: auto minmax(0, 1fr); }
  .site-footer p { display: none; }
}
@media (max-width: 680px) {
  .shell { width: min(100% - 32px, 1160px); }
  .site-header { min-height: 76px; gap: 10px; }
  .brand { font-size: 1.1rem; }
  .brand img { width: 38px; height: 38px; }
  .lang-menu > summary { height: 40px; padding: 0 10px; }
  .lang-name { display: none; }
  .lang-code { display: inline; }
  .hero { padding-block: 27px 68px; }
  .hero h1 { font-size: clamp(2.7rem, 9.4vw, 4.4rem); letter-spacing: -.05em; }
  .hero-lead { font-size: 1rem; }
  .hero-art { min-height: 440px; }
  .main-card { width: calc(100% - 25px); min-height: 365px; padding: 22px; transform: rotate(-1deg); }
  .compare-card { right: 0; bottom: 0; transform: rotate(3deg); }
  .preview-flow > div { grid-template-columns: 120px 1fr; }
  .trust-list { display: grid; font-size: .83rem; }
  .section { padding-block: 77px; }
  .feature-grid { grid-template-columns: 1fr; margin-top: 34px; }
  .feature-card { min-height: 270px; }
  .detail-section { padding-block: 76px; }
  .detail-visual { min-height: 385px; }
  .scenario-window { padding: 20px; }
  .scenario-columns > div { padding: 14px 10px; }
  .rules { padding-block: 77px; }
  .availability { padding: 75px 0 80px; }
  .availability h2 { letter-spacing: -.025em; }
  .site-footer { grid-template-columns: 1fr; gap: 16px; padding-block: 25px; }
  .footer-links { justify-content: flex-start; }
  .subpage-actions { gap: 6px; }
  .subpage-back, .subpage-header .lang-menu > summary { min-height: 40px; padding-inline: 10px; }
  .subpage-main { padding-bottom: 76px; }
  .subpage-hero { padding-block: 56px 52px; }
  .subpage-hero h1 { font-size: clamp(2.6rem, 10vw, 4.3rem); }
  .subpage-lead { font-size: 1rem; }
  .release-history { padding-top: 20px; }
  .release-entry { padding: 38px 0; }
  .accessibility-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; padding-top: 48px; }
  .a11y-card { grid-template-columns: 1fr; gap: 16px; padding: 30px; }
  .a11y-note, .legal-panel { padding: 30px; }
  .legal-grid { padding-top: 48px; }
}
@media (max-width: 380px) {
  .brand span { font-size: .99rem; }
  .lang-menu > summary { padding: 0 8px; }
  .hero h1 { font-size: 2.55rem; }
  .hero-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}