/* Aulendra secondary pages: contact, support, not-found, account and invitation.
   Written against tokens.css (--a-*) only. The opening band sits on the stage
   ground, the way the home hero does; everything below it reads on the theme
   background. No rule here is shared with the home page. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.page{margin:0;background:var(--a-bg);color:var(--a-ink);
  font:400 var(--a-fs-body)/1.65 var(--a-font-sans);-webkit-font-smoothing:antialiased;
  /* no grey flash on tap, and no 300ms wait before a control responds */
  -webkit-tap-highlight-color:transparent;overflow-x:clip}
a,button,summary,input,textarea,label,.btn{touch-action:manipulation}
h1,h2,h3,p,dl,dt,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)}
.wrap{width:min(var(--a-wrap),100% - 2*var(--a-gutter));margin-inline:auto}

/* Type. One face, three sizes doing the work; the serif is for one phrase in a heading. */
h1{font-size:var(--a-fs-display);line-height:.98;letter-spacing:-.055em;font-weight:500;max-width:15ch}
h2{font-size:var(--a-fs-h2);line-height:1.05;letter-spacing:-.04em;font-weight:500;max-width:20ch}
h3{font-size:var(--a-fs-h3);line-height:1.2;letter-spacing:-.02em;font-weight:600}
p{max-width:36em}
em{font-family:var(--a-font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
h1 em,h2 em{display:block;font-size:.62em;line-height:1.15;margin-top:.18em;letter-spacing:-.03em}

/* Shell. The bar and the footer are the site's, so a secondary page still reads as Aulendra. */
.top{background:var(--a-stage);color:var(--a-on-stage)}
.top__inner{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-3);font-size:21px;font-weight:600;letter-spacing:-.04em;text-decoration:none}
.brand svg{width:32px;height:32px;color:var(--a-on-stage-accent)}
.top__nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a-s-2) var(--a-s-6)}
.top__nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:none;color:var(--a-on-stage-2)}
@media(hover:hover) and (pointer:fine){.top__nav a:hover{color:var(--a-on-stage)}}
.top__nav [aria-current="page"]{color:var(--a-on-stage);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
.foot{background:var(--a-surface);color:var(--a-ink-2);font-size:var(--a-fs-small)}
.foot__inner{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)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--a-s-6);
  border:1px solid transparent;border-radius:var(--a-r-pill);font:600 16px/1 var(--a-font-sans);text-decoration:none;
  transition:transform var(--a-d-press) var(--a-ease),background-color var(--a-d-fast) var(--a-ease)}
.btn:active{transform:scale(.97)}
.btn--solid{background:var(--a-accent);color:var(--a-accent-ink)}
.btn--solid:disabled{cursor:wait;opacity:.7}
.btn--ghost{background:transparent;border-color:currentColor;color:var(--a-on-stage);padding:0 var(--a-s-5)}
@media(hover:hover) and (pointer:fine){.btn--solid:hover{transform:translate3d(0,-1px,0)}}
@media(prefers-reduced-motion:reduce){
  .btn,.btn:active{transition:opacity var(--a-d-press) linear}
  .btn:active,.btn--solid:hover{transform:none}
}

/* Opening. Always on the stage ground, so every secondary page starts in the same place. */
.opening{background:var(--a-stage);color:var(--a-on-stage);padding-block:clamp(var(--a-s-8),7vw,var(--a-s-9)) clamp(var(--a-s-7),6vw,var(--a-s-8))}
.opening p{color:var(--a-on-stage-2)}
.opening__lead{margin-top:var(--a-s-5);font-size:var(--a-fs-lead);line-height:1.5;max-width:34em}
.opening__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a-s-4) var(--a-s-5);margin-top:var(--a-s-6)}

/* Reading layout: the work on the left, the supporting column beside it. */
.spread{padding-block:var(--a-section)}
.spread__inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);gap:clamp(var(--a-s-6),6vw,var(--a-s-9));align-items:start}
.spread__main h2+p{margin-top:var(--a-s-4)}
.spread__side{padding-top:var(--a-s-1)}

/* The supporting column: small print, never competing with the main column. */
.brief{font-size:var(--a-fs-small);line-height:1.6;color:var(--a-ink-2)}
.brief h2{font-size:var(--a-fs-h3);line-height:1.2;color:var(--a-ink);max-width:none}
.brief h2:not(:first-child){margin-top:var(--a-s-7)}
.brief p{margin-top:var(--a-s-3);max-width:34em}
.brief a{color:var(--a-accent)}
.datum{margin-top:var(--a-s-5);display:grid;gap:var(--a-s-3)}
.datum__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--a-s-5)}
.datum__label{color:var(--a-ink-2)}
.datum__value{font-weight:600;text-align:right;color:var(--a-ink)}

/* ------------------------------------------------------------------- The form
   Labels sit above their fields and stay visible: no floating label, nothing
   for a screen reader to miss. The form is deliberately outside the motion
   language, so only colour and border ever change. */
.request{margin-top:var(--a-s-6)}
.request__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--a-s-5);margin-bottom:var(--a-s-5)}
.control{display:block;margin-bottom:var(--a-s-5)}
.request__pair>.control{margin-bottom:0}
.control__label{display:block;margin-bottom:var(--a-s-2);font-size:var(--a-fs-label);font-weight:600;color:var(--a-ink)}
.control__hint{display:block;margin-top:var(--a-s-2);font-size:var(--a-fs-small);color:var(--a-ink-2)}
.control input,.control textarea{display:block;width:100%;min-height:var(--a-target);padding:var(--a-s-3) var(--a-s-4);
  border:1px solid var(--a-line);border-radius:var(--a-r-1);background:var(--a-raised);color:var(--a-ink);
  font-family:var(--a-font-sans);line-height:1.5;
  /* 16px floor: a smaller field makes iOS Safari zoom the page on focus. */
  font-size:max(16px,var(--a-fs-body));
  transition:border-color var(--a-d-fast) var(--a-ease)}
.control textarea{min-height:11rem;resize:vertical}
.control input:focus-visible,.control textarea:focus-visible{border-color:var(--a-accent);outline:3px solid var(--a-focus);outline-offset:2px}
.control input:user-invalid,.control textarea:user-invalid,.control [aria-invalid="true"]{border-color:var(--a-error)}

/* Off-screen rather than hidden, so a simple bot still fills it in. The
   Turnstile mount stays on screen: a challenge has to be reachable. */
.request__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.request__challenge{margin-top:var(--a-s-6)}
.request__note{max-width:34em;font-size:var(--a-fs-small);line-height:1.6;color:var(--a-ink-2)}
.request__note a{color:var(--a-accent)}
.request__action{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a-s-4) var(--a-s-5);margin-top:var(--a-s-6)}
.request__action .btn{min-width:12rem}
/* The single live region for the form. Empty means there is nothing to announce. */
.request__outcome{margin-top:var(--a-s-5);padding:var(--a-s-3) var(--a-s-4);background:var(--a-surface);
  border-inline-start:3px solid var(--a-ink-2);color:var(--a-ink);font-size:var(--a-fs-small);line-height:1.6}
.request__outcome:empty{display:none;padding:0;background:none;border:0}
.request__outcome[data-state=done]{border-inline-start-color:var(--a-success)}
.request__outcome[data-state=failed]{border-inline-start-color:var(--a-error)}
.request noscript p,.request__fallback{margin-top:var(--a-s-5);padding:var(--a-s-3) var(--a-s-4);background:var(--a-surface);
  border-inline-start:3px solid var(--a-ink-2);font-size:var(--a-fs-small);line-height:1.6;color:var(--a-ink-2)}
.request__fallback{margin-top:var(--a-s-4)}
.request__fallback a{color:var(--a-accent)}

/* The one image on these pages: the real app, framed like the home hero device. */
.frame{margin-top:var(--a-s-5);border-radius:var(--a-r-device);overflow:hidden;box-shadow:var(--a-shadow-device)}
.frame img{display:block;width:100%;height:auto}
.frame+p{margin-top:var(--a-s-5)}

/* ------------------------------------------------------------------ Support */
.topics{margin-top:var(--a-s-6);padding:0;list-style:none;display:grid;gap:var(--a-s-7)}
.topic{max-width:36em}
.topic h3{max-width:none}
.topic p{margin-top:var(--a-s-2);color:var(--a-ink-2)}
.topic a{color:var(--a-accent);font-weight:600}

/* ---------------------------------------------------------------- Not found */
.ways{margin-top:var(--a-s-6);padding:0;list-style:none;display:grid;gap:var(--a-s-2);max-width:34em}
.way a{display:flex;flex-direction:column;justify-content:center;min-height:var(--a-target);padding:var(--a-s-3) var(--a-s-4);
  border-radius:var(--a-r-1);background:var(--a-surface);font-size:var(--a-fs-body);font-weight:600;text-decoration:none;
  transition:background-color var(--a-d-fast) var(--a-ease)}
.way__note{display:block;margin-top:var(--a-s-1);font-size:var(--a-fs-small);font-weight:400;color:var(--a-ink-2)}
@media(hover:hover) and (pointer:fine){.way a:hover{background:var(--a-raised)}}

/* ------------------------------------------- Account and invitation, two panels
   Both open the installed app. Neither can finish the job in a browser, and
   neither suggests that it can. */
.gateway{display:grid;gap:var(--a-s-6);margin-top:var(--a-s-7);max-width:44em}
.gateway__panel{padding:clamp(var(--a-s-5),3vw,var(--a-s-7));border-radius:var(--a-r-2);background:var(--a-surface)}
.gateway__panel h2{font-size:var(--a-fs-h3);line-height:1.2;max-width:none}
.gateway__panel>p{margin-top:var(--a-s-4)}
.gateway__steps{margin:var(--a-s-5) 0 0;padding-left:var(--a-s-5);color:var(--a-ink-2);display:grid;gap:var(--a-s-3)}
.gateway__steps strong{font-weight:600;color:var(--a-ink)}
.gateway__note{margin-top:var(--a-s-5);font-size:var(--a-fs-small);line-height:1.6;color:var(--a-ink-2)}
.gateway .btn{margin-top:var(--a-s-5)}

/* Reserve the support launcher's footprint so it never covers the last footer row. */
.has-chat .foot__inner{padding-bottom:calc(var(--a-s-7) + var(--a-target) + var(--a-s-5))}

@media(max-width:820px){
  .spread__inner{grid-template-columns:1fr;gap:var(--a-s-8)}
  .spread__side{padding-top:0}
  .request__pair{grid-template-columns:1fr;gap:var(--a-s-4)}
}
@media(max-width:520px){
  .request__action .btn{width:100%}
  .datum__row{flex-direction:column;align-items:flex-start;gap:var(--a-s-1)}
  .datum__value{text-align:left}
  .foot__inner{padding-bottom:calc(var(--a-s-7) + env(safe-area-inset-bottom))}
}

/* 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)}