/* THE V3 APP PAGE: /apps/<key> (src/app-landing.ts renderAppLanding) and the generic /apps/_shell (src/catalog-pages.ts).
 * Tokens and type are the v3 pages' shared block (pages/home.html); the layout is the mockups' app page
 * (~/Work/.site-platform-mockups/pages/parked/platform-2026-10-19/app-*.html). The live start form keeps its own
 * stylesheet (/landing/app-start/app-start.css, loaded first); the restyle at the end of this file only re-skins it.
 * `.al-hero`, `.al-hero-copy`, `.al-hero-media` and `.al-examples` are the start form script's contract. */
:root{
  --bg:hsl(226 72% 7%); --bg-2:hsl(226 61% 10%); --card:hsl(225 39% 14%); --card-2:hsl(225 39% 11%);
  --border:hsl(217 24% 27%); --border-soft:hsl(217 24% 27% / .5);
  --fg:hsl(210 40% 96%); --muted:hsl(215 18% 72%); --dim:hsl(215 14% 56%);
  --primary:hsl(217 91% 60%); --primary-hover:hsl(217 91% 60% / .88);
  --cyan:hsl(190 90% 60%); --violet:hsl(262 83% 68%); --success:hsl(152 74% 40%);
  --radius:.6rem; --radius-lg:1rem;
  --font-body:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-heading:"Roboto Slab",ui-serif,Georgia,serif;
  --wrap:1200px;
  /* the names the start form's stylesheet reads */
  --ink:var(--fg); --edge:var(--border);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.12}
h1{font-size:clamp(2rem,4vw,3.2rem)}
h2{font-size:clamp(1.7rem,3vw,2.4rem)}
h3{font-size:1.15rem}
ul,ol{list-style:none}
.msym{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;flex:none}
.eyebrow,.k-eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.lede{color:var(--muted);font-size:1.12rem;max-width:44rem}
.glow{position:absolute;pointer-events:none;filter:blur(90px);opacity:.35;border-radius:50%}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:var(--radius);font-weight:600;font-size:.95rem;line-height:1.6;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s;cursor:pointer}
.btn-primary,.btn-grad{background:var(--primary);color:#fff}
.btn-primary:hover,.btn-grad:hover{background:var(--primary-hover);transform:translateY(-1px)}
.btn-ghost{border-color:var(--border);color:var(--fg);background:hsl(225 39% 14% / .4)}
.btn-ghost:hover{border-color:var(--primary)}
.btn .msym{font-size:18px}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
[id]{scroll-margin-top:88px}

.apps-detail{padding:0 0 8px}
.app-landing{overflow-wrap:anywhere}
.app-landing section{position:relative}

/* ===== hero ===== */
.al-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:start;padding:40px 0 8px;isolation:isolate}
.al-hero.has-media,.al-hero:has(> .app-start:not([hidden])){grid-template-columns:minmax(0,1fr) 420px}
.al-hero>*{min-width:0}
.al-hero .glow.a{width:560px;height:420px;background:var(--primary);top:-200px;left:-220px;z-index:-1}
.al-hero .glow.b{width:480px;height:380px;background:var(--violet);top:120px;right:-240px;opacity:.2;z-index:-1}
.back{display:flex;width:fit-content;align-items:center;gap:6px;font-size:.88rem;color:var(--muted);margin-bottom:20px}
.back .msym{font-size:18px}
.back:hover{color:var(--fg)}
.al-hero .eyebrow{display:inline-flex;align-items:center;gap:8px}
.al-hero .eyebrow .msym{font-size:18px}
.al-hero h1{font-size:clamp(2rem,3.5vw,2.9rem);margin:12px 0 16px;text-wrap:balance}
.al-hero .lede{font-size:1.06rem;max-width:36rem}
.decide{display:flex;gap:12px;align-items:flex-start;margin-top:22px;max-width:36rem;padding:14px 16px;border-radius:12px;border:1px solid var(--border-soft);background:hsl(225 39% 11% / .6);font-size:.92rem;color:var(--muted);line-height:1.5}
.decide .msym{color:var(--cyan);font-size:22px;margin-top:-1px}
.decide b{color:var(--fg);font-weight:600}
.fact{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:center;padding:18px 22px;border-radius:14px;border:1px solid hsl(217 91% 60% / .35);background:linear-gradient(135deg,hsl(217 91% 60% / .12),hsl(225 39% 11% / .6) 60%);max-width:36rem}
.fact .big{font-size:2.3rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.fact .big small{display:block;font-size:.72rem;font-weight:500;letter-spacing:.02em;color:var(--muted);margin-top:6px;max-width:12rem;line-height:1.35}
.fact p{font-size:.92rem;color:var(--fg);line-height:1.45}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.trust{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;color:var(--muted);margin-top:12px;max-width:36rem}
.trust::before{content:"";flex:none;width:14px;height:14px;margin-top:3px;border-radius:50%;background:hsl(152 74% 40% / .2);box-shadow:inset 0 0 0 4px var(--success)}

/* the transformation: stacked in the hero's right column, side by side once it moves into #example */
.al-hero-media{min-width:0}
.ba{display:grid;grid-template-columns:1fr;gap:12px;padding:22px;border-radius:20px;border:1px solid var(--border-soft);background:radial-gradient(60% 80% at 50% 50%,hsl(217 91% 60% / .1),transparent),hsl(225 39% 9% / .6);box-shadow:0 30px 80px -40px hsl(217 91% 40% / .7)}
.ba>*{min-width:0}
.ba-k{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;display:block}
.ba-arrow{display:grid;place-items:center;color:var(--cyan)}
.ba-arrow .msym{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid hsl(190 90% 60% / .4);background:hsl(190 90% 60% / .08);font-size:18px;transform:rotate(90deg)}
.al-brings,.al-makes{display:grid;gap:8px}
.al-brings li{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card-2);font-size:.9rem;color:var(--fg);line-height:1.35}
.al-brings li .msym{color:var(--dim);font-size:18px}
.al-brings em{margin-left:auto;font-style:normal;font-size:.7rem;color:var(--dim);padding-left:8px}
.al-makes li{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:10px 12px;border:1px solid hsl(152 74% 40% / .35);border-radius:12px;background:hsl(152 74% 40% / .07);font-weight:500;font-size:.92rem;line-height:1.35}
.al-makes li .msym{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:hsl(217 91% 60% / .2);color:#fff;font-size:20px}
.ba-note{margin-top:10px;font-size:.78rem;color:var(--dim)}
.al-out-img{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#fff;box-shadow:0 30px 60px -30px hsl(217 91% 40% / .7)}
.al-out-img img{width:100%;height:auto;max-height:420px;object-fit:contain;margin:0 auto}
.al-out-img figcaption{padding:8px 12px;font-size:.76rem;color:var(--muted);background:var(--card-2);line-height:1.45}
.al-out-excerpt{margin:12px 0 0}
.al-out-excerpt img{width:100%;height:auto;border-radius:10px;background:#fff;padding:8px}
.al-out-excerpt figcaption{margin-top:6px;font-size:.74rem;color:var(--dim);line-height:1.45}

/* ===== proof ===== */
.proof-logos{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:32px;padding:22px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);margin-top:48px}
.proof-logos .lbl{font-size:.78rem;color:var(--dim);max-width:12rem;line-height:1.4}
.proof-logos .row{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:nowrap;justify-content:space-evenly}
.proof-logos img{height:22px;width:auto;max-width:140px;filter:brightness(0) invert(1);opacity:.7}

/* ===== #example ===== */
.al-examples{display:flex;flex-direction:column;padding:72px 0 0}
.al-examples>.k-head{order:-1}
.k-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:32px}
.k-head h2{margin-top:12px}
.k-head>p{color:var(--muted)}
.al-examples>.al-hero-media{margin-bottom:28px}
.al-examples .ba{grid-template-columns:minmax(0,.8fr) 44px minmax(0,1.2fr);align-items:center;padding:28px;gap:0}
.al-examples .ba-arrow .msym{transform:none}
.al-examples .ba.has-image .ba-out{max-width:560px}
.al-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:28px}
.al-example{margin:0;min-width:0;border:1px solid var(--border-soft);border-radius:16px;overflow:hidden;background:var(--card-2)}
.al-example img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:hsl(0 0% 100% / .04)}
.al-example figcaption{padding:20px}.al-example h3{margin-bottom:14px}
.al-brief-label{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.al-example blockquote{font-size:.92rem;color:var(--muted);margin:6px 0 16px}
.al-example a{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.bgd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border-soft);border-radius:16px;overflow:hidden;background:hsl(225 39% 9% / .5)}
.bgd>div{padding:24px;display:flex;flex-direction:column;gap:12px}
.bgd>div+div{border-left:1px solid var(--border-soft)}
.bgd h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.bgd ul{display:grid;gap:9px;font-size:.92rem;color:var(--fg)}
.bgd li{position:relative;padding-left:16px;line-height:1.5}
.bgd li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--border)}
.bgd .get li::before{background:var(--success)}
.bgd em{font-style:normal;color:var(--dim);font-size:.82rem}
.bgd p{font-size:.88rem;color:var(--muted)}
.bgd a{color:var(--fg);text-decoration:underline;text-underline-offset:4px}

/* ===== how it runs ===== */
.al-run{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start;padding:72px 0 0}
.al-run-head{position:sticky;top:96px}
.al-run-head h2{margin:12px 0}
.al-run-head p{color:var(--muted)}
.al-steps{display:grid;gap:10px;counter-reset:none}
.al-steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:16px 18px;border:1px solid var(--border-soft);border-radius:14px;background:var(--card-2);line-height:1.5}
.al-steps .n{font-size:.8rem;font-weight:600;color:var(--cyan);font-variant-numeric:tabular-nums;padding-top:2px;letter-spacing:.08em}

/* ===== moments ===== */
.al-who{padding:72px 0 0}
.al-who-head{margin-bottom:24px}.al-who-head h2{margin-top:12px;max-width:30ch;text-wrap:balance}
.al-triggers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.al-triggers li{display:flex;gap:12px;align-items:flex-start;padding:20px;border-radius:14px;border:1px solid var(--border-soft);background:hsl(225 39% 11% / .65);color:var(--muted);line-height:1.55}
.al-triggers .msym{color:var(--cyan);font-size:22px}

/* ===== price ===== */
.al-pricing{padding:72px 0 0}
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:40px;border-radius:20px;border:1px solid var(--border-soft);background:hsl(225 39% 9% / .6)}
.price h2{margin-top:12px;text-wrap:balance}
.price .lede{margin-top:14px;font-size:1rem}
.price p{color:var(--muted);margin-top:14px}
.price p strong{color:var(--fg)}
.price ul{display:grid;gap:8px;margin-top:18px;font-size:.88rem;color:var(--muted)}
.price li b{color:var(--fg);font-weight:500}
.price .src{margin-top:14px;font-size:.78rem;color:var(--dim)}
.price a:not(.btn){color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.bars{display:grid;gap:16px}
.bar{display:grid;grid-template-columns:150px 1fr 64px;gap:12px;align-items:center;font-size:.84rem;color:var(--fg)}
.bar small{display:block;font-size:.72rem;color:var(--dim);line-height:1.3}
.bar .t{height:10px;border-radius:99px;background:hsl(217 24% 27% / .35);overflow:hidden}
.bar .f{height:100%;border-radius:99px}
.bar.free .f{background:hsl(152 74% 40% / .8)}
.bar.ag .f{background:hsl(215 14% 45%)}
.bar.dt .f{background:linear-gradient(90deg,var(--primary),var(--cyan));min-width:6px}
.bar .v{text-align:right;font-weight:600}

/* ===== questions ===== */
.al-faq{padding:72px 0 0}
.section-head{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.faq-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--border-soft);border-radius:var(--radius);background:var(--card-2);padding:0 20px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:500;line-height:1.45}
.faq details p{color:var(--muted);padding-bottom:18px}
.al-data{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:18px 20px;border-radius:14px;border:1px solid hsl(152 74% 40% / .3);background:hsl(152 74% 40% / .05);color:var(--muted);font-size:.9rem;line-height:1.6}
.al-data .msym{color:var(--success);font-size:22px}
.al-data a{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.sum{position:sticky;top:96px;display:grid;gap:14px;padding:24px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg,var(--card),var(--card-2))}
.sum .k{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.sum-price{font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.sum-price small{display:block;font-size:.76rem;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:6px}
.sum .btn{width:100%;white-space:normal;text-align:center}
.sum .trust{margin-top:0}

/* ===== guides + close ===== */
.apps-guide{padding:56px 0 0}
.apps-guide h2{margin:12px 0 16px;font-size:clamp(1.4rem,2.4vw,1.8rem)}
.apps-guide ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:10px}
.apps-guide a{display:block;padding:14px 16px;border-radius:12px;border:1px solid var(--border-soft);background:var(--card-2);color:var(--fg)}
.apps-guide a:hover{border-color:var(--primary)}
.al-close{margin:72px 0 64px;padding:56px 24px;border-radius:24px;border:1px solid var(--border-soft);text-align:center;display:flex;flex-direction:column;align-items:center;background:radial-gradient(60% 120% at 50% 0%,hsl(217 91% 60% / .16),transparent 70%),hsl(225 39% 9% / .5)}
.al-close h2{max-width:24ch;text-wrap:balance}
.al-close .hero-actions{justify-content:center}
.al-close .trust{justify-content:center}

/* ===== the live start form, re-skinned to the v3 form (its behavior is untouched) ===== */
.app-start{border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,var(--card),var(--card-2));box-shadow:0 30px 80px -40px hsl(217 91% 40% / .7);padding:24px;font-size:.92rem}
.app-start h2{font-size:1.25rem;letter-spacing:-.01em;margin:0 0 16px}
.as-step{font-size:.72rem!important;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)!important;margin:0 0 6px!important}
.as-field label,.as-field legend{font-size:.84rem}
.app-start input:not([type="checkbox"]):not([type="radio"]),.app-start textarea,.app-start select{border-color:var(--border);border-radius:8px;background:var(--bg);min-height:42px}
.app-start input:not([type="checkbox"]):not([type="radio"]):focus,.app-start textarea:focus,.app-start select:focus{border-color:var(--primary)}
.app-start input[type="checkbox"],.app-start input[type="radio"]{accent-color:var(--primary)}
.as-terms{font-size:.84rem;color:var(--muted)}
.as-pick:has(:checked){border-color:var(--primary);background:hsl(217 91% 60% / .12)}
.app-start .btn{min-height:44px}
.as-deliverables{margin:12px 0 0;font-size:.85rem;color:var(--muted)}

/* ===== the generic shell (/apps/_shell) ===== */
.apps-detail>.wrap>dtai-app-catalog{display:block;padding:40px 0 64px}

/* ===== responsive ===== */
@media (max-width:1100px){.al-hero.has-media,.al-hero:has(> .app-start:not([hidden])){grid-template-columns:minmax(0,1fr) 380px;gap:40px}}
@media (max-width:900px){
  .al-hero,.al-hero.has-media,.al-hero:has(> .app-start:not([hidden])){grid-template-columns:minmax(0,1fr);gap:32px}
  .al-hero .glow.b{display:none}
  .k-head{grid-template-columns:1fr;gap:12px}
  .al-examples .ba{grid-template-columns:1fr;gap:12px;padding:20px}
  .al-examples .ba-arrow .msym{transform:rotate(90deg)}
  .bgd{grid-template-columns:1fr}.bgd>div+div{border-left:0;border-top:1px solid var(--border-soft)}
  .al-run{grid-template-columns:1fr;gap:24px}.al-run-head{position:static}
  .price{grid-template-columns:1fr;padding:24px;gap:28px}
  .faq-row{grid-template-columns:1fr}.sum{position:static}
  .proof-logos{grid-template-columns:1fr;align-items:start;gap:16px}.proof-logos .row{flex-wrap:wrap;justify-content:flex-start;gap:24px 28px}
  .al-example-grid{grid-template-columns:1fr}
  .al-examples,.al-run,.al-who,.al-pricing,.al-faq{padding-top:56px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .al-hero{padding-top:20px}
  .al-hero h1{font-size:clamp(1.8rem,8vw,2.3rem)}
  .al-hero .lede{font-size:1rem}
  .hero-actions .btn{width:100%;white-space:normal;text-align:center}
  .fact{grid-template-columns:1fr;gap:8px}
  .bar{grid-template-columns:96px 1fr 52px}.bar small{display:none}
  .ba{padding:16px}
  .al-close{padding:36px 18px;margin-top:56px}
  .price{padding:20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.app-start [data-step-one] .as-field{margin-bottom:8px}
.al-brings em{white-space:nowrap}
/* Once the form takes the hero's right column, the room the form script reserved for the departed transformation is
   dead space under the hero (rule 9); the transformation itself now sits in #example at full width. */
@media (min-width:901px){.al-hero>.app-start{min-height:0!important}}
.al-examples>.al-hero-media{max-width:none;margin:0 0 28px}
.al-examples .ba{align-items:start}.al-examples .ba-arrow{align-self:center}
.al-hero .glow.a{left:-120px}.al-hero .glow.b{right:-100px}
@media (max-width:560px){.al-hero .glow.a{width:300px;height:300px;left:-60px;top:-120px}}
@media (max-width:900px){.faq-row>.sum{display:none}}