/* Ask widget page (/ask): the mockup's palette (warm peach, wheat and sky) where it differs from base.css, then the page rules.
   Source: .claude/redesign/ask-2026-10-21/ask.src.html */
:root{
  --w-base:#fdfbf7;
  --w-peach:rgba(240,146,164,.72);
  --w-blush:rgba(246,204,110,.78);
  --w-blue:rgba(156,164,240,.8);
  --glass:rgba(255,255,255,.66);
  --canvas-base:linear-gradient(172deg,#fdfbf7 0%,#fbf0e2 42%,#f8e0d8 72%,#e6e4f8 100%);
  --canvas-a:rgba(246,200,96,.75);
  --canvas-b:rgba(156,164,240,.75);
  --canvas-c:rgba(240,146,164,.7);
  --canvas-d:rgba(246,200,96,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --logo-ink:rgba(241,240,236,.5); --w-base:#17151a; --w-peach:rgba(190,90,110,.3); --w-blush:rgba(190,150,60,.22); --w-blue:rgba(110,110,220,.32); --glass:rgba(24,26,34,.62); --canvas-base:linear-gradient(172deg,#17151a 0%,#1f1a16 42%,#241619 72%,#1a1a30 100%);
    --canvas-a:rgba(190,150,60,.22); --canvas-b:rgba(110,110,220,.34); --canvas-c:rgba(190,90,110,.3); --canvas-d:rgba(190,150,60,.16);
  }
}
:root[data-theme="dark"]{
  --logo-ink:rgba(241,240,236,.5); --w-base:#17151a; --w-peach:rgba(190,90,110,.3); --w-blush:rgba(190,150,60,.22); --w-blue:rgba(110,110,220,.32); --glass:rgba(24,26,34,.62); --canvas-base:linear-gradient(172deg,#17151a 0%,#1f1a16 42%,#241619 72%,#1a1a30 100%);
  --canvas-a:rgba(190,150,60,.22); --canvas-b:rgba(110,110,220,.34); --canvas-c:rgba(190,90,110,.3); --canvas-d:rgba(190,150,60,.16);
}

/* ---------- Pulse page ---------- */
.nav a.nav-link[aria-current="page"]{color:var(--nav-ink);background:var(--nav-hover)}
.hero .h1.duo{max-width:15em}
.duo > span:not(.nw){color:var(--muted)}
.hero .ai-logos{margin-top:28px}
.cta{height:52px;margin-top:32px;padding:0 26px;font-size:16px}
.cta .ic{width:16px;height:16px;transition:transform var(--t-2) var(--ease-out)}
.cta:hover .ic{transform:translateX(3px)}

/* who: bot roles */
.roles{display:flex;flex-direction:column;gap:14px;padding:20px 24px 16px;font-size:14px;overflow-x:auto}
.roles .panel-head,.mini .panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:var(--hair) solid var(--rule)}
.mix{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden}
.mix i:nth-child(1),.mix-legend span:nth-child(1) i{background:var(--accent)}
.mix i:nth-child(2),.mix-legend span:nth-child(2) i{background:var(--good)}
.mix i:nth-child(3),.mix-legend span:nth-child(3) i{background:var(--wheat)}
.mix-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted)}
.mix-legend i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px}
.roles-t{width:100%;min-width:380px;border-collapse:collapse;font-size:13px}
.roles-t th{padding:6px 0;border-bottom:var(--hair) solid var(--rule);font-weight:400;color:var(--muted);text-align:left}
.roles-t td{padding:9px 12px 9px 0;border-bottom:var(--hair) solid var(--rule);color:var(--ink-2)}
.roles-t tr:last-child td{border-bottom:0}
.roles-t .n{padding-right:0;text-align:right;font-variant-numeric:tabular-nums}
.roles-t code{font-size:12px;color:var(--ink)}
.role{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:12px;font-weight:500;white-space:nowrap}
.role.is-train{background:var(--accent-soft);color:var(--accent-ink)}
.role.is-search{background:var(--good-soft);color:var(--good)}
.role.is-live{background:var(--wheat-soft);color:var(--wheat-ink)}
/* read / trip: compact panels */
.panel.mini{display:flex;flex-direction:column;gap:0;padding:20px 24px 16px}
.panel.mini .panel-head{margin-bottom:2px}
.panel.mini .page-row:first-of-type{border-top:0}
.status.quiet{background:var(--wash);color:var(--muted)}

/* advice */
.advice{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.advice-points{list-style:none;margin:0;padding:0}
.advice-points li{padding:20px 0;border-top:var(--hair) solid var(--rule);font-size:16px;line-height:1.55;color:var(--muted)}
.advice-points li:first-child{border-top:0;padding-top:0}
.advice-points b{display:block;margin-bottom:4px;font:400 21px/1.3 var(--display);color:var(--ink)}
.decs{margin:0;border-radius:var(--r-l)}
.decs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:var(--hair) solid var(--rule);font-size:13px;color:var(--muted)}
.decs-head b{font-size:15px;font-weight:500;color:var(--ink)}
.dec{display:flex;flex-direction:column;gap:6px;padding:18px 24px;border-bottom:var(--hair) solid var(--rule)}
.dec:last-child{border-bottom:0}
.dec h3{font:600 15px/1.4 var(--sans)}
.dec p{font-size:14px;line-height:1.55;color:var(--ink-2)}
.dec p.dec-meta{font-size:12px;color:var(--muted)}
.dec code{font-size:.92em}
.dec-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500}
.dec-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dec-tag.urgent{color:var(--bad)}
.dec-tag.ok{color:var(--good)}
.dec.done h3{color:var(--muted)}

/* watch: the page's key promise — one large card on a soft peach-and-sky field, a big brand mark with the changes we track */
.watch{padding-block:0 var(--sec-y)}
.watch-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;min-height:620px;padding:clamp(40px,7vw,112px) clamp(24px,7vw,112px);border-radius:var(--r-l);background:var(--w-base);box-shadow:0 1px 2px rgba(21,22,27,.04),0 40px 80px -40px rgba(21,22,27,.22)}
.watch-paint{position:absolute;inset:-15%;z-index:-2;filter:blur(40px);background:
  radial-gradient(40% 36% at 60% 74%,var(--w-peach),transparent 70%),
  radial-gradient(50% 58% at 96% 46%,var(--w-blue),transparent 70%),
  radial-gradient(56% 50% at 14% 86%,var(--w-blush),transparent 72%),
  linear-gradient(180deg,var(--w-base) 8%,transparent 40%)}
.watch-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.watch-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:600px}
.watch-h{margin-bottom:12px;font:400 clamp(38px,4.6vw,64px)/1.02 var(--display);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.watch-h > span:not(.nw){color:var(--muted)}
.watch-copy p{font-size:17px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.watch-copy .form-note{font-size:14px;color:var(--muted)}
.watch-cta{height:58px;margin-top:22px;padding:0 34px;font-size:17px;box-shadow:0 1px 2px rgba(21,22,27,.2),0 14px 28px -12px rgba(21,22,27,.45)}
.watch-art{display:flex;flex-direction:column;align-items:center;gap:36px;margin:0}
.watch-star{width:clamp(140px,16vw,210px);height:auto;aspect-ratio:1;fill:var(--ink);filter:drop-shadow(0 18px 30px rgba(21,22,27,.18))}
.play .watch-star{animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.watch-chips{list-style:none;display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;margin:0;padding:0}
.watch-chips li{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;background:var(--glass);box-shadow:inset 0 0 0 var(--hair) var(--line),0 12px 28px -16px rgba(21,22,27,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.watch-chips li:nth-child(2){margin-left:32px;margin-right:-32px}
.watch-chips li:nth-child(3){margin-left:12px;margin-right:-12px}
.watch-chips span{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.watch-chips b{font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
.watch-chips code{font-size:.92em}
@media (max-width:960px){
  .watch-card{grid-template-columns:1fr;min-height:0}
  .watch-art{align-items:flex-start}
  .watch-chips{max-width:none}
  .watch-chips li:nth-child(n){margin-inline:0}
}


@media (max-width:860px){.advice{grid-template-columns:1fr}}
/* ---------- AI Page page ---------- */
/* ---------- Ask widget page ---------- */
/* buy band: a low full-width strip on the page canvas, right above the footer */
.buy{position:relative;overflow:hidden;isolation:isolate;background:var(--canvas-base)}
.buy-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(48px,6vw,72px)}
.buy-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.buy-copy .uq-lead{text-align:left}
.buy-actions{display:flex;flex-wrap:wrap;gap:12px}
.buy-actions .cta{margin-top:0}
.buy-prices{height:52px;padding:0 22px;font-size:16px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.buy-prices .ic{width:15px;height:15px}
.buy-plan{padding:26px 28px;border-radius:var(--r-l);background:var(--glass);box-shadow:inset 0 0 0 var(--hair) var(--line),0 24px 48px -28px rgba(21,22,27,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.buy-plan h3{font-size:16px;font-weight:500}
.buy-price{display:flex;align-items:baseline;gap:8px;margin-top:14px}
.buy-alt{margin-top:6px;font-size:13px;color:var(--muted)}
.buy-plan .checks{margin:18px 0 16px}
.buy-assure{padding-top:14px;border-top:var(--hair) solid var(--rule);font-size:12px;color:var(--muted)}
main:has(> .buy) ~ .foot{padding-top:clamp(48px,6vw,72px)}
@media (max-width:860px){.buy-inner{grid-template-columns:1fr}}
/* hero: the memory instruction itself, shown as the product */
.remember{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:640px;margin-top:26px;padding:16px 22px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 var(--hair) var(--line-2),0 18px 36px -24px rgba(21,22,27,.28);font:400 15px/1.55 var(--mono);color:var(--ink-2)}
.remember mark{padding:1px 4px;margin:0 -4px;border-radius:4px;background:var(--mark);color:var(--ink)}
.remember-tag{font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero .remember + .cta{margin-top:28px}
/* stage mocks (HTML, theme-aware) instead of screenshots */
.mockwin{min-height:560px}
.mock{position:relative;min-height:560px}
.m-site{padding:22px 28px 28px;background:var(--card)}
.m-site-top{display:flex;align-items:center;gap:22px;padding-bottom:16px;border-bottom:var(--hair) solid var(--rule);font-size:13px;color:var(--muted)}
.m-site-top b{margin-right:auto;font:400 18px/1 var(--display);color:var(--ink)}
.m-product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;margin-top:26px;max-width:760px}
.m-photo{aspect-ratio:4/5;max-width:100%;border-radius:var(--r-m);background:radial-gradient(60% 50% at 40% 40%,rgba(240,146,164,.75),transparent 70%),radial-gradient(50% 50% at 70% 70%,rgba(246,200,96,.7),transparent 70%),var(--wash)}
.m-info{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.m-crumb{font-size:12px;color:var(--muted)}
.m-title{font:400 28px/1.15 var(--display)}
.m-desc{font-size:14px;line-height:1.55;color:var(--muted)}
.m-price{font:400 24px/1 var(--display)}
.m-buy{align-self:flex-start;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:10px;background:var(--wash-2);font-size:14px;font-weight:500}
.m-panel{position:absolute;right:28px;bottom:84px;width:260px;padding:16px;border-radius:14px;background:var(--card);box-shadow:var(--sh-3)}
.m-panel-h{margin-bottom:10px;font-size:13px;font-weight:600}
.ai-logos.prov-list{flex-direction:column;flex-wrap:nowrap;gap:4px;margin:0;justify-content:flex-start}
.ai-logos.prov-list li{display:flex;align-items:center;gap:10px;width:auto;height:38px;padding:0 10px;border-radius:9px;background:none;-webkit-mask:none;mask:none;font-size:14px;color:var(--ink)}
.ai-logos.prov-list li.on{background:var(--wash)}
.prov-list i{flex:none;width:18px;height:18px;background:var(--ink);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.m-badge{margin-top:10px;font-size:11px;color:var(--muted);text-align:center}
.m-fab{position:absolute;right:28px;bottom:26px;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:500;box-shadow:0 10px 24px -10px rgba(21,22,27,.5)}
.m-fab .mark{width:13px;height:13px;fill:currentColor}
.m-chat{display:flex;flex-direction:column;background:var(--card)}
.m-chat-body{display:flex;flex-direction:column;gap:16px;max-width:760px;margin:0 auto;padding:32px 28px 8px;width:100%}
.m-q{align-self:flex-end;max-width:88%;padding:14px 18px;border-radius:18px;background:var(--gpt-bubble);font-size:14px;line-height:1.6;color:var(--ink-2)}
.m-q mark{padding:0 2px;margin:0 -2px;background:var(--mark);color:var(--ink)}
.m-note{align-self:flex-end;max-width:88%;font-size:12px;color:var(--muted);text-align:right}
.m-lines{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.m-lines i{display:block;height:10px;border-radius:5px;background:var(--wash-2)}
.m-chat .chat-input{width:calc(100% - 56px);max-width:760px;margin:auto auto 24px}
.m-clicks{padding:22px 28px 28px;background:var(--card)}
.m-clicks-head{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:var(--hair) solid var(--rule)}
.m-clicks-head b{margin-right:auto;font-size:16px;font-weight:500}
.m-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--wash);font-size:12px;color:var(--muted)}
.m-seg i{font-style:normal;padding:6px 10px;border-radius:7px}
.m-seg i.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.m-csv{font-size:12px;color:var(--muted)}
.m-clicks-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;margin-top:20px}
.m-card{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:var(--r-m);box-shadow:inset 0 0 0 var(--hair) var(--line-2);font-size:14px}
.m-wide{grid-column:1/-1}
.m-label{font-size:13px;color:var(--muted)}
.m-big{font:400 52px/1 var(--display);letter-spacing:-.02em}
.m-sub{font-size:13px;color:var(--muted)}
.m-sub b{font-weight:500;color:var(--good)}
.m-card .bar-row{grid-template-columns:90px minmax(0,1fr) 44px}
/* steps (real sequence) and settings */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps .tile{gap:12px}
.step-n{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--card);box-shadow:inset 0 0 0 var(--hair) var(--line-2);font:500 14px/1 var(--mono);color:var(--ink)}
.steps .tile > p,.set-grid .tile > p:last-child{font-size:15px;line-height:1.55;color:var(--muted)}
.set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.set-grid .tile{gap:10px}
@media (max-width:860px){.m-product{grid-template-columns:1fr}.m-photo{display:none}.m-panel{position:static;width:auto;margin-top:20px}.m-fab{position:static;margin-top:16px}.mockwin,.mock{min-height:0}.m-clicks-grid{grid-template-columns:1fr}}
@media (max-width:760px){.steps,.set-grid{grid-template-columns:1fr}.m-site-top span{display:none}.m-clicks-head{flex-wrap:wrap}}
/* readers: Googlebot vs a person vs an AI crawler */
.readers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:20px}
.reader{min-width:0;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r-s);box-shadow:inset 0 0 0 var(--hair) var(--line-2)}
.reader.is-ai{background:var(--ink);box-shadow:none;color:var(--paper)}
.reader-who{min-width:0;font-size:14px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.reader-who code{font-size:12px}
.reader-does{font-size:13px;line-height:1.5;color:var(--muted)}
.reader.is-ai .reader-does{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.reader-takes{margin-top:auto;padding-top:10px;border-top:var(--hair) solid var(--rule);font-size:12px;color:var(--muted)}
.reader.is-ai .reader-takes{border-top-color:color-mix(in srgb,var(--paper) 20%,transparent);color:color-mix(in srgb,var(--paper) 72%,transparent)}
.reader-takes b{display:block;margin-top:2px;font:400 18px/1.2 var(--display);color:var(--ink)}
.reader.is-ai .reader-takes b{color:var(--paper)}
/* stats: owner-provided Chetver figures */
.stats{justify-content:space-between}
.stat-list{display:flex;flex-direction:column;gap:0;margin:0}
.stat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:20px;padding:18px 0;border-top:var(--hair) solid var(--line-2)}
.stat-n{font:400 clamp(56px,6vw,84px)/.9 var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums}
.stat-n span{font-size:.5em;color:var(--muted);margin-left:2px}
.stat dd{margin:0;font-size:15px;line-height:1.45;color:var(--ink-2)}
/* sources: site fragments → AI Page rows */
.sources{display:flex;flex-direction:column;padding:8px 24px}
.src-row{display:grid;grid-template-columns:minmax(0,1.25fr) 20px minmax(0,1fr);align-items:center;gap:14px;padding:16px 0;border-bottom:var(--hair) solid var(--rule)}
.src-row:last-child{border-bottom:0}
.src-q{font-size:13px;line-height:1.55;color:var(--muted)}
.src-q mark{padding:0 2px;margin:0 -2px;background:var(--mark);color:var(--ink)}
.src-from{display:block;margin-bottom:4px;font:400 11px/1.3 var(--mono);color:var(--muted)}
.src-row > .ic{width:16px;height:16px;color:var(--accent)}
.src-to{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.src-to b{font-size:12px;font-weight:500;color:var(--muted)}
.watch-chips s,.case-nums s{text-decoration:none}
.watch-chips s{color:var(--muted);text-decoration:line-through}
/* who reads */
.read-copy{display:flex;flex-direction:column;gap:18px}
.read-copy .uq-lead{text-align:left}
.read-link a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.read-link a:hover{text-decoration:underline;text-underline-offset:4px}
.read-link .ic{width:15px;height:15px}
.reads{border-radius:var(--r-l)}
.reads-num{margin-top:14px;font-size:14px;color:var(--muted)}
.reads-num b{margin-right:6px;font:400 40px/1 var(--display);color:var(--ink)}
.reads-ok{margin:8px 0 10px;font-size:13px;color:var(--good)}
.reads-foot{padding-top:12px;font-size:12px;color:var(--muted)}
@media (max-width:760px){.readers{grid-template-columns:1fr}.src-row{grid-template-columns:1fr}.src-row > .ic{transform:rotate(90deg)}}