/* commerce.dgl.dev Coming Soon site, r5: Taylor's Claude Design redesign (COHome.dc.html), as static CSS.
   CO brand kit 3a "Growth Orb". Figtree (UI) and Nunito (wordmark, pull line), self-hosted latin subsets, SIL OFL
   (assets/fonts/OFL-*.txt). */
@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:400 800;
  src:url(assets/fonts/figtree-latin.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:700 900;
  src:url(assets/fonts/nunito-latin.woff2) format("woff2")}
:root{--bg:#FFFFFF;--hero:#F7F8FB;--band:#F7F8FB;--foot:#FFFFFF;--surface:#FFFFFF;--border:#E6E9F1;--border-soft:#ECEFF6;
  --strong:#0B1F4D;--body:#4D5672;--muted:#646E8A;--em:#047857;--dot:rgba(11,31,77,.07);
  --glow1:radial-gradient(closest-side,rgba(16,185,129,.22),rgba(16,185,129,.06) 55%,transparent 75%);
  --glow2:radial-gradient(closest-side,rgba(245,158,11,.12),transparent 70%);
  --badge-bg:#FFF4DB;--badge-bd:#FCD98A;--badge-fg:#92400E;--h1grad:linear-gradient(90deg,#B45309 0%,#92400E 100%);
  --ring1:rgba(16,185,129,.30);--ring2:rgba(245,158,11,.35);
  --frame:linear-gradient(135deg,rgba(16,185,129,.55),rgba(11,31,77,.10) 40%,rgba(245,158,11,.45));
  --frame-shadow:0 40px 80px -30px rgba(11,31,77,.45);
  --card-shadow:0 1px 2px rgba(11,31,77,.05),0 10px 30px -12px rgba(11,31,77,.14);
  --cta-shadow:0 40px 80px -30px rgba(11,31,77,.5);--soon-bg:#FFF4DB;--soon-fg:#92400E;color-scheme:light}
:root[data-theme="dark"]{--bg:#0A1022;--hero:#0A1022;--band:#0D1430;--foot:#080D1C;--surface:#121A33;--border:#222B4A;
  --border-soft:#1A2240;--strong:#F3F4F6;--body:#C9CFE0;--muted:#9AA3BA;--em:#34D399;--dot:rgba(255,255,255,.06);
  --glow1:radial-gradient(closest-side,rgba(16,185,129,.26),rgba(30,58,138,.30) 55%,transparent 75%);
  --glow2:radial-gradient(closest-side,rgba(245,158,11,.10),transparent 70%);
  --badge-bg:rgba(245,158,11,.12);--badge-bd:rgba(245,158,11,.35);--badge-fg:#FCD34D;
  --h1grad:linear-gradient(90deg,#FCD34D 0%,#F59E0B 100%);--ring1:rgba(52,211,153,.30);--ring2:rgba(245,158,11,.22);
  --frame:linear-gradient(135deg,rgba(52,211,153,.6),rgba(255,255,255,.08) 40%,rgba(245,158,11,.4));
  --frame-shadow:0 40px 80px -30px rgba(0,0,0,.8);--card-shadow:none;--cta-shadow:inset 0 0 0 1px #222B4A;
  --soon-bg:rgba(245,158,11,.14);--soon-fg:#FCD34D;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);font:17px/1.6 Figtree,ui-sans-serif,system-ui,-apple-system,
  "Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--em)}
h1,h2,h3{margin:0;color:var(--strong)}
p{margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--bg);padding:10px 14px;z-index:99;border-radius:8px}
.w{max-width:1120px;margin:0 auto;padding:0 40px}
/* top: nav, hero, film */
.top{position:relative;overflow:hidden;background:var(--hero)}
.glow1{position:absolute;right:-200px;top:-260px;width:980px;height:980px;background:var(--glow1);pointer-events:none}
.glow2{position:absolute;left:-240px;top:420px;width:620px;height:620px;background:var(--glow2);pointer-events:none}
.dots{position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);
  background-size:24px 24px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 70%);pointer-events:none}
.nav{position:relative;height:92px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:2px;text-decoration:none}
.logo .orb{width:56px;height:56px;flex:none}
.logo .orb-nav-dark{display:none}
:root[data-theme="dark"] .logo .orb-nav-light{display:none}
:root[data-theme="dark"] .logo .orb-nav-dark{display:block}
.wm{font-family:Nunito,ui-rounded,sans-serif;font-weight:900;font-size:21px;letter-spacing:-0.02em;white-space:nowrap;
  display:flex;gap:6px}
.wm .d{color:var(--em)}
.wm .c{color:var(--strong)}
.theme{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);
  color:var(--strong);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:0}
.theme .i-moon{display:none}
:root[data-theme="dark"] .theme .i-moon{display:block}
:root[data-theme="dark"] .theme .i-sun{display:none}
.hero{position:relative;padding:24px 0 56px;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:40px;
  align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.badge{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 11px;border-radius:999px;background:var(--badge-bg);
  border:1px solid var(--badge-bd);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--badge-fg);
  white-space:nowrap;text-transform:uppercase}
.badge i{width:8px;height:8px;border-radius:50%;background:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,.22)}
.eyebrow{margin-top:28px;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--em)}
.hero h1{margin-top:14px;font-weight:800;font-size:84px;line-height:1.02;letter-spacing:-0.045em;display:flex;
  flex-direction:column;align-items:flex-start}
.hero h1 span{white-space:nowrap}
.hero h1 .amb{background:var(--h1grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:8px}
.stage{position:relative;height:440px;display:flex;align-items:center;justify-content:center}
.ring{position:absolute;border-radius:50%}
.ring1{width:320px;height:320px;border:1.5px solid var(--ring1)}
.ring2{width:430px;height:430px;border:1.5px dashed var(--ring2)}
.orbit{position:absolute}
.orbit1{width:320px;height:320px;animation:cospin 14s linear infinite}
.orbit2{width:430px;height:430px;animation:cospin 22s linear infinite reverse}
.orbit1 i{position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:#34D399;box-shadow:0 0 14px #34D399}
.orbit2 i{position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:#F59E0B;box-shadow:0 0 12px #F59E0B}
@keyframes cospin{to{transform:rotate(360deg)}}
.stage .orb{position:relative;width:280px;height:280px}
.stage .orb-static,.cta-orb .orb-static{display:none}
.film{position:relative;padding-bottom:96px}
.frame{padding:1.5px;border-radius:28px;background:var(--frame);box-shadow:var(--frame-shadow)}
.screen{position:relative;aspect-ratio:16/9;border-radius:27px;overflow:hidden;
  background:radial-gradient(60% 70% at 50% 45%,#13306B 0%,#0A1022 70%)}
.chrome{position:absolute;left:0;right:0;top:0;height:36px;display:flex;align-items:center;gap:7px;padding:0 16px;
  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.chrome i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.screen-glow{position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(16,185,129,.28),transparent 70%)}
.screen-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px}
.play{width:84px;height:84px;border-radius:50%;background:linear-gradient(180deg,#4ADE9F,#10B981);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(4,47,30,.3),0 0 0 10px rgba(52,211,153,.12),
  0 14px 40px rgba(16,185,129,.45);display:flex;align-items:center;justify-content:center}
.screen-text{font-weight:700;font-size:19px;color:#F3F4F6;letter-spacing:-0.01em}
.caption{margin-top:16px;text-align:center;font-size:14px;font-weight:500;color:var(--muted)}
/* r6: the film. The window bar sits above the video, so it never covers the picture. */
.screen-film{aspect-ratio:auto;display:flex;flex-direction:column;background:#0A1022}
.screen-film .chrome{position:static;flex:none}
.screen-film video{display:block;width:100%;aspect-ratio:16/9;height:auto;background:#0A1022}
.transcript{margin:12px auto 0;max-width:68ch;text-align:center;font-size:15px;line-height:1.7;color:var(--body)}
.transcript b{font-weight:700;color:var(--strong)}
/* potential */
.pot{padding-top:112px;padding-bottom:112px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;
  align-items:start}
.h2{font-weight:800;font-size:52px;line-height:1.06;letter-spacing:-0.035em;text-wrap:balance}
.pot-copy{display:flex;flex-direction:column;gap:18px;font-size:19px;line-height:1.6;text-wrap:pretty}
.pull{font-family:Nunito,ui-rounded,sans-serif;font-weight:900;font-size:28px;line-height:1.25;letter-spacing:-0.02em;
  color:var(--strong);padding:4px 0 4px 18px;border-left:3px solid #10B981}
/* cards band */
.band{background:var(--band);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.band-in{padding-top:112px;padding-bottom:112px;display:flex;flex-direction:column;align-items:center}
.band-in .h2{text-align:center}
.cards{margin-top:48px;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:30px;
  box-shadow:var(--card-shadow);display:flex;flex-direction:column;gap:14px}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ic{width:48px;height:48px;border-radius:32%;display:flex;align-items:center;justify-content:center;flex:none}
.ic-em{background:linear-gradient(180deg,#4ADE9F,#059669);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
  inset 0 -2px 6px rgba(4,47,30,.3),0 8px 18px rgba(16,185,129,.3)}
.ic-navy{background:linear-gradient(180deg,#3A5BC7,#0B1F4D);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
  inset 0 -2px 6px rgba(0,0,0,.3),0 8px 18px rgba(11,31,77,.3)}
.ic-amber{background:linear-gradient(180deg,#FCD34D,#D97706);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
  inset 0 -2px 6px rgba(120,53,15,.3),0 8px 18px rgba(245,158,11,.3)}
.ic-em2{background:linear-gradient(180deg,#34D399,#0B7A56);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
  inset 0 -2px 6px rgba(4,47,30,.3),0 8px 18px rgba(16,185,129,.3)}
.soon{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--soon-bg);color:var(--soon-fg);
  font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.card h3{font-weight:800;font-size:22px;letter-spacing:-0.015em}
.card p{font-size:16px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.trust{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:16px}
.ro{display:flex;align-items:center;gap:10px;padding:12px 20px 12px 14px;border-radius:999px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--card-shadow);font-weight:700;font-size:15px;color:var(--strong);
  text-align:left}
.ro svg{flex:none}
.works{font-size:15px;font-weight:500;color:var(--muted);text-align:center}
/* early access panel */
.cta-w{padding-top:112px;padding-bottom:112px}
.cta{position:relative;overflow:hidden;border-radius:32px;background:#0A1022;padding:64px;display:grid;
  grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:center;box-shadow:var(--cta-shadow)}
.cta-glow{position:absolute;right:-160px;top:-200px;width:620px;height:620px;
  background:radial-gradient(closest-side,rgba(16,185,129,.32),rgba(30,58,138,.3) 55%,transparent 75%)}
.cta-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.cta h2{font-weight:800;font-size:52px;line-height:1.06;letter-spacing:-0.04em;color:#FFFFFF;text-wrap:balance}
.cta-p{margin-top:18px;font-size:19px;line-height:1.6;color:#C9CFE0;max-width:520px;text-wrap:pretty}
.mailbox{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 8px 8px 18px;
  border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.mailbox span{font-size:15px;font-weight:500;color:#C9CFE0}
.mailbtn{display:flex;align-items:center;height:42px;padding:0 16px;border-radius:12px;
  background:linear-gradient(180deg,#4ADE9F,#10B981);color:#052E1F;font-weight:800;font-size:15px;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 6px rgba(4,47,30,.25),0 8px 22px rgba(16,185,129,.35)}
.mailbtn:focus-visible{outline:3px solid #FCD34D;outline-offset:2px}
.cta-orb{position:relative;display:flex;justify-content:center}
.cta-orb .orb{width:230px;height:230px}
.by{margin-top:56px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.by b{font-family:Nunito,ui-rounded,sans-serif;font-weight:900;font-size:17px;color:var(--strong)}
.by span{font-size:15px;color:var(--muted)}
/* footer (r4's text) */
.ftr{border-top:1px solid var(--border-soft);background:var(--foot)}
.ftr-in{padding-top:40px;padding-bottom:44px;display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center}
.ftr .owner{font-size:14px;font-weight:700;color:var(--strong)}
.ftr nav a{font-size:14px;font-weight:700;color:var(--strong)}
.ftr .fine{font-size:13px;line-height:1.55;color:var(--muted)}
.ftr .fine a{color:var(--em)}
/* privacy and 404 */
.page{padding:56px 0 80px}
.page .w{max-width:800px}
.page h1{font-size:clamp(2rem,4.5vw,2.8rem);font-weight:800;letter-spacing:-0.035em;margin:0 0 .5em}
.page h2{font-size:1.4rem;font-weight:800;margin:2rem 0 .5rem}
.page p,.page li{color:var(--body)}
.page p{margin:0 0 1rem}
.page .lead{font-size:1.15rem}
.page .fine{font-size:.9rem;color:var(--muted)}
.kicker{font-size:.74rem;font-weight:750;letter-spacing:.18em;text-transform:uppercase;color:var(--em);margin:0 0 .9rem}
.btn{display:inline-block;background:linear-gradient(180deg,#4ADE9F,#10B981);color:#052E1F;text-decoration:none;
  padding:13px 22px;border-radius:12px;font-weight:800}
/* phone (the design's 390 layout) */
@media (max-width:900px){
  .w{padding:0 20px}
  .nav{height:72px}
  .logo .orb{width:44px;height:44px}
  .wm{font-size:17px}
  .glow1{right:-320px;width:640px;height:640px}
  .glow2{top:360px}
  .hero{padding:8px 0 36px;grid-template-columns:minmax(0,1fr);gap:8px}
  .hero-copy{align-items:center;text-align:center}
  .eyebrow{margin-top:18px;font-size:12px}
  .hero h1{font-size:44px;align-items:center}
  .stage{height:230px;order:-1}
  .ring1,.orbit1{width:190px;height:190px}
  .ring2,.orbit2{width:250px;height:250px}
  .stage .orb{width:170px;height:170px}
  .film{padding-bottom:48px}
  .frame{border-radius:20px}
  .screen{border-radius:19px}
  .chrome{height:26px}
  .play{width:58px;height:58px}
  .screen-mid{gap:12px}
  .screen-text{font-size:15px}
  .pot{padding-top:56px;padding-bottom:56px;grid-template-columns:minmax(0,1fr);gap:22px}
  .h2{font-size:32px}
  .pot-copy{font-size:17px}
  .pull{font-size:21px}
  .band-in{padding-top:56px;padding-bottom:56px}
  .cards{margin-top:28px;grid-template-columns:minmax(0,1fr)}
  .card{padding:22px}
  .card h3{font-size:19px}
  .cta-w{padding-top:56px;padding-bottom:56px}
  .cta{border-radius:24px;padding:32px 24px;grid-template-columns:minmax(0,1fr)}
  .cta h2{font-size:32px}
  .cta-p{font-size:17px}
  .cta-orb{order:-1}
  .cta-orb .orb{width:140px;height:140px}
  .by{margin-top:40px}}
/* The design's README: "Respect prefers-reduced-motion in production." Static orbs, no orbit motion. */
@media (prefers-reduced-motion:reduce){
  .orb-anim{display:none!important}
  .stage .orb-static,.cta-orb .orb-static{display:block}
  .orbit{animation:none}}