/* Aulendra home. Tokens come from tokens.css (--a-*). Nothing here is shared with other pages. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.home{margin:0;background:var(--a-bg);color:var(--a-ink);font:400 var(--a-fs-body)/1.6 var(--a-font-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,dl,dd,ol,ul{margin:0;padding:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--a-focus);outline-offset:4px}
.skip{position:absolute;left:var(--a-s-4);top:-120px;padding:var(--a-s-3) var(--a-s-4);background:var(--a-ink);color:var(--a-bg);z-index:10}
.skip:focus{top:var(--a-s-4)}

/* Type: one face, three sizes that do the work */
h1{font-size:var(--a-fs-display);line-height:.98;letter-spacing:-.055em;font-weight:500;max-width:16ch;text-wrap:balance}
h2{font-size:var(--a-fs-h2);line-height:1.04;letter-spacing:-.04em;font-weight:500;max-width:18ch}
h3{font-size:var(--a-fs-h3);line-height:1.2;letter-spacing:-.02em;font-weight:600}
p{max-width:36em}

/* Stage colours are fixed: the hero, devices and closing band sit on the dark ground in both themes. */
.stage,.hero,.closing{background:var(--a-stage);color:var(--a-on-stage)}

/* Header */
.top{background:var(--a-stage);color:var(--a-on-stage)}
.top__inner{width:min(var(--a-wrap),100% - 2*var(--a-gutter));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--a-s-6);min-height:72px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:var(--a-s-2);text-decoration:none;font-size:20px;font-weight:600;letter-spacing:-.03em}
.brand svg{width:30px;height:30px;color:var(--a-on-stage-accent)}
.top__nav{display:flex;flex-wrap:wrap;gap:var(--a-s-2) var(--a-s-6);align-items:center}
.top__nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--a-fs-small);text-decoration:none;color:var(--a-on-stage-2)}
.top__nav a:hover{color:var(--a-on-stage)}

/* Buttons. Flat, one fill, 48px targets. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--a-s-6);border-radius:var(--a-r-pill);font:600 var(--a-fs-body)/1 var(--a-font-sans);text-decoration:none;transition:transform 120ms var(--a-ease),background-color 200ms var(--a-ease)}
.btn:active{transform:scale(.97)}
.btn--solid{background:var(--a-on-stage-accent);color:#06201c}
.btn--text{color:inherit;padding:0 var(--a-s-2);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
@media (hover:hover) and (pointer:fine){.btn--solid:hover{background:#7fe2d4}}

/* Hero */
.hero{padding:clamp(48px,8vw,112px) 0 0;overflow:clip}
.hero__copy,.hero__device{width:min(var(--a-wrap),100% - 2*var(--a-gutter));margin-inline:auto}
.hero__copy{display:grid;gap:var(--a-s-5);justify-items:start}
.hero__lead{font-size:var(--a-fs-lead);line-height:1.5;color:var(--a-on-stage-2);max-width:30em}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--a-s-3) var(--a-s-5);margin-top:var(--a-s-2)}
.hero__note{font-size:var(--a-fs-small);color:var(--a-on-stage-2)}
.hero__device{margin-top:clamp(40px,6vw,88px);margin-bottom:-12%;border-radius:var(--a-r-device);overflow:hidden;background:var(--a-surface)}
.hero__device img{width:100%}
@media (max-width:800px){.hero__device{margin-bottom:-6%}}

/* Shared layout for reading sections (follow the OS theme) */
main section{padding-block:var(--a-section)}
.show,.split,.price,.faq{width:min(var(--a-wrap),100% - 2*var(--a-gutter));margin-inline:auto}
.show__head{display:grid;gap:var(--a-s-5);max-width:40em}
.show__head p,.split__copy p,.price__head p{font-size:var(--a-fs-body);color:var(--a-ink-2)}
.show__stage{position:relative;margin-top:var(--a-s-7);border-radius:var(--a-r-device);overflow:hidden;background:var(--a-surface)}
.show__panel img{width:100%}
.show__panel{transition:none}
.show__switch{display:flex;gap:var(--a-s-2);margin-top:var(--a-s-5)}
.switch{min-height:48px;padding:0 var(--a-s-5);border-radius:var(--a-r-pill);border:0;background:var(--a-surface);color:var(--a-ink);font:600 var(--a-fs-small)/1 var(--a-font-sans);cursor:pointer;transition:background-color 200ms var(--a-ease)}
.switch[aria-pressed="true"]{background:var(--a-ink);color:var(--a-bg)}
.switch:active{transform:scale(.97)}
.switch:focus-visible{outline:3px solid var(--a-focus);outline-offset:3px}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start;background:var(--a-surface);border-radius:var(--a-r-device);padding:clamp(32px,5vw,72px);margin-block:var(--a-section);width:min(var(--a-wrap),100% - 2*var(--a-gutter))}
.split__copy{display:grid;gap:var(--a-s-5)}
.split__note{font-size:var(--a-fs-small);color:var(--a-ink-2)}
.text-link{display:inline-flex;align-items:center;min-height:48px;font-weight:600;color:var(--a-accent)}
.band{margin:var(--a-s-7) auto 0;width:min(var(--a-wrap),100% - 2*var(--a-gutter));border-radius:var(--a-r-device);overflow:hidden;background:var(--a-surface)}
.band img{width:100%;height:auto}
.rows{list-style:none;display:grid;gap:var(--a-s-6)}
.rows li{display:grid;gap:var(--a-s-2)}
.rows strong{font-size:var(--a-fs-h3);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.rows span{color:var(--a-ink-2)}

/* Devices stage */
.stage{padding-block:var(--a-section)}
.stage__inner{width:min(var(--a-wrap),100% - 2*var(--a-gutter));margin-inline:auto}
.platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a-s-7);margin-top:var(--a-s-7)}
.platform{display:grid;gap:var(--a-s-3)}
.platform h3{font-size:var(--a-fs-h2);letter-spacing:-.04em;font-weight:500;line-height:1}
.platform p{color:var(--a-on-stage-2)}
.stage__note{margin-top:var(--a-s-8);max-width:40em;color:var(--a-on-stage-2);font-size:var(--a-fs-small)}
.stage__note a{color:var(--a-on-stage-accent)}

/* Pricing */
.price{display:grid;gap:var(--a-s-7)}
.price__head{display:grid;gap:var(--a-s-5)}
.price__plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a-s-5)}
.plan{display:grid;gap:var(--a-s-3);padding:var(--a-s-7);border-radius:var(--a-r-device);background:var(--a-surface)}
.plan dt{font-weight:600;font-size:var(--a-fs-h3)}
.plan dd{color:var(--a-ink-2)}
.plan strong{display:block;font-size:var(--a-fs-h2);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--a-ink)}
.plan__save{font-size:var(--a-fs-small)}
.price__trial{color:var(--a-ink-2);font-size:var(--a-fs-small)}
.price__trial a{color:var(--a-accent);font-weight:600}

/* Questions */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--a-s-7);align-items:start}
.faq h2{max-width:none}
.faq__list details{padding:var(--a-s-5) 0;border-bottom:0}
.faq__list details+details{margin-top:var(--a-s-2)}
.faq__list summary{min-height:48px;display:flex;align-items:center;font-weight:600;font-size:var(--a-fs-body);cursor:pointer;list-style:none}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list details p{padding-top:var(--a-s-2);color:var(--a-ink-2)}
.faq__list a{color:var(--a-accent)}

/* Closing */
.closing{padding-block:var(--a-section)}
.closing h2{max-width:22ch;font-size:var(--a-fs-h2);line-height:1.04;letter-spacing:-.05em;width:min(var(--a-wrap),100% - 2*var(--a-gutter));margin-inline:auto}
.closing__actions{display:flex;flex-wrap:wrap;gap:var(--a-s-3) var(--a-s-5);width:min(var(--a-wrap),100% - 2*var(--a-gutter));margin:var(--a-s-6) auto 0}

/* Footer */
.foot{background:var(--a-surface);color:var(--a-ink-2);font-size:var(--a-fs-small)}
.foot__inner{width:min(var(--a-wrap),100% - 2*var(--a-gutter));margin-inline:auto;padding-block:var(--a-s-7);display:grid;gap:var(--a-s-4)}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--a-s-2) var(--a-s-5)}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--a-ink)}

/* Tablet and phone: each section is its own composition, not a squeezed desktop */
@media (max-width:900px){
  .platforms{grid-template-columns:1fr;gap:var(--a-s-6)}
  .split{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .price__plans{grid-template-columns:1fr}
}
@media (max-width:520px){
  .top__inner{min-height:0;padding-block:var(--a-s-4)}
  .top__nav{gap:0 var(--a-s-4)}
  .top__nav a{font-size:14px}
  h1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .split{padding:var(--a-s-6) var(--a-s-5)}
  .plan{padding:var(--a-s-6) var(--a-s-5)}
}

/* Motion: entrances and feedback come from motion.js and motion.css. Reduced motion keeps every move
   at opacity only (motion.css). Nothing here animates. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Aulendra app icon: the real mark, self-contained tile that reads on light and dark. */
.brand__mark,.foot__mark{flex:none;width:32px;height:32px;border-radius:22%;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12)}
.foot__mark{width:28px;height:28px;margin-bottom:var(--a-s-2)}