:root { color-scheme: light; font: 100%/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; color: #17263a; background: #f6f9fc; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 20rem; }
a { color: #075f9e; text-underline-offset: .18em; }
a:hover { color: #03446f; }
:focus-visible { outline: 3px solid #f0a000; outline-offset: 4px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; background: #fff; padding: .65rem .9rem; border-radius: .5rem; z-index: 2; }
.skip-link:focus { top: 1rem; }
.site-header, main, .site-footer { width: min(68rem, calc(100% - 2.5rem)); margin-inline: auto; }
.site-header { min-height: 5.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: #075f9e; font-size: 1.35rem; font-weight: 800; text-decoration: none; }
.brand img { border-radius: 1rem; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
nav a { font-weight: 650; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; min-height: 25rem; padding: 3.5rem clamp(1.5rem, 6vw, 5rem); border-radius: 2rem; color: #fff; background: linear-gradient(135deg, #075f9e 0%, #0876bc 57%, #1597c4 100%); box-shadow: 0 1.25rem 3.5rem #075f9e22; }
.eyebrow { margin: 0 0 .6rem; color: #09679e; font-size: .78rem; font-weight: 800; letter-spacing: .11em; }
.hero .eyebrow { color: #bfefff; }
h1, h2, h3 { line-height: 1.15; }
h1 { max-width: 11ch; margin: 0; font-size: clamp(2.25rem, 5vw, 4.4rem); letter-spacing: -.045em; }
h2 { margin: 0; font-size: clamp(1.65rem, 3.5vw, 2.5rem); letter-spacing: -.035em; }
h3 { margin: .8rem 0 .35rem; font-size: 1.2rem; }
.lead { max-width: 37rem; margin: 1.25rem 0; font-size: 1.12rem; }
.notice { display: inline-block; max-width: 37rem; margin: .5rem 0 0; padding: .7rem .9rem; border: 1px solid #ffffff55; border-radius: .8rem; background: #ffffff18; font-size: .94rem; }
.hero-robot { width: clamp(8.5rem, 19vw, 12.25rem); height: auto; border-radius: 2rem; background: #fff; box-shadow: 0 .75rem 1.5rem #04385833; }
.quick-guide { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 7vw, 6rem); padding: 5rem clamp(0rem, 4vw, 3rem); }
.quick-guide img { display: block; width: min(100%, 29rem); height: auto; justify-self: center; border-radius: 1.5rem; box-shadow: 0 1.25rem 3.5rem #075f9e22; }
.steps { padding: 5rem 0; }
.section-heading { max-width: 32rem; }
.steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.steps li { min-height: 13rem; padding: 1.5rem; border: 1px solid #dce6ee; border-radius: 1.25rem; background: #fff; }
.steps li span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; font-weight: 800; background: #0876bc; }
.steps p, .info-card p { margin: 0; color: #53677d; }
.info-card { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: start; margin-bottom: 5rem; padding: 2.25rem; border-radius: 1.5rem; background: #e4f4fa; }
.site-footer { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.75rem 0 2.5rem; color: #596b7f; font-size: .94rem; border-top: 1px solid #dce6ee; }
.site-footer nav { gap: 1.25rem; }
.site-footer a { font-weight: 600; }
.legal-page { width: min(48rem, calc(100% - 2.5rem)); margin: 2.5rem auto 5rem; }
.legal-page article { padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid #dce6ee; border-radius: 1.5rem; background: #fff; }
.legal-page h1 { max-width: none; font-size: clamp(2rem, 5vw, 3rem); color: #075f9e; }
.legal-page h2 { margin-top: 2.2rem; font-size: 1.45rem; }
.legal-page p, .legal-page li { max-width: 66ch; }
.legal-page li { margin: .4rem 0; }
.legal-page .updated { color: #596b7f; }
.callout { padding: 1.2rem 1.3rem; border-left: .3rem solid #0876bc; border-radius: .75rem; background: #eaf6fa; }
button, .primary { display: inline-block; padding: .75rem 1rem; border: 1px solid #075f9e; border-radius: .75rem; font: inherit; font-weight: 750; text-align: center; text-decoration: none; cursor: pointer; background: transparent; color: #075f9e; min-height: 44px; }
.primary { background: #0874c9; color: #fff; border-color: #0874c9; }
.language { display: flex; justify-content: flex-end; margin: -.5rem 0 .75rem; }
.language button { width: auto; padding: .4rem .7rem; border: none; font-size: .9rem; }
output { display: block; font: 650 1.25rem/1.6 ui-monospace, monospace; text-align: center; padding: .8rem .2rem; overflow-wrap: anywhere; letter-spacing: .035em; }
hr { border: 0; border-top: 1px solid #dae3ed; margin: 1.5rem 0; }
.muted, .privacy, #install { color: #4d6177; font-size: .95rem; }
.privacy { padding: .5rem .75rem; }
#copy-status { margin: .4rem 0; min-height: 1.5rem; }
[hidden] { display: none !important; }
@media (max-width: 42rem) { .site-header, .site-footer { align-items: flex-start; flex-direction: column; padding-block: 1.25rem; } .hero { grid-template-columns: 1fr; min-height: auto; padding: 2.25rem 1.5rem; } .hero-robot { justify-self: end; margin-top: -4rem; } .quick-guide { grid-template-columns: 1fr; gap: 1.5rem; padding: 3.5rem 0; } .steps { padding: 3.5rem 0; } .steps ol, .info-card { grid-template-columns: 1fr; } .info-card { gap: 1.2rem; margin-bottom: 3.5rem; } }
@media (max-width: 25rem) { .site-header, main, .site-footer, .legal-page { width: min(100% - 1.25rem, 68rem); } .hero-robot { margin-top: 0; } }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; color: #e9f1f8; background: #0d1621; } a { color: #75c9ee; } a:hover { color: #c1efff; } .hero { box-shadow: none; } .steps li, .legal-page article { background: #172536; border-color: #31465c; } .steps p, .info-card p, .updated, .site-footer { color: #c2d0de; } .info-card, .callout { background: #103447; } .site-footer { border-color: #31465c; } .legal-page h1 { color: #75c9ee; } }