/* Ask 5 AIs (MKT-12, graphic-design, 26 Sep 2026): the first section of /seo-advertising/. The phone windows are the
   from-scratch Studio SEO design's "New question for AI" phones, in Look 4: green is earned (you're mentioned), gold is
   waiting (an AI recommends someone else). Look 4 makes this section the page's dark band (it is the first data-stage
   section), so colours are written for .sd-night first, with the light fallbacks after. Prefix: ak-. */

.ak{position:relative;padding:104px 0 64px;overflow:hidden;--ak-on:var(--sd-on-night,#fffdf7);--ak-soft:var(--sd-on-night-soft,#d4e4de);--ak-faint:var(--sd-on-night-faint,#b9d0c8)}
.ak:not(.sd-night){--ak-on:var(--sd-ink);--ak-soft:var(--sd-ink-soft);--ak-faint:var(--sd-ink-faint)}
.ak.sd-night{--spot-x:50%;--spot-y:24%}

/* ---------- top: one heading line, one sub-line, one input row, the AIs as small marks ---------- */
.ak-top{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1100px;margin:0 auto}
.sd-page .ak .ak-title{font-size:clamp(38px,4vw,58px);line-height:1;letter-spacing:-.045em;margin:0;color:var(--ak-on)}
.sd-page .ak .ak-sub{margin-top:18px;font-size:clamp(17px,1.45vw,20px);font-weight:700;line-height:1.45;color:var(--ak-soft);max-width:34em}
.ak-form{width:min(820px,100%);margin-top:38px}
.ak-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;background:var(--sd-paper);border-radius:999px;padding:6px;box-shadow:0 26px 50px -26px rgba(0,0,0,.7),0 0 0 1.5px rgba(255,255,255,.14);transition:box-shadow .2s}
.ak-row:focus-within{box-shadow:0 26px 50px -26px rgba(0,0,0,.7),0 0 0 3px var(--sd-gold)}
.ak:not(.sd-night) .ak-row{box-shadow:var(--sd-print-lg),0 0 0 1.5px var(--sd-ink)}
.ak-field{display:block;min-width:0}
.ak-field+.ak-field{border-left:1.5px solid var(--sd-line)}
.ak-form input{display:block;width:100%;min-height:52px;border:0;background:transparent;padding:0 20px;font:600 16px var(--sd-font);color:var(--sd-ink);border-radius:999px}
.ak-form input::placeholder{color:#6f7d77}
.ak-form input:focus{outline:none}
.ak-form input:disabled{cursor:not-allowed}
.sd-page .ak .ak-row .sd-btn{min-height:52px;padding:12px 22px;white-space:nowrap;color:var(--sd-ink);border-color:var(--sd-ink);box-shadow:none}
.sd-page .ak .ak-row .sd-btn:hover{box-shadow:2px 2px 0 var(--sd-ink)}
.ak .ak-row .sd-btn:disabled{opacity:.6;cursor:progress;transform:none}
.ak-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 16px;margin-top:16px}
.ak-engines{display:flex;gap:6px}
.ak-eng{border:0;background:none;padding:2px;border-radius:9px;cursor:pointer;line-height:0;transition:opacity .15s,filter .15s}
.ak-eng .ak-mark{width:26px;height:26px;font-size:9.5px}
.ak-eng{background:transparent}
.ak-eng[aria-pressed="false"]{opacity:.32;filter:grayscale(1)}
.ak-eng:focus-visible{outline:2px solid var(--sd-gold);outline-offset:1px}
.sd-page .ak .ak-asked{font-size:14px;font-weight:600;color:var(--ak-faint)}
.ak-asked q{color:var(--ak-soft);font-weight:700}
.ak-change{border:0;background:none;padding:0 2px;margin-left:4px;font:800 13.5px var(--sd-font);color:var(--ak-on);text-decoration:underline;text-decoration-color:var(--sd-gold);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.ak-own{display:block;margin-top:12px;background:var(--sd-paper);border-radius:999px;padding:0 6px}
.ak-own[hidden]{display:none}
.ak-turnstile{margin-top:14px;display:flex;justify-content:center}
.ak-turnstile:empty{display:none}
.sd-page .ak .ak-msg{margin:16px auto 0;max-width:620px;padding:10px 14px;border-radius:12px;background:#fff4cc;font-size:14px;font-weight:700;color:var(--sd-ink)}
.ak-msg[hidden]{display:none}

/* ---------- the AI marks ---------- */
.ak-mark{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;flex:none;font:800 10px/1 var(--sd-font);letter-spacing:-.02em;color:#fff;background:#0d0d0d}
.m-claude{background:#c96442}
.m-gem{background:linear-gradient(135deg,#4f7bf0,#a06ce8)}
.m-px{background:#1f5f66}
.m-gai{background:#fff;color:var(--sd-ink);box-shadow:inset 0 0 0 1.5px var(--sd-line)}

/* ---------- the AI logos (official files) and the letter marks they replace ---------- */
.ak-logo{display:block;flex:none;width:auto;object-fit:contain}
.ak-logo--pick,.ak-mark.ak-logo--pick{height:26px}
.ak-eng img.ak-logo--pick{width:26px;padding:4px;border-radius:8px;background:#fff}
.ak-logo--bar{height:20px}
.ak-mark.ak-logo--bar{width:20px;height:20px;font-size:8.5px;border-radius:6px}
.ak-logo--label{height:28px}
.ak-mark.ak-logo--label{width:28px;height:28px;font-size:10.5px;border-radius:8px}
img.ak-logo--label{width:28px;padding:4px;border-radius:8px;background:#fff}
.ak-logo--empty{height:46px;opacity:.9}
.ak-mark.ak-logo--empty{width:46px;height:46px;font-size:15px;border-radius:13px}
.ak-logo--pip{height:28px}
.ak-mark.ak-logo--pip{width:28px;height:28px;font-size:10.5px}
img.ak-logo--pip{width:28px;padding:4px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--sd-line)}

/* ---------- the stage: one phone per AI ---------- */
.ak-stage{margin-top:64px}
.ak-stage-head{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sd-page .ak .ak-kick{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sd-gold)}
.ak:not(.sd-night) .ak-kick{color:var(--sd-gold-deep)!important}
.sd-page .ak .ak-stage-q:empty{display:none}
.sd-page .ak .ak-stage-q{max-width:820px;font-size:clamp(20px,1.9vw,27px);font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--ak-on);text-wrap:balance;overflow-wrap:anywhere}
.ak-sample{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:5px 11px;border-radius:999px;border:1.5px dashed var(--sd-gold);font:800 12px/1 var(--sd-font);color:var(--sd-gold);letter-spacing:.02em}
.ak-sample[hidden]{display:none}
.ak-phones{display:flex;gap:14px;justify-content:safe center;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 8px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ak-phones::-webkit-scrollbar{display:none}
.ak-none{padding:60px 0;font-weight:800;color:var(--ak-soft)}
.ak-ph{position:relative;flex:none;width:clamp(200px,15.4vw,222px);margin:0;scroll-snap-align:center;transition:transform .6s var(--sd-settle),opacity .4s}
.ak-stage[data-state="idle"] .ak-ph{transform:rotate(-1.6deg) translateY(4px)}
.ak-stage[data-state="idle"] .ak-ph:nth-child(2n){transform:rotate(1.4deg)}
.ak-stage[data-state="idle"] .ak-ph:nth-child(3n){transform:rotate(-.6deg) translateY(8px)}
/* Off: an AI the visitor left out. Waking: a phone coming alive on the ask. */
.ak-ph.is-off{opacity:.38;filter:grayscale(.7)}
.ak-ph.is-waking .ak-device{animation:akWake .8s var(--sd-settle) both;animation-delay:calc(var(--i,0) * .09s)}
@keyframes akWake{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-14px) scale(1.025)}100%{transform:none}}
.ak-device{height:clamp(390px,33vw,460px);border-radius:36px;background:#0b2e29;padding:7px;box-shadow:0 0 0 1.5px rgba(255,255,255,.25),0 34px 60px -28px rgba(0,0,0,.75);transition:box-shadow .4s}
.ak:not(.sd-night) .ak-device{background:var(--sd-ink);box-shadow:var(--sd-print-lg)}
.ak-ph.is-named .ak-device{box-shadow:0 0 0 3px #8fd8ad,0 34px 60px -28px rgba(0,0,0,.75)}
.ak-ph.is-other .ak-device{box-shadow:0 0 0 3px var(--sd-gold),0 34px 60px -28px rgba(0,0,0,.75)}
.ak-scr{position:relative;height:100%;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;background:#fff;color:#1b1b1b;font:500 12.5px/1.5 var(--sd-font)}
.sd-page .ak .ak-scr p{margin:0;color:inherit}
.ak-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:66px;height:19px;border-radius:12px;background:#0b0b0c;z-index:3}
.ak-sb{height:34px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:4px 22px 0;font-size:11px;font-weight:700}
.ak-sbr{display:flex;gap:2px;align-items:flex-end}
.ak-sbr i{width:3px;background:#1b1b1b;border-radius:1px}
.ak-sbr i:nth-child(1){height:4px}.ak-sbr i:nth-child(2){height:6px}.ak-sbr i:nth-child(3){height:8px}
.ak-sbr b{width:18px;height:9px;border-radius:2.5px;border:1.2px solid #1b1b1b;margin-left:4px;padding:1px}
.ak-sbr b::after{content:"";display:block;height:100%;width:70%;background:#1b1b1b;border-radius:1px}
.ak-ah{flex:none;display:flex;align-items:center;gap:8px;padding:4px 14px 9px;font-weight:800;font-size:14px;border-bottom:1px solid rgba(0,0,0,.06)}
.ak-ah--g{gap:6px;padding:2px 10px 8px}
.ak-ah--g .ak-gbar{flex:1;min-width:0;margin:0}
.ak-ah--c{font-family:Georgia,"Times New Roman",serif;font-weight:600}
.ui-claude .ak-ah span{font-family:Georgia,"Times New Roman",serif;font-weight:600}
.ak-px{color:#1f5f66}
.ak-body{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none;overscroll-behavior:contain}
.ak-body::-webkit-scrollbar{display:none}
.ak-body:focus-visible{outline:3px solid var(--sd-gold);outline-offset:-3px;border-radius:0}
.ak-sent{align-self:flex-end;max-width:86%;background:#f0f0f0;border-radius:18px;padding:8px 12px;line-height:1.35;font-weight:600;overflow-wrap:anywhere}
.ak-ans{overflow-wrap:anywhere}
.ak-ans b{font-weight:800}
.ak-ans sup{font-size:9px;background:#e9eef0;border-radius:4px;padding:0 3px;margin-left:1px;color:#355}
.ak-ans .me{background:#d4f0de;color:#0b3d2a;font-weight:800;border-radius:4px;padding:0 3px;box-shadow:0 0 0 1.5px #4aa574}
.ak-ans .co{background:rgba(0,0,0,.06);font-weight:700;border-radius:4px;padding:0 1px}
.ak-err{display:block;background:#f4f1ea;border-radius:12px;padding:9px 11px;color:#4a5f59;font-weight:700}
.ak-caret{display:inline-block;width:7px;height:12px;background:#1b1b1b;border-radius:2px;margin-left:2px;vertical-align:-1px;animation:akBlink 1s steps(2) infinite}
.ak-typing{display:none;gap:4px;padding:4px 2px}
.ak-typing.on{display:flex}
.ak-typing i{width:7px;height:7px;border-radius:50%;background:#a0a0a0;animation:akBob 1.1s infinite}
.ak-typing i:nth-child(2){animation-delay:.15s}.ak-typing i:nth-child(3){animation-delay:.3s}
@keyframes akBob{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes akBlink{50%{opacity:0}}
.ak-inputbar{flex:none;margin:6px 10px 12px;border-radius:20px;border:1px solid rgba(0,0,0,.1);padding:8px 12px;color:#999;font-size:11.5px;display:flex;justify-content:space-between;align-items:center}
.ak-inputbar svg{width:14px;height:14px}
/* Each AI's own look, lightly */
.ui-claude .ak-scr{background:#f5f3ec}
.ui-claude .ak-sent{background:#e9e4d6;border-radius:12px}
.ui-claude .ak-ans{font-family:Georgia,"Times New Roman",serif;font-size:13px;line-height:1.55}
.ui-px .ak-pxq{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.sd-page .ak .ak-pxl{display:flex;gap:5px;align-items:center;font-weight:700;color:#1f5f66;font-size:12px}
.ak-pxl svg,.ak-aiol svg{width:12px;height:12px}
.ui-gem .ak-sent{background:#e9eef6;border-radius:18px 4px 18px 18px}
.ak-gemic{width:22px;height:22px;color:#6c7fe8;flex:none}
.ak-gemic svg{width:22px;height:22px}
.ak-gbar{flex:none;display:flex;gap:7px;align-items:center;margin:4px 10px 6px;border-radius:99px;box-shadow:0 1px 6px rgba(32,33,36,.2);padding:8px 12px;font-size:11.5px;white-space:nowrap;overflow:hidden}
.ak-gbar svg{width:13px;height:13px;flex:none;color:#5f6368}
.ak-gbar span{overflow:hidden;text-overflow:ellipsis}
.ak-aio{background:#eef3fd;border-radius:16px;padding:11px}
.sd-page .ak .ak-aiol{display:flex;gap:5px;align-items:center;font-weight:700;font-size:12px;margin-bottom:6px;color:#1f1f1f}
.ak-aiol svg{color:var(--sd-ink)}

/* Flags: dropped on top of each phone as it finishes */
.sd-page .ak .ak-flag{position:absolute;top:-16px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:6px;align-items:center;max-width:calc(100% + 16px);padding:7px 13px;border-radius:99px;font:800 12.5px/1.2 var(--sd-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 12px 26px -8px rgba(0,0,0,.6);animation:akDrop .6s cubic-bezier(.2,1.6,.4,1) both}
.ak-flag svg{width:14px;height:14px;flex:none}
.sd-page .ak .ak-flag.is-named{background:#8fd8ad;color:#073222}
.sd-page .ak .ak-flag.is-other{background:linear-gradient(180deg,#f6d778,#ddae35);color:#2a1d00;display:block}
.sd-page .ak .ak-flag.is-quiet{background:#26302c;color:#c9d4ce;border:1px solid rgba(255,255,255,.14)}
@keyframes akDrop{from{opacity:0;transform:translate(-50%,-34px) scale(.5)}to{opacity:1;transform:translate(-50%,0)}}
.ak-label{display:flex;gap:9px;align-items:center;justify-content:center;margin-top:14px;font-size:15px;font-weight:800;color:var(--ak-on)}
.ak-dots{display:flex;justify-content:center;gap:6px;padding:4px 0 6px}
.ak-dots[hidden]{display:none}
.ak-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:all .2s}
.ak:not(.sd-night) .ak-dots i{background:var(--sd-line)}
.ak-dots i.on{background:var(--sd-gold);width:18px;border-radius:4px}

/* ---------- the scoreboard ---------- */
.ak-score:empty{display:none}
.ak-score-card{max-width:1000px;margin:22px auto 0;padding:20px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;animation:akUp .45s var(--sd-ease) both;color:var(--sd-ink)}
.sd-page .ak .ak-score-card:hover{transform:none}
@keyframes akUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ak-pips{display:flex;gap:6px;margin-bottom:10px}
.ak-pip{position:relative;display:inline-flex}
.ak-pip>*{opacity:.55}
.ak-pip.is-named>*{opacity:1}
.ak-pip.is-named::after{content:"";position:absolute;right:-4px;top:-4px;width:12px;height:12px;border-radius:50%;background:#2f9a61;box-shadow:0 0 0 2px var(--sd-paper)}
.ak-pip.is-error>*{opacity:.25}
.sd-page .ak .ak-score-n{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--sd-ink)}
.sd-page .ak .ak-score-say{margin-top:6px;font-size:15px;font-weight:600;color:var(--sd-ink-soft)}
.ak-score-r{display:grid;justify-items:start;gap:10px}
.ak-score-cta{display:flex;flex-wrap:wrap;gap:10px}
.sd-page .ak .ak-score-card .sd-btn{color:var(--sd-ink);border-color:var(--sd-ink);box-shadow:3px 3px 0 var(--sd-ink)}
.sd-page .ak .ak-score-card .sd-btn--ghost{background:var(--sd-paper)}
.sd-page .ak .ak-score-note{max-width:26em;font-size:12.5px;font-weight:700;color:var(--sd-ink-faint)}
.ak-again{border:0;background:none;padding:2px 0;font:800 14px var(--sd-font);color:var(--sd-ink);text-decoration:underline;text-decoration-color:var(--sd-gold-deep);text-underline-offset:4px;text-decoration-thickness:2px;cursor:pointer}
.ak-empty{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 10px}
.sd-page .ak .ak-empty p{font-weight:700;color:#7d8883;font-size:12.5px}
[data-draft]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
[data-draft].is-typed{color:#2b2b2b;font-weight:600}
.sd-page .ak .ak-tm{margin-top:6px;text-align:center;font-size:11.5px;font-weight:600;color:var(--ak-faint);opacity:.85}
.sd-page .ak .ak-fine{margin-top:16px;text-align:center;font-size:12.5px;font-weight:700;color:var(--ak-faint)}

/* ---------- the hero below ----------
   With this section on, Look 4 puts the SEO hero on paper (never two dark bands in a row). Its small print was
   coloured for the dark band, so it goes back to ink here. These rules load only with this section. */
.opt2 .sa-hero:not(.sd-night) .hero-small{color:var(--sd-ink-soft)!important}
.opt2 .sa-hero:not(.sd-night) .channels span{color:var(--sd-ink-faint)}
.opt2 .sa-hero:not(.sd-night) .channels img{box-shadow:0 0 0 1.5px var(--sd-line)}

/* ---------- widths ---------- */
@media (max-width:900px){
  .ak-score-card{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ak{padding:64px 0 72px}
  .sd-page .ak .ak-title{font-size:10.5vw;line-height:1.02}
  .ak-form{margin-top:28px}
  .ak-row{grid-template-columns:minmax(0,1fr);border-radius:22px;padding:6px;gap:0}
  .ak-field+.ak-field{border-left:0;border-top:1.5px solid var(--sd-line)}
  .ak-form input{border-radius:16px;padding:0 16px}
  .sd-page .ak .ak-row .sd-btn{margin-top:6px;width:100%}
  .ak-own{border-radius:16px}
  .ak-stage{margin-top:40px}
  .ak-phones{justify-content:flex-start;padding:34px calc(50% - 114px) 10px;gap:14px}
  .ak-ph{width:228px}
  .ak-device{height:440px}
  .ak-score-card{padding:18px 16px}
  .ak-score-cta .sd-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .ak-ph,.ak-stage:not([data-state="idle"]) .ak-phones .ak-ph{animation:none!important;transition:none;transform:none!important}
  .sd-page .ak .ak-flag,.ak-score-card{animation:none}
  .ak-typing i,.ak-caret{animation:none}
}