/* =========================================================
   AI assistant landing page (/ai-assistant/) — loaded only there.
   Uses the shared tokens from style.css (--ink, --blue, --amber ...).
   ========================================================= */

/* ---------- Rare edge glint ---------- */
@property --glint-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.al-glint{ position:relative; }
.has-glint .al-glint::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none; opacity:0;
  background:conic-gradient(from var(--glint-a), transparent 0deg, transparent 318deg, rgba(243,185,108,0) 326deg, rgba(255,230,180,.95) 346deg, rgba(243,185,108,0) 358deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:alGlint var(--glint-cycle,18s) linear infinite; animation-delay:var(--glint-delay,0s);
}
@keyframes alGlint{
  0%{ --glint-a:0deg; opacity:0; }
  2%{ opacity:1; }
  10%{ --glint-a:360deg; opacity:1; }
  12%{ --glint-a:360deg; opacity:0; }
  100%{ --glint-a:360deg; opacity:0; }
}

/* ---------- Ring watermark ---------- */
.al-rings{ position:absolute; width:min(760px,95vw); aspect-ratio:1; pointer-events:none; color:#fff; opacity:.055; z-index:0; }
.al-rings circle{ fill:none; stroke:currentColor; stroke-width:1.1; }
.al-rings.on-light{ color:var(--blue); opacity:.07; }
.al-rings.r-right{ right:-260px; top:50%; transform:translateY(-50%); }
.al-rings.r-left{ left:-300px; top:50%; transform:translateY(-50%); }
.al-rings.r-bl{ left:-220px; bottom:-320px; }

/* ---------- Hero ---------- */
.al-hero{ position:relative; min-height:min(100vh,960px); display:flex; align-items:flex-end; background:var(--ink); color:var(--cream); overflow:hidden; }
.al-hero-photo{ position:absolute; inset:150px 0 0 0; -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 10%,#000 26%); mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 10%,#000 26%); }
/* dark top band: keeps the menu readable and the photo starts below it */
.al-hero::before{ content:''; position:absolute; left:0; right:0; top:0; height:280px; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(13,17,22,.92) 0%, rgba(13,17,22,.8) 28%, rgba(13,17,22,.5) 52%, rgba(13,17,22,.2) 76%, rgba(13,17,22,0) 100%); }
.al-hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:72% 0%; animation:heroZoomIn 1.6s cubic-bezier(.16,.8,.3,1) both; }
.al-hero-scrim{ position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(13,17,22,.96) 0%, rgba(13,17,22,.84) 32%, rgba(13,17,22,.28) 60%, rgba(13,17,22,0) 80%),
  linear-gradient(0deg, rgba(13,17,22,.8) 0%, rgba(13,17,22,0) 38%); }
.al-hero .wrap{ position:relative; z-index:2; width:100%; padding-top:170px; padding-bottom:84px; }
.al-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,4.7vw,62px); line-height:1.1; letter-spacing:-0.015em; max-width:640px; }
.al-hero h1 .it{ font-style:italic; color:var(--amber-soft); }
.al-hero-sub{ font-size:clamp(16px,1.5vw,18.5px); color:rgba(243,240,232,.72); font-weight:300; max-width:470px; margin-top:26px; }
.al-hero-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:20px 32px; margin-top:38px; }

.al-proof{ background:var(--ink); border-top:1px solid var(--hl-dark); }
.al-proof ul{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:38px 0; }
.al-proof li{ font-size:14.5px; color:var(--muted-dark); font-weight:300; line-height:1.6; padding-left:18px; border-left:2px solid var(--amber); }
.al-proof strong{ display:block; font-family:var(--sans-tight); font-weight:600; font-size:15px; color:var(--cream); margin-bottom:5px; }

/* ---------- Shared section bits ---------- */
.al-sec{ position:relative; overflow:hidden; }
.al-sec .wrap{ position:relative; z-index:1; }
.al-h2{ font-family:var(--sans-tight); font-weight:600; font-size:clamp(28px,3.2vw,40px); letter-spacing:-0.015em; line-height:1.2; margin-bottom:20px; }
.al-lead{ font-size:17px; color:var(--muted-light); line-height:1.75; max-width:560px; }

/* ---------- Problem ---------- */
.al-problem{ background:var(--paper); padding:120px 0; }
.al-problem .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center; }
.al-pain{ list-style:none; margin-top:32px; }
.al-pain li{ padding:20px 0 20px 28px; border-top:1px solid var(--hl-light); font-size:16px; color:var(--muted-light); line-height:1.6; position:relative; }
.al-pain li:last-child{ border-bottom:1px solid var(--hl-light); }
.al-pain li::before{ content:''; position:absolute; left:0; top:29px; width:12px; height:2px; background:var(--amber); }
.al-pain strong{ color:var(--ink); font-weight:600; }
.al-photo{ position:relative; border-radius:10px; overflow:visible; }
.al-photo img{ width:100%; height:auto; border-radius:10px; box-shadow:0 50px 80px -40px rgba(13,17,22,.55); }
.al-photo::before{ content:''; position:absolute; inset:18px -18px -18px 18px; border:1px solid rgba(27,94,165,.35); border-radius:10px; z-index:-1; }
.al-photo-tag{ position:absolute; left:-18px; bottom:28px; background:var(--ink); color:var(--cream); font-family:var(--serif); font-style:italic; font-size:15.5px; padding:12px 18px; border-radius:6px; border-left:3px solid var(--amber); box-shadow:0 20px 40px -18px rgba(0,0,0,.6); }

/* ---------- The answer + flow diagram ---------- */
.al-answer{ background:linear-gradient(165deg, var(--blue-deep) 0%, var(--ink) 70%); color:var(--cream); padding:120px 0; }
.al-answer .al-h2{ color:var(--cream); }
.al-answer .al-lead{ color:var(--muted-dark); }
.al-flow{ display:grid; grid-template-columns:1.25fr 90px auto 90px 1fr; align-items:center; margin:64px 0 56px; }
.al-tools{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.al-chip{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; background:rgba(243,240,232,.07); border:1px solid rgba(243,240,232,.14); font-family:var(--sans-tight); font-weight:600; font-size:13.5px; backdrop-filter:blur(4px); }
.al-chip svg{ width:18px; height:18px; flex-shrink:0; stroke:var(--amber-soft); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.al-chip:nth-child(1){ transform:rotate(-2.2deg) translateX(-6px); }
.al-chip:nth-child(2){ transform:rotate(1.6deg) translateX(8px); }
.al-chip:nth-child(3){ transform:rotate(2deg) translateX(-2px); }
.al-chip:nth-child(4){ transform:rotate(-1.4deg) translateX(10px); }
.al-chip:nth-child(5){ transform:rotate(-1.8deg) translateX(-8px); }
.al-chip:nth-child(6){ transform:rotate(2.4deg) translateX(4px); }
.al-link{ position:relative; height:2px; background:rgba(243,240,232,.18); border-radius:2px; overflow:visible; }
.al-link i{ position:absolute; top:-2px; left:-40px; width:40px; height:6px; border-radius:6px; background:linear-gradient(90deg, transparent, var(--amber-soft)); animation:alFlowX 2.6s linear infinite; }
.al-link:nth-of-type(2) i{ animation-delay:-1.3s; }
@keyframes alFlowX{ from{ left:-40px; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } to{ left:100%; opacity:0; } }
@keyframes alFlowY{ from{ top:-40px; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } to{ top:100%; opacity:0; } }
.al-node{ position:relative; width:158px; height:158px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at 35% 30%, var(--blue) 0%, var(--blue-deep) 62%, var(--ink) 100%); border:1px solid rgba(243,185,108,.45); font-family:var(--serif); font-weight:500; font-size:19px; line-height:1.2; box-shadow:0 0 60px -6px rgba(27,94,165,.7); }
.al-node::before, .al-node::after{ content:''; position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(243,185,108,.5); animation:alPulse 3.4s ease-out infinite; }
.al-node::after{ animation-delay:-1.7s; }
@keyframes alPulse{ from{ transform:scale(1); opacity:.7; } to{ transform:scale(1.55); opacity:0; } }
.al-you{ background:var(--paper); color:var(--ink); border-radius:12px; padding:20px 20px 18px; box-shadow:0 40px 70px -30px rgba(0,0,0,.65); }
.al-you h4{ font-family:var(--sans-tight); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-light); margin-bottom:12px; font-weight:600; }
.al-you-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--hl-light); font-size:13.5px; font-weight:500; }
.al-you-row span{ font-family:var(--sans-tight); font-size:11px; font-weight:600; padding:3px 9px; border-radius:100px; background:rgba(27,94,165,.1); color:var(--blue); white-space:nowrap; }
.al-you-ok{ display:block; width:100%; margin-top:14px; font-family:var(--sans-tight); font-weight:600; font-size:13.5px; background:var(--amber-soft); color:var(--ink); border:none; border-radius:100px; padding:11px 14px; text-align:center; }
.al-principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.al-principle{ background:rgba(243,240,232,.06); border:1px solid rgba(243,240,232,.12); border-radius:10px; padding:32px 30px; backdrop-filter:blur(6px); }
.al-principle h3{ font-family:var(--serif); font-weight:500; font-size:22px; margin-bottom:10px; letter-spacing:-0.01em; }
.al-principle p{ font-size:15px; color:var(--muted-dark); line-height:1.65; }
.al-principle.key{ background:rgba(232,151,58,.12); border-color:rgba(243,185,108,.4); }

/* ---------- Demo: phone ---------- */
.al-demo{ background:var(--paper); padding:120px 0; }
.al-demo .wrap{ display:grid; grid-template-columns:1fr auto; gap:90px; align-items:center; }
.al-demo-list{ list-style:none; margin-top:30px; display:flex; flex-direction:column; gap:18px; max-width:520px; }
.al-demo-list li{ display:flex; gap:16px; align-items:flex-start; font-size:16px; color:var(--muted-light); line-height:1.6; }
.al-demo-list li b{ color:var(--ink); font-weight:600; }
.al-demo-list .n{ flex-shrink:0; width:30px; height:30px; border-radius:50%; background:rgba(27,94,165,.1); color:var(--blue); display:flex; align-items:center; justify-content:center; font-family:var(--sans-tight); font-weight:700; font-size:13px; }
.al-phone-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; }
.al-phone-wrap::before{ content:''; position:absolute; width:520px; height:520px; top:40px; left:50%; transform:translateX(-50%); background:radial-gradient(circle, rgba(232,151,58,.26), rgba(27,94,165,.14) 45%, transparent 70%); filter:blur(10px); z-index:0; }
.al-phone{ position:relative; z-index:1; width:292px; height:584px; border-radius:44px; padding:11px; background:#05080b; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 60px 90px -34px rgba(13,17,22,.7); animation:alFloat 7s ease-in-out infinite; }
@keyframes alFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.al-phone::before{ content:''; position:absolute; top:20px; left:50%; width:84px; height:22px; border-radius:14px; background:#05080b; transform:translateX(-50%); z-index:4; }
.al-screen{ height:100%; border-radius:34px; background:linear-gradient(180deg,#16222f,#0D1116); overflow:hidden; padding:52px 14px 14px; display:flex; flex-direction:column; gap:10px; color:var(--cream); font-size:12.5px; line-height:1.4; position:relative; }
.al-ph-head{ display:flex; align-items:center; gap:9px; font-family:var(--sans-tight); font-weight:600; font-size:13px; padding-bottom:10px; border-bottom:1px solid rgba(243,240,232,.1); }
.al-ph-head i{ width:8px; height:8px; border-radius:50%; background:#5FD08A; box-shadow:0 0 8px #5FD08A; }
.al-ph-head small{ margin-left:auto; font-weight:500; font-size:11px; color:var(--muted-dark); }
.al-rec{ display:flex; align-items:center; gap:10px; background:rgba(27,94,165,.35); border:1px solid rgba(127,169,212,.35); border-radius:14px; padding:10px 12px; }
.al-rec .dot{ width:10px; height:10px; border-radius:50%; background:#FF6B5A; animation:alBlink 1s ease-in-out infinite; flex-shrink:0; }
@keyframes alBlink{ 50%{ opacity:.3; } }
.al-rec .time{ margin-left:auto; font-size:11px; color:var(--muted-dark); font-variant-numeric:tabular-nums; }
.al-bars{ display:flex; align-items:center; gap:3px; height:30px; flex:1; }
.al-bars i{ display:block; width:3.5px; border-radius:3px; background:linear-gradient(var(--blue-pale), var(--amber-soft)); height:14px; transform-origin:center; animation:alBar 1.1s ease-in-out infinite; }
.al-bars i:nth-child(4n+1){ height:22px; animation-delay:-.2s; }
.al-bars i:nth-child(4n+2){ height:12px; animation-delay:-.55s; }
.al-bars i:nth-child(4n+3){ height:28px; animation-delay:-.8s; }
.al-bars i:nth-child(4n){ height:18px; animation-delay:-.35s; }
@keyframes alBar{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.al-said{ align-self:flex-end; max-width:92%; background:var(--blue); border-radius:14px 14px 3px 14px; padding:9px 12px; font-size:12.5px; }
.al-pc{ border-radius:12px; background:rgba(243,240,232,.07); border:1px solid rgba(243,240,232,.12); padding:9px 12px; }
.al-pc .k{ display:flex; align-items:center; gap:7px; font-family:var(--sans-tight); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-soft); margin-bottom:3px; }
.al-pc .k::before{ content:'\2713'; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:var(--amber-soft); color:var(--ink); font-size:9px; letter-spacing:0; }
.al-pc b{ font-weight:600; font-size:12.5px; display:block; }
.al-pc small{ font-size:11px; color:var(--muted-dark); }
.al-pc.warn{ border-color:rgba(243,185,108,.55); background:rgba(232,151,58,.12); }
.al-pc.warn .k::before{ content:'!'; font-weight:800; }
.al-pc .btns{ display:flex; gap:8px; margin-top:8px; }
.al-pc .btns span{ font-family:var(--sans-tight); font-weight:600; font-size:11px; padding:5px 12px; border-radius:100px; border:1px solid rgba(243,185,108,.6); color:var(--amber-soft); }
.al-pc .btns span:first-child{ background:var(--amber-soft); color:var(--ink); }
.al-ph-foot{ margin-top:auto; text-align:center; font-size:11px; color:var(--muted-dark); padding-top:4px; }
.al-phone-note{ position:relative; z-index:1; margin-top:22px; font-size:12.5px; color:var(--muted-light); text-align:center; max-width:290px; }

/* ---------- Why me ---------- */
.al-why{ background:var(--ink); color:var(--cream); padding:130px 0; }
.al-why .wrap{ display:grid; grid-template-columns:1.4fr .8fr; gap:80px; align-items:start; }
.al-why .al-h2{ color:var(--cream); }
.al-why p{ font-size:16.5px; color:var(--muted-dark); font-weight:300; line-height:1.75; margin-bottom:20px; max-width:620px; }
.al-why-stats{ display:flex; flex-direction:column; gap:22px; }
.al-why .stat-callout{ background:rgba(243,240,232,.06); }
.al-why .stat-callout .num{ color:var(--amber-soft); }
.al-why .stat-callout .lbl{ color:var(--muted-dark); }

/* ---------- What it can do ---------- */
.al-can{ background-color:var(--paper-alt); background-image:radial-gradient(rgba(13,17,22,.075) 1px, transparent 1.3px); background-size:22px 22px; padding:120px 0; }
.al-can::before{ content:''; position:absolute; top:-180px; right:-160px; width:560px; height:560px; background:radial-gradient(circle, rgba(232,151,58,.2), transparent 65%); pointer-events:none; }
.al-can-head{ max-width:640px; margin-bottom:52px; }
.al-can-head p{ font-size:17px; color:var(--muted-light); }
.al-cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.al-cap{ background:#FBFAF6; border-radius:10px; padding:20px 20px 26px; box-shadow:0 1px 0 rgba(13,17,22,.05), 0 24px 44px -26px rgba(13,17,22,.34), 0 2px 8px -2px rgba(13,17,22,.08); transition:transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s ease; }
.al-cap:hover{ transform:translateY(-6px); box-shadow:0 1px 0 rgba(13,17,22,.05), 0 38px 60px -26px rgba(13,17,22,.42), 0 4px 12px -2px rgba(13,17,22,.1); }
.al-cap.reveal{ transition-delay:calc(var(--i,0) * 70ms); }
.al-cap.reveal.in:hover{ transition-delay:0s; }
.al-cap h3{ font-family:var(--sans-tight); font-weight:600; font-size:18px; letter-spacing:-0.01em; margin:20px 6px 8px; }
.al-cap p{ font-size:14.5px; color:var(--muted-light); line-height:1.6; margin:0 6px; }
.al-art{ height:132px; border-radius:7px; background:linear-gradient(150deg,#EAF0F7,#F6F3EC); border:1px solid rgba(27,94,165,.1); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.al-art.warm{ background:linear-gradient(150deg,#FBEFDC,#F6F3EC); border-color:rgba(232,151,58,.2); }
/* art: voice */
.art-voice .al-bars{ flex:none; height:60px; gap:4px; }
.art-voice .al-bars i{ width:4px; background:linear-gradient(var(--blue), var(--blue-pale)); }
.art-voice .mic{ width:34px; height:34px; border-radius:50%; background:var(--blue); margin-right:14px; position:relative; box-shadow:0 0 0 6px rgba(27,94,165,.14); }
.art-voice .mic::after{ content:''; position:absolute; left:50%; top:50%; width:8px; height:14px; border-radius:6px; border:2px solid #fff; transform:translate(-50%,-55%); }
/* art: quote / invoice */
.art-doc .doc{ width:96px; height:108px; background:#fff; border-radius:5px; box-shadow:0 10px 22px -10px rgba(13,17,22,.4); padding:10px 10px; display:flex; flex-direction:column; gap:6px; transform:rotate(-3deg); }
.art-doc .doc b{ display:block; height:9px; width:54%; background:var(--blue); border-radius:2px; }
.art-doc .doc u{ display:block; height:4px; background:#D9DEE4; border-radius:2px; }
.art-doc .doc u.s{ width:70%; }
.art-doc .doc em{ margin-top:auto; font-style:normal; font-family:var(--sans-tight); font-weight:700; font-size:12px; color:var(--amber-text); text-align:right; }
.art-doc .sent{ position:absolute; right:calc(50% - 98px); top:30px; font-family:var(--sans-tight); font-weight:600; font-size:11px; background:var(--ink); color:var(--cream); padding:5px 11px; border-radius:100px; animation:alStamp 6s ease-in-out infinite; }
.art-doc .sent::before{ content:'\2713  '; color:var(--amber-soft); }
@keyframes alStamp{ 0%,30%{ opacity:0; transform:scale(.7) rotate(6deg); } 40%,85%{ opacity:1; transform:scale(1) rotate(-4deg); } 95%,100%{ opacity:0; transform:scale(1) rotate(-4deg); } }
/* art: payments */
.art-pay{ flex-direction:column; gap:7px; padding:0 22px; }
.art-pay .pay{ width:100%; display:flex; justify-content:space-between; align-items:center; background:#fff; border-radius:6px; padding:7px 10px; font-size:12px; font-weight:500; box-shadow:0 6px 14px -8px rgba(13,17,22,.3); }
.art-pay .pay b{ font-family:var(--sans-tight); font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; }
.art-pay .paid b{ background:rgba(27,94,165,.12); color:var(--blue); }
.art-pay .due b{ background:rgba(232,151,58,.2); color:var(--amber-text); }
.art-pay .late b{ background:rgba(200,85,61,.14); color:#B0432C; }
/* art: client card */
.art-client .cl{ width:190px; background:#fff; border-radius:8px; padding:12px; box-shadow:0 12px 24px -12px rgba(13,17,22,.4); }
.art-client .top{ display:flex; gap:10px; align-items:center; }
.art-client .av{ width:34px; height:34px; border-radius:50%; background:linear-gradient(150deg,var(--blue),var(--blue-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--sans-tight); font-weight:700; font-size:12px; }
.art-client .ln{ flex:1; display:flex; flex-direction:column; gap:5px; }
.art-client .ln b{ display:block; height:7px; width:70%; background:var(--ink); border-radius:3px; opacity:.8; }
.art-client .ln i{ display:block; height:5px; width:90%; background:#D9DEE4; border-radius:3px; }
.art-client .tg{ display:flex; gap:5px; flex-wrap:wrap; margin-top:11px; }
.art-client .tg u{ text-decoration:none; font-family:var(--sans-tight); font-size:10px; font-weight:600; padding:3px 8px; border-radius:100px; background:rgba(27,94,165,.1); color:var(--blue); }
.art-client .tg u:nth-child(2){ background:rgba(232,151,58,.18); color:var(--amber-text); }
/* art: clash */
.art-clash .cal{ position:relative; width:210px; height:98px; border-left:2px solid rgba(13,17,22,.15); }
.art-clash .ev{ position:absolute; left:10px; right:10px; border-radius:6px; padding:6px 9px; font-family:var(--sans-tight); font-weight:600; font-size:11.5px; color:#fff; }
.art-clash .e1{ top:6px; height:46px; background:var(--blue); }
.art-clash .e2{ top:38px; height:46px; background:var(--amber); color:var(--ink); margin-left:22px; box-shadow:0 8px 16px -8px rgba(13,17,22,.5); }
.art-clash .bang{ position:absolute; right:-10px; top:-8px; width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--amber-soft); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; animation:alWarn 2.4s ease-in-out infinite; }
@keyframes alWarn{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,151,58,.7); } 50%{ box-shadow:0 0 0 9px rgba(232,151,58,0); } }
/* art: email draft */
.art-mail .mail{ width:176px; background:#fff; border-radius:7px; padding:11px 12px 12px; box-shadow:0 12px 24px -12px rgba(13,17,22,.4); display:flex; flex-direction:column; gap:6px; }
.art-mail .mail b{ font-family:var(--sans-tight); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-text); }
.art-mail .mail u{ display:block; height:4.5px; background:#D9DEE4; border-radius:3px; }
.art-mail .mail u.s{ width:62%; }
.art-mail .ok{ position:absolute; bottom:14px; right:calc(50% - 98px); font-family:var(--sans-tight); font-weight:600; font-size:11px; background:var(--amber-soft); color:var(--ink); padding:7px 14px; border-radius:100px; box-shadow:0 8px 18px -8px rgba(13,17,22,.55); animation:alNudge 3.4s ease-in-out infinite; }
@keyframes alNudge{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
/* art: chat */
.art-chat{ flex-direction:column; align-items:stretch; justify-content:center; gap:8px; padding:0 20px; }
.art-chat span{ font-size:11.5px; line-height:1.35; padding:7px 11px; border-radius:12px; max-width:82%; box-shadow:0 6px 14px -8px rgba(13,17,22,.35); }
.art-chat .q{ background:#fff; border-bottom-left-radius:3px; align-self:flex-start; }
.art-chat .a{ background:var(--blue); color:#fff; border-bottom-right-radius:3px; align-self:flex-end; }
.art-chat .hot{ position:absolute; top:10px; right:12px; font-family:var(--sans-tight); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; background:var(--amber); color:var(--ink); padding:4px 10px; border-radius:100px; max-width:none; animation:alNudge 3s ease-in-out infinite; }
/* art: trip */
.art-trip svg{ width:86%; height:auto; max-height:116px; }
.art-trip .road{ fill:none; stroke:rgba(27,94,165,.22); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.art-trip .route{ fill:none; stroke:var(--blue); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:6 7; animation:alDash 1.6s linear infinite; }
@keyframes alDash{ to{ stroke-dashoffset:-26; } }
.art-trip .pin{ fill:var(--amber); stroke:#fff; stroke-width:2; }
.art-trip .lbl{ position:absolute; left:12px; bottom:10px; font-family:var(--sans-tight); font-size:10.5px; font-weight:700; background:var(--ink); color:var(--cream); padding:4px 10px; border-radius:100px; }
/* art: team */
.art-team .av{ width:46px; height:46px; border-radius:50%; border:3px solid #FBFAF6; display:flex; align-items:center; justify-content:center; font-family:var(--sans-tight); font-weight:700; font-size:13px; color:#fff; margin-left:-12px; box-shadow:0 8px 16px -8px rgba(13,17,22,.5); }
.art-team .av:first-child{ margin-left:0; background:var(--blue); }
.art-team .av:nth-child(2){ background:var(--blue-deep); }
.art-team .av:nth-child(3){ background:var(--amber); color:var(--ink); }
.art-team .bell{ margin-left:16px; background:#fff; border-radius:8px; padding:8px 11px; font-family:var(--sans-tight); font-weight:600; font-size:11px; line-height:1.3; box-shadow:0 8px 16px -8px rgba(13,17,22,.4); }
.art-team .bell em{ display:block; font-style:normal; color:var(--amber-text); font-size:10px; }

/* ---------- Other things we can build ---------- */
.al-maybe{ background:var(--charcoal); color:var(--cream); padding:110px 0; }
.al-maybe .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.al-maybe .al-h2{ color:var(--cream); }
.al-maybe p{ font-size:16.5px; color:var(--muted-dark); font-weight:300; line-height:1.75; max-width:520px; }
.al-maybe-list{ list-style:none; display:flex; flex-direction:column; }
.al-maybe-list li{ padding:15px 0 15px 28px; border-top:1px solid var(--hl-dark); font-size:15.5px; position:relative; transition:padding-left .3s ease, color .3s ease; }
.al-maybe-list li:last-child{ border-bottom:1px solid var(--hl-dark); }
.al-maybe-list li::before{ content:''; position:absolute; left:2px; top:50%; width:11px; height:1px; background:var(--amber-soft); transition:width .3s ease; }
.al-maybe-list li:hover{ padding-left:36px; color:var(--amber-soft); }
.al-maybe-list li:hover::before{ width:22px; }

/* ---------- Steps / pricing ---------- */
.al-steps{ background:var(--paper); padding:120px 0; }
.al-steps-head{ max-width:700px; margin-bottom:48px; }
.al-steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.al-step{ background:#FBFAF6; border:1px solid var(--hl-light); border-top:4px solid var(--blue); border-radius:10px; padding:36px 32px; box-shadow:0 24px 44px -30px rgba(13,17,22,.3); transition:transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s ease; }
.al-step:hover{ transform:translateY(-6px); box-shadow:0 40px 60px -30px rgba(13,17,22,.4); }
.al-step:nth-child(2){ border-top-color:var(--amber); background:#fff; }
.al-step-no{ font-family:var(--sans-tight); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-light); font-weight:600; margin-bottom:14px; }
.al-step h3{ font-family:var(--serif); font-weight:500; font-size:28px; margin-bottom:10px; letter-spacing:-0.01em; }
.al-step-desc{ font-size:15px; color:var(--muted-light); min-height:46px; }
.al-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin:26px 0 8px; }
.al-price-num{ font-family:var(--serif); font-weight:600; font-size:46px; line-height:1; color:var(--blue); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.al-price-from, .al-price-note{ font-family:var(--sans-tight); font-size:13px; font-weight:600; color:var(--muted-light); }
.al-credit{ font-size:13.5px; color:var(--muted-light); padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--hl-light); min-height:76px; }
.al-step ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.al-step li{ font-size:14.5px; color:var(--ink); line-height:1.5; display:flex; gap:10px; }
.al-step li::before{ content:'\2014'; color:var(--blue); flex-shrink:0; }
.al-fineprint{ font-size:13.5px; color:var(--muted-light); max-width:820px; margin-top:36px; line-height:1.7; }

/* ---------- Who it's for + data ---------- */
.al-for{ background:var(--paper); padding:0 0 110px; }
.al-for .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.al-for .perfect-box{ box-shadow:0 24px 44px -30px rgba(13,17,22,.28); }

/* ---------- Try it ---------- */
.al-try{ background:var(--tint); padding:100px 0; text-align:center; }
.al-try .section-eyebrow{ margin-bottom:18px; }
.al-try .al-h2{ max-width:720px; margin-left:auto; margin-right:auto; }
.al-try p{ font-size:17px; color:var(--muted-light); line-height:1.75; max-width:640px; margin:0 auto; }
.al-try-arrow{ display:inline-block; margin-top:26px; font-family:var(--sans-tight); font-weight:600; font-size:14px; color:var(--blue); }
.al-try-arrow span{ display:inline-block; font-size:22px; animation:alPoint 1.6s ease-in-out infinite; }
@keyframes alPoint{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(7px,7px); } }

/* ---------- Final CTA over the evenings photo ---------- */
.al-cta{ position:relative; background:var(--ink); color:var(--cream); overflow:hidden; padding:150px 0 120px; }
.al-cta-photo{ position:absolute; inset:0; }
.al-cta-photo img{ width:100%; height:100%; object-fit:cover; object-position:70% center; }
.al-cta-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,17,22,.95) 0%, rgba(13,17,22,.86) 38%, rgba(13,17,22,.3) 66%, rgba(13,17,22,.12) 100%), linear-gradient(0deg, rgba(13,17,22,.55), rgba(13,17,22,0) 50%); }
.al-cta .wrap{ position:relative; z-index:2; }
.al-cta-label{ font-family:var(--serif); font-style:italic; font-size:19px; color:var(--amber-soft); margin-bottom:18px; }
.al-cta h2{ font-family:var(--sans-tight); font-weight:600; font-size:clamp(30px,3.6vw,46px); letter-spacing:-0.015em; line-height:1.2; max-width:600px; margin-bottom:38px; }
.al-cta-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:20px 30px; }
.al-cta-contact{ display:flex; gap:48px; flex-wrap:wrap; margin-top:46px; padding-top:30px; border-top:1px solid var(--hl-dark); max-width:600px; }
.al-cta-contact .label{ font-family:var(--sans-tight); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-dark); margin-bottom:8px; font-weight:600; }
.al-cta-contact a{ font-family:var(--sans-tight); font-size:20px; font-weight:600; color:var(--cream); border-bottom:1px solid transparent; transition:border-color .25s, color .25s; }
.al-cta-contact a:hover{ border-color:var(--amber-soft); color:var(--amber-soft); }

/* ---------- Tablet / mobile ---------- */
@media (max-width:1100px){
  .al-flow{ grid-template-columns:1fr; gap:0; justify-items:center; margin:48px 0; }
  .al-tools{ width:100%; max-width:460px; }
  .al-link{ width:2px; height:60px; margin:6px 0; }
  .al-link i{ left:-2px; top:-40px; width:6px; height:40px; background:linear-gradient(180deg, transparent, var(--amber-soft)); animation-name:alFlowY; }
  .al-you{ width:100%; max-width:360px; }
  .al-demo .wrap{ gap:56px; }
}
@media (max-width:900px){
  .al-hero{ display:block; min-height:0; }
  .al-hero-photo{ position:relative; inset:auto; margin-top:72px; height:min(80vw,440px); }
  .al-hero::before{ height:260px; }
  .al-hero-photo{ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%); mask-image:linear-gradient(180deg,transparent 0,#000 34%); }
  .al-hero-photo img{ object-position:80% 30%; }
  .al-hero-scrim{ background:linear-gradient(0deg, var(--ink) 0%, rgba(13,17,22,.35) 38%, rgba(13,17,22,0) 62%), linear-gradient(180deg, rgba(13,17,22,.75) 0%, rgba(13,17,22,0) 30%); }
  .al-hero .wrap{ margin-top:-44px; padding-top:0; padding-bottom:52px; }
  .al-hero-actions{ margin-top:30px; }
  .al-proof ul{ grid-template-columns:1fr; gap:22px; padding:34px 0; }
  .al-problem, .al-answer, .al-demo, .al-why, .al-can, .al-maybe, .al-steps, .al-try{ padding-top:80px; padding-bottom:80px; }
  .al-for{ padding-bottom:70px; }
  .al-problem .wrap, .al-why .wrap, .al-maybe .wrap, .al-for .wrap, .al-demo .wrap{ grid-template-columns:1fr; gap:48px; }
  .al-photo{ order:-1; margin:0 18px 0 0; }
  .al-photo-tag{ left:12px; bottom:-16px; }
  .al-principles, .al-steps-grid{ grid-template-columns:1fr; }
  .al-cap-grid{ grid-template-columns:1fr 1fr; }
  .al-step-desc, .al-credit{ min-height:0; }
  .al-phone-wrap{ justify-self:center; }
  .al-cta{ padding:100px 0 80px; }
  .al-cta-scrim{ background:linear-gradient(0deg, rgba(13,17,22,.94) 0%, rgba(13,17,22,.8) 60%, rgba(13,17,22,.55) 100%); }
  .al-rings{ opacity:.045; }
}
@media (max-width:600px){
  .al-cap-grid{ grid-template-columns:1fr; }
  .al-hero-actions{ flex-direction:column; align-items:flex-start; }
  .al-hero-actions .final-cta-cta, .al-cta-actions .final-cta-cta{ width:100%; justify-content:center; }
  .al-cta-actions{ flex-direction:column; align-items:flex-start; }
  .al-cta-contact{ gap:28px; }
  .al-price-num{ font-size:40px; }
  .al-step, .al-principle{ padding:28px 22px; }
  .al-phone{ width:276px; height:560px; }
  .al-phone-wrap::before{ width:380px; height:380px; }
  .al-tools{ gap:10px 10px; }
  .al-chip{ font-size:12.5px; padding:10px 11px; gap:8px; }
}

/* ---------- Reduced motion: everything visible, nothing moving ---------- */
@media (prefers-reduced-motion: reduce){
  .al-glint::after{ display:none !important; }
  .al-phone, .al-node::before, .al-node::after, .al-link i, .al-bars i, .al-rec .dot, .art-doc .sent, .art-clash .bang, .art-mail .ok, .art-chat .hot, .art-trip .route, .al-try-arrow span, .al-hero-photo img{ animation:none !important; }
  .al-phone .al-rec, .al-phone .al-said, .al-phone .al-pc, .al-phone .al-ph-foot{ opacity:1 !important; transform:none !important; animation:none !important; }
  .art-doc .sent{ opacity:1; }
  .al-link i{ display:none; }
}

/* ---------- Phone demo timeline (14s loop, generated) ---------- */
@keyframes alP1{0%,2%{opacity:0; transform:translateY(12px);} 5%{opacity:1; transform:none;} 92%{opacity:1; transform:none;} 96%,100%{opacity:0; transform:translateY(0);}}
.al-ph-1{opacity:0; animation:alP1 14s ease-out infinite;}
@keyframes alP2{0%,22%{opacity:0; transform:translateY(12px);} 25%{opacity:1; transform:none;} 92%{opacity:1; transform:none;} 96%,100%{opacity:0; transform:translateY(0);}}
.al-ph-2{opacity:0; animation:alP2 14s ease-out infinite;}
@keyframes alP3{0%,36%{opacity:0; transform:translateY(12px);} 39%{opacity:1; transform:none;} 92%{opacity:1; transform:none;} 96%,100%{opacity:0; transform:translateY(0);}}
.al-ph-3{opacity:0; animation:alP3 14s ease-out infinite;}
@keyframes alP4{0%,47%{opacity:0; transform:translateY(12px);} 50%{opacity:1; transform:none;} 92%{opacity:1; transform:none;} 96%,100%{opacity:0; transform:translateY(0);}}
.al-ph-4{opacity:0; animation:alP4 14s ease-out infinite;}
@keyframes alP5{0%,57%{opacity:0; transform:translateY(12px);} 60%{opacity:1; transform:none;} 92%{opacity:1; transform:none;} 96%,100%{opacity:0; transform:translateY(0);}}
.al-ph-5{opacity:0; animation:alP5 14s ease-out infinite;}
@keyframes alP6{0%,68%{opacity:0; transform:translateY(12px);} 71%{opacity:1; transform:none;} 92%{opacity:1; transform:none;} 96%,100%{opacity:0; transform:translateY(0);}}
.al-ph-6{opacity:0; animation:alP6 14s ease-out infinite;}
@keyframes alP7{0%,76%{opacity:0; transform:translateY(12px);} 79%{opacity:1; transform:none;} 92%{opacity:1; transform:none;} 96%,100%{opacity:0; transform:translateY(0);}}
.al-ph-7{opacity:0; animation:alP7 14s ease-out infinite;}