:root{
  --bg:#FBF3E8; --panel:#fff; --ink:#1B2A4A; --muted:#5D6680; --line:#EADDC9;
  --accent:#CF4424; --accent-ink:#fff; --pop:#F26B4A; --pop-2:#F4B740; --deep:#1B2A4A; --deep-ink:#FBF3E8;
  --soft:#FCE4D8; --band:#F6E8D4; --brass:#B7791F; --danger:#B3261E; --g-bg:#FFFBF5;
  --display:"Nunito",ui-rounded,system-ui,sans-serif; --display-w:900;
  --body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111A2E; --panel:#18233D; --ink:#F4ECDF; --muted:#A4ACC3; --line:#2B3858;
  --accent:#F26B4A; --accent-ink:#111A2E; --pop:#F26B4A; --pop-2:#F4B740; --deep:#0A1122; --deep-ink:#F4ECDF;
  --soft:#3A2632; --band:#151F37; --brass:#F4B740; --danger:#F08A7A; --g-bg:#111A2E; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--body);
  padding:20px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
a{color:var(--accent)}
.wrap{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand b{font:700 21px var(--display)}
.mark{width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
h1,h2{font-family:var(--display);letter-spacing:-.01em;text-wrap:balance;margin:0}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  font:600 14px var(--body);padding:10px 16px;border-radius:10px;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn:focus-visible,input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.muted{color:var(--muted)}
.banner{background:var(--soft);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hero{padding:40px 0 10px;display:flex;flex-direction:column;gap:16px;max-width:640px}
.hero h1{font-size:clamp(30px,5vw,46px);line-height:1.05}
.hero p{font-size:17px;margin:0;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.gcard{display:flex;flex-direction:column;gap:10px}
.gcard h2{font-size:17px}
.gcard .url{font:500 12px var(--mono);color:var(--muted);word-break:break-all}
.gcard .actions{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid currentColor;align-self:flex-start}
.pill.live{color:var(--accent)} .pill.off{color:var(--brass)}
/* editor */
.edgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.editor{display:flex;flex-direction:column;gap:22px;min-width:0}
.editor h2{font-size:15px;margin-bottom:10px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:500;min-width:0}
input,textarea{font:400 14px var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
textarea{resize:vertical;min-height:64px}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:grid;grid-template-columns:1fr auto;gap:8px}
.item.pair{grid-template-columns:1fr 1.4fr auto}
.item.pick{grid-template-columns:1fr 1fr 1fr auto;padding-bottom:10px;border-bottom:1px solid var(--line)}
.item.pick .pick-note{grid-column:2 / 4}
.item.pick textarea{min-height:38px}
.ai-picks{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.x{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:8px;width:34px;cursor:pointer}
.add{align-self:flex-start;border:1px dashed var(--line);background:transparent;color:var(--accent);border-radius:8px;padding:7px 12px;font:500 13px var(--body);cursor:pointer;margin-top:8px}
.side{display:flex;flex-direction:column;gap:14px;position:sticky;top:16px}
.phone{background:var(--deep);border-radius:36px;padding:11px}
.phone iframe{width:100%;height:620px;border:0;border-radius:26px;background:var(--bg);display:block}
.share{display:flex;gap:14px;align-items:center}
.share img{width:104px;height:104px;background:#fff;border-radius:10px;padding:6px;flex:none}
.status{font-size:12px;color:var(--muted)}
@media (max-width:860px){.edgrid{grid-template-columns:minmax(0,1fr)}.side{position:static}.item.pair{grid-template-columns:1fr auto}.item.pair input:nth-child(2){grid-column:1}.item.pick{grid-template-columns:1fr auto}.item.pick>*,.item.pick .pick-note{grid-column:1}.item.pick .x{grid-column:2;grid-row:1}}
/* guest page */
.guest{max-width:520px;margin:0 auto;padding:0}
body.g{padding:0 0 30px}
.g-hero{background:var(--accent);color:var(--accent-ink);padding:40px max(20px,env(safe-area-inset-left,0px)) 24px}
.g-hero .eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.g-hero h1{font-size:28px;line-height:1.1;margin:6px 0 8px}
.g-hero p{margin:0;opacity:.92}
.g-body{padding:14px max(14px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.card h2{margin:0 0 8px;font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.kv:first-of-type{border-top:0}
.kv span{color:var(--muted);font-size:12px}
.kv b{font:500 15px var(--mono);word-break:break-all;text-align:right}
.kv-val{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0}
.copy{border:0;background:var(--soft);color:var(--accent);font:600 12px var(--body);padding:5px 10px;border-radius:99px;cursor:pointer;flex:none}
.code{font:500 28px var(--mono);letter-spacing:.15em}
.lock-form{display:flex;gap:8px;margin-top:10px}
.lock-form input{flex:1;min-width:0;font:500 20px var(--mono);letter-spacing:.2em;text-align:center}
.lock-err{margin:8px 0 0;color:var(--danger,#b42318);font-size:13px;font-weight:600}
.lock-note{margin:0;padding:8px 12px;border-radius:10px;background:var(--soft);font-size:12px;color:var(--muted)}
.times{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.times div{background:var(--soft);border-radius:10px;padding:8px 10px}
.times span{display:block;font-size:11px;color:var(--muted)}
.times b{font-size:16px}
.txt{margin:0;white-space:pre-wrap}
ul.g{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.place{padding:8px 0;border-top:1px solid var(--line)}
.place:first-of-type{border-top:0;padding-top:0}
.place b{display:block} .place span{display:block;font-size:13px;color:var(--muted)}
.place-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:13px}
.check{display:flex;gap:8px;align-items:flex-start;flex-direction:row;font-size:14px;color:var(--ink);font-weight:400;padding:4px 0}
.check input{width:16px;height:16px;margin-top:3px;accent-color:var(--accent)}
.foot{text-align:center;font-size:11px;color:var(--muted)}
/* public landing, sample and legal pages */
.land{gap:56px}
.land h3{font:700 17px var(--display);margin:0 0 4px}
.btn.big{padding:13px 20px;font-size:15px}
.small{font-size:13px;margin:0}
.l-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding-top:24px}
.l-copy{display:flex;flex-direction:column;gap:18px}
.l-copy h1{font-size:clamp(32px,5.4vw,54px);line-height:1.03}
.lead{font-size:18px;margin:0;color:var(--muted);max-width:560px}
.l-ctas{display:flex;gap:10px;flex-wrap:wrap}
.l-phone{max-width:330px;width:100%;justify-self:center}
.l-phone iframe{height:560px;pointer-events:none}
.l-sec{display:flex;flex-direction:column;gap:18px}
.l-sec>h2{font-size:clamp(24px,3.2vw,32px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.steps p,.benefits p{margin:0}
.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:99px;background:var(--soft);color:var(--accent);font-weight:700;margin-bottom:10px}
.benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px 28px}
.benefits li{border-top:2px solid var(--accent);padding-top:12px}
.price{max-width:520px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.price-main{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.amt{font:700 48px var(--display);line-height:1}
.price-extra{margin:0}
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ticks li{padding-left:24px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.faq{display:flex;flex-direction:column;gap:10px;max-width:760px}
.faq details{padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600;font-size:15px}
.faq details p{margin:10px 0 0}
.l-final{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.l-final h2{font-size:26px}.l-final p{margin:0}
.site-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:18px}
.site-foot nav{display:flex;gap:16px}
.legal{max-width:760px;line-height:1.6}
.legal h1{font-size:30px}.legal h2{font-size:18px;margin-top:22px}
.legal ul{padding-left:20px}
.todo{background:#fff3cd;color:#664d03;padding:8px 12px;border-radius:8px}
.sample-bar{background:var(--ink);color:var(--bg);padding:10px 16px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:13px}
.sample-bar a{color:var(--bg);font-weight:600}
@media (max-width:820px){.l-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:8px}.steps{grid-template-columns:minmax(0,1fr)}.land{gap:44px}.l-phone iframe{height:480px}}
.act{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.act:first-of-type{border-top:0;padding-top:0}
.act img{width:72px;height:72px;object-fit:cover;border-radius:10px;flex:none;background:var(--soft)}
.act b{display:block;font-weight:600;font-size:14px;line-height:1.3}
.act-meta{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12px;color:var(--muted);margin-top:3px}
.disclose{margin:10px 0 0;font-size:11px;color:var(--muted)}

/* ---------- coral + navy design layer ---------- */
h1,h2,.land h3,.brand b,.amt{font-weight:var(--display-w)}
/* ---------- shared bits ---------- */
.mark{background:var(--pop);color:var(--deep);border-radius:11px;transform:rotate(-6deg)}
.btn{border-radius:999px;font-weight:700;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.btn.ghost{box-shadow:none;border:2px solid var(--ink);color:var(--ink)}
.panel{border-radius:20px;border-color:var(--line)}

/* ---------- landing: fun + professional ---------- */
.l-copy h1{font-size:clamp(34px,5.6vw,58px);line-height:1.02}
.hl{position:relative;white-space:nowrap;z-index:0}
.hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.32em;z-index:-1;background:var(--pop);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c30-7 62-9 96-6 34 3 64 2 98-5' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c30-7 62-9 96-6 34 3 64 2 98-5' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.l-phone{position:relative}
.l-phone::before{content:"";position:absolute;inset:6% -14% 2% -10%;background:var(--pop);border-radius:46% 54% 42% 58% / 52% 40% 60% 48%;z-index:0;opacity:.9}
.l-phone::after{content:"";position:absolute;width:62px;height:58px;left:-58px;top:16%;background:var(--ink);z-index:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 56' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8c10-3 22 0 28 9 6 9 7 19 18 25'/%3E%3Cpath d='M41 44l10-1-3-10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 56' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8c10-3 22 0 28 9 6 9 7 19 18 25'/%3E%3Cpath d='M41 44l10-1-3-10'/%3E%3C/svg%3E") center/contain no-repeat}
.l-phone .phone{position:relative;z-index:1;background:var(--deep);transform:rotate(4deg);box-shadow:0 24px 50px -18px rgba(20,24,58,.45);transition:transform .3s}
.l-phone:hover .phone{transform:rotate(1deg)}
@media (max-width:820px){.l-phone::after{display:none}.l-phone{max-width:290px}}

/* full-bleed tinted band behind "Getting set up" */
.land>.l-sec:nth-of-type(2){background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(-40px -100vmax);padding:4px 0}
.steps .panel{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
@media (prefers-color-scheme:dark){.steps .panel,.price{border-color:var(--line)}.steps .panel{box-shadow:5px 5px 0 var(--pop)}}
.steps li:nth-child(2){transform:rotate(-1deg)} .steps li:nth-child(3){transform:rotate(.8deg)}
.num{width:42px;height:42px;font:var(--display-w) 20px var(--display);background:var(--pop);color:var(--deep);border-radius:46% 54% 50% 50% / 55% 45% 55% 45%}
.steps li:nth-child(2) .num{background:var(--pop-2)}
.steps li:nth-child(3) .num{background:var(--accent);color:var(--accent-ink)}

/* hand-drawn icons on the benefits */
.benefits li{border-top:0;padding-top:0}
.benefits li::before{content:"";display:block;width:52px;height:52px;margin-bottom:12px;border-radius:16px;
  background:var(--soft)}
.benefits li:nth-child(1){--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3.4 9.3c5-4.7 12.1-4.4 17.1.1'/%3E%3Cpath d='M6.5 12.7c3.3-2.9 7.7-2.7 11 .2'/%3E%3Cpath d='M9.6 15.9c1.5-1.2 3.4-1.1 4.9.1'/%3E%3Cpath d='M12 19.3h.1'/%3E%3C/svg%3E")}
.benefits li:nth-child(2){--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.7 17.6a3.9 3.9 0 1 1-1.4-5.5'/%3E%3Cpath d='M8.6 12.3l10.3-8.6'/%3E%3Cpath d='M16.2 6.1l2.9 2.8'/%3E%3Cpath d='M13.6 8.3l2 2'/%3E%3C/svg%3E")}
.benefits li:nth-child(3){--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.8s-6.9-5.6-6.9-10.8a6.9 6.9 0 0 1 13.8.2c-.1 5-6.9 10.6-6.9 10.6z'/%3E%3Cpath d='M9.8 9.4c.6-1.1 1.7-1 2.2-.1.6-.9 1.7-1 2.2.1.5 1.2-2.2 3-2.2 3s-2.7-1.8-2.2-3z'/%3E%3C/svg%3E")}
.benefits li:nth-child(4){--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.1 2.9h7.7c1 0 1.7.7 1.6 1.7l-.2 15.1c0 .9-.7 1.6-1.6 1.5H8.3c-.9 0-1.6-.7-1.6-1.6L6.5 4.5c0-.9.7-1.6 1.6-1.6z'/%3E%3Cpath d='M10.6 18.2c1-.1 1.9 0 2.9 0'/%3E%3C/svg%3E")}
.benefits li:nth-child(5){--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.3 8.7A7.6 7.6 0 0 0 5.1 9.3'/%3E%3Cpath d='M4.8 15.2a7.6 7.6 0 0 0 14.1-.5'/%3E%3Cpath d='M19.6 4l-.3 4.7-4.6-.3'/%3E%3Cpath d='M4.4 20l.3-4.7 4.7.3'/%3E%3C/svg%3E")}
/* tint the icon with the theme color: draw the icon as a mask over a colored layer */
.benefits li{position:relative}
.benefits li::after{content:"";position:absolute;left:11px;top:11px;width:30px;height:30px;background:var(--ink);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.benefits li:nth-child(odd)::before{transform:rotate(-4deg)} .benefits li:nth-child(even)::before{transform:rotate(3deg)}
.benefits li:nth-child(2)::before,.benefits li:nth-child(5)::before{background-color:color-mix(in srgb,var(--pop-2) 35%,var(--panel))}

/* pricing card with a sticker */
.price{position:relative;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--pop)}
.amt{font-size:56px;color:var(--ink)}
.price::after{content:var(--sticker);position:absolute;top:-16px;right:-12px;background:var(--pop-2);color:var(--deep);
  font:800 13px var(--body);padding:8px 14px;border-radius:999px;transform:rotate(6deg);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.ticks li::before{color:var(--accent)}
.faq details{border-radius:16px}
.faq details[open]{border-color:var(--ink)}
.faq summary{font-size:16px}

/* final call to action on the deep color */
.l-final{background:var(--deep);color:var(--deep-ink);border:0;padding:36px;position:relative;overflow:hidden}
.l-final .muted{color:color-mix(in srgb,var(--deep-ink) 75%,transparent)}
.l-final::after{content:"";position:absolute;width:220px;height:220px;right:-60px;bottom:-90px;background:var(--pop);border-radius:50%}
.l-final>*{position:relative;z-index:1}
.l-final .btn{background:var(--pop);border-color:var(--pop);color:var(--deep);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.sample-bar{background:var(--deep);color:var(--deep-ink)}
.sample-bar a{color:var(--pop)}

/* ---------- guest page: plain, calm, big tap targets ---------- */
body.g{background:var(--g-bg);color:var(--ink);font-size:16px}
.g-hero{background:transparent;color:var(--ink);padding-top:34px;padding-bottom:6px;border-top:6px solid var(--accent)}
.g-hero .eyebrow{color:var(--muted);opacity:1;font-weight:600}
.g-hero h1{font-size:34px;line-height:1.08}
.g-hero p{opacity:1;color:var(--muted)}
.g-body{gap:14px}
.card{border-radius:18px;padding:18px 18px 16px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(20,24,58,.04)}
.card h2{font:var(--display-w) 19px var(--display);letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:10px}
.kv{padding:10px 0}
.kv span{font-size:14px}
.kv b{font-size:17px;color:var(--ink)}
.copy{background:var(--accent);color:var(--accent-ink);font-size:14px;padding:9px 16px;min-height:40px}
.code{font-size:34px;color:var(--ink)}
.times div{background:var(--g-bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.times span{font-size:12px}
.times b{font-size:18px}
.place{padding:12px 0}
.place b{font-size:16px}
.place span{font-size:14px}
.place-links{font-size:15px;gap:6px 16px;margin-top:6px}
.g-body a{color:var(--accent);font-weight:600}
.check{font-size:16px;padding:8px 0}
.check input{width:22px;height:22px;margin-top:1px}
ul.g{gap:8px;font-size:16px}
ul.g li::marker{color:var(--muted)}
.lock-form .btn{box-shadow:none}
.foot{font-size:12px}


/* ---------- landing: AI tools on a navy band ---------- */
.l-ai{background:var(--deep);color:var(--deep-ink);box-shadow:0 0 0 100vmax var(--deep);clip-path:inset(-48px -100vmax);padding:8px 0}
.l-ai .muted,.l-ai .lead{color:color-mix(in srgb,var(--deep-ink) 78%,transparent)}
.l-ai-head{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.l-ai .tag{background:var(--pop-2);color:var(--deep);font:800 12px var(--body);padding:5px 12px;border-radius:999px;transform:rotate(-3deg)}
.ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ai-card{display:flex;flex-direction:column;gap:10px;background:var(--panel);color:var(--ink);border:0}
.ai-card .muted,.ai-strip .muted{color:var(--muted)}
.ai-card p{margin:0}
.chip{align-self:flex-start;background:var(--soft);color:var(--accent);font:700 12px var(--body);padding:4px 11px;border-radius:999px}
.ai-demo{margin-top:auto;background:var(--bg);border:1.5px dashed var(--line);border-radius:14px;padding:12px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:12px}
.ai-paste{font-style:italic;color:var(--muted);line-height:1.4}
.ai-arrow{font:var(--display-w) 22px var(--display);color:var(--accent)}
.ai-out{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ai-out li{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-weight:600;white-space:nowrap}
.ai-out li::before{content:"✓ ";color:var(--accent)}
.ai-pick{grid-template-columns:minmax(0,1fr);gap:3px;font-size:13px}
.ai-pick b{font:var(--display-w) 15px var(--display)}
.ai-pick span{color:var(--muted)}
.ai-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--panel);color:var(--ink);border:0;padding:16px 20px}
.ai-strip p{margin:0;flex:1;min-width:220px}
@media (max-width:820px){.ai-grid{grid-template-columns:minmax(0,1fr)}}
.l-ai-head h2{font-size:clamp(28px,3.6vw,38px);color:var(--deep-ink)}