:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* AI page: product page, not a document. Hero with phones, offer cards, a slate band, phone grid, closing. */
.ai-hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:center; padding-block:40px 72px}
.ai-hero .kicker{display:block; margin-bottom:14px}
.ai-hero h1{font-size:clamp(2.4rem,6.4vw,3.6rem); line-height:1.05}
.ai-hero .lead{margin-top:20px; font-size:1.12rem; line-height:1.6; color:var(--ink); max-width:46ch}
.ai-hero .actions{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap}
.proof{margin-top:28px; display:flex; gap:22px; flex-wrap:wrap}
.proof div{display:flex; flex-direction:column}
.proof b{font-family:var(--display); font-size:1.5rem; font-weight:500; line-height:1; color:var(--ink)}
.proof span{font-size:.8rem; color:var(--soft); margin-top:4px}

/* Phone frames */
html{scroll-behavior:smooth}
.app{scroll-margin-top:24px}
a.phone{display:block; cursor:pointer; transition:transform .25s ease}
a.phone:hover,a.phone:focus-visible{outline:none; box-shadow:0 30px 60px rgba(20,24,32,.34), 0 0 0 3px var(--gold)}
.phones .p1:hover{transform:rotate(-6deg) translateY(-6px)}
.phones .p2:hover{transform:translateX(-50%) translateY(-6px)}
.phones .p3:hover{transform:rotate(8deg) translateY(-6px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
.phones{position:relative; height:400px; min-width:0}
.phone{
  position:absolute; width:176px; aspect-ratio:9/16; border-radius:26px;
  background:#0E0F12; padding:8px; box-shadow:0 30px 60px rgba(20,24,32,.28), inset 0 0 0 1.5px rgba(255,255,255,.08);
}
.phone .screen{width:100%; height:100%; border-radius:19px; overflow:hidden; position:relative; background:var(--shade,#222)}
.phone img{width:100%; height:100%; object-fit:cover; display:block}
.phone .ph{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 14px; color:#fff; font-family:var(--body)}
.phone .ph b{font-family:var(--display); font-weight:500; font-size:1.2rem}
.phone .ph small{font-size:.7rem; opacity:.85; line-height:1.3; margin-top:4px}
.phone .ph::before{content:""; position:absolute; top:14px; left:14px; width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.18)}
.phone .notch{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:56px; height:16px; border-radius:0 0 12px 12px; background:#0E0F12; z-index:2}
.phones .p1{left:0; top:60px; transform:rotate(-6deg); z-index:1}
.phones .p2{left:46%; top:0; transform:translateX(-50%); z-index:2}
.phones .p3{right:-6px; top:56px; transform:rotate(8deg); z-index:3}

/* Offers as cards */
.offer-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding-top:28px}
.offer-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 26px 24px;
  display:flex; flex-direction:column; gap:12px; min-width:0; position:relative;
}
.offer-card .mark{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--gold-text,#8E6410); background:color-mix(in srgb, var(--gold) 14%, transparent)}
.offer-card .mark svg{width:22px; height:22px}
.offer-card h3{font-family:var(--display); font-weight:500; font-size:1.35rem; line-height:1.2; text-wrap:balance}
.offer-card .for{font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:var(--soft)}
.offer-card p{color:var(--ink); opacity:.85; font-size:.97rem; line-height:1.55; max-width:44ch}
.offer-card ul{margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.offer-card li{font-size:.92rem; color:var(--ink); padding-left:22px; position:relative}
.offer-card li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:2px; background:var(--gold)}

/* Slate band */
.band{background:var(--moss); color:#F6F3EA; border-radius:22px; padding:48px 40px; margin-block:72px}
.band h2{font-family:var(--display); font-weight:500; font-size:1.9rem; color:#fff; text-wrap:balance}
.band .sub{margin-top:8px; color:rgba(255,255,255,.75); max-width:52ch}
.band .steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:36px; padding-top:28px; border-top:1px solid rgba(255,255,255,.18)}
.band .step{min-width:0}
.band .num{font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--gold)}
.band .step h3{font-family:var(--display); font-weight:500; font-size:1.25rem; margin-top:10px; color:#fff}
.band .step p{color:rgba(255,255,255,.78); font-size:.95rem; margin-top:6px; max-width:36ch}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .band{background:#1F2B3A} }
:root[data-theme="dark"] .band{background:#1F2B3A}

/* Project grid with phones */
.apps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding-top:28px}
.app{
  display:grid; grid-template-columns:118px minmax(0,1fr); gap:20px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 20px 18px 18px; text-decoration:none; color:var(--ink); min-width:0;
  transition:transform .2s ease, border-color .2s ease;
}
.app:hover,.app:focus-visible{border-color:var(--gold); transform:translateY(-2px)}
.app .phone{position:relative; width:118px; border-radius:18px; padding:5px; box-shadow:0 12px 26px rgba(20,24,32,.18); transform:none}
.app .phone .screen{border-radius:14px}
.app .phone .notch{width:34px; height:10px; top:5px}
.app-body{display:flex; flex-direction:column; min-width:0}
.app h3{font-family:var(--display); font-weight:500; font-size:1.25rem}
.app p{font-size:.9rem; color:var(--soft); margin-top:4px; line-height:1.45}
.app .meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px}
.app .pill{font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--soft)}
.app .pill.live{color:var(--gold-text); border-color:color-mix(in srgb, var(--gold) 50%, transparent)}
/* Closing */
.closing-ai{padding-block:0 80px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center}
.closing-ai .rule{width:48px; height:3px; background:var(--gold); margin-bottom:20px}
.closing-ai h2{font-family:var(--display); font-weight:500; font-size:clamp(1.8rem,4vw,2.4rem); line-height:1.15; text-wrap:balance}
.closing-ai p{color:var(--soft); margin-top:14px; max-width:50ch; font-size:1.02rem}

@media (max-width:820px){
  .ai-hero{grid-template-columns:1fr; gap:28px; padding-block:28px 56px}
  .phones{height:360px; max-width:420px; margin:0 auto; width:100%}
  .phone{width:140px}
  .offer-grid,.band .steps,.apps{grid-template-columns:1fr}
  .app{grid-template-columns:96px minmax(0,1fr); gap:14px}
  .app .phone{width:96px}
  .band{padding:36px 24px; border-radius:18px; margin-block:56px}
  .closing-ai{grid-template-columns:1fr}
}