:root {font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#172327;background:#fff;font-synthesis:none;--muted:#5c676c;--line:#dfe5e7;--ink:#172327}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:90px}
body {margin:0;padding-bottom:60px}
a {color:inherit;text-decoration:none}
button {font:inherit;cursor:pointer}
img {max-width:100%;height:auto}
figure {margin:0}
button, a, summary {-webkit-tap-highlight-color:transparent}
a:hover {text-decoration:underline;text-underline-offset:5px}
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {outline:3px solid #1265d2;outline-offset:5px}
h1, h2, h3, p {margin-top:0}
h1 {font-size:clamp(2.6rem,4.6vw,4.8rem);line-height:1.4;letter-spacing:-.055em;font-weight:700;margin-bottom:24px}
h2 {font-size:clamp(1.45rem,2.1vw,2.1rem);line-height:1.5;letter-spacing:-.035em;margin-bottom:16px}
h3 {font-size:1.25rem;line-height:1.5;letter-spacing:-.025em}
p {font-size:1rem;line-height:1.95;color:var(--muted);max-width:43em;margin-bottom:22px}
small {font-size:.875rem}
section {min-width:0}
.site-header {min-height:94px;max-width:1440px;padding:20px 5%;margin:auto;display:flex;align-items:center;gap:36px}
.brand {display:inline-flex;align-items:center;gap:9px;font-size:1.24rem;font-weight:650;letter-spacing:-.035em;white-space:nowrap}
.brand img {object-fit:contain}
.brand span {font-size:.9rem;font-weight:450}
.site-header nav {margin-left:auto;display:flex;gap:32px;font-size:.875rem}
.skip {position:fixed;top:-100px;left:20px;z-index:100;background:white;color:#111;padding:10px}
.skip:focus {top:10px}
.intro {padding:54px 0 46px}
.intro p {font-size:1.0625rem}
.design main {max-width:1280px;margin:auto;padding:0 44px 64px}
.identity {display:flex;align-items:center;gap:13px;margin-bottom:22px}
.app-icon {width:48px;height:48px;border-radius:12px;object-fit:contain;flex-shrink:0}
.identity>span:not(.badge) {display:flex;flex-direction:column;line-height:1.2}
.identity small {font-size:.75rem;letter-spacing:.02em;margin-bottom:2px}
.identity strong {font-size:1.4rem;font-weight:650;letter-spacing:-.035em}
.badge {align-self:center;font-size:.75rem;white-space:nowrap;color:#24519a;border:1px solid currentColor;border-radius:30px;padding:4px 9px;margin-left:4px}
.text-link {font-size:.9375rem;font-weight:600;display:inline-flex;align-items:center;gap:20px;padding:8px 0;line-height:1.6}
.text-link span {font-size:1.3rem}
.shot {display:flex;align-items:center;justify-content:center;min-width:0;position:relative}
.shot img {display:block;object-fit:contain;width:100%;height:100%;max-height:440px}
.shot.planner img {width:auto;max-width:100%;height:420px;object-fit:contain;border-radius:23px;box-shadow:0 16px 50px #16365620}
.devices {display:block;color:var(--muted);margin-top:20px;font-size:.75rem;line-height:1.7}
.site-footer {border-top:1px solid var(--line);padding:42px max(5%,calc((100vw - 1192px)/2));display:grid;grid-template-columns:1fr auto;gap:16px 30px;align-items:center}
.site-footer p {margin:16px 0 0;font-size:.875rem}
.site-footer nav {display:flex;gap:20px;flex-wrap:wrap;font-size:.8125rem}
.site-footer>small {grid-column:1/-1;color:var(--muted);font-size:.75rem;margin-top:20px}
[hidden] {display:none!important}
.ordinal {font-size:.875rem;font-variant-numeric:tabular-nums}
.home {background:#f8fafc}
.home .intro {padding:48px 0 38px}
.home .intro h1 {font-size:clamp(2.8rem,4.8vw,4.3rem);margin-bottom:0}
.finder {display:grid;grid-template-columns:.85fr 1.2fr;gap:58px;align-items:start}
.finder-options {padding-top:12px}
.finder-options button {width:100%;display:flex;align-items:center;text-align:left;gap:18px;background:transparent;border:0;border-top:1px solid #d4dde6;color:#5d6a75;padding:28px 12px}
.finder-options button:last-child {border-bottom:1px solid #d4dde6}
.finder-options button>span:nth-child(2) {flex:1;font-size:1.15rem;line-height:1.65;font-weight:500}
.finder-options small {display:block;font-size:.8125rem;font-weight:400;margin-top:6px}
.finder-options [aria-selected=true] {color:#203f66;background:#e9eff8;border-radius:12px;border-top-color:transparent}
.finder-options [aria-selected=true]+button {border-top-color:transparent}
.finder-panel {background:white;border:1px solid #e6ebf0;padding:34px;border-radius:22px;box-shadow:0 16px 50px #213e5f08;min-height:590px}
.finder-panel .shot {height:235px;background:var(--tint);padding:20px;border-radius:12px;margin:20px 0 26px}
.finder-panel .shot.planner img {height:210px;border-radius:10px}
.finder-panel h2 {font-size:1.7rem}
.finder-panel .text-link {color:var(--accent)}
.finder-panel .devices {margin-top:14px}
@media(min-width:1600px) {
.design main {max-width:1400px}
}
@media(max-width:1000px) {
.site-header {gap:20px;padding:22px 30px}
.site-header nav {gap:22px}
.design main {padding-left:30px;padding-right:30px}
.site-footer {padding:35px 30px;grid-template-columns:1fr}
.finder {gap:30px;grid-template-columns:1fr 1.2fr}
.finder-options button {padding:25px 10px;gap:12px}
.finder-options button>span:nth-child(2) {font-size:1rem}
.finder-panel {padding:25px}
}
@media(max-width:700px) {
body {padding-bottom:58px}
.site-header {min-height:80px;padding:17px 20px;flex-wrap:wrap;gap:17px}
.brand {font-size:1.1rem}
.brand img {width:30px;height:30px}
.brand span {display:none}
.site-header nav {gap:17px;font-size:.8125rem;margin-left:auto}
.site-header nav a:last-child {display:none}
.design main {padding:0 20px 40px}
.intro {padding:38px 0 30px}
.intro h1 {font-size:clamp(2rem,7.5vw,3rem);margin-bottom:18px}
.intro p {font-size:.9375rem}
.site-footer {padding:30px 20px}
.site-footer nav {gap:16px}
.home .intro {padding:38px 0 28px}
.home .intro h1 {font-size:2.7rem}
.finder {grid-template-columns:1fr;gap:0}
/* On phones the product selector is hidden and every product is shown in a scrollable list. */
.finder-options {display:none}
.finder-results {display:grid;gap:20px}
.finder-panel[hidden] {display:block!important}
.finder-panel {padding:26px;min-height:0}
.finder-panel .shot {height:220px}
.finder-panel .shot.planner img {height:190px}
}
@media(max-width:380px) {
.site-header {gap:12px}
.site-header nav {gap:13px;font-size:.75rem}
.site-header .brand {font-size:.9375rem}
.site-header .brand img {width:26px;height:26px}
.design main {padding-left:16px;padding-right:16px}
.identity {gap:9px}
.identity strong {font-size:1.25rem}
.badge {font-size:.75rem;padding:3px 7px}
}
@media(prefers-reduced-motion:reduce) {
html {scroll-behavior:auto}
* {transition:none!important}
}
@media print {
body {padding-bottom:0}
.site-header nav {display:none}
a {text-decoration:none}
[role=tabpanel][hidden] {display:block!important}
}

/* Japanese homepage refinements. */
.home .finder-panel .identity { flex-wrap: wrap; }
.home .finder-panel .identity > span:not(.badge) { min-width: 0; }
.home .finder-panel .identity strong { font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.5; letter-spacing: -.035em; }
.home .finder-panel .app-icon { box-shadow: 0 1px 3px #0000001f, 0 0 0 1px #0000000f; }
.home .site-footer { grid-template-columns: 1fr auto; gap: 24px; }
.home .footer-message p { margin: 0 0 12px; }
.home .footer-message small { display: block; color: var(--muted); font-size: .75rem; }
.home .footer-languages { gap: 22px; align-items: center; }
.home .footer-languages [aria-current="page"] { font-weight: 600; }
@media (max-width: 700px) {
  .home .site-footer { grid-template-columns: 1fr; }
  .home .footer-languages { gap: 24px; }
}


/* Moderate screenshot size, retaining all devices in view. */
.home .finder-panel .shot {
  width: 100%;
  height: 285px;
  margin: 20px 0 26px;
  padding: 8px;
}
.home .finder-panel .shot img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}
.home .finder-panel .shot.planner img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 1000px) {
  .home .finder-panel .shot { height: 255px; }
}
@media (max-width: 700px) {
  .home .finder-panel .shot { height: 245px; }
}

/* The production page has no design-comparison toolbar. */
body { padding-bottom: 0; }