/* =====================================================================
   static/css/brand-auth-legal.css  (rebrand 2026-11)
   Page layouts for the account, system and legal pages on the new brand:
   signup, login, reset-password, the MCP consent screen, the /get/ email
   gate, the 404 page and the legal pages (terms, privacy, do-not-sell).
   Loaded after brand/_head.html (tokens.css + brand.css, and realui.css
   where a page shows a product visual). Tokens only: every value here
   comes from static/brand/tokens.css. Rules: static/brand/BRAND.md.
   ===================================================================== */

/* ---------- toast used by static/js/notifications.js (#notification) ---------- */
.notification{position:fixed;right:20px;bottom:20px;z-index:9999;max-width:min(420px,calc(100vw - 40px));padding:12px 16px 12px 40px;border-radius:var(--r-s);background:var(--ink);color:#fff;font:400 14.5px/1.45 var(--f);box-shadow:0 18px 40px -16px rgba(12,12,13,.55);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--t-ui),transform var(--t-ui)}
.notification::before{content:"";position:absolute;left:14px;top:14px;width:16px;height:16px;border-radius:50%;background:var(--ok) no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.notification.error::before{background:var(--red) no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E")}
.notification:empty{display:none}
.notification.show{opacity:1;transform:none;pointer-events:auto}
.flashes{max-width:420px;margin:16px auto 0;padding:0 var(--gut)}
.flashes li{padding:12px 14px;border-radius:var(--r-s);background:var(--sand);font-size:var(--fs-sm);color:var(--ink-2)}
.flashes li+li{margin-top:8px}

/* ---------- notices ---------- */
.au-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-s);background:var(--sand);font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2);text-align:left}
.au-note .ico{width:16px;height:16px;margin-top:2px;color:var(--ink)}
.au-note b,.au-note strong{color:var(--ink);font-weight:600}
.au-note.r{background:var(--red-wash);color:var(--ink)}
.au-note.r .ico{color:var(--red-2)}
.au-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
.au-note p+p{margin-top:6px}

/* =====================================================================
   AUTH SHELL: signup, login, reset-password, MCP consent
   A focused page: logo bar, the form, and (signup, login) one framed
   product visual beside it.
   ===================================================================== */
.au-top{position:relative;z-index:5}
.au-top-in{max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut);height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.au-top .small{color:var(--muted);text-align:right}
.au-top .small a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint);transition:text-decoration-color var(--t-fast)}
.au-top .small a:hover{text-decoration-color:var(--ink)}
.au-wash{position:absolute;inset:0 0 auto;height:720px;z-index:-1;pointer-events:none;background:radial-gradient(50% 60% at 6% 0%,rgba(255,196,160,.40),rgba(255,196,160,0) 70%),radial-gradient(40% 50% at 46% 0%,rgba(255,170,150,.22),rgba(255,170,150,0) 70%)}
.au-page{position:relative;isolation:isolate;min-height:100vh;display:flex;flex-direction:column}
.au-main{flex:1;display:flex}
.au-grid{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:8px var(--gut) 32px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,80px);align-items:stretch}
.au-col{display:flex;flex-direction:column;justify-content:center;padding:24px 0 40px}
.au-form{width:100%;max-width:400px;margin:0 auto}
.au-h{font-size:clamp(32px,2.9vw,42px);line-height:1.06;letter-spacing:-.032em}
.au-lead{margin-top:16px;font-size:17px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.au-block{margin-top:32px}
.au-gsi{display:flex;justify-content:center;min-height:44px}
.au-or{margin:22px 0 18px;text-align:center;font-size:var(--fs-cap);color:var(--muted)}
.au-form .field+.field{margin-top:14px}
.au-help{font-size:var(--fs-cap);line-height:1.5;color:var(--ink-2);margin-top:2px}
.au-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.au-label-row a{font-size:var(--fs-cap);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
.au-label-row a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.cf-turnstile-container{margin-top:16px;display:flex;justify-content:center;min-height:0}
.au-submit{margin-top:20px}
.au-bill{margin-top:12px;font-size:var(--fs-cap);line-height:1.5;color:var(--ink-2);text-align:center}
.au-bill a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
.au-form .meta{margin-top:16px;gap:6px 18px;font-size:13.5px}
.au-alt{margin-top:28px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);text-align:center}
.au-alt a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint);transition:text-decoration-color var(--t-fast)}
.au-alt a:hover{text-decoration-color:var(--ink)}
.au-founder{display:flex;gap:14px;align-items:center;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.au-founder img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.au-founder blockquote{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2)}
.au-founder figcaption{margin-top:4px;font-size:var(--fs-cap);color:var(--muted)}
.au-founder figcaption b{color:var(--ink);font-weight:600}
.au-form .au-note{margin-top:20px}

/* the framed product visual beside the form */
.au-side{padding:8px 0 24px;display:flex}
.au-frame{flex:1;min-height:min(780px,calc(100vh - 116px));display:flex;flex-direction:column;justify-content:center;gap:20px;padding:44px}
.au-frame>.win{width:100%;max-width:640px;margin:0 auto}
/* "Example data" sits on the app window only, never on the real testimonial below it */
.au-exwrap{position:relative;width:100%;max-width:640px;margin:0 auto}
.au-exwrap>.win{width:100%}
.au-exwrap>.ex.top{top:-24px;right:6px}
/* a submit <input> given .btn: drop the browser bevel so it matches brand buttons */
input.btn{border:0;-webkit-appearance:none;appearance:none;cursor:pointer}
.au-app{height:376px}
.au-app .d-main{height:100%}
.au-app .d-h{font-size:20px}
.au-app .cn{margin-top:4px}
.au-app .cn-url{margin:16px 0 12px}
.au-app .cms{gap:8px}
.au-app .cms>div{height:44px}
.au-app .cn-st{margin-top:12px}
.au-app .cn-st>div{height:36px}
.au-app .cal{gap:12px 10px}
.au-app .db-an{padding:16px 18px}
.au-frame .st-card{width:100%;max-width:640px;margin:0 auto}

/* login: one wide dashboard window */
.au-frame.dash .au-app{height:574px}

/* =====================================================================
   Testimonial card (components/signup-testimonial.html)
   ===================================================================== */
.st-card{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:center;padding:12px 20px 12px 12px;border-radius:20px;background:var(--paper);box-shadow:var(--sh-2);text-align:left}
.st-media{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--sand);cursor:pointer}
.st-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.st-media:hover img{transform:scale(1.04)}
.st-play{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 3px;border-radius:var(--r-full);background:rgba(255,255,255,.94);font:500 12.5px/1 var(--f);color:var(--ink);box-shadow:0 8px 20px -10px rgba(30,20,10,.5)}
.st-play i{width:24px;height:24px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.st-play svg{width:10px;height:10px;color:#fff;margin-left:1px}
.st-quote{font-size:15px;line-height:1.5;color:var(--ink);letter-spacing:-.005em}
.st-meta{margin-top:10px;font-size:13.5px;line-height:1.4}
.st-meta b{font-weight:600;color:var(--ink)}
.st-meta span{color:var(--muted)}
.st-modal .exm-in{background:#000;overflow:hidden}
.st-modal video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.st-modal .exm-x{position:absolute;top:12px;right:12px;margin:0;float:none;background:rgba(255,255,255,.92)}

/* =====================================================================
   Password reset modal on /login (#resetModal, shown by the page script)
   ===================================================================== */
.au-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(12,12,13,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.au-modal-in{position:relative;width:min(460px,100%);padding:36px 32px 32px;border-radius:var(--r-m);background:var(--paper);box-shadow:var(--sh-2)}
.au-modal-in h2{font-size:var(--fs-t1);line-height:1.2;letter-spacing:-.02em}
.au-modal-in p{margin-top:10px;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2)}
.au-modal-in form{margin-top:22px}
.au-modal .close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font-size:24px;line-height:1;color:var(--ink);cursor:pointer}
.au-modal .close:hover{background:var(--line)}

/* =====================================================================
   Narrow single-column auth (reset-password, MCP consent)
   ===================================================================== */
.au-solo{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:clamp(24px,7vh,88px) var(--gut) 72px}
.au-card{width:100%;max-width:460px}
.au-card .au-h{font-size:clamp(32px,3vw,40px)}
.au-card .go{margin-top:20px}
.au-reqs-w{margin-top:12px;padding:14px 16px;border-radius:var(--r-s);background:var(--sand)}
.au-reqs-w strong{display:block;font-size:var(--fs-cap);font-weight:600;color:var(--ink)}
.au-reqs{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.au-reqs li{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.35;color:var(--ink-2);transition:color var(--t-fast)}
.au-reqs li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background var(--t-ui),box-shadow var(--t-ui)}
.au-reqs li.ok{color:var(--ink)}
.au-reqs li.ok::before{box-shadow:none;background:var(--ok) no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.au-msg{margin-top:12px;font-size:var(--fs-sm);line-height:1.5;color:var(--red-2)}

/* MCP consent: the two apps and the link between them */
.cx{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:34px}
.cx .tile{--ts:64px;border-radius:18px}
.cx .tile.dd{background:var(--paper)}
.cx .tile.dd .dot{width:24px;height:24px}
.cx-line{position:relative;width:92px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
.cx-line i{position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(225,29,42,.14);animation:cx 2.4s var(--ease-io) infinite}
.cx-line i:nth-child(2){animation-delay:1.2s}
@keyframes cx{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.mc-card{border-radius:var(--r-m);background:var(--paper);box-shadow:var(--sh-1);padding:36px 32px 32px}
.mc-card .au-h{font-size:clamp(28px,2.6vw,34px);text-align:center}
.mc-card .au-lead{text-align:center;font-size:16px}
.mc-card .ticks{margin-top:24px;gap:11px}
.mc-card .ticks li{font-size:15px}
.mc-acct{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:var(--fs-cap);color:var(--muted)}
.mc-acct b{color:var(--ink);font-weight:600}
.mc-go{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.mc-go .btn{width:100%}

/* =====================================================================
   /get/<slug> email gate
   ===================================================================== */
.gt .d1{font-size:clamp(36px,4.2vw,58px);max-width:900px;margin:0 auto}
.gt .lead{max-width:640px;margin:22px auto 0}
.gt .url{margin-top:34px}
.gt-err{min-height:22px;margin-top:12px;font-size:var(--fs-sm);color:var(--red-2);text-align:center}
.gt .cap{text-align:center}
.gt-stage{max-width:980px;margin:56px auto 0;padding-bottom:clamp(48px,8vw,96px)}
.gt-stage .frame{min-height:0;padding:56px 56px 0;display:block}
.gt-stage .win.gml{height:430px;border-radius:16px 16px 0 0;max-width:none}
.gt-stage .gml-row.fresh .sb b{color:#1f1f1f}

/* =====================================================================
   404 (and 410): the final-CTA art frame as the page itself
   ===================================================================== */
.nf{padding:calc(var(--nav-h) + 28px) 0 calc(var(--sec)*.6)}
.nf .cta-frame{min-height:640px;padding:96px 32px 220px}
.nf-path{padding:2px 8px;border-radius:8px;background:rgba(255,255,255,.14);font:500 .88em/1.7 var(--f-mono);color:#fff;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nf .btn-line{background:rgba(40,10,6,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.nf .btn-line:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.nf .btn-dark{background:#fff;color:var(--ink);box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
.nf .btn-dark:hover{background:var(--page)}
.nf-more{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:40px;font-size:var(--fs-sm)}
.nf-more a{color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;transition:color var(--t-fast)}
.nf-more a:hover{color:var(--ink)}
.nf-more svg{width:14px;height:14px;color:var(--red)}

/* =====================================================================
   Legal pages: terms, privacy, do-not-sell
   ===================================================================== */
.lg-hero{padding:calc(var(--nav-h) + 96px) 0 0}
.lg-hero .d2{max-width:820px}
.lg-hero .cap{margin-top:18px;font-size:var(--fs-sm)}
.lg-hero .cap strong{font-weight:500;color:var(--ink-2)}
.lg-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(40px,6vw,96px);margin-top:64px;padding-bottom:var(--sec);align-items:start}
.lg-body.solo{grid-template-columns:minmax(0,1fr)}
.lg-toc{position:sticky;top:calc(var(--nav-h) + 28px);max-height:calc(100vh - var(--nav-h) - 56px);overflow:auto;padding-right:8px}
.lg-toc h2{font-size:var(--fs-cap);font-weight:600;color:var(--ink);letter-spacing:.01em}
.lg-toc ol{margin-top:14px;display:grid;gap:9px}
.lg-toc a{display:block;font-size:14px;line-height:1.4;color:var(--muted);transition:color var(--t-fast)}
.lg-toc a:hover,.lg-toc a.on{color:var(--ink)}
.lg-toc details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lg-toc details summary::after{content:"";width:14px;height:14px;flex:none;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8A84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");transition:transform var(--t-ui)}
.lg-toc details[open] summary::after{transform:rotate(180deg)}
@media (min-width:901px){.lg-toc details summary{pointer-events:none;cursor:default}.lg-toc details summary::after{display:none}}
.lg-body .prose ul.lettered li{padding-left:0}
.lg-body .prose ul.lettered li::before{display:none}
.lg-toc details summary::-webkit-details-marker{display:none}
.lg-body .prose{max-width:720px;font-size:17px}
.lg-body .prose>p:first-child{margin-top:0}
.lg-body .prose h2{scroll-margin-top:calc(var(--nav-h) + 24px)}
.lg-body .prose h3{scroll-margin-top:calc(var(--nav-h) + 24px)}
.lg-body .prose h2:first-child{margin-top:0}
.lg-body .prose ul{list-style:none;padding-left:0}
.lg-body .prose ul li{position:relative;padding-left:20px}
.lg-body .prose ul li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--faint)}

/* do-not-sell request form */
.dns{margin-top:36px;max-width:560px}
.dns form{display:flex;align-items:center;gap:6px;padding:6px;background:var(--paper);border-radius:16px;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(30,20,10,.04),0 18px 40px -18px rgba(90,30,10,.28)}
.dns form:focus-within{box-shadow:0 0 0 1px var(--faint),0 0 0 5px rgba(225,29,42,.10),0 18px 40px -18px rgba(90,30,10,.28)}
.dns input{flex:1;min-width:0;height:48px;border:0;outline:0;background:transparent;padding:0 14px;font:400 16px var(--f);color:var(--ink)}
.dns input::placeholder{color:var(--faint)}
#form-message:empty{display:none}
#form-message{margin-top:12px;font-size:var(--fs-sm);color:var(--ink-2)}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .au-frame{padding:32px}
}
@media (max-width:900px){
  .au-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .au-col{padding:8px 0 24px}
  .au-side{padding-top:0}
  .au-frame{min-height:0}
  .lg-body{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:40px}
  .lg-toc{position:static;max-height:none;overflow:visible;padding:16px 18px;border-radius:var(--r-s);background:var(--sand)}
  .lg-toc ol{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .au-top-in{height:64px}
  .au-top .small span{display:none}
  .au-h{font-size:34px}
  .au-lead{font-size:16px}
  .au-block{margin-top:26px}
  .au-frame{padding:40px 12px 12px;gap:12px;border-radius:24px}
  .au-frame>.ex.top{top:13px;right:18px}
  .au-exwrap>.ex.top{top:-27px;right:6px}
  .au-app{height:420px}
  .au-frame.dash .au-app{height:600px}
  .st-card{grid-template-columns:minmax(0,1fr);padding:10px 10px 18px;gap:14px}
  .st-card .st-body{padding:0 6px}
  .au-modal-in{padding:28px 20px 22px}
  .au-reqs{grid-template-columns:minmax(0,1fr)}
  .mc-card{padding:28px 20px 22px}
  .mc-go{grid-template-columns:minmax(0,1fr)}
  .mc-go .btn-dark{order:-1}
  .gt-stage{margin-top:40px}
  .gt-stage .frame{padding:36px 12px 0}
  .gt-stage .win.gml{height:auto;min-height:380px}
  .nf .cta-frame{min-height:0;padding:64px 18px 180px}
  .lg-hero{padding-top:calc(var(--nav-h) + 56px)}
  .lg-body .prose{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  .cx-line i{animation:none;left:calc(50% - 4px);opacity:1}
  .cx-line i:nth-child(2){display:none}
}