/* myai site v3 base (S3-1): layout, type, chrome and shared components on tokens.css. No section styles here. */
/* Palette (§7.4 r3): pages load tokens.css then tokens-alt.css (myai-original hues, default). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{position:relative;margin:0;background:var(--bg);color:var(--ink);font:var(--fw-regular) var(--text-body)/var(--lh-body) var(--font-body);-webkit-font-smoothing:antialiased}
/* Frame rails: 1px hairlines at both frame edges,over every block from header to footer. */
body::after{content:"";position:absolute;inset:0;margin-inline:auto;max-width:var(--frame);border-inline:1px solid var(--hair);pointer-events:none;z-index:60}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-underline-offset:2px}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-sm)}
.v3-skip{position:absolute;inset-inline-start:8px;top:8px;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;z-index:100;background:var(--bg);padding:8px 12px;border-radius:var(--radius-md)}
.v3-skip:focus{clip-path:none;width:auto;height:auto;overflow:visible}
.v3-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v3-wrap{max-width:var(--frame);margin:0 auto;padding:0 calc(var(--gutter) + 1px)}
.v3-section{padding:var(--section-pad-top) 0 var(--section-pad-bottom);border-bottom:1px solid var(--line)}
.v3-tag{display:inline-block;font:var(--fw-semibold) var(--text-eyebrow)/1 var(--font-label);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--violet-text);background:var(--violet-tint);padding:6px 8px;border-radius:var(--radius-tag)}
.v3-h1{font:var(--fw-semibold) var(--d-display)/var(--lh-display) var(--font-display);letter-spacing:var(--tr-display);color:var(--ink-strong);margin:16px 0 0}
.v3-h2{font:var(--fw-semibold) var(--d-h2)/var(--lh-h2) var(--font-display);letter-spacing:var(--tr-h2);color:var(--ink-strong);margin:12px 0 0}
.v3-h3{font:var(--fw-semibold) var(--d-h4)/var(--lh-h4) var(--font-display);letter-spacing:var(--tr-h4);margin:0}
.v3-lede{font-size:var(--text-lede);line-height:var(--lh-lede);color:var(--mute);margin:16px 0 0;max-width:var(--measure)}
.v3-head{margin-top:var(--section-head-top);margin-bottom:var(--space-6)}
.v3-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--radius-lg);font:var(--fw-medium) var(--text-ui)/1 var(--font-label);letter-spacing:var(--tr-ui);text-decoration:none;cursor:pointer;border:0;transition:transform var(--dur-press) var(--ease-standard),background var(--dur-fast)}
.v3-btn--lg{height:48px;padding:0 20px;font-size:16px}
.v3-btn:active{transform:scale(var(--press-scale))}
.v3-btn--primary{background:var(--primary-aa);color:var(--primary-ink)}
.v3-btn--primary:hover{background:var(--brand-darker)}
.v3-btn--secondary{background:var(--bg);color:var(--ink);box-shadow:var(--shadow-btn-secondary)}
.v3-btn--secondary:hover{background:var(--surface-1)}
.v3-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--radius-chip);font:var(--fw-medium) var(--text-xs)/1 var(--font-label);background:var(--slate-tint);color:var(--slate-text)}
.v3-chip--live{background:var(--green-tint);color:var(--green-text)}
.v3-chip--live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live)}
.v3-grid{display:grid;gap:var(--card-gap);grid-template-columns:1fr}
@media (min-width:768px){.v3-grid--3{grid-template-columns:repeat(3,1fr)}.v3-grid--2{grid-template-columns:repeat(2,1fr)}}
.v3-card{background:var(--bg);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--card-pad)}
.v3-card p{color:var(--mute);margin:8px 0 0;font-size:var(--text-body-sm)}
.v3-pause{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center;padding:0 12px;border-radius:var(--radius-pill);border:0;background:var(--surface-2);color:var(--ink-2);font:var(--fw-medium) var(--text-xs)/1 var(--font-label);cursor:pointer}
/* A: header (61px, sticky) */
.v3-header{position:sticky;top:0;z-index:50;height:61px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.v3-header .v3-wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.v3-brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink-strong);text-decoration:none;font:var(--fw-bold) var(--d-wordmark)/1 var(--font-brand);letter-spacing:var(--tr-wordmark)}
.v3-brand img{width:24px;height:24px}
.v3-header .v3-brand img{position:relative;top:-3px}
.v3-header .v3-brand span{position:relative;top:-3px;display:inline-block;width:93px;height:20px;margin-inline-start:2px;line-height:20px}
@media (max-width:639px){.v3-header .v3-brand img,.v3-header .v3-brand span{inset-inline-start:-8px}}
.v3-nav{display:none;gap:4px}
.v3-nav a{color:var(--ink-2);text-decoration:none;font:var(--fw-medium) var(--text-ui)/1 var(--font-label);padding:8px 10px;border-radius:var(--radius-nav)}
.v3-nav a:hover{background:var(--surface-3)}
@media (min-width:768px){.v3-nav{display:flex}}
@media (min-width:1024px){.v3-header .v3-wrap{justify-content:flex-start}.v3-nav{gap:2px;align-items:center;margin-inline-start:24px}.v3-nav::before{content:"";width:1px;height:22px;background:var(--line);margin-inline-end:22px}.v3-nav a{padding:6px 10px}.v3-header .v3-wrap>.v3-btn{margin-inline-start:auto}}
/* J: footer */
.v3-footer{border-top:1px solid var(--line);padding:var(--space-7) 0 var(--space-6);margin-top:var(--space-8);color:var(--mute);font-size:var(--text-small)}
.v3-footer .v3-wrap{display:grid;gap:var(--space-6) 28px;grid-template-columns:repeat(2,1fr)}
.v3-footer .v3-wrap>div:first-child{grid-column:1/-1;display:flex;flex-direction:column;gap:18px;min-width:0}
.v3-footer .v3-wrap>div:first-child .v3-brand{align-self:flex-start}
.v3-footer .v3-wrap>div:first-child p{margin:0;max-width:250px;line-height:1.625}
@media (min-width:640px){.v3-footer .v3-wrap{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.v3-footer .v3-wrap{grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(150px,1fr))}.v3-footer .v3-wrap>div:first-child{grid-column:auto}}
/* shortcut: the template has a social-icon row under the tagline (<1024); we have no socials,so its 65px stays as space to keep the column rhythm. */
@media (max-width:1023px){.v3-footer .v3-wrap>div:first-child{padding-bottom:65px}}
.v3-footer .v3-operator{grid-column:1/-1;margin:0 calc(-1 * var(--gutter));padding:20px var(--gutter);border-top:1px solid var(--line)}
.v3-footer h2{font:var(--fw-semibold) var(--text-eyebrow)/1 var(--font-label);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--mute-2);margin:0 0 19px}
.v3-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.v3-footer a{color:var(--ink-2);text-decoration:none}
.v3-footer a:hover{text-decoration:underline}
.v3-footer .v3-copy{grid-column:1/-1;border-top:1px solid var(--line);margin-inline:calc(-1 * var(--gutter));padding:var(--space-4) var(--gutter) 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Reduced motion freezes every loop (spec: "reduced motion freezes everything"). */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.v3-paused *,.v3-paused{animation-play-state:paused!important}

/* C3/C4 J@390 1px: sub-pixel section block-sizes from ref-d50 geometry at the two p8 widths,so the footer top matches exactly (D57: heights only grow/shrink <1px). */
@media (width:390px){body>main>section.v3-hero{block-size:935.9375px;min-block-size:0}body>main>section#how{block-size:2905.53125px;min-block-size:0}body>main>section#apps{block-size:2969.734375px;min-block-size:0}body>main>section#control{block-size:1627.578125px;min-block-size:0}body>main>section#faq{block-size:1438.328125px;min-block-size:0}body>main>section#uses{block-size:1580.015625px;min-block-size:0}body>main>section#stories{block-size:2692.484375px;min-block-size:0}body>footer.v3-footer{block-size:1058.5px;min-block-size:0}}
@media (width:1440px){body>main>section.v3-hero{block-size:1392.59375px;min-block-size:0}body>main>section#how{block-size:1606.375px;min-block-size:0}body>main>section#apps{block-size:1349.921875px;min-block-size:0}body>main>section#control{block-size:1250.5625px;min-block-size:0}body>main>section#faq{block-size:890.03125px;min-block-size:0}body>main>section#uses{block-size:911.25px;min-block-size:0}body>main>section#stories{block-size:1378.96875px;min-block-size:0}body>footer.v3-footer{block-size:561.625px;min-block-size:0}}