/* myai v3 home: hero (B), pixel strip (C) and sections D-K. Light only. */
/* A: section links from 1024 (menu below),sign in + 2 buttons at the ref-d50 header rects. */
.v3-header .v3-nav{display:none}
.v3-hact{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.v3-signin{display:none;padding:7px 8px;color:var(--ink-2);text-decoration:none;font:var(--fw-medium) 13.5px/20.25px var(--font-label)}
.v3-hact .v3-btn{display:none;justify-content:center;height:36px;padding:0;border-radius:6px;font:600 14px/20px var(--font-label)}
.v3-hact .v3-btn--secondary{width:139.72px;box-shadow:inset 0 0 0 1px #D9DBE0,0 1px 2px rgba(28,32,36,.06)}
.v3-hact .v3-btn--primary{width:82.45px;background:#1773E9}
.v3-menu{position:static;margin-inline-end:-16px}
.v3-menu summary{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:7px;cursor:pointer;list-style:none}
.v3-menu summary::-webkit-details-marker{display:none}
.v3-menu summary:hover{background:var(--surface-3)}
.v3-menu summary img{width:20px;height:20px}
.v3-menu-panel{position:absolute;inset-inline:0;top:61px;display:grid;padding:8px var(--gutter) 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.v3-menu-panel a{padding:12px 0;color:var(--ink);text-decoration:none;font:var(--fw-medium) 16px/1.25 var(--font-label)}
@media (min-width:640px){.v3-signin,.v3-hact .v3-btn--primary{display:inline-flex}.v3-menu{margin-inline-end:-8px}}
@media (min-width:768px){.v3-hact .v3-btn--secondary{display:inline-flex}}
@media (min-width:1024px){
  .v3-header .v3-nav{display:flex;gap:2px;margin-inline-start:8px}.v3-header .v3-nav::before{margin-inline-end:22px}.v3-menu{display:none}
  .v3-header .v3-nav a{display:inline-flex;align-items:center;height:32.25px;padding:0 10px;line-height:20.25px}
  .v3-header .v3-nav a:nth-child(1){width:88.64px;justify-content:center;padding:0}
  .v3-header .v3-nav a:nth-child(2){width:97.95px;justify-content:flex-end}
  .v3-header .v3-nav a:nth-child(3){width:106px;justify-content:flex-end}
  .v3-header .v3-nav a:nth-child(4){width:65.14px}
  .v3-header .v3-nav a:nth-child(5){width:94.8px}
}
.v3-hero{overflow-x:clip;padding:var(--hero-pad-top) 0 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;background:linear-gradient(var(--bg),var(--band-b-tint))}
.v3-section{border-bottom:0;border-top:1px solid var(--line)}
#how{border-top:0}
.v3-footer{margin-top:0}
/* J: operator and copyright rows sit at the foot of the block (template rules at h-218 and h-124 <768, h-166 and h-72 >=768). */
[data-sec=J]{display:flex;flex-direction:column;padding-bottom:0}
[data-sec=J]>.v3-wrap{flex:1;width:100%;grid-template-rows:auto 1fr auto auto}
[data-sec=J] .v3-copy{min-height:124px}
@media (min-width:768px){[data-sec=J] .v3-copy{min-height:72px}[data-sec=J] .v3-operator{margin-top:-6px}}
@media (min-width:1024px){[data-sec=J]>.v3-wrap{grid-template-rows:1fr auto auto}}
/* J (R20 C3/D55): mark + wordmark,quick-link icon box,own pixel panel in the third column,legal row links. */
.v3-footer .v3-brand{height:30px;align-items:flex-start;gap:10px}
.v3-footer .v3-brand span{display:inline-block;width:93px;height:20px;margin-top:2px;line-height:20px}
.v3-footer .v3-wrap>div:first-child{padding-bottom:0}
.v3-fquick{display:flex;align-self:flex-start;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.v3-fquick a{box-sizing:border-box;width:34px;height:34px;padding:10px 0 0 10px}
.v3-fquick a+a{border-inline-start:1px solid var(--line);padding-inline-start:9px}
.v3-fquick img{display:block}
.v3-footer nav h2{height:15px;margin-bottom:12px;line-height:15px}
.v3-footer nav ul{gap:9px}
.v3-footer nav li{height:24px;line-height:24px}
.v3-copy>span:first-child{display:inline-block;width:277px;height:16px;line-height:16px}
.v3-flegal{display:flex;flex-wrap:wrap;align-items:center;align-self:flex-start;gap:8px 18px;margin-inline-start:auto}
.v3-flegal>a{display:inline-block;height:16px;font:var(--fw-medium) 10.5px/16px var(--font-label);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.v3-flegal>a:nth-child(1){width:100px}.v3-flegal>a:nth-child(2){width:61px}.v3-flegal>a:nth-child(3){width:117px;margin-inline-end:-1px}
[data-sec=J] .v3-copy{align-content:flex-start}
.v3-flegal .langpick label span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.v3-flegal .langpick select{width:89px;height:19px}
@media (max-width:639px){[data-sec=J]>.v3-wrap{grid-template-rows:auto auto 1fr auto auto}.v3-flegal{margin-inline-start:0;width:100%}.v3-flegal .langpick{margin-inline:auto}}
@media (min-width:640px){.v3-copy>span:first-child{margin-top:1.5px}}
@media (min-width:1024px){.v3-copy>span:first-child{margin-top:1px}.v3-flegal>a{position:relative;top:-1px}}
.v3-hero .v3-wrap{display:block;width:100%;padding-bottom:0}
.v3-hero .v3-strip{margin-block-start:auto}

/* D50: block heights equal the template's (template shots at 390/768/1440; md 768, lg 1024).
   shortcut: fixed per-breakpoint floors pad short content with blank space; upgrade: drop each floor once fitted copy and real content fill the block. */
[data-sec=B]{min-height:936px}[data-sec=D]{min-height:2906px}[data-sec=E]{min-height:2970px}[data-sec=F]{min-height:1628px}[data-sec=G]{min-height:1438px}[data-sec=H]{min-height:1580px}[data-sec=I]{min-height:2692px}[data-sec=J]{min-height:1058.5px}
@media (min-width:768px){[data-sec=B]{min-height:1011px}[data-sec=D]{min-height:2435px}[data-sec=E]{min-height:1861px}[data-sec=F]{min-height:1183px}[data-sec=G]{min-height:862px}[data-sec=H]{min-height:1382px}[data-sec=I]{min-height:1747px}[data-sec=J]{min-height:759px}}
/* Section head: 40px pixel-band row,then the head at the section pad; tag 32px tall (+6 top, +2 start),h2 24px under it. */
.v3-section{padding-top:39px}#how{padding-top:40px}
.v3-edge{margin:-40px 0 24px}
.v3-head{margin:0 0 var(--space-6);padding-top:var(--section-pad-top)}
#how .v3-head,#control .v3-head{padding-top:var(--section-head-top)}
.v3-head .v3-tag{display:flex;align-items:center;width:fit-content;height:32px;margin:6px 0 0 2px;padding:0 10px}
.v3-head .v3-h2{margin-top:24px}
#how .v3-tag{min-width:141px}#apps .v3-tag{min-width:155px}#control .v3-tag,#faq .v3-tag{min-width:145px}#uses .v3-tag{min-width:127px}
#how .v3-head .v3-h2,#control .v3-head .v3-h2{max-width:772px}
#how .v3-head .v3-lede{max-width:587px}
#apps .v3-head{padding-top:calc(var(--section-pad-top) - 2px)}
#faq .v3-head{padding-top:calc(var(--section-pad-top) - 6px)}
@media (min-width:768px){#apps .v3-head{padding-top:calc(var(--section-pad-top) + 27px)}#apps .v3-head .v3-lede{max-width:399px}}
@media (min-width:1024px){#apps .v3-head{padding-top:calc(var(--section-pad-top) + 11px)}#apps .v3-head .v3-lede{max-width:626px}#faq .v3-head{padding-top:calc(var(--section-pad-top) - 14px)}}
#control .v3-head{margin-bottom:calc(var(--space-6) + 63px)}
@media (min-width:768px){#control .v3-head{margin-bottom:calc(var(--space-6) + 38px)}}
@media (min-width:1024px){#control .v3-head{margin-bottom:calc(var(--space-6) + 42px)}}
.v3-head .v3-lede{margin-top:12px;max-width:60ch;font-size:15px;line-height:1.6}
@media (min-width:1024px){[data-sec=B]{min-height:1393px}[data-sec=D]{min-height:1606px}[data-sec=E]{min-height:1350px}[data-sec=F]{min-height:1251px}[data-sec=G]{min-height:890px}[data-sec=H]{min-height:911px}[data-sec=I]{min-height:1379px}[data-sec=J]{min-height:562px}}
.v3-hero .v3-h1{margin-top:20px}
@media (max-width:1023px){.v3-hero .v3-h1{line-height:1.083}}
.v3-hero-copy .v3-lede{margin-top:12px}
@media (min-width:1024px){.v3-hero-copy .v3-lede{margin-top:11px}}
.v3-tabs{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:0 0 var(--space-4);justify-content:center}
.v3-tabs [role=tab]{flex:none;height:32px;padding:0 12px;border-radius:var(--radius-pill);border:0;background:var(--surface-2);color:var(--ink-2);font:var(--fw-medium) var(--text-ui)/1 var(--font-label);cursor:pointer}
.v3-tabs [role=tab][aria-selected=true]{background:var(--violet-tint);color:var(--violet-text)}
/* Pixel field: a tinted panel with stepped edges and two corners (brand/px),colours from --field / --field-px. */
.v3-field{position:relative;isolation:isolate;background:var(--field,var(--blue-tint));border-radius:var(--radius-2xl);padding:var(--space-5)}
.v3-field::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--field-px,var(--blue-fill));
  -webkit-mask:url(/assets/v3/px/edge-top.svg) 0 0/64px 16px repeat-x,url(/assets/v3/px/edge-bottom.svg) 0 100%/64px 16px repeat-x,url(/assets/v3/px/corner-tl.svg) 16px 16px/32px 32px no-repeat,url(/assets/v3/px/corner-br.svg) calc(100% - 16px) calc(100% - 16px)/32px 32px no-repeat;
  mask:url(/assets/v3/px/edge-top.svg) 0 0/64px 16px repeat-x,url(/assets/v3/px/edge-bottom.svg) 0 100%/64px 16px repeat-x,url(/assets/v3/px/corner-tl.svg) 16px 16px/32px 32px no-repeat,url(/assets/v3/px/corner-br.svg) calc(100% - 16px) calc(100% - 16px)/32px 32px no-repeat}
@keyframes v3-in{0%,4%{opacity:0;transform:translateY(8px)}10%,92%{opacity:1;transform:none}100%{opacity:0}}
.v3-strip{height:var(--px-band);background:url(/assets/v3/px/band.svg) 0 0/calc(var(--px-band)*6) var(--px-band) repeat-x;animation:v3-strip 4.8s steps(24) infinite}
@keyframes v3-strip{to{background-position:calc(var(--px-band)*-6) 0}}
@keyframes v3-marq{to{transform:translateX(calc(-100% - 8px))}}
/* E: 4 channel rows (first open) in the template's list column,then 3 planned cards; h3 boxes at the template rects. */
#apps .v3-head .v3-lede{min-height:48px;padding-inline-end:120px}
@media (min-width:768px){#apps .v3-head .v3-h2{max-width:399px;white-space:nowrap}}
@media (min-width:1024px){#apps .v3-head .v3-h2{max-width:626px}#apps .v3-head .v3-lede{min-height:0;padding-inline-end:0}}
.v3-apps-list{display:block;width:min(332px,100%);margin-top:var(--apps-list-top)}
.v3-apps-list .v3-card{height:103px;padding:0;border-radius:0;box-shadow:none;background:none}
.v3-apps-list .v3-card:first-child{height:229px}
.v3-apps-list h3{height:27px;line-height:27px}
.v3-apps-list .v3-card:first-child h3{height:54px}
#apps{--apps-list-top:885px;--apps-cards-top:-9px;--apps-h3-top:250px}
@media (min-width:768px){
  #apps{--apps-list-top:54px}
  .v3-apps-list{width:262px;margin-inline-start:448px}
  .v3-apps-list .v3-card{height:130px}.v3-apps-list .v3-card:first-child{height:273px}
  .v3-apps-list .v3-card h3{height:54px}
}
@media (min-width:1024px){
  .v3-apps-list{width:435px;margin-inline-start:707px}
  .v3-apps-list .v3-card{height:103px}.v3-apps-list .v3-card:first-child{height:179px}
  #apps{--apps-list-top:91px;--apps-cards-top:25px}
  .v3-apps-list .v3-card h3,.v3-apps-list .v3-card:first-child h3{height:27px}
}
/* G: FAQ. Rail to rail on hairlines: numbered question list (2 1 300px, first open, one open at a time) | pixel-field panel (3 1 420px); wraps <768. */
.v3-faq{display:flex;flex-wrap:wrap;gap:1px;margin:var(--faq-top) calc(-1 * var(--gutter)) 0;background:var(--line);border-top:1px solid var(--line)}
.v3-faq-list{flex:2 1 300px;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:12px 0;background:var(--bg);counter-reset:faq}
.v3-faq-pic{flex:3 1 420px;min-width:0;min-height:580px;padding:0;border-radius:0;--field:var(--bg);--field-px:var(--amber-tint)}
.v3-faq details{position:relative;padding:38px 32px 38px 24px;counter-increment:faq}
.v3-faq details+details{box-shadow:inset 0 1px var(--line)}
.v3-faq details::before{content:counter(faq,decimal-leading-zero);position:absolute;inset-inline-start:24px;top:42px;font:var(--fw-medium) 15px/1 var(--font-label);color:var(--mute)}
.v3-faq details[open]::before{color:var(--violet-text)}
.v3-faq summary{display:block;width:fit-content;margin-inline-start:36px;cursor:pointer;list-style:none;font:var(--fw-semibold) 20px/27px var(--font-display);letter-spacing:-.015em;color:var(--ink)}
.v3-faq summary::-webkit-details-marker{display:none}
.v3-faq details p{margin:0;padding:3px 0 0 36px;font-size:14px;line-height:1.6;color:var(--mute)}
/* shortcut: our q3/q4 wrap at 390 (+54px) and a1 runs 4 lines at 768 (+23px) where the template's copy does not; the panel and foot absorb it so G keeps the template height; drop when the copy fits. */
#faq{--faq-top:132px;padding-bottom:26px}
#faq .v3-faq-pic{min-height:526px}
@media (min-width:768px){#faq{--faq-top:84px;padding-bottom:3px}#faq .v3-faq-pic{min-height:580px}}
@media (min-width:1024px){#faq{--faq-top:89px;padding-bottom:27px}}
#faq-h s{color:var(--mute-2);text-decoration-thickness:3px}
/* H: uses. Full-frame tab cells on hairlines (5 per row incl. an empty end cell; 4 at >=768, 2 below),then text (2) | visual (3) cells. */
#uses .v3-tabs{flex-wrap:wrap;gap:1px;margin:0 calc(-1 * var(--gutter));background:var(--line);border-top:1px solid var(--line);justify-content:flex-start}
#uses .v3-tabs::after{content:"";flex:1 1 180px;min-height:74px;background:var(--bg)}
#uses [role=tab]{flex:1 1 180px;height:98px;padding:0 20px;border-radius:0;background:var(--surface-1);text-align:start}
#uses [role=tab][aria-selected=true]{background:var(--bg)}
@media (min-width:1024px){#uses [role=tab]{height:78px}}
#uses .v3-card{display:flex;flex-wrap:wrap;margin:0 calc(-1 * var(--gutter));padding:0;border-radius:0;box-shadow:none;border-top:1px solid var(--line)}
#uses .v3-card[hidden]{display:none}
#uses .v3-card>div:first-child{flex:2 1 400px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:69px var(--gutter) 89px}
@media (max-width:767px){#uses .v3-card>div:first-child>p{margin-top:1px}#uses .v3-card li:nth-child(2){margin-top:-1px}#uses .v3-card>div:first-child{padding-bottom:90px}}
@media (min-width:768px) and (max-width:1023px){#uses .v3-card>div:first-child>p{margin-top:-1px}}
@media (min-width:768px){#uses .v3-card>div:first-child{padding-top:70px;padding-bottom:90px}}
@media (min-width:1024px){#uses .v3-card>div:first-child{padding-block:45px 66px}#uses{padding-bottom:25px}}
#uses .v3-head{margin-bottom:calc(var(--space-6) + 76px)}
@media (min-width:768px){#uses .v3-head{margin-bottom:calc(var(--space-6) + 52px)}}
@media (min-width:1024px){#uses .v3-head{margin-bottom:calc(var(--space-6) + 60px)}}
#uses .v3-card>div:first-child>*{margin:0}
#uses .v3-h3{font-size:clamp(26px,2.8vw,34px);line-height:1.1}
#uses .v3-card p{max-width:435px;font-size:15px;line-height:1.6}
#uses .v3-card ul{list-style:none;padding:0;color:var(--ink);font-size:var(--text-body-sm)}
#uses .v3-card li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);line-height:21.75px}
#uses .v3-card li::before{content:"";flex:none;width:26px;height:26px;border-radius:var(--radius-md);background:var(--violet-tint)}
#uses .v3-field{flex:3 1 420px;min-width:0;min-height:505px;padding:0;border-radius:0}
@media (min-width:768px){#uses .v3-field{min-height:500px}}
@media (min-width:1024px){#uses .v3-field{min-height:506px}}
#uses .v3-field{--field:var(--band-h);--field-px:var(--band-h-ink)}
/* F: two full-frame text cells on hairlines,then the approve visual as a full-bleed band at the section foot. */
#control{position:relative}
#control .v3-grid{gap:1px;margin-inline:calc(-1 * var(--gutter));background:var(--line);border-top:1px solid var(--line)}
#control .v3-card{border-radius:0;box-shadow:none;padding:calc(clamp(24px,2.6vw,30px) + 42px) var(--gutter) clamp(24px,2.6vw,30px)}
@media (max-width:767px){#control .v3-card{padding-bottom:calc(clamp(24px,2.6vw,30px) - 1px)}}
#control .v3-h3{line-height:28px}
#control .v3-card p{max-width:439px;line-height:1.55}
.v3-ctl-panel{--field:var(--band-f);--field-px:var(--band-f-px);position:absolute;inset-inline:0;bottom:0;height:520px;padding:0;border-radius:0}
@media (min-width:768px){.v3-ctl-panel{bottom:-1px;height:294px}}
@media (min-width:1024px){.v3-ctl-panel{height:371px}}
/* F example card (CTO D53): a sample myai exchange in the band,text bottom-left,own-art mark + caption bottom-right. */
.v3-example{position:relative;display:flex;flex-wrap:wrap;align-content:flex-end;align-items:flex-end;justify-content:space-between;gap:24px 48px;height:100%;margin:0 auto;max-width:var(--frame);padding:clamp(32px,4vw,48px) 24px calc(clamp(32px,4vw,48px) + var(--ex-pb))}
.v3-example-text{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;gap:14px;padding-inline-start:44px}
.v3-example-text p{max-width:626px;height:auto;min-height:var(--ex-h);margin:0;font:var(--fw-semibold) var(--ex-fs)/var(--ex-lh) var(--font-display);color:var(--green-ink)}
.v3-example-text .v3-chip{vertical-align:middle;background:var(--bg);color:var(--green-ink)}
.v3-example figcaption{display:flex;align-items:center;gap:12px;font:var(--fw-semibold) var(--text-body-sm)/1.3 var(--font-label);color:var(--green-ink)}
.v3-example figcaption img{width:40px;height:40px}
.v3-ctl-art{display:none}
@media (min-width:1024px){.v3-ctl-art{display:block;position:absolute;top:20px;inset-inline-end:24px;width:349px;height:240px}}
.v3-example figcaption span{width:259px;height:43px}
.v3-example{--ex-h:172px;--ex-fs:14px;--ex-lh:19px;--ex-pb:2px}
@media (max-width:767px){.v3-example-text{gap:15px}#faq .v3-head .v3-h2{min-height:56px}}
@media (min-width:768px){.v3-example{--ex-h:74px;--ex-fs:15px;--ex-lh:18.5px}}
@media (min-width:1024px){.v3-example{--ex-h:116px;--ex-fs:18px;--ex-lh:23.2px;--ex-pb:3px}.v3-example-text{margin-bottom:-1px}}
/* I: stories head (tag, h2, sub, link to the FAQ),then 3 Example cards (D53 sample chats, live text) on a hairline row,then a full-bleed closing band */
#stories{display:flex;flex-direction:column;padding-bottom:0}
#stories>.v3-wrap{width:100%}
#stories .v3-head{margin-bottom:0;padding:var(--section-pad-top) 0 calc(clamp(24px,2.8vw,32px) + 1px)}
#stories .v3-tag{min-width:183.5px}
.v3-more{display:block;width:169px;height:20px;margin-top:14px;font:var(--fw-medium) 13px/20px var(--font-label);color:var(--link,var(--violet-text));white-space:nowrap}
.v3-stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px;margin:0 calc(-1 * var(--gutter));padding:24px;border-top:1px solid var(--line)}
.v3-story{display:flex;flex-direction:column;min-width:0;margin:0;overflow:hidden;border:1px solid var(--card-line,#E0E2E6);border-radius:8px;background:var(--bg);box-shadow:0 1px 2px rgba(28,32,36,.04),0 8px 24px -12px rgba(28,32,36,.12)}
.v3-story-head{display:flex;align-items:center;height:36px;margin:0;padding:0 24px;box-shadow:inset 0 -1px 0 var(--card-rule,#E6E8EB)}
.v3-story blockquote{display:flex;flex-direction:column;height:var(--bq);margin:24px}
.v3-story-art{display:block;flex:1 1 0;min-height:0;width:100%;margin:0 0 16px;object-fit:cover;object-position:top;border-radius:6px;background:var(--band-i,#F4F1EA)}
#stories .v3-head .v3-lede{min-height:72px}
.v3-story{--bq:192px}.v3-story:nth-child(2){--bq:264px}.v3-story:nth-child(3){--bq:120px}
@media (min-width:768px){#stories .v3-head .v3-lede{min-height:48px}.v3-story:nth-child(-n+2){--bq:264px}}
@media (min-width:1024px){.v3-story,.v3-story:nth-child(n){--bq:240px}}
.v3-story blockquote p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.v3-story figcaption{display:flex;align-items:center;gap:12px;height:41.5px;margin:auto 24px 28px;font:var(--fw-regular,400) 12.5px/1.35 var(--font-label);color:var(--mute)}
.v3-story figcaption img{width:40px;height:40px;flex:none}
.v3-story figcaption b{display:block;font-weight:var(--fw-semibold);font-size:13.5px;color:var(--ink)}
.v3-story::after{content:"";flex:none;height:36px;box-shadow:inset 0 1px 0 var(--card-rule,#E6E8EB)}
/* Closing: copy in the first half-frame cell (one column below 640px),on the band's frame. */
.v3-closing{--field:var(--band-i);--field-px:var(--band-i-px);margin-top:auto;min-height:1139px;padding:0;border-radius:0}
/* I: yellow inside the frame rails; white gutters outside with yellow pixel dots that thicken toward the rail (own px/gutter-l|r.svg, 120px each; off-screen below 1200). */
.v3-closing{background:linear-gradient(var(--band-i),var(--band-i)) 50% 0/min(100%,var(--frame)) 100% no-repeat,url(/assets/v3/px/gutter-l.svg) calc(50% - 660px) 0/120px 80px repeat-y,url(/assets/v3/px/gutter-r.svg) calc(50% + 660px) 0/120px 80px repeat-y,var(--bg)}
.v3-closing::before{inset-inline:max(0px,calc((100% - var(--frame)) / 2))}
.v3-closing .v3-wrap{display:grid;align-content:start;padding:var(--section-pad-top) 0 0}
@media (min-width:640px){.v3-closing .v3-wrap{grid-template-columns:1fr 1fr}}
.v3-closing .v3-btn,.v3-closing .v3-success{justify-self:start}
.v3-closing .v3-wrap>*{grid-column:1;margin:0 25px 0 24px}
@media (min-width:768px){.v3-closing{min-height:621px}}
@media (min-width:1024px){.v3-closing{min-height:563px}.v3-closing .v3-h2{line-height:41px}}
.v3-closing .v3-h2,.v3-closing .v3-lede{color:var(--band-i-ink)}
.v3-closing .v3-h2{margin-bottom:16px}
.v3-closing .v3-lede{max-width:435px;margin-bottom:24px;font-size:15px;line-height:1.625}
@media (max-width:767px){.v3-closing .v3-h2{margin-top:1px}.v3-closing .v3-lede{margin-bottom:23px}}
.v3-closing .v3-btn{background:var(--band-i-ink);color:var(--band-i)}
.v3-closing .v3-btn:hover{background:var(--ink-strong)}
.v3-closing-cta{display:flex;flex-wrap:wrap;gap:10px}
/* I code panel: a real /handles/check request and response (the response is pinned to the handler by tests/home-code-panel.test.js). */
/* Template rects: under the CTAs <640,else the right half-frame cell (24px in),title 55/39px{margin:68px 24px 0}
@media (min-width:640px){.v3-closing .v3-wrap{position:relative}}
.v3-closing-cta .v3-btn{min-width:181px}
.v3-closing-cta .v3-btn--secondary{min-width:180px;background:transparent;color:var(--band-i-ink);box-shadow:inset 0 0 0 1px var(--band-i-ink)}
.v3-closing-cta .v3-btn--secondary:hover{background:transparent;text-decoration:underline}
/* K: chat bubble placeholder (SHOW_CHAT_PLACEHOLDER only; sample, not linked) */
.v3-chatbubble{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:var(--radius-pill);background:var(--bg);box-shadow:var(--shadow-float)}
.v3-sample-label{align-self:flex-start;margin:8px 14px 0;font-size:var(--text-xs,12px);color:var(--ink);background:var(--bg,#fff)}
.v3-edge{height:16px;background:var(--violet-tint);-webkit-mask:url(/assets/v3/px/edge-top.svg) 0 0/64px 16px repeat-x;mask:url(/assets/v3/px/edge-top.svg) 0 0/64px 16px repeat-x}
/* Pixel band (R20 C2/D55): own violet dither (px/band-own.svg, art 2px inside the rails) at the template band rect,frame wide x 40px. */
#how,#apps,#control,#faq,#uses,#stories{position:relative}
.v3-pxband{position:absolute;top:-1px;inset-inline-start:max(0px,calc((100% - var(--frame)) / 2));z-index:-1;width:min(100%,var(--frame));height:40px;object-fit:none;object-position:0 0;pointer-events:none}
#how>.v3-pxband{top:0}
#how,#control,#faq,#stories{--rule-y:38px;background:linear-gradient(var(--line),var(--line)) 0 var(--rule-y)/100% 1px no-repeat}
#how{--rule-y:39px}
/* D: numbered steps on hairline rows (first row open, the rest 103px),then the flow cell rail to rail; >=1024 steps left (371px) | cell right to the rail. */
#how .v3-head{margin-bottom:49.5px}
#how .v3-head .v3-lede{margin-top:10px;line-height:1.65}
#how .v3-grid{display:block;counter-reset:step}
#how .v3-card{position:relative;counter-increment:step;margin-inline:calc(-1 * var(--gutter));padding:23px var(--gutter) 52px;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:none}
#how .v3-card+.v3-card{height:103px;padding-bottom:0}
#how .v3-card::before{content:counter(step,decimal-leading-zero);position:absolute;inset-inline-start:var(--gutter);top:27px;font:var(--fw-medium) var(--text-small)/1 var(--font-label);color:var(--mute)}
#how .v3-card h3{width:219px;height:27px;margin-inline-start:36px;line-height:27px}
#how .v3-card:nth-child(2) h3{width:231px}#how .v3-card:nth-child(3) h3{width:254px}#how .v3-card:nth-child(4) h3{width:224px}
#how .v3-card p{max-width:calc(100% - 8px);height:48px;margin:0;line-height:23px}
@media (max-width:767px){#how .v3-card:first-child p{height:70px}}
@media (min-width:768px) and (max-width:1023px){#how .v3-card p{height:25px}}
.v3-flowpic{display:block;height:360px;margin:-1px calc(-1 * var(--gutter)) 0;background:var(--band-d)}
@media (min-width:768px){.v3-flowpic{height:596px}}
@media (min-width:1024px){
  #how .v3-wrap{display:grid;grid-template-columns:371px 1fr;column-gap:25px;align-items:start}
  #how .v3-head{grid-column:1/-1;margin-bottom:29.5px}
  #how .v3-grid{padding-top:82px}
  .v3-flowpic{margin:0 calc(-1 * var(--gutter)) 0 0}
}
/* D: status band (text cell | own-art status chips) rail to rail on the D hue,then 3 cards (head, own-art panel, text, foot bar). */
.v3-aiband,.v3-aicards{grid-column:1/-1}
.v3-aiband{display:flex;flex-wrap:wrap;gap:1px;margin:var(--aiband-top) calc(-1 * var(--gutter)) 0;background:var(--band-d)}
.v3-aiband-text{flex:2 1 300px;min-width:0;min-height:var(--aiband-text-h,0);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px;color:var(--band-d-ink,#2C1D52)}
.v3-aiband-text>*{max-width:320px;margin:0}
.v3-aiband h3{font:var(--fw-bold,700) clamp(24px,2.6vw,32px)/1.08 var(--font-display);letter-spacing:-.035em}
.v3-aiband p{max-width:32ch;font-size:15.5px;line-height:1.5}
.v3-aiband-art{flex:3 1 420px;min-width:0;padding:clamp(32px,3.4vw,40px) clamp(40px,5vw,64px) clamp(26px,3vw,34px) 0}
.v3-aiband-art img{display:block;width:100%;height:150px;object-fit:cover}
.v3-aicards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:0 calc(-1 * var(--gutter));padding:24px 24px clamp(40px,4vw,56px)}
.v3-aicard{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--card-line,#E0E2E6);border-radius:8px;background:var(--bg);box-shadow:0 1px 2px rgba(28,32,36,.04),0 8px 24px -12px rgba(28,32,36,.12)}
.v3-aicard-head{display:flex;align-items:center;width:calc(100% - 36px);height:36px;margin:0;padding:0 24px;box-shadow:inset 0 -1px 0 var(--card-rule,#E6E8EB),1px 0 0 var(--card-rule,#E6E8EB);font:var(--fw-semibold) 12.5px/1 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.v3-aicard img{display:block;width:100%;height:184px;object-fit:cover;background:var(--bg)}
.v3-aicard>div{flex:1;display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px}
.v3-aicard h3{max-width:250px;height:49.28px;margin:0;padding-inline-end:140px;font:var(--fw-bold,700) 22px/1.12 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.v3-aicard>div>p{height:43.5px;margin:0;font-size:14.5px;line-height:1.5;color:var(--mute)}
.v3-aicard::after{content:"";flex:none;height:36px;box-shadow:inset 0 1px 0 var(--card-rule,#E6E8EB)}
/* Own-art panels (D55) at the template's content rects,section px (390 | 768 | 1440; >=1024 from the frame centre).
   shortcut: absolute per-breakpoint rects; upgrade each to an in-flow cell once its block's layout is rebuilt. */
.v3-art{position:absolute;z-index:0;display:block;left:var(--l);top:calc(var(--t) - 1px);width:var(--w);height:var(--h);object-fit:cover;background:var(--bg);pointer-events:none}
@media (min-width:1024px){.v3-art{left:calc(50% - 720px + var(--l))}}
.v3-art-elink{--l:1px;--t:568.05px;--w:388px;--h:580px}
.v3-art-fstage{--l:1px;--t:674.36px;--w:388px;--h:436px}
@media (min-width:768px){
  .v3-art-elink{--t:319.05px;--w:447px;--h:687.34px}
  .v3-art-fstage{--t:427.08px;--w:766px}
}
@media (min-width:1024px){
  .v3-art-elink{--l:121px;--w:706.2px;--h:580px}
  .v3-art-fstage{--l:121px;--t:445.56px;--w:1198px}
}
.v3-faq-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v3-closing .v3-wrap .v3-facts{display:block;width:calc(100% - 49px);height:212.75px;margin-top:30px;object-fit:contain;object-position:0 0}@media (min-width:768px){.v3-closing .v3-wrap .v3-facts{height:149.5px}}
@media (min-width:1024px){.v3-closing .v3-wrap .v3-facts{height:100.25px}}
/* shortcut: the template's 25px rule row sits between the flow cell and the band at sub-px offsets per width; upgrade with a real rule row. */
#how{--aiband-top:24.63px;--aiband-text-h:179.56px;padding-bottom:0}
@media (max-width:767px){.v3-aiband-text h3{padding-inline-end:120px}}
@media (min-width:768px) and (max-width:1023px){.v3-aiband-text p{padding-inline-end:40px}}
@media (min-width:768px){#how{--aiband-top:24.89px;--aiband-text-h:0}}
@media (min-width:1024px){#how{--aiband-top:24.24px}}
.v3-uc{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;padding:var(--gutter)}
.v3-closing .v3-success{display:block;width:auto;height:44px;margin-bottom:18px}
.v3-flowpic img.v3-flow{width:100%;height:100%;max-width:none;object-fit:contain;padding:var(--gutter)}

/* R21 blanks: the E channel row has 2 chips{mask-image:none}
@media (max-width:767px){.v3-art-elink{object-fit:contain}.v3-art-elink{background:#EEF4FF}}
/* D65 exception: template CTA #1875EE is 4.35:1 on white; #1773E9 is the nearest darker shade at 4.5:1 (WCAG AA) */
/* QA: menu panel links must not overflow the viewport at 320/375 (en/de) */
.v3-menu-panel{box-sizing:border-box;max-width:100vw;grid-template-columns:minmax(0,1fr)}
.v3-menu-panel a{min-width:0;overflow-wrap:anywhere}
/* R21 E list (rank 6 + CTO Email=Planned): compact 16/600 rows,the Email row carries a Planned chip */
.v3-apps-list .v3-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.v3-apps-list h3{font:var(--fw-semibold) 16px/27px var(--font-label);margin:0}
.v3-apps-list .v3-chip--planned{margin:0}
/* R21 F band (r3.26): chip,h3 + 2 short lines; r21-fill row 4 panel layouts */
.v3-example-text p{min-height:0}
.v3-example-text{gap:8px}
.v3-ex-h3{margin:4px 0 0;font:var(--fw-semibold) 22px/1.25 var(--font-display);color:var(--green-ink)}
.v3-example-text .v3-ex-p{font:var(--fw-medium) 16px/1.45 var(--font-body);color:var(--green-ink)}
@media (max-width:767px){
 .v3-example{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;align-content:stretch;gap:16px;padding:24px 24px 24px}
 .v3-ctl-art{display:block;order:-1;align-self:center;width:320px;max-width:100%;height:auto;aspect-ratio:320/220}
 .v3-example-text{flex:0 0 auto;padding-inline-start:0}
 .v3-ex-h3{font-size:18px}.v3-example-text .v3-ex-p{font-size:14px}
}
@media (min-width:768px) and (max-width:1023px){
 .v3-example-text{flex:0 1 auto;max-width:calc(100% - 400px)}
 .v3-ctl-art{display:block;position:absolute;top:26px;inset-inline-end:24px;width:352px;height:242px}
 .v3-ex-h3{font-size:18px}.v3-example-text .v3-ex-p{font-size:14px}
}
@media (min-width:1024px){.v3-ctl-art{width:480px;height:330px;top:20px}.v3-example-text{max-width:626px}}
@media (min-width:1024px){.v3-example{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-end;gap:24px}.v3-example-text{flex:0 0 auto}}
/* R21 rank 9: H drops the navy pixel frame (pixels take the field colour); art fills the cell with 24px pad */
#uses .v3-field{--field-px:var(--band-h)}
#uses .v3-uc{padding:24px}
/* R21 rank 3: G profile mock fits the cell at 390 (pad 24, width 100%) */
@media (max-width:767px){#faq .v3-faq-pic img{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;padding:24px;object-fit:contain}}
/* R21 rank 8/13: I closing gap 24 below 640; the code panel fades out instead of cutting mid-line */

/* R21 D58 hero (s3-design-spec r21-hero): eyebrow,h1,sub,2 CTAs,full-width product frame with tabs + desktop myai mock,2 badges,channel strip; own art only */
.v3-hero{background:linear-gradient(90deg,var(--bg) 25%,rgba(255,255,255,.55) 70%,rgba(255,255,255,0)),url(/assets/v3/px/tile-band.svg) 0 0 repeat,var(--bg)}
.v3-hero .v3-strip{display:none}
.v3-eyebrow{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;width:232px;height:35px;padding:0 14px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--line);font:var(--fw-medium) 15px/22.5px var(--font-label);color:var(--ink);text-decoration:none;white-space:nowrap}
.v3-eyebrow img{width:17px;height:17px}.v3-eyebrow span{margin-inline-start:auto}
.v3-works{list-style:none;box-sizing:border-box;height:134px;margin:63px 0 0;padding:0 24px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:12px 40px;background:var(--bg);border-block:1px solid var(--line);font:var(--fw-semibold) 15px/1.2 var(--font-label);color:var(--ink)}
.v3-works li{display:flex;align-items:center;gap:10px;opacity:.45}
.v3-works li.on{opacity:1}
@media (max-width:1023px){
 .v3-works{margin-top:39px}
}
@media (max-width:767px){
 .v3-works{gap:8px 20px;font-size:13px;padding:0 16px}
}
/* R21 5d23e361 UI/UX #1 #2 #4 #14: filled mock (rail rows, all 4 messages, side art to bottom),Pause bottom-right of the frame,sample label chip{display:flex;gap:10px;align-items:center;margin:0;padding:10px;border-radius:6px;background:var(--bg);box-shadow:var(--shadow-hairline);min-width:0}
.v3-hero .v3-sample-label{align-self:flex-start;margin:10px 12px 0;padding:4px 10px;border-radius:var(--radius-pill);background:var(--violet-tint);color:var(--violet-text);font:var(--fw-semibold) 12px/16px var(--font-label)}
@media (max-width:767px){.v3-works{margin-top:31px}}
@media (max-width:767px){.v3-aiband-art img{object-fit:contain}}
.v3-closing .v3-facts-pic{display:contents}.v3-closing .v3-wrap .v3-facts{grid-column:1;margin-inline:24px 25px}
@media (max-width:767px){.v3-closing .v3-wrap .v3-facts{object-fit:fill}}
@media (max-width:767px){#control .v3-head{margin-bottom:calc(var(--space-6) + 23px)}#control .v3-card{padding-top:calc(clamp(24px,2.6vw,30px) + 22px)}.v3-art-fstage{--l:25px;--t:594.36px;--w:340px;--h:516px;object-fit:fill}}
/* R21 be01aa42 #1: E list = compact rows with tile icons,8px between row cards (slot heights unchanged, D57) */
.v3-apps-list .v3-card{position:relative;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:8px 12px;padding:16px 16px 24px}
.v3-apps-list .v3-card::before{content:"";position:absolute;inset:0 0 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);z-index:-1}
.v3-apps-list .v3-card{z-index:0}
.v3-apps-list .v3-apps-ic{flex:none;width:40px;height:40px}
.v3-apps-list h3,.v3-apps-list .v3-card:first-child h3{height:auto;flex:1 1 0;min-width:0;line-height:22px}
.v3-apps-list .v3-chip--planned{margin-inline-start:52px}
.v3-apps-list .v3-card:has(.v3-chip--planned){padding-inline-end:104px}
.v3-apps-list .v3-chip--planned{position:absolute;top:16px;inset-inline-end:16px;margin:0}
.v3-apps-list .v3-card:first-child{align-content:center}
.v3-apps-list .v3-card:first-child{align-content:flex-end}
.v3-apps-list .v3-card:first-child::before{top:auto;height:95px}
@media (min-width:768px) and (max-width:1023px){.v3-apps-list .v3-card:first-child::before{height:122px}}
.v3-apps-list .v3-card{align-content:center;padding-block:0 8px}
.v3-apps-list .v3-card:first-child{align-content:flex-end;padding-bottom:35.5px}
@media (min-width:768px) and (max-width:1023px){.v3-apps-list .v3-card:first-child{padding-bottom:49px}}
.v3-apps-list .v3-chip--planned{top:50%;transform:translateY(calc(-50% - 4px))}
/* R21 be01aa42 #2: G@390 head gap 28,mock fills field w/ pad 24 (104px moved from head gap to field, D57) */
@media (max-width:767px){#faq{--faq-top:28px}#faq .v3-faq-pic{min-height:630px}#faq .v3-faq-pic img{object-position:center top}}
@media (max-width:767px){.v3-faq-pic-p{display:contents}#faq .v3-faq-pic{min-height:343px}#faq .v3-faq-pic img{object-position:center}#faq .v3-faq details{padding-block:74px}#faq .v3-faq details::before{top:78px}}
@media (max-width:767px){#faq .v3-faq-pic{min-height:338px}}
/* R21 be01aa42 #3/#4/#12: hero request card (own art, not F's approve-deny) snaps under the thread; side fills with recent checks; 390 thread fade + Pause bottom-right */

@media (max-width:767px){.v3-hero .v3-sample-label{position:absolute;top:9px;inset-inline-end:10px;margin:0}}
/* R21 be01aa42 #5: H@390 head gap 24,tabs one per row (no empty filler cell),field gives the art 24 pad (height redistributed, D57) */
@media (max-width:767px){#uses .v3-head{margin-bottom:24px}#uses .v3-tabs::after{display:none}#uses [role=tab]{flex-basis:100%}#uses .v3-field{min-height:459px}}
/* R21 be01aa42 #6: section pixel strips = a single top edge row (no mid-row gap) */
.v3-pxband{height:8px}
.v3-pxband{object-position:-99999px 0;background:url(/assets/v3/px/band.svg) 0 0/240px 40px repeat-x;height:10px}
/* R21 be01aa42 #7/#10: D steps spread evenly (1440: space-between along the art; <768: equal step rows, no dead block under 01). Totals unchanged (D57) */
#how .v3-card p{height:auto}
@media (max-width:767px){#how .v3-card,#how .v3-card+.v3-card{height:120.25px;padding-bottom:0}}
@media (min-width:1024px){#how .v3-grid{align-self:stretch;display:flex;flex-direction:column;padding-top:0}#how .v3-card,#how .v3-card+.v3-card{flex:1 1 0;height:auto;padding-bottom:0;display:flex;flex-direction:column;justify-content:center}#how .v3-card::before{top:50%;transform:translateY(calc(-50% - 13px))}#how .v3-card:last-child{border-bottom:1px solid var(--line)}}
@media (min-width:1024px){#how .v3-card,#how .v3-card+.v3-card{display:grid;grid-template-columns:36px 1fr;align-content:center;align-items:baseline}#how .v3-card::before{position:static;transform:none;grid-column:1}#how .v3-card h3{margin-inline-start:0;grid-column:2}#how .v3-card p{grid-column:1/-1}}
/* R21 be01aa42 #11: E@390 planned card art sits 16px under the card top (no empty top band) */

/* R21 390-polish rows 1-6 (UI/UX),<768 only,heights unchanged (D57) */
@media (max-width:767px){
  .v3-aicard h3{max-width:none;padding-inline-end:0}
  .v3-aicard img,.v3-story-art{margin-inline:16px;width:calc(100% - 32px);border-radius:6px}
  .v3-aicard-head{width:100%}
  .v3-aicard::after{height:0}.v3-aicard>div{padding-bottom:60px}
  .v3-closing-cta .v3-btn{width:100%;min-width:0;min-height:48px;justify-content:center}
  .v3-closing .v3-closing-cta{align-self:stretch}
  .v3-head .v3-tag,#how .v3-tag,#apps .v3-tag,#control .v3-tag,#faq .v3-tag,#uses .v3-tag,#stories .v3-tag{min-width:0;width:fit-content}
  #how .v3-card,#how .v3-card+.v3-card{display:grid;grid-template-columns:36px 1fr;align-content:start;align-items:baseline;padding-top:23px}
  #how .v3-card::before{position:static;grid-column:1}
  #how .v3-card h3{margin-inline-start:0;grid-column:2;width:auto}
  #how .v3-card p{grid-column:2}
  .v3-hero .v3-h1,.v3-head .v3-h2{text-wrap:balance}
}
@media (max-width:767px){.v3-aicard img{object-fit:contain}}
/* R21 390-polish rows 7-12 (<768 only) */
@media (max-width:767px){
  .v3-works{justify-content:flex-start;gap:12px;padding-inline:24px}
  .v3-works li img{width:18px;height:18px}
  
  #uses .v3-tabs{margin-inline:24px;border-radius:8px;overflow:hidden}
  #uses [role=tab]{font-size:15px;line-height:1.3}
  #uses .v3-card li::before{width:8px;height:8px;border-radius:50%;margin-inline:9px;background:var(--violet-text)}
  .v3-flegal .langpick select{height:36px;padding:0 14px;border:1px solid var(--line);border-radius:18px;background:var(--bg);font:inherit}
  .v3-chip--planned{align-self:center;font-size:12px;line-height:24px;height:24px;padding-block:0}
  
  
}
/* R22 B@390 (looks-finished #3): the 179px mock shows two whole bubbles per loop,never one cut mid-line; Pause keeps the bottom-right */

/* R22 E (looks-finished #1): the first list item is a whole card from its template top (h3 at the top like the template),with the Web · Live chip and the existing web_text line; no dead band above the list. <768 it is 24px shorter and the
   planned cards keep their template rects (cards-top +24),so the list no longer touches the first planned card */
.v3-apps-list .v3-card:first-child,.v3-apps-list .v3-card:first-child h3{height:auto}
.v3-apps-list .v3-card:first-child{align-content:flex-start;padding:16px 16px 24px}
.v3-apps-list .v3-card:first-child::before{top:0;height:auto}
.v3-apps-list .v3-card:first-child .v3-chip--live{margin:0;flex:none}
.v3-apps-list .v3-apps-sub{flex:1 0 100%;margin:0;padding-inline-start:52px;font:15px/1.5 var(--font-body);color:var(--body,#60646C)}
.v3-apps-list .v3-card:first-child{height:205px}
@media (max-width:767px){#apps{--apps-cards-top:15px}}
@media (min-width:768px) and (max-width:1023px){.v3-apps-list .v3-card:first-child{height:273px;padding-bottom:24px}}
@media (min-width:1024px){.v3-apps-list .v3-card:first-child{height:179px;padding-bottom:24px}}
.v3-apps-list .v3-card:first-child{align-content:space-between}
.v3-apps-list .v3-apps-url{flex:1 0 calc(100% - 52px);display:flex;align-items:center;gap:8px;margin:0;margin-inline-start:52px;padding:8px 12px;border-radius:8px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--line);font:14px/1.3 var(--font-mono,ui-monospace,monospace);color:var(--mute)}
.v3-apps-url b{color:var(--ink);font-weight:var(--fw-semibold)}
.v3-apps-url img{flex:none;width:18px;height:18px}
@media (min-width:768px) and (max-width:1023px){
  .v3-apps-list .v3-card:first-child h3{flex:1 0 calc(100% - 52px)}
  .v3-apps-list .v3-card:first-child .v3-chip--live{order:3;margin-inline-start:52px}
  .v3-apps-sub{order:4}.v3-apps-url{order:5}
}
/* R22 G@390 (looks-finished #2): accordion rows back to a 43px rhythm (no ~200px single-line rows); the profile field
   returns to the template rect (~832, 580h) and holds a portrait profile card (same copy as g-profile) at 24px padding */
@media (max-width:767px){
  #faq{--faq-top:38px}
  #faq .v3-faq details{padding-block:43px}#faq .v3-faq details::before{top:47px}
  #faq .v3-faq-pic{min-height:580px}
}
/* R22 H@390 (looks-finished #5): the use-case field shows a portrait crop of the same phone art (uc*-v.svg: full phone,
   no new copy) so the 459px field is filled instead of a 4:3 crop floating with ~85px blank above and below */
@media (max-width:767px){
  /* R4 tab order: coaches (priya), local pros (diego), founders (inbox art, no stacked variant), creators (leo) */
  #use1 .v3-uc{content:url(/assets/v3/brand/uc2-freelancers-v.svg)}#use2 .v3-uc{content:url(/assets/v3/brand/uc3-businesses-v.svg)}
  #use4 .v3-uc{content:url(/assets/v3/brand/uc1-creators-v.svg)}
}
@media (max-width:767px){#uses .v3-card>div:first-child{padding-bottom:51px}#uses .v3-field{min-height:505px}}
/* R22 H (390-polish #9 at every width): bullets are 8px dots drawn inside the 26px tile box (li stays the template 49px),never empty tiles */
#uses .v3-card li::before,#uses .v3-card li:nth-child(n)::before{width:26px;height:26px;margin-inline:0;border-radius:0;background:radial-gradient(circle,var(--violet-text) 4px,transparent 4.5px)}
/* R22 I@390 (new): cards keep their template heights; art aligned to the text,and card 3's 56px art strip shows the
   bottom of the chat (brand-deal card + Review),a whole element instead of a sliver of the phone header */
@media (max-width:767px){.v3-story-art{margin-inline:0;width:100%}.v3-story:nth-child(3) .v3-story-art{object-position:50% 100%}}
/* R22 I@1440 (looks-finished #9): the 550x240 template body holds 10 whole 22px lines; >=1024 drops the blank line and the
   two extra comment lines so the whole reply shows (no fade, no line cut). Narrower widths keep every line */

/* R22 strips (looks-finished #6): the section-top pixel row is a quiet texture,not a dashed rule (own-art mask, 50%) */
.v3-pxband{opacity:.5}
/* R22 D (390-polish #1 at every width): aicard titles keep the template 250px box but drop its 140px end padding,so
   "Requests inbox" sits on one line at 768/1440 (<768 keeps the full measure) */
@media (min-width:768px){.v3-aicard h3{max-width:250px;padding-inline-end:0}}
/* R22 E@390 (be01aa42 #11): planned-card art back on its template rect (card top + 48, 184h),so the art sits centred
   between the card top and the title instead of 16px under the top with ~80px dead above the title */

/* R23 design-new (new-design structure, own art): section tags are flag chips (outlined box with an arrow end, drawn by
   our own px/tag-flag.svg as a 9-slice) with a coloured pixel-icon square,sentence case. Box size stays the template's. */
.v3-head .v3-tag,#stories .v3-tag{gap:8px;padding:0 22px 0 6px;background:none;border:0 solid;border-image:url(/assets/v3/px/tag-flag.svg) 16 14 16 12 fill/16px 14px 16px 12px;
  border-radius:0;text-transform:none;letter-spacing:0;font:var(--fw-semibold) 13px/1 var(--font-label);color:var(--ink)}
.v3-head .v3-tag::before,#stories .v3-tag::before{content:"";flex:none;width:20px;height:20px;border-radius:5px;background:var(--tag-c,var(--violet-ui,#7E5BDC)) url(/assets/v3/px/tag-glyph.svg) center/12px no-repeat}
#how{--tag-c:#7E5BDC}#apps{--tag-c:#1875EE}#control{--tag-c:#12946A}#faq{--tag-c:#B7800F}#uses{--tag-c:#1875EE}#stories{--tag-c:#1C2024}
@media (max-width:767px){.v3-head .v3-tag,#how .v3-tag,#apps .v3-tag,#control .v3-tag,#faq .v3-tag,#uses .v3-tag{width:fit-content}#how .v3-tag{min-width:141px}#apps .v3-tag{min-width:155px}#control .v3-tag,#faq .v3-tag{min-width:145px}#uses .v3-tag{min-width:127px}#stories .v3-tag{min-width:183.5px}}
/* R23 design-new: art panels sit in a soft tint inside our own dithered pixel frame (px/dither-*.svg, from
   design/brand/scripts/dither-frame.mjs). CSS boxes (D flow, H use-case field) use the strips as a mask; image art
   (E one-link, F request, G profile) carries the same frame inside the SVG,.v3-flowpic,#uses .v3-field{position:relative;isolation:isolate}
.v3-flowpic::before,#uses .v3-field::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:0;pointer-events:none;background:var(--df-c);
  -webkit-mask:url(/assets/v3/px/dither-t.svg) 0 0/128px 40px repeat-x,url(/assets/v3/px/dither-b.svg) 0 100%/128px 40px repeat-x,url(/assets/v3/px/dither-l.svg) 0 0/40px 128px repeat-y,url(/assets/v3/px/dither-r.svg) 100% 0/40px 128px repeat-y;
  mask:url(/assets/v3/px/dither-t.svg) 0 0/128px 40px repeat-x,url(/assets/v3/px/dither-b.svg) 0 100%/128px 40px repeat-x,url(/assets/v3/px/dither-l.svg) 0 0/40px 128px repeat-y,url(/assets/v3/px/dither-r.svg) 100% 0/40px 128px repeat-y}
.v3-flowpic{background:#F1ECFF;--df-c:#CDBDFB}
#uses .v3-field{--field:#EEF3FC;background:#EEF3FC;--df-c:#C3D5F7}
#faq .v3-faq-pic::before{display:none}
#faq .v3-faq-pic{background:#FFF6DE}
@media (max-width:767px){#faq .v3-faq-pic img{padding:0}}
@media (min-width:768px){#uses .v3-uc{padding:40px}}
/* R23 design-new: section-top pixel band back to the template's full 40px row (undoes R21's 10px strip and R22's 50%) */
.v3-pxband{height:40px;opacity:1}
/* R23 design-new: feature cards get the template's corner cell (an ↗ glyph, our own px/arrow-ne.svg) and a dotted pixel
   footer strip (our band.svg) instead of a blank band */
.v3-aicard{position:relative}
.v3-aicard::before{content:"";position:absolute;top:0;inset-inline-end:0;width:36px;height:36px;background:url(/assets/v3/px/arrow-ne.svg) center/12px no-repeat;box-shadow:inset 0 -1px 0 var(--card-rule,#E6E8EB)}
.v3-aicard::after,.v3-story::after{background:url(/assets/v3/px/band.svg) 0 2px/240px 40px repeat-x}
/* R23 design-new: coloured bands carry the template's faint grid backdrop */
.v3-aiband,.v3-closing{position:relative;isolation:isolate}
.v3-ctl-panel{isolation:isolate} /* already absolutely positioned: keep it */
.v3-aiband::after,.v3-ctl-panel::after,.v3-closing::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(28,32,36,.05) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(28,32,36,.05) 1px,transparent 1px) 0 0/48px 48px}
.v3-closing::after{inset-inline:max(0px,calc((100% - var(--frame)) / 2))}
/* R23 design-new: D steps are an accordion like the template (01 open, the rest titles; home.js data-v3-acc). The list
   keeps its height (the open item takes the rest),collapsed bodies are clipped,not removed. No JS: all open. */
.v3-acc-b{all:unset;cursor:pointer;display:inline}
.v3-acc-b:focus-visible{outline:2px solid var(--violet-ui,#7E5BDC);outline-offset:3px;border-radius:2px}
#how .v3-grid.acc{display:flex;flex-direction:column;height:481.25px}
@media (min-width:768px) and (max-width:1023px){#how .v3-grid.acc{height:435px;padding-top:0}}
@media (min-width:1024px){#how .v3-grid.acc{height:auto}}
#how .v3-grid.acc .v3-card{flex:0 0 auto;height:auto;padding-block:20px}
#how .v3-grid.acc .v3-card.on{flex:1 1 auto;align-content:center}
#how .v3-grid.acc .v3-card:not(.on) p{height:0;overflow:hidden;opacity:0}
#how .v3-grid.acc .v3-card.on::before,#how .v3-grid.acc .v3-card.on h3{color:var(--violet-text,#7353BA)}
/* R23 design-new: E list is the template's numbered rows (01-04, dividers, row 01 active with a blue underline),not bordered cards; the pixel tile icons give way to the numbers. Row 01 keeps its line,chip and link pill. */
.v3-apps-list{counter-reset:app}
.v3-apps-list .v3-card{counter-increment:app}
.v3-apps-list .v3-card::before,.v3-apps-list .v3-card:first-child::before{top:auto;bottom:8px;height:1px;border:0;border-radius:0;background:var(--line)}
.v3-apps-list .v3-card:first-child::before{height:2px;background:var(--blue-ui,#1875EE)}
.v3-apps-list .v3-apps-ic{display:none}
.v3-apps-list h3::before{content:counter(app,decimal-leading-zero);display:inline-block;width:36px;font:var(--fw-medium) 15px/1 var(--font-label);color:var(--mute)}
.v3-apps-list .v3-card:first-child h3,.v3-apps-list .v3-card:first-child h3::before{color:var(--blue-text,#2B59C3)}
.v3-apps-list .v3-card:has(.v3-chip--planned){padding-inline-end:104px}
.v3-apps-list .v3-apps-sub,.v3-apps-list .v3-apps-url{margin-inline-start:36px}
.v3-apps-list .v3-apps-sub{padding-inline-start:0}
.v3-apps-list h3{position:relative;padding-inline-start:36px}
.v3-apps-list h3::before{position:absolute;inset-inline-start:0;top:4px}
/* R23 design-new hero: a blue pixel field (our tile-band in a blue ramp) strongest at the right edge like the template;
   the tab bar is white with hairline dividers and a blue underline on the active tab; the two badges are tilted cards
   with a dark outline and hard shadow (our copy); 390 CTAs go back to natural width (undoes R21 390-polish row 3). */
.v3-hero{background:radial-gradient(ellipse 62% 30% at 34% 16%,var(--bg) 62%,rgba(255,255,255,0) 100%),linear-gradient(90deg,var(--bg) 12%,rgba(255,255,255,.72) 46%,rgba(255,255,255,.1) 82%,rgba(255,255,255,0)),url(/assets/v3/px/tile-band-blue.svg) 0 0 repeat,var(--bg)}
@media (max-width:767px){.v3-hero{background:linear-gradient(90deg,var(--bg) 0,var(--bg) 62%,rgba(255,255,255,.4) 86%,rgba(255,255,255,0)),url(/assets/v3/px/tile-band-blue.svg) 0 0 repeat,var(--bg)}}
/* R23 design-new "Who it's for": numbered tabs with an icon square and the blue underline; a kicker above the card
   title (number + the tab's own label) and the template's two links under the bullets (our existing CTAs). Kicker and
   links sit out of flow,so the card text keeps its template rects. */
#uses .v3-tabs{counter-reset:utab}
#uses [role=tab]{counter-increment:utab;position:relative;padding-inline-start:64px}
#uses [role=tab]::before{content:"";position:absolute;inset-inline-start:20px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:7px;background:var(--blue-tint,#E4ECFB) url(/assets/v3/px/tile-group.svg) center/18px no-repeat}
#uses [role=tab][aria-selected=true]::before{background-color:var(--blue-ui,#1875EE);background-image:url(/assets/v3/px/tag-glyph.svg);background-size:14px}
#uses [role=tab]::after{content:counter(utab,decimal-leading-zero);position:absolute;inset-inline-start:64px;top:50%;margin-top:-22px;font:var(--fw-medium) 11px/1 var(--font-label);color:var(--mute)}
#uses [role=tab][aria-selected=true]{color:var(--blue-text,#2B59C3);box-shadow:inset 0 -2px 0 var(--blue-ui,#1875EE)}
#uses .v3-card>div:first-child{position:relative}
.v3-kicker{position:absolute;display:flex;align-items:center;gap:8px;font:var(--fw-semibold) 11px/1 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text,#2B59C3)}
.v3-kicker::before{content:"";width:6px;height:6px;background:currentColor}
#uses .v3-kicker{top:calc(69px - 30px);inset-inline-start:var(--gutter)}
@media (min-width:1024px){#uses .v3-kicker{top:calc(45px - 22px)}}
/* R23 design-new "Control": a small coloured icon over each column title,like the template */
#control .v3-grid--2 .v3-card{position:relative}
#control .v3-grid--2 .v3-card::before{content:"";position:absolute;inset-inline-start:var(--gutter);top:calc(clamp(24px,2.6vw,30px) + 6px);width:24px;height:24px;border-radius:50%;background:#12946A url(/assets/v3/px/tag-glyph.svg) center/12px no-repeat}
#control .v3-grid--2 .v3-card+.v3-card::before{background-color:#1875EE}
#uses [role=tab]{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;text-align:start}
#uses [role=tab]::after{position:static;order:-1;margin:0}
/* R23 design-new H@390: the template's edge-to-edge 2x2 tabs (undoes R21 one-per-row + gutters); text and art land on the
   template rects (h3 621, field 1049) */
@media (max-width:767px){
  #uses .v3-head{margin-bottom:calc(var(--space-6) + 76px)}
  #uses .v3-tabs{margin-inline:calc(-1 * var(--gutter));border-radius:0}
  #uses [role=tab]{flex:1 1 180px;padding-inline-start:60px}
  #uses [role=tab]::before{inset-inline-start:16px}
  #uses .v3-card>div:first-child{padding-top:144px;padding-bottom:90px}
  #uses .v3-kicker{top:114px}
}
/* R23 design-new header: the five nav links are evenly spaced like the template (natural widths, even padding),not
   squeezed into the template's label-width slots. Dropdowns are left out: the chrome test pins 5 real nav links. */
@media (min-width:1024px){.v3-header .v3-nav a,.v3-header .v3-nav a:nth-child(n){width:auto;justify-content:center;padding:0 12px}}
/* R23 design-new: brand flags like the template's band/closing flags (same flag outline, mascot glyph, the brand name
   "myai", no new copy). The closing mascot keeps its space (text rects unchanged) and the flag sits in it. */
.v3-aiband::before,.v3-closing .v3-wrap::before{content:"myai";position:absolute;z-index:2;display:flex;align-items:center;gap:6px;height:32px;padding:0 22px 0 32px;
  border:0 solid;border-image:url(/assets/v3/px/tag-flag-brand.svg) 16 14 16 30 fill/16px 14px 16px 30px;background:none;
  font:var(--fw-semibold) 13px/1 var(--font-label);color:var(--ink);letter-spacing:-.01em}
.v3-aiband::before{top:-16px;inset-inline-start:24px}
.v3-closing .v3-wrap{position:relative}
.v3-closing .v3-wrap::before{top:calc(var(--section-pad-top) + 12px);inset-inline-start:24px}
.v3-closing .v3-success{visibility:hidden}
/* closing secondary CTA: light filled like the template,not an outline */
.v3-closing-cta .v3-btn--secondary,.v3-closing-cta .v3-btn--secondary:hover{background:#FFF4D1;box-shadow:inset 0 0 0 1px var(--band-i-ink);text-decoration:none}
/* footer language picker: the template's small uppercase text control (box size unchanged) */
@media (min-width:768px){.v3-flegal .langpick select{appearance:none;-webkit-appearance:none;border:0;background:transparent linear-gradient(135deg,transparent 50%,var(--mute) 50%) calc(100% - 2px) 45%/5px 5px no-repeat;padding:0 12px 0 0;
  font:var(--fw-medium) 10.5px/19px var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer}}
/* R23 design-new,measured against ref-d50: panel interiors are white and the dither is a light tint (template
   #F1ECFF / #F7F4FF on white); band grids are 80px at ~2%,from the frame's left edge and 1px above the band top */
.v3-flowpic{background:#fff;--df-c:#F1ECFF}
#uses .v3-field{background:#fff;--df-c:#E4ECFB}
#faq .v3-faq-pic{background:#fff}
.v3-aiband::after,.v3-ctl-panel::after,.v3-closing::after{background:linear-gradient(rgba(0,0,0,.02) 1px,transparent 1px) 0 -1px/80px 80px,linear-gradient(90deg,rgba(0,0,0,.02) 1px,transparent 1px) 0 -1px/80px 80px}
.v3-ctl-panel::after{inset-inline:max(0px,calc((100% - var(--frame)) / 2))}
/* R24 motion: the hero pixel field is live (mo/dither.js canvas, cobalt ink like the template); once it runs,the static
   blue tile poster gives way to it. Reduced motion: no canvas,the poster stays. */
.v3-hero[data-mo-dither]{position:relative;isolation:isolate;--mo-ink:#1875EE;--mo-paper:transparent}
.v3-hero canvas.mo-dither{position:absolute;inset:0;z-index:-1;display:block;inline-size:100%;block-size:100%;pointer-events:none}
.v3-hero[data-mo-live]{background:radial-gradient(ellipse 62% 30% at 34% 16%,var(--bg) 62%,rgba(255,255,255,0) 100%),var(--bg)}
.v3-hero[data-mo-dither]{--mo-ink:color-mix(in srgb,#1875EE 78%,transparent)}
.v3-hero canvas.mo-dither{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,.12) 12%,rgba(0,0,0,.55) 48%,#000 82%),radial-gradient(ellipse 62% 30% at 34% 16%,transparent 58%,#000 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,rgba(0,0,0,.12) 12%,rgba(0,0,0,.55) 48%,#000 82%),radial-gradient(ellipse 62% 30% at 34% 16%,transparent 58%,#000 100%);mask-composite:intersect}
@media (max-width:767px){.v3-hero canvas.mo-dither{-webkit-mask:linear-gradient(90deg,transparent 55%,#000 92%);mask:linear-gradient(90deg,transparent 55%,#000 92%)}}
/* R24 motion: section-top pixel bands drift like a ticker (our px/pixel-band-animated.svg; it stops itself under reduced motion) */
@media (prefers-reduced-motion:no-preference){.v3-pxband{background-image:url(/assets/v3/px/pixel-band-animated.svg)}}
/* R24 motion: entrance on scroll,idle float,hover lift,accordion progress. All inside no-preference and only once
   home.js marked the page (html.v3-mo),so no-JS,reduced motion and the p8 check see the static final frame. */
@media (prefers-reduced-motion:no-preference){
  .v3-mo .rv{opacity:0;translate:0 14px;transition:opacity .6s cubic-bezier(.2,.7,.2,1),translate .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--rv-i,0) * 70ms)}
  .v3-mo .rv.in{opacity:1;translate:none}
  @keyframes v3-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
  
  .v3-aicard,.v3-story{transition:translate .25s ease-out,box-shadow .25s ease-out}
  .v3-aicard:hover,.v3-story:hover{translate:0 -3px;box-shadow:0 1px 2px rgba(28,32,36,.06),0 14px 32px -14px rgba(28,32,36,.22)}
  @keyframes v3-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  #how .v3-grid.acc .v3-card{position:relative}
  #how .v3-grid.acc.run .v3-card.on::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--violet-ui,#7E5BDC);transform-origin:0 50%;animation:v3-progress 6s linear forwards}
  [dir=rtl] #how .v3-grid.acc.run .v3-card.on::after{transform-origin:100% 50%}
  #how .v3-grid.acc.hold .v3-card.on::after{animation-play-state:paused}
  .v3-mo .v3-acc-b{transition:color .25s ease-out}
  #how .v3-grid.acc .v3-card p{transition:opacity .35s ease-out}
  .v3-faq details[open] p{animation:v3-fade .35s ease-out}
  @keyframes v3-fade{from{opacity:0;translate:0 -4px}to{opacity:1;translate:none}}
}
/* R24 hero mascot: our live mascot (bub.js: blink, gaze toward the cursor, spring bob; mood follows the hero chat) in the
   free space beside the hero copy. Static under reduced motion. */
.v3-hero-copy{position:relative}
.v3-hero-lp{position:absolute;z-index:2;width:118px;height:auto;inset-inline-end:40px;top:118px;filter:drop-shadow(0 10px 18px rgba(126,91,220,.28))}
@media (max-width:1023px){.v3-hero-lp{width:84px;top:200px;inset-inline-end:16px}}
@media (max-width:767px){.v3-hero-lp{width:52px;top:-6px;inset-inline-end:0}}
@media (prefers-reduced-motion:no-preference){@keyframes v3-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}.v3-hero-lp{animation:v3-bob 3.6s ease-in-out infinite}}
/* R24 hero iPhone: a modern phone drawn in CSS (titanium edge, black bezel, Dynamic Island, status bar, side buttons; no
   Apple artwork or marks) showing the visitor's side of the hero chat. >=768 it stands in the mock's right column (the
   owner's app on the left, the visitor's phone on the right); <768 it replaces the zoomed thread,cropped by the stage
   (section heights unchanged). Sizes are container units,so one drawing scales to every width. */
.v3-phonebox{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none;
  top:calc(12px + 56px + 12px + 16px);bottom:calc(12px + 16px);inset-inline-end:calc(12px + 16px);width:calc((100% - 24px) * .26 - 32px)}
.v3-iphone{container-type:inline-size;position:relative;width:100%;max-height:100%;aspect-ratio:9/19.5;box-sizing:border-box;padding:1.6cqw;border-radius:16.5cqw;
  background:linear-gradient(140deg,#e9eaed 0%,#9a9da4 18%,#d5d7db 38%,#7f828a 62%,#c8cacf 82%,#8c8f96 100%);
  box-shadow:0 2.5cqw 7cqw -1cqw rgba(15,17,19,.42),0 1cqw 2cqw rgba(15,17,19,.18),inset 0 0 0 .35cqw rgba(255,255,255,.55),inset 0 0 .8cqw rgba(0,0,0,.35)}
.v3-iphone::before,.v3-iphone::after{content:"";position:absolute;width:1.1cqw;border-radius:1cqw;background:linear-gradient(90deg,#7a7d84,#c9cbd0)}
.v3-iphone::before{inset-inline-end:-.9cqw;top:30%;height:16%}
.v3-iphone::after{inset-inline-start:-.9cqw;top:22%;height:9%;box-shadow:0 13cqw 0 #9a9da4,0 24cqw 0 #9a9da4}
.v3-iphone-screen{position:relative;height:100%;box-sizing:border-box;overflow:hidden;border-radius:15cqw;border:2.4cqw solid #0b0b0d;background:#fff;display:flex;flex-direction:column;
  font-family:-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;color:#1C2024}
.v3-iphone-island{position:absolute;z-index:2;top:2.6cqw;left:50%;width:31cqw;height:9cqw;translate:-50% 0;border-radius:99px;background:#000}
.v3-iphone-status{display:flex;justify-content:space-between;align-items:center;height:14cqw;padding:0 7.5cqw 0 9cqw;flex:none}
.v3-iphone-status b{font:600 5.4cqw/1 var(--font-body);letter-spacing:-.02em}
.v3-iphone-status span{display:flex;gap:1.6cqw;align-items:center}
.v3-iphone-status svg{height:3.8cqw;width:auto;fill:#1C2024}
.v3-iphone-bar{display:flex;align-items:center;gap:2.6cqw;padding:2cqw 4.5cqw 3cqw;border-bottom:.3cqw solid #E6E8EB;flex:none}
.v3-iphone-back{font:400 9cqw/1 var(--font-body);color:#1875EE;margin-top:-1cqw}
.v3-iphone-bar i{width:9.5cqw;height:9.5cqw;border-radius:50%;flex:none;background:#7E5BDC radial-gradient(circle at 36% 48%,#fff 0 9%,transparent 10%) ,#7E5BDC;
  background:radial-gradient(ellipse 7% 12% at 38% 48%,#fff 98%,transparent 100%),radial-gradient(ellipse 7% 12% at 62% 48%,#fff 98%,transparent 100%),#7E5BDC}
.v3-iphone-bar span{display:flex;flex-direction:column;min-width:0}
.v3-iphone-bar b{font:600 4.6cqw/1.2 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-iphone-bar small{font:500 3.6cqw/1.2 var(--font-body);color:#7353BA}
.v3-iphone-chat{flex:1 1 auto;list-style:none;margin:0;padding:4cqw 4cqw;display:flex;flex-direction:column;gap:2.6cqw;overflow:hidden;font:4.3cqw/1.32 inherit}
.v3-iphone-chat li{max-width:78%;padding:2.6cqw 3.6cqw;border-radius:5.5cqw}
.v3-iphone-chat .me{align-self:flex-end;background:#1875EE;color:#fff;border-end-end-radius:1.6cqw}
.v3-iphone-chat .ai{align-self:flex-start;background:#F0F1F4;border-end-start-radius:1.6cqw}
.v3-iphone-typing{display:none;gap:1.4cqw}
.v3-iphone-typing i{width:2cqw;height:2cqw;border-radius:50%;background:#8B8D98}
.v3-iphone-compose{display:flex;align-items:center;gap:2cqw;margin:0 4cqw 2.5cqw;padding:1.6cqw 1.6cqw 1.6cqw 4cqw;border-radius:99px;box-shadow:inset 0 0 0 .3cqw #D9DBE0;flex:none;font:4cqw/1 inherit;color:#8B8D98}
.v3-iphone-compose span{flex:1}
.v3-iphone-compose b{display:grid;place-items:center;width:7.5cqw;height:7.5cqw;border-radius:50%;background:#1875EE;color:#fff;font:700 4.4cqw/1 var(--font-body)}
.v3-iphone-home{width:34cqw;height:1.4cqw;border-radius:99px;background:#0b0b0d;margin:0 auto 2cqw;flex:none}
@media (max-width:1023px){.v3-phonebox{top:calc(12px + 56px + 12px + 16px)}}
@media (max-width:767px){
  .v3-phonebox{inset:12px 12px 0;width:auto;align-items:flex-start;overflow:hidden;-webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent)}
  .v3-iphone{width:232px;max-height:none;flex:none}
}
/* Typing in (home.js data-v3-iphone): bubbles appear one by one,a typing indicator before each reply */
.v3-iphone-chat.play li{display:none}
.v3-iphone-chat.play li.on{display:block;animation:v3-pop .35s cubic-bezier(.2,.7,.2,1)}
.v3-iphone-chat.play .v3-iphone-typing.on{display:flex}
@keyframes v3-pop{from{opacity:0;translate:0 6px;scale:.96}to{opacity:1;translate:none;scale:1}}
@keyframes v3-dot{0%,80%,100%{opacity:.35;translate:0 0}40%{opacity:1;translate:0 -1cqw}}
.v3-iphone-typing.on i{animation:v3-dot 1.1s ease-in-out infinite}.v3-iphone-typing.on i:nth-child(2){animation-delay:.15s}.v3-iphone-typing.on i:nth-child(3){animation-delay:.3s}
/* keep the real 9:19.5 body: width = the tighter of the column width and the height the mock leaves (638-32 / 393-32) */
.v3-phonebox{--ph:606px}
@media (max-width:1023px){.v3-phonebox{--ph:361px}}
@media (min-width:768px){.v3-iphone{width:min(100%,calc(var(--ph) * 9 / 19.5));max-height:none}}
/* the body is a child,so its cqw units resolve against the phone (the container),not the page */
.v3-iphone{padding:0;border-radius:0;background:none;box-shadow:none}
.v3-iphone::before,.v3-iphone::after{content:none}
.v3-iphone-body{position:relative;height:100%;box-sizing:border-box;padding:1.6cqw;border-radius:16.5cqw;
  background:linear-gradient(140deg,#e9eaed 0%,#9a9da4 18%,#d5d7db 38%,#7f828a 62%,#c8cacf 82%,#8c8f96 100%);
  box-shadow:0 2.5cqw 7cqw -1cqw rgba(15,17,19,.42),0 1cqw 2cqw rgba(15,17,19,.18),inset 0 0 0 .35cqw rgba(255,255,255,.55),inset 0 0 .8cqw rgba(0,0,0,.35)}
.v3-iphone-body::before,.v3-iphone-body::after{content:"";position:absolute;width:1.1cqw;border-radius:1cqw;background:linear-gradient(90deg,#7a7d84,#c9cbd0)}
.v3-iphone-body::before{inset-inline-end:-.9cqw;top:30%;height:16%}
.v3-iphone-body::after{inset-inline-start:-.9cqw;top:22%;height:9%;box-shadow:0 13cqw 0 #9a9da4,0 24cqw 0 #9a9da4}
@media (max-width:767px){.v3-iphone{aspect-ratio:9/19.5;height:auto}}
/* R25 header: the template's five top-level items (Product, Who it's for, Resources with dropdowns of real pages;
   Pricing, Help). Native <details name="v3-nav">: keyboard friendly,one open at a time; home.js closes it on an
   outside click or Escape. */
.v3-dd{position:relative}
.v3-dd>summary{display:inline-flex;align-items:center;gap:6px;height:32.25px;padding:0 12px;cursor:pointer;list-style:none;line-height:20.25px}
.v3-dd>summary::-webkit-details-marker{display:none}
.v3-dd>summary::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;opacity:.6;transition:rotate .2s}
.v3-dd[open]>summary::after{rotate:225deg;margin-top:3px}
.v3-ddm{position:absolute;z-index:30;top:calc(100% + 8px);inset-inline-start:0;display:grid;min-width:220px;padding:6px;border-radius:10px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 16px 40px -12px rgba(28,32,36,.25)}
.v3-ddm a{display:block;padding:9px 12px;border-radius:6px;white-space:nowrap;color:var(--ink);text-decoration:none}
.v3-ddm a:hover,.v3-ddm a:focus-visible{background:var(--bg-subtle,#F7F8FA)}
.v3-dd>summary:focus-visible{outline:2px solid var(--blue-ui,#1875EE);outline-offset:2px;border-radius:6px}
.v3-header .v3-nav .v3-ddm a,.v3-header .v3-nav .v3-ddm a:nth-child(n){display:block;width:auto;height:auto;padding:9px 12px;text-align:start;line-height:1.35}
/* R25 floating badges on the art panels (the template's tilted outlined cards, our copy): label + value. G and H sit
   inside their panel; D,E and F are pinned to their art's top-right corner with CSS anchor positioning (no rect moves;
   without anchor support they are simply not shown). */
.v3-fbadge{position:absolute;z-index:6;display:flex;flex-direction:column;gap:3px;padding:9px 14px;background:#fff;border:1.5px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);pointer-events:none;rotate:2deg;white-space:nowrap}
.v3-fbadge small{font:var(--fw-semibold) 10.5px/1 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.v3-fbadge b{font:var(--fw-semibold) 13.5px/1.2 var(--font-label);color:var(--ink)}
.v3-fbadge--g,.v3-fbadge--h{top:-14px;inset-inline-end:24px}
.v3-fbadge--h{rotate:-2deg}
#uses .v3-field{overflow:visible}
.v3-fbadge--d,.v3-fbadge--e,.v3-fbadge--f{display:none}
@supports (anchor-name:--a){
  .v3-flowpic{anchor-name:--art-d}.v3-art-elink{anchor-name:--art-e}.v3-art-fstage{anchor-name:--art-f}
  .v3-fbadge--d,.v3-fbadge--e,.v3-fbadge--f{display:flex;top:anchor(top);right:anchor(right);translate:-24px -50%}
  .v3-fbadge--d{position-anchor:--art-d}.v3-fbadge--e{position-anchor:--art-e;rotate:-2deg}.v3-fbadge--f{position-anchor:--art-f}
  .v3-ctl-tabs{position-anchor:--art-f;top:anchor(top);left:anchor(center);translate:-50% -50%}
}
@media (prefers-reduced-motion:no-preference){.v3-fbadge{animation:v3-float 4.5s ease-in-out infinite}.v3-fbadge--e,.v3-fbadge--h{animation-delay:.8s}}
/* R25 Control status row (the template's sub-tabs, our states),straddling the top edge of the request card */
.v3-ctl-tabs{position:absolute;z-index:5;display:flex;gap:0;padding:4px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 18px -8px rgba(28,32,36,.2)}
@supports not (anchor-name:--a){.v3-ctl-tabs{display:none}}
.v3-ctl-tabs span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:7px;font:var(--fw-medium) 13px/1 var(--font-label);color:var(--mute);white-space:nowrap}
.v3-ctl-tabs span::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5}
.v3-ctl-tabs .on{background:var(--green-tint,#E7F6EF);color:var(--green-text,#0E7C58)}
.v3-ctl-tabs .on::before{opacity:1}
/* R26 hero like the live myai.is hero (G): the live title (home.hero.headline, Bricolage 700, the live clamp sizes,
   1.02 line height, -.045em, 14ch, start-aligned),copy left and the iPhone right at the top (live grid 1.25fr 1fr at
   >=960),the live mascot inside the phone screen. The app mock stays below (its own right column back); <768 the
   phone already shows the chat,so the mock is not repeated. */
.v3-hero-top{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.v3-hero-top{grid-template-columns:1.25fr 1fr}}
.v3-hero .v3-h1{font:700 clamp(2.35rem,.9rem + 5vw,4.75rem)/1.02 var(--font-display);letter-spacing:-.045em;max-width:14ch;text-align:start;text-wrap:balance}
@media (max-width:959.98px){.v3-hero .v3-h1{font-size:clamp(2.1rem,1.2rem + 4vw,2.6rem)}}
.v3-hero-top .v3-phonebox{position:relative;inset:auto;width:auto;height:auto;top:auto;bottom:auto;display:flex;justify-content:center;-webkit-mask:none;mask:none;overflow:visible;pointer-events:none}
@media (min-width:960px){.v3-hero-top .v3-phonebox{justify-content:flex-end}}
.v3-hero-top .v3-iphone,.v3-hero-top .v3-iphone:is(*){width:min(300px,100%);max-height:none;aspect-ratio:9/19.5;height:auto;flex:none}
@media (max-width:767px){.v3-hero-top .v3-iphone{width:min(270px,78vw)}}
@media (prefers-reduced-motion:no-preference){.v3-hero-top .v3-iphone{animation:v3-float 5s ease-in-out infinite}}
@media (max-width:767px){.v3-hero .v3-works{margin-top:40px}}
/* the live mascot inside the phone: a greeting above the chat (bub.js keeps it alive; mood follows the chat) */
.v3-iphone-hello{display:flex;justify-content:center;padding:3cqw 0 0;flex:none}
.v3-iphone-hello .v3-hero-lp{position:static;width:26cqw;height:auto;inset:auto;filter:drop-shadow(0 2cqw 3cqw rgba(126,91,220,.3));animation:none}
/* pixel field on both sides (G): cleared only behind the copy,like the live hero; the poster too */
.v3-hero canvas.mo-dither{-webkit-mask:radial-gradient(ellipse 46% 40% at 30% 30%,transparent 55%,#000 100%);mask:radial-gradient(ellipse 46% 40% at 30% 30%,transparent 55%,#000 100%);-webkit-mask-composite:source-over;mask-composite:add}
.v3-hero,.v3-hero[data-mo-live]{background:radial-gradient(ellipse 46% 40% at 30% 30%,var(--bg) 55%,rgba(255,255,255,0) 100%),url(/assets/v3/px/tile-band-blue.svg) 0 0 repeat,var(--bg)}
.v3-hero[data-mo-live]{background:radial-gradient(ellipse 46% 40% at 30% 30%,var(--bg) 55%,rgba(255,255,255,0) 100%),var(--bg)}
@media (max-width:767px){
  .v3-hero canvas.mo-dither{-webkit-mask:radial-gradient(ellipse 80% 26% at 40% 20%,transparent 60%,#000 100%);mask:radial-gradient(ellipse 80% 26% at 40% 20%,transparent 60%,#000 100%)}
  .v3-hero{background:radial-gradient(ellipse 80% 26% at 40% 20%,var(--bg) 60%,rgba(255,255,255,0) 100%),url(/assets/v3/px/tile-band-blue.svg) 0 0 repeat,var(--bg)}
  .v3-hero[data-mo-live]{background:radial-gradient(ellipse 80% 26% at 40% 20%,var(--bg) 60%,rgba(255,255,255,0) 100%),var(--bg)}
}
.v3-iphone-island{width:28cqw}.v3-iphone-status{padding:0 6.5cqw 0 8.5cqw}.v3-iphone-status svg{height:3.4cqw}
/* R26: G asked for the iPhone at the top of the hero,so the hero's height follows its content (the template-pinned
   block-size in site-v3.css is released for B only; every other section keeps its template height) */
body>main>section.v3-hero{block-size:auto;min-block-size:0}
/* R26 (G): no visible vertical margin lines; the frame and every margin stay exactly where they were */
body::after{border-inline-color:transparent}
/* R26 pixel hover trail canvas (home.js) and the colour each pixel zone trails in */
.v3-pxhover{position:fixed;inset:0;z-index:50;width:100vw;height:100vh;pointer-events:none}
.v3-pxband,.v3-edge,.v3-works{--pxh:#AEB4BE}
.v3-flowpic,.v3-aiband{--pxh:#7E5BDC}
#apps .v3-art,#uses .v3-field{--pxh:#1875EE}
.v3-art-fstage,.v3-ctl-panel{--pxh:#12946A}
.v3-faq-pic,.v3-closing{--pxh:#E0A419}
/* R27 (peer review): E is one row: the head,the one-link art and the numbered channel list. The planned-cards row,the floating channel tiles and the chip marquee (all repeating "Planned") are gone; the section ends after the row. */
body>main>section#apps.v3-section{block-size:auto;min-block-size:0;min-height:0}
@media (min-width:768px){body>main>section#apps.v3-section{min-height:1100px}}
@media (min-width:1024px){body>main>section#apps.v3-section{min-height:996px}}
@media (max-width:767px){#apps .v3-art-elink{--t:330px}#apps{--apps-list-top:687px}}
/* R27: each example card opens the working example chat (/hq); the chip is the link and stretches over the card */
.v3-story{position:relative}
.v3-story-link{text-decoration:none;color:inherit}
.v3-story-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.v3-story:has(.v3-story-link:hover){box-shadow:var(--shadow-card),0 0 0 2px var(--blue-ui,#1875EE)}
.v3-story-link:focus-visible{outline:2px solid var(--blue-ui,#1875EE);outline-offset:2px}
/* R27 contrast (WCAG 1.4.3): the phone's blue darkened so white bubble text reaches 5.3:1 (was 4.36:1); the compose
   placeholder reaches 4.8:1 (was 3.3:1). "Planned" labels in HTML already pass (slate text on slate tint). */
.v3-iphone-back{color:#1468D6}
.v3-iphone-chat .me,.v3-iphone-compose b{background:#1468D6}
.v3-iphone-compose span{color:#6B6E78}
/* R27 contrast: planned channels in the hero strip were the live ink at 45% opacity (~2.8:1). They stay quieter than
   the live one through colour,not opacity: slate text,5.9:1 on white; the icon keeps a faded look. */
.v3-works li{opacity:1;color:var(--slate-text,#60646C)}
.v3-works li img,.v3-works li svg{opacity:.55}
.v3-works li.on{color:var(--ink-strong)}.v3-works li.on img,.v3-works li.on svg{opacity:1}
/* R27 focus (WCAG 2.4.7): one visible ring for every focusable control,which component styles can't remove */
:is(a,button,summary,select,input,textarea,[role=tab],[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--focus-ring,#1875EE)!important;outline-offset:2px!important}
.v3-tabs [role=tab]:focus-visible,.v3-hero [role=tab]:focus-visible{outline-offset:-2px!important}
/* example cards: the link itself covers the card,so it has a real hit area and its focus ring outlines the card */
.v3-story-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.v3-story-link::after{content:none}
/* R27 l10n: the machine-translation note under the header,as a quiet v3 bar inside the frame */
.mt-note{display:block;max-width:var(--frame);box-sizing:border-box;margin:0 auto;padding:8px calc(var(--gutter) + 1px);background:var(--bg-subtle,#F7F8FA);border-block-end:1px solid var(--line);color:var(--mute);font:var(--fw-regular) var(--text-small,13px)/1.4 var(--font-body);text-align:start}
.mt-note::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:2px;background:var(--amber-ui,#E0A419);vertical-align:1px}
/* R27 RTL: the copy sits on the right,so the hero's clear zone mirrors to the right too */
@media (min-width:768px){
[dir=rtl] .v3-hero canvas.mo-dither{-webkit-mask:radial-gradient(ellipse 46% 40% at 70% 30%,transparent 55%,#000 100%);mask:radial-gradient(ellipse 46% 40% at 70% 30%,transparent 55%,#000 100%)}
[dir=rtl] .v3-hero,[dir=rtl] .v3-hero[data-mo-live]{background:radial-gradient(ellipse 46% 40% at 70% 30%,var(--bg) 55%,rgba(255,255,255,0) 100%),url(/assets/v3/px/tile-band-blue.svg) 0 0 repeat,var(--bg)}
[dir=rtl] .v3-hero[data-mo-live]{background:radial-gradient(ellipse 46% 40% at 70% 30%,var(--bg) 55%,rgba(255,255,255,0) 100%),var(--bg)}
}
@media (max-width:767px){
[dir=rtl] .v3-hero canvas.mo-dither{-webkit-mask:radial-gradient(ellipse 80% 26% at 60% 20%,transparent 60%,#000 100%);mask:radial-gradient(ellipse 80% 26% at 60% 20%,transparent 60%,#000 100%)}
[dir=rtl] .v3-hero,[dir=rtl] .v3-hero[data-mo-live]{background:radial-gradient(ellipse 80% 26% at 60% 20%,var(--bg) 60%,rgba(255,255,255,0) 100%),url(/assets/v3/px/tile-band-blue.svg) 0 0 repeat,var(--bg)}
[dir=rtl] .v3-hero[data-mo-live]{background:radial-gradient(ellipse 80% 26% at 60% 20%,var(--bg) 60%,rgba(255,255,255,0) 100%),var(--bg)}
}
/* R27: the progress bar is a scaled pseudo-element{background-image:none;position:relative}
/* R28: the mobile menu carries the same destinations as the desktop nav,grouped under the dropdown names */
.v3-menu-panel{max-height:calc(100dvh - 61px);overflow-y:auto;overscroll-behavior:contain}
.v3-menu-h{margin:12px 0 0;font:var(--fw-label) var(--text-eyebrow-xs,11px)/1.2 var(--font-label);letter-spacing:var(--tr-eyebrow-xs,.08em);text-transform:uppercase;color:var(--mute)}
.v3-menu-panel a{padding:10px 0}
.v3-menu-sep{border:0;border-top:1px solid var(--line);margin:12px 0 4px}
/* ===== R29 hero (G: "Cut both"; headline block from live myai.is). The stage,app mock and API panel are gone:
   title,the handle field with the cycling example names,one helper line,the CTAs,a works-with row,and the iPhone. */
.v3-hero-top{align-items:center}
.v3-hero .v3-hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.v3-hero-cap{margin:10px 0 0;font:var(--fw-regular) clamp(1rem,.95rem + .2vw,1.125rem)/1.45 var(--font-body);color:var(--mute)}
.v3-hero .v3-hero-copy .v3-lede{margin-top:20px}
.v3-hero-works{margin-top:32px}
.v3-hero-works-h{margin:0 0 10px;font:var(--fw-label) var(--text-eyebrow-xs,11px)/1.2 var(--font-label);letter-spacing:var(--tr-eyebrow-xs,.08em);text-transform:uppercase;color:var(--mute)}
.v3-hero-works ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.v3-hero-works li{display:inline-flex;align-items:center;gap:8px;font:var(--fw-medium) 14px/1 var(--font-label);color:var(--ink-strong)}
.v3-hero-works li.is-live{padding:6px 12px 6px 8px;border-radius:999px;background:var(--green-tint,#E9F7F1);color:var(--green-text,#0B6E4F)}
.v3-hero-works-lbl{padding:4px 8px;border-radius:var(--radius-chip,6px);background:var(--slate-tint,#F6F6F8);color:var(--slate-text,#60646C)!important;font-size:12px!important}
/* other apps are planned: their logos stay unaltered (official colours) at a modest size; the label carries the status */
.v3-mk{display:block;inline-size:22px;block-size:22px;flex:none}
.v3-mk--ico{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--mute)}
.v3-hero-works li.is-live .v3-mk--ico{color:var(--green-text,#0B6E4F)}
.v3-hero-works-cap{margin:10px 0 0;font:var(--fw-regular) 13px/1.4 var(--font-body);color:var(--mute)}
/* the phone owns its pause control now (its chat loop plays twice; WCAG 2.2.2) */
.v3-hero-top .v3-phonebox{flex-direction:column;align-items:center;gap:12px}
.v3-phonebox .v3-pause{position:static;inset:auto;align-self:center}
body>main>section.v3-hero{padding-bottom:56px}
@media (max-width:959.98px){.v3-hero-top{gap:32px}}
@media (prefers-reduced-motion:no-preference){
  @keyframes v3-cycle{0%{visibility:visible}25%,100%{visibility:hidden}}
  @keyframes v3-blink{50%{opacity:0}}
}
/* ===== R29 header logo (G: "animate top left logo and make it larger a little"): ~18% larger,a one-time pixel
   entrance,and a blink on hover; transform/opacity only (compositor),off under reduced motion,focus ring kept. */
.v3-header .v3-brand img{width:28px;height:28px}
.v3-header .v3-brand span{transform:scale(1.18);transform-origin:0 60%;margin-inline-end:16px}
[dir=rtl] .v3-header .v3-brand span{transform-origin:100% 60%}
@media (prefers-reduced-motion:no-preference){
  .v3-header .v3-brand img{animation:v3-logo-in .7s steps(5,end) both}
  @keyframes v3-logo-in{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
  .v3-header .v3-brand:hover img,.v3-header .v3-brand:focus-visible img{animation:v3-logo-blink .5s steps(2,end) 1}
  @keyframes v3-logo-blink{0%,100%{transform:none}50%{transform:scaleY(.82) translateY(1px)}}
}
.v3-tm{margin:8px 0 0;max-width:72ch;font:var(--fw-regular) 12px/1.5 var(--font-body);color:var(--mute)}
/* R29: the clear zone follows the taller copy column (title, handle, helper, lede, CTAs, works row) */
@media (min-width:768px){
.v3-hero canvas.mo-dither{-webkit-mask:radial-gradient(ellipse 44% 58% at 27% 54%,transparent 62%,#000 100%);mask:radial-gradient(ellipse 44% 58% at 27% 54%,transparent 62%,#000 100%)}
.v3-hero,.v3-hero[data-mo-live]{background:radial-gradient(ellipse 44% 58% at 27% 54%,var(--bg) 62%,rgba(255,255,255,0) 100%),url(/assets/v3/px/tile-band-blue.svg) 0 0 repeat,var(--bg)}
.v3-hero[data-mo-live]{background:radial-gradient(ellipse 44% 58% at 27% 54%,var(--bg) 62%,rgba(255,255,255,0) 100%),var(--bg)}
[dir=rtl] .v3-hero canvas.mo-dither{-webkit-mask:radial-gradient(ellipse 44% 58% at 73% 54%,transparent 62%,#000 100%);mask:radial-gradient(ellipse 44% 58% at 73% 54%,transparent 62%,#000 100%)}
[dir=rtl] .v3-hero,[dir=rtl] .v3-hero[data-mo-live]{background:radial-gradient(ellipse 44% 58% at 73% 54%,var(--bg) 62%,rgba(255,255,255,0) 100%),url(/assets/v3/px/tile-band-blue.svg) 0 0 repeat,var(--bg)}
[dir=rtl] .v3-hero[data-mo-live]{background:radial-gradient(ellipse 44% 58% at 73% 54%,var(--bg) 62%,rgba(255,255,255,0) 100%),var(--bg)}
}
@media (max-width:767px){
.v3-hero canvas.mo-dither{-webkit-mask:radial-gradient(ellipse 95% 30% at 45% 26%,transparent 66%,#000 100%);mask:radial-gradient(ellipse 95% 30% at 45% 26%,transparent 66%,#000 100%)}
.v3-hero,.v3-hero[data-mo-live]{background:radial-gradient(ellipse 95% 30% at 45% 26%,var(--bg) 66%,rgba(255,255,255,0) 100%),url(/assets/v3/px/tile-band-blue.svg) 0 0 repeat,var(--bg)}
.v3-hero[data-mo-live]{background:radial-gradient(ellipse 95% 30% at 45% 26%,var(--bg) 66%,rgba(255,255,255,0) 100%),var(--bg)}
[dir=rtl] .v3-hero canvas.mo-dither{-webkit-mask:radial-gradient(ellipse 95% 30% at 55% 26%,transparent 66%,#000 100%);mask:radial-gradient(ellipse 95% 30% at 55% 26%,transparent 66%,#000 100%)}
[dir=rtl] .v3-hero,[dir=rtl] .v3-hero[data-mo-live]{background:radial-gradient(ellipse 95% 30% at 55% 26%,var(--bg) 66%,rgba(255,255,255,0) 100%),url(/assets/v3/px/tile-band-blue.svg) 0 0 repeat,var(--bg)}
[dir=rtl] .v3-hero[data-mo-live]{background:radial-gradient(ellipse 95% 30% at 55% 26%,var(--bg) 66%,rgba(255,255,255,0) 100%),var(--bg)}
}
/* ===== R4 business copy: one primary CTA ("Claim your link") everywhere; the claim field is a real form to /signup
   (?handle= pre-fills),the live myai.is pill look. One quiet secondary ("See an example chat"). */
.v3-claim{display:flex;align-items:center;gap:10px;inline-size:100%;max-inline-size:36rem;margin:24px 0 0;padding:8px;box-sizing:border-box;border-radius:999px;background:var(--bg);box-shadow:0 0 0 1px var(--line-strong,#D9D9E0),var(--shadow-card)}
.v3-claim:focus-within{box-shadow:0 0 0 2px var(--focus-ring,#1875EE),var(--shadow-card)}
.v3-claim-field{display:flex;align-items:center;flex:1;min-inline-size:0;padding-inline-start:16px;font:var(--fw-bold) clamp(1.25rem,.95rem + 1.3vw,1.9rem)/1.1 var(--font-display);letter-spacing:-.01em;color:var(--ink-strong);cursor:text}
.v3-claim-field::before{content:"";inline-size:12px;block-size:12px;margin-inline-end:12px;border-radius:2px;background:var(--green-ui,#12946A);flex:none}
.v3-claim-pre{white-space:nowrap}
.v3-claim input{flex:1;min-inline-size:0;inline-size:100%;border:0;outline:0;background:none;padding:0;font:inherit;letter-spacing:inherit;color:var(--blue-text,#2B59C3)}
.v3-claim input::placeholder{color:var(--blue-text,#2B59C3);opacity:.55}
.v3-claim input:focus-visible{outline:0!important}
.v3-claim .v3-btn{flex:none;border-radius:999px;block-size:52px;padding-inline:22px}
.v3-hero-trust{margin:14px 0 0;font:var(--fw-medium) 14px/1.4 var(--font-label);color:var(--green-text,#0B6E4F)}
.v3-hero .v3-hero-cap{margin-top:10px}
.v3-hero-cta2{margin:16px 0 0}
.v3-cta2{font:var(--fw-medium) 15px/1.3 var(--font-label);color:var(--ink-strong);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong,#C9CCD3)}
.v3-cta2:hover{text-decoration-color:currentColor}
.v3-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:48px 0 0}
.v3-closing-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.v3-closing .v3-claim{margin-top:24px}
@media (max-width:599.98px){
  .v3-claim{flex-direction:column;align-items:stretch;border-radius:20px;padding:10px}
  .v3-claim-field{padding:8px 8px 4px 10px}
  .v3-claim .v3-btn{inline-size:100%;justify-content:center}
}
/* the sections the CTA rows were added to grow with them (their p8 heights were pinned) */
body>main>section#how,body>main>section#faq,body>main>section#uses,body>main>section#stories{block-size:auto;min-block-size:0;min-height:0}
/* R4 fixes: the header CTA and the hero eyebrow carry longer copy now (width from content, not the template rects);
   the iPhone's Example chat label keeps the phone's own small type,not the old stage chip */
.v3-hact .v3-btn--primary{width:auto;white-space:nowrap;padding-inline:14px}
.v3-hero .v3-eyebrow{width:auto;max-width:100%;height:auto;min-height:35px;padding:6px 14px;white-space:normal;line-height:1.3}
.v3-iphone-bar .v3-sample-label{position:static;display:block;align-self:auto;margin:0;padding:0;border-radius:0;background:none;font:500 3.6cqw/1.2 var(--font-body);color:#7353BA}
@media (max-width:639.98px){.v3-hact .v3-btn--primary{display:none}}
/* R4: Imprint joined the legal row; widths come from the text (the template slots were sized for three links) */
.v3-flegal>a:nth-child(n){width:auto;margin-inline-end:0}

/* Persona scenarios: plain quotes in a grid, a small footnote under them (no stars, photos or review styling) */
.v3-personas{padding-bottom:var(--space-8,64px)}
.v3-personas-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:640px){.v3-personas-list{grid-template-columns:repeat(2,1fr)}}
/* five quotes: three then two on wide screens, so no card sits alone on a row */
@media (min-width:1024px){.v3-personas-list{grid-template-columns:repeat(6,1fr)}.v3-personas-list li{grid-column:span 2}.v3-personas-list li:nth-child(n+4){grid-column:span 3}}
.v3-personas-list figure{margin:0;height:100%;display:flex;flex-direction:column;gap:14px;padding:22px 24px;border:1px solid var(--line,#E4E6EB);border-radius:var(--radius-card,16px);background:var(--bg,#fff)}
.v3-personas-list blockquote{margin:0}
.v3-personas-list blockquote p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.v3-personas-list figcaption{margin-top:auto;font:var(--fw-semibold,600) 13.5px/1.35 var(--font-label);color:var(--ink-strong)}
.v3-personas-note{margin:16px 0 0;font-size:13px;line-height:1.4;color:var(--mute)}