/* ai-visibility (round 83: Mark's "What is AI Visibility" page in the site's
   own type and color; the shared shell lives in site/site.css). Section
   heads are the two-line heading alone, never an eyebrow, and round 86
   retired the small uppercase labels inside the cards too: each label is
   folded into the card's own copy. White literals on navy by the dfy
   exception. */
/* two-line section heads: the claim, then the turn, both in ink (round 86: the gray turn retired) */
.av-h2{font-family:var(--serif);font-weight:600;font-size:var(--t-disp2);letter-spacing:var(--track-serif);line-height:var(--lh-disp);max-width:20em}
.av-h2 .g{display:block}
.av-lede{margin-top:1.2rem;font-size:var(--t-lede);color:var(--lt-2);max-width:44em}
.av-close{margin-top:2.4rem;font-weight:var(--w-6);font-size:1.2rem;text-align:center}
/* card shell: field cards on white sections, white cards on off-white ones */
.av-card{border-radius:var(--r-card);padding:2.2rem 2rem;background:var(--field)}
.page-sec--alt .av-card{background:var(--field-2)}
.av-card--navy,.page-sec--alt .av-card--navy{background:var(--navy);color:#fff}
.av-acr{color:var(--peri)}   /* SEO, AEO, GEO: the acronym leads its card's sub line */
.av-own{display:block;color:var(--peri)}   /* who builds it: the first line of the halves headings */
.av-card h3{margin-top:0;font-family:var(--serif);font-weight:600;font-size:1.6rem;letter-spacing:var(--track-h3);line-height:var(--lh-head)}
.av-card p{margin-top:0.7rem;color:var(--lt-2)}
.av-card--navy p{color:rgba(255,255,255,0.78)}
.av-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:3rem}
.av-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:2.6rem}
/* hero: the glow hero with the AI answer card beside the claim */
.av-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;align-items:center}
/* hero: the homepage demo module's answer box (round 85, Mark's pin "use the auto example here"; Max: the box with the prompts, not the map column).
   Rules copied from concept-6c.html's .dm block; keep in sync if that block's look changes. The question rail, the pinned chapter, and the
   floating ask bar stay on the homepage; here the box auto-cycles the five questions on its own timer. */
.av-demo{position:relative;background:var(--field-2);border:1px solid rgba(79,155,255,0.14);border-radius:var(--r-card);padding:1.8rem 2rem 1.5rem;box-shadow:0 24px 60px rgba(0,8,30,0.35);color:var(--lt)}
.av-demo .dm-ask{display:flex;align-items:center;min-height:calc(2 * var(--lh-sub) * var(--t-lede) + 1.7rem);margin-bottom:1.4rem;border:1px solid var(--hair-strong);border-radius:1.6rem;padding:0.85rem 1.3rem;background:var(--field-2)}
.av-demo .dm-ask-text{font-weight:var(--w-5);font-size:var(--t-lede);line-height:var(--lh-sub);color:var(--lt);white-space:pre-line}
.av-demo .dm-caret{display:inline-block;width:2px;height:0.95em;background:var(--lt);margin-left:4px;vertical-align:baseline;animation:dm-caret 1.1s steps(2,start) infinite}
@keyframes dm-caret{to{visibility:hidden}}
.av-demo .dm-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding-bottom:1.1rem;font-size:var(--t-small);color:var(--lt-3)}
.av-demo .dm-count{font-size:var(--t-lede);font-weight:var(--w-6);color:var(--peri);margin-right:0.45rem}
.av-demo .dm-agree{margin-top:0.35rem}
.av-demo .dm-agree-n{color:var(--peri);font-weight:var(--w-6)}
.av-demo{container-type:inline-size}
.av-demo .dm-tabs{display:flex;flex-wrap:nowrap;justify-content:space-between;border-bottom:1px solid var(--hair)}   /* one row at every width: the tabs spread across the box, and the marks drop when the box is narrow (container queries below) */
.av-demo .dm-tab{display:inline-flex;align-items:center;gap:0.5rem;padding:0.85rem 0;font-size:var(--t-label);font-weight:var(--w-6);letter-spacing:var(--track);text-transform:uppercase;color:var(--lt-3);position:relative;transition:color 0.4s var(--ease)}
.av-demo .dm-tab[aria-current="true"]{color:var(--lt)}
.av-demo .dm-tab[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--peri)}
.av-demo .dm-panel{display:none}
.av-demo .dm-panel.is-active{display:block}
.av-demo .dm-eng{padding-top:1.4rem;min-height:9.5rem}
.av-demo .dm-chips{list-style:none;display:flex;flex-wrap:wrap;gap:0.55rem}
.av-demo .dm-chip{font-size:var(--t-small);color:var(--lt-2);border:1px solid var(--hair-strong);border-radius:999px;padding:0.4rem 0.9rem}
.av-demo .dm-chip--more{color:var(--lt-3);border-style:dashed}
.av-demo .dm-chip--you{color:var(--lt-3);border:1px dashed rgba(79,155,255,0.45)}
body.js .av-demo .dm-eng{display:none}
body.js .av-demo .dm-eng.is-shown{display:block}
body.js .av-demo .dm-eng.is-lit .dm-chip{opacity:0;transform:translateY(7px);animation:dm-in 0.5s var(--ease) forwards}
body.js .av-demo .dm-eng.is-lit .dm-chip--you{animation:dm-in 0.5s var(--ease) forwards,you-pulse 2.8s var(--ease) 1.1s infinite}
@keyframes dm-in{to{opacity:1;transform:none}}
@keyframes you-pulse{0%,100%{opacity:0.55}50%{opacity:1}}
.av-demo .dm-capture{display:flex;gap:0.7rem;align-items:center;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--hair);font-size:var(--t-small);color:var(--lt-3)}
.av-demo .dm-capture::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--peri);flex:none}
.av-demo-cta{margin-top:1rem;font-size:var(--t-small);color:var(--lt-3)}
.av-demo-cta a{color:var(--lt);font-weight:var(--w-6);text-decoration:underline;text-underline-offset:0.2em}
@media (prefers-reduced-motion: reduce){
  .av-demo .dm-caret{animation:none}
  body.js .av-demo .dm-eng.is-lit .dm-chip,body.js .av-demo .dm-eng.is-lit .dm-chip--you{opacity:1;transform:none;animation:none}
}
@container (max-width:470px){.av-demo .dm-tab .eng-mark{display:none}}
@container (max-width:300px){.av-demo .dm-tab{letter-spacing:0.05em}}
@media (max-width:600px){
  .av-demo{padding:1.3rem 1.1rem 1.2rem}
  .av-demo .dm-eng{min-height:11rem}
}
/* found, answered, recommended */
.av-big{font-family:var(--serif);font-weight:600;font-size:2.6rem;line-height:1;letter-spacing:var(--track-serif)}
.av-card .av-big{margin-top:0;color:var(--lt);font-size:2.6rem;line-height:1;letter-spacing:var(--track-serif)}   /* also the h3 labels on the together cards, so it outranks .av-card h3 */
.av-what{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hair)}
.av-what b{color:var(--lt);font-weight:var(--w-6)}
.av-card p.av-sub{margin-top:0.5rem;font-weight:var(--w-6);color:var(--lt)}
.av-eq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0.8rem 1.6rem;margin-top:1.4rem;padding:2.2rem 2rem;border-radius:var(--r-card);background:var(--navy);color:#fff;text-align:center}
.av-eq span{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.5rem);letter-spacing:var(--track-serif)}
.av-eq .op{color:var(--peri-dark)}
.av-eq .res{color:var(--peri-dark)}
.av-eq p{flex:1 1 100%;color:rgba(255,255,255,0.78)}
/* the two halves: chips */
.av-chips{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.2rem}
.av-chips span{padding:0.5rem 0.9rem;border-radius:999px;background:var(--field);font-size:var(--t-small);font-weight:var(--w-5)}
.av-card--navy .av-chips span{background:rgba(255,255,255,0.1);color:#fff}
/* website or services alone: the comparison table */
.av-table-wrap{margin-top:1.6rem;border-radius:var(--r-card);background:var(--field);overflow-x:auto}
.av-table{width:100%;min-width:34rem;border-collapse:collapse}
.av-table th,.av-table td{padding:1.05rem 1.2rem;text-align:center}
.av-table thead th{font-weight:var(--w-6)}
.av-table thead th:first-child{text-align:left;color:var(--lt-3);font-size:var(--t-small)}
.av-table tbody th{text-align:left;font-weight:var(--w-5)}
.av-table tbody tr{border-top:1px solid var(--hair)}
.av-table .is-us{background:var(--navy);color:#fff}
.av-table thead .is-us{border-radius:var(--r-card) var(--r-card) 0 0}
.av-yes,.av-no{display:inline-block;vertical-align:middle}
.av-yes{width:0.85em;height:0.45em;border-left:2px solid var(--peri);border-bottom:2px solid var(--peri);transform:rotate(-45deg) translateY(-0.1em)}
.is-us .av-yes{border-color:var(--peri-dark)}
.av-no{position:relative;width:0.8em;height:0.8em}
.av-no::before,.av-no::after{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;background:var(--lt-3);opacity:0.6}
.av-no::before{transform:rotate(45deg)}
.av-no::after{transform:rotate(-45deg)}
/* five things AI looks for */
.av-five{list-style:none;margin-top:2.6rem;padding:0.4rem 2.2rem;border-radius:var(--r-card);background:var(--field-2)}
.av-five li{display:flex;gap:1.2rem;align-items:flex-start;padding:1.3rem 0;border-top:1px solid var(--hair)}
.av-five li:first-child{border-top:0}
.av-five-n{flex:0 0 2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--peri);color:var(--peri);font-weight:var(--w-6)}
.av-five h3{font-weight:var(--w-6);font-size:1.25rem;line-height:1.3}
.av-five p{margin-top:0.3rem;color:var(--lt-2)}
.av-check{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.4rem;padding:1.5rem 1.8rem;border-radius:var(--r-card);border:2px solid var(--peri);background:var(--field-2)}
.av-check p{font-weight:var(--w-6);font-size:1.2rem}
/* sound familiar */
.av-heard{display:block;margin-top:0;font-family:var(--serif);font-weight:600;font-size:1.4rem;letter-spacing:var(--track-h3);line-height:1.3}
.av-card .av-real{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--hair)}
/* Sound familiar: the three cards share row tracks, so the rule and "The reality" line up across cards when one quote wraps shorter */
.av-real b{color:var(--lt);font-weight:var(--w-6)}
/* Website only, Services only, Together: three shared rows, so the punch lines and the body copy start at one height */
.av-grid--together .av-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.av-grid--heard .av-card{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
/* Found, Answered, Recommended: four shared rows, so "What we do" starts at one height across the cards (Mark's pin) */
.av-grid--three .av-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
/* every month */
.av-month{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;margin-top:3rem}
.av-month li{padding:1.8rem 1.6rem;border-radius:var(--r-card);background:var(--field-2)}
.av-month-n{display:flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--navy);color:#fff;font-weight:var(--w-6)}
.av-month h3{margin-top:1rem;font-family:var(--serif);font-weight:600;font-size:1.4rem;letter-spacing:var(--track-h3)}
.av-month p{margin-top:0.4rem;color:var(--lt-2)}
.av-month-note{margin-top:1.8rem;color:var(--lt-2)}
.av-month-note .tlink{margin-left:0.6rem}
/* the words: native disclosure rows */
.av-words{margin-top:2.6rem;border-bottom:1px solid var(--hair-strong)}
.av-word{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:0.4rem 3rem;padding:1.4rem 0;border-top:1px solid var(--hair-strong)}   /* always open (Mark's pin: the definitions were hidden behind a tap) */
.av-word h3{font-weight:var(--w-6);font-size:1.25rem}
.av-word p{max-width:44em;font-size:var(--t-lede);color:var(--lt-2)}
@media (max-width:600px){.av-word{grid-template-columns:1fr}}
@media (max-width:991px){
  .av-hero{grid-template-columns:1fr;gap:2.4rem}
  .av-grid,.av-pair{grid-template-columns:1fr}
  .av-month{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .av-card{padding:1.8rem 1.4rem}
  .av-five{padding:0.2rem 1.3rem}
  .av-month{grid-template-columns:1fr}
  .av-card .av-big{font-size:2.2rem}
}