/* Handheld page geometry. ATC's shared bundle owns palette, type, controls and surfaces. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,p,figure{margin:0}
main :is(h1,h2,h3){text-wrap:balance}
main p{text-wrap:pretty}
.brand{display:inline-flex;align-items:center}
header.site-header{position:sticky;top:0;z-index:70}
.skip{position:absolute;top:-100px;left:20px;z-index:100;padding:10px 16px;background:var(--atc-accent);color:var(--atc-action-ink)}
.skip:focus{top:12px}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-note{font-size:13px;line-height:1.7;margin-top:22px;max-width:60ch}
.terminal-mockup{position:relative;width:min(100%,400px);aspect-ratio:2/3;margin-inline:auto;filter:drop-shadow(0 20px 26px oklch(from var(--atc-bg) .06 c h / .3))}
.terminal-mockup .terminal-body{width:100%;height:auto;border-radius:20px}
.terminal-display{position:absolute;left:29.2%;top:33.4%;width:41.7%;height:55.3%;background:var(--atc-bg)}
.terminal-display img{width:100%;height:100%;object-fit:contain}
.fact{min-width:0}
.fact strong{display:block;font:600 15px/1.5 var(--atc-display);color:var(--ui-fg)}
.fact span{display:block;margin-top:6px;color:var(--ui-muted);font-size:14px;line-height:1.65}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.story-photo{border:1px solid var(--ui-border);border-radius:20px;background:var(--ui-surface);box-shadow:var(--ui-shadow)}
.story-photo img{width:100%;height:clamp(420px,40vw,570px);object-fit:cover;object-position:60% center;border-radius:20px}
.story-copy>p:not(.eyebrow){margin-top:20px;max-width:54ch}
.step-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--ui-border)}
.step-list li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--ui-border)}
.step-list b{font:500 12px/1.8 var(--atc-mono);color:var(--ui-muted)}
.step-list strong{display:block;font:600 16px/1.5 var(--atc-display);color:var(--ui-fg)}
.step-list span{display:block;color:var(--ui-muted);font-size:15px;line-height:1.7;margin-top:6px}
.devices-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end;margin-bottom:36px}
.devices-head>p{max-width:54ch}
.device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.device-card{min-width:0}
.device-visual{height:330px;display:grid;place-items:center;padding:20px;background:var(--ui-field);border:1px solid var(--ui-border);border-radius:16px}
.device-visual>.terminal-mockup{width:min(100%,180px);height:auto}
.phone-shell{width:130px;padding-block:6px;border:7px solid var(--atc-overlay);border-radius:20px;overflow:hidden;background:var(--atc-bg);box-shadow:var(--ui-shadow)}
.phone-shell img{width:100%;height:auto;object-fit:contain}
.tablet-shell{width:min(100%,320px);border:9px solid var(--atc-overlay);border-radius:17px;overflow:hidden;background:var(--atc-bg);box-shadow:var(--ui-shadow)}
.tablet-shell img{width:100%;height:auto;object-fit:contain}
.device-card-copy{padding-top:24px}
.device-card-copy .number{display:block;margin-bottom:12px;color:var(--ui-muted);font:500 12px/1.6 var(--atc-mono)}
.device-card-copy h3{margin-bottom:12px}
.device-card-copy p{font-size:16px;line-height:1.75}
.workflow{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:center}
.workflow-copy>p:not(.eyebrow){margin-top:20px;max-width:52ch}
.tabs{display:grid;gap:8px;margin-top:28px}
.tab{width:100%;min-height:48px;text-align:left;display:flex;align-items:center;gap:16px}
.tab span{font:500 12px var(--atc-mono);color:inherit}
.screen-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:28px}
.screen-frame{width:min(100%,260px);padding-block:8px;border:8px solid var(--atc-overlay);border-radius:22px;overflow:hidden;background:var(--atc-bg);box-shadow:var(--ui-shadow)}
.screen-frame img{width:100%;height:auto;object-fit:contain}
.screen-caption{min-width:0}
.screen-caption .kicker{display:inline-block;font:500 12px/1.5 var(--atc-body);color:var(--ui-muted)}
.screen-caption h3{margin-top:16px}
.screen-caption p{margin-top:16px}
.screen-caption small{display:block;margin-top:24px;font-size:12px;color:var(--ui-muted);line-height:1.7}
.price-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.price-note .intro{margin-top:20px;max-width:54ch}
.price-note .text-link{margin-top:24px}
.checklist{border-top:1px solid var(--ui-border)}
.checkrow{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--ui-border)}
.checkrow strong{font:600 15px/1.6 var(--atc-display);color:var(--ui-fg)}
.checkrow p{font-size:16px;line-height:1.75}
.closing-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.closing-inner>div{max-width:800px;min-width:0}
.closing p{margin-top:16px}
.closing .text-link{flex-shrink:0}
.text-link{gap:9px}
@media(max-width:1100px){
 .terminal-mockup{width:min(100%,360px)}
 .story,.devices-head,.workflow,.price-note{gap:36px}
 .device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .device-card:last-child{grid-column:1/-1}
 .device-card:last-child .device-visual{height:300px}
}
@media(max-width:920px){
 .story,.devices-head,.workflow,.price-note{grid-template-columns:1fr}
 .story-photo img{height:440px}
 .devices-head{gap:20px}
 .screen-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .screen-frame{justify-self:center}
 .closing-inner{display:block}
 .closing .text-link{margin-top:24px}
}
@media(max-width:600px){
 .device-figure .terminal-mockup{width:min(100%,280px)}
 .device-grid{grid-template-columns:1fr}
 .device-card:last-child{grid-column:auto}
 .device-visual,.device-card:last-child .device-visual{height:320px}
 .story-photo img{height:350px}
 .screen-stage{grid-template-columns:1fr;gap:28px}
 .screen-frame{width:min(100%,260px)}
 .checkrow{grid-template-columns:1fr;gap:8px}
 .hero-actions{align-items:stretch}
 .hero-actions>a{flex:1 1 220px}
 .atc-site-header .atc-header-actions>a{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}