/* ============================================================
   ASK DEVIS PAGE — scoped styles (ask-devis.html only)
   Every class namespaced .ad- so nothing here can touch other pages.
   Reuses the shared design language from devis.css: warm-black canvas,
   brushed gold, corvette red, hairline ledgers, gradient slabs — no
   card grids, no glow. Loaded only from ask-devis.html.
   ============================================================ */

/* ---- hero descriptor (the category line under the H1) ---- */
.ad-descriptor{
  font-family:var(--serif); font-style:italic; color:var(--gold-bright);
  font-size:var(--step-1); line-height:1.35; margin:0 0 1.3rem; max-width:44ch;
}

/* ---- thesis pull-quote (the "built to prove" / "refuses to talk" lines) ---- */
.ad-thesis{
  margin-top:clamp(2.4rem,6vw,3.8rem); max-width:34ch;
  font-family:var(--serif); font-weight:500; font-size:var(--step-2);
  line-height:1.1; letter-spacing:-.01em; color:var(--bone);
  border-left:2px solid var(--gold); padding-left:clamp(1.4rem,3vw,2.4rem);
}
.ad-thesis em{ color:var(--gold-bright); font-style:italic; }
.ad-thesis--close{ border-left-color:var(--red); max-width:38ch; }
.ad-thesis--close b{ color:var(--gold-bright); font-weight:500; }

/* ============================================================
   COMPARISON LEDGER — general AI chatbot vs Ask DEVIS
   Real <table> for semantics; hairline ledger, highlighted
   Ask DEVIS column; stacks to labelled blocks on phones.
   ============================================================ */
.ad-cmp-wrap{ margin-top:2.8rem; }
.ad-cmp{ width:100%; border-collapse:collapse; }
.ad-cmp caption{
  caption-side:bottom; margin-top:1.3rem; text-align:left;
  font-family:var(--serif); font-style:italic; color:var(--bone-dim); font-size:var(--step--1);
}

/* head */
.ad-cmp thead th{
  font-family:var(--label); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:400; text-align:left; vertical-align:bottom; color:var(--bone-dim);
  padding:0 1.1rem 1rem 0; border-bottom:1px solid var(--line);
}
.ad-cmp thead th.ad-crit{ color:var(--gold); }
.ad-cmp thead th.ad-us{
  color:var(--gold-bright); background:rgba(198,163,90,.06);
  border-left:1px solid var(--gold-deep); border-top:2px solid var(--gold);
  padding:.7rem 1.1rem 1rem;
}

/* body */
.ad-cmp tbody th{
  font-family:var(--serif); font-weight:500; font-size:var(--step-0); color:var(--bone);
  text-align:left; vertical-align:top; width:26%;
  padding:1.15rem 1.4rem 1.15rem 0; border-bottom:1px solid var(--line-soft);
}
.ad-cmp tbody td{
  vertical-align:top; padding:1.15rem 1.1rem; border-bottom:1px solid var(--line-soft);
  color:var(--bone-dim); font-size:var(--step--1); line-height:1.55;
}
.ad-cmp .ad-them{ padding-left:0; }
.ad-cmp .ad-us{
  color:var(--bone); background:rgba(198,163,90,.045);
  border-left:1px solid var(--gold-deep); border-right:1px solid var(--line-soft);
}
.ad-cmp .ad-us b{ color:var(--gold-bright); font-weight:500; }
.ad-cmp tbody tr:last-child :is(th,td){ border-bottom:1px solid var(--line); }

/* the closing thesis row */
.ad-cmp tr.ad-cmp-thesis th{ color:var(--gold); font-style:italic; }
.ad-cmp tr.ad-cmp-thesis .ad-them{ color:var(--bone-faint); font-style:italic; }
.ad-cmp tr.ad-cmp-thesis .ad-us{ color:var(--bone); }

/* phones: drop the shared header, stack each row into a labelled block */
@media (max-width:760px){
  .ad-cmp caption{ caption-side:top; margin:0 0 1.6rem; }
  .ad-cmp thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .ad-cmp, .ad-cmp tbody, .ad-cmp tr, .ad-cmp th, .ad-cmp td{ display:block; width:auto; }
  .ad-cmp tbody tr{
    margin-bottom:1.1rem; padding:1.15rem 1.2rem;
    border:1px solid var(--line); border-top:2px solid var(--gold-deep);
    background:linear-gradient(180deg,var(--slab-a),var(--slab-b));
  }
  .ad-cmp tbody tr:last-child :is(th,td){ border-bottom:none; }
  .ad-cmp tbody th{
    width:auto; padding:0 0 .9rem; margin-bottom:.2rem;
    border-bottom:1px solid var(--line-soft); color:var(--gold-bright); font-size:var(--step-1);
  }
  .ad-cmp tbody td{ padding:.9rem 0 0; border-bottom:none; }
  .ad-cmp tbody td::before{
    content:attr(data-label); display:block;
    font-family:var(--label); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--bone-faint); margin-bottom:.4rem;
  }
  .ad-cmp .ad-us{
    background:none; border-left:none; border-right:none;
    margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line-soft);
  }
  .ad-cmp .ad-us::before{ color:var(--gold); }
}

/* ============================================================
   CHAT EXAMPLE — a transcript slab, not neon bubbles
   Reuses the .brief / .qcard visual language.
   ============================================================ */
.ad-chat{
  position:relative; margin-top:2.6rem; max-width:820px;
  background:linear-gradient(180deg,var(--slab-a),var(--slab-b));
  border:1px solid var(--line); border-top:2px solid var(--gold);
  padding:clamp(1.4rem,3.6vw,2.4rem);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.85);
}
.ad-chat-stamp{
  position:absolute; top:.9rem; right:1.1rem;
  font-family:var(--label); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim);
}
.ad-xchg{ padding-block:1.5rem; border-bottom:1px solid var(--line-soft); }
.ad-xchg:first-of-type{ padding-top:.4rem; }
.ad-xchg:last-of-type{ border-bottom:none; padding-bottom:.2rem; }
.ad-turn + .ad-turn{ margin-top:1rem; }
.ad-role{
  display:block; font-family:var(--label); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:.45rem;
}
.ad-q .ad-role{ color:var(--bone-dim); }
.ad-a .ad-role{ color:var(--gold); }
.ad-q .ad-bubble{
  color:var(--bone); font-family:var(--serif); font-style:italic;
  font-size:var(--step-1); line-height:1.3;
}
.ad-a .ad-bubble{
  color:var(--bone); line-height:1.6;
  border-left:2px solid var(--gold-deep); padding-left:1rem;
}
.ad-basis{ margin-top:.95rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .9rem; }
.ad-basis-k{
  font-family:var(--sans); font-size:var(--step--1); letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold);
}
.ad-basis-refs{ font-family:var(--label); font-size:.64rem; letter-spacing:.05em; color:var(--bone-faint); }
.ad-note{ margin-top:.85rem; font-size:.8rem; font-style:italic; color:var(--bone-faint); }
.ad-chat-foot{
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line-soft);
  color:var(--bone-dim); font-size:var(--step--1); line-height:1.55;
}
.ad-chat-foot b{ color:var(--bone); font-weight:500; }

/* the new 8th menu item keeps the stagger cadence (this page's menu only) */
.menu-stagger li:nth-child(8) a{ transition-delay:.48s; }

/* ============================================================
   MOBILE POLISH (post visual-review, 2026-07-12)
   Design-only, mobile-scoped. Desktop (approved) is untouched.
   Fixes: (1) lift dim text for readability on small screens,
   (2) de-strand the comparison tagline, (3) ease Q&A density +
   make the basis strip read as an affordance, (4) tap comfort.
   ============================================================ */
@media (max-width:760px){
  /* 0. the absolute "Illustrative · redacted" stamp collides with the first
        exchange on phones — flow it as a header line (2026-07-13 deep audit) */
  .ad-chat-stamp{ position:static; display:block; margin:0 0 1.1rem; }

  /* 1. elegance was costing readability on phones — lift the two dim tones
        (scoped to this page only; this stylesheet loads nowhere else) */
  :root{
    --bone-dim:   #b1a998;   /* was #9c9486 */
    --bone-faint: #a59d8e;   /* was #8a8276 */
  }

  /* 2. the comparison tagline: the table is display:block on mobile, so a
        <caption> (display:table-caption) collapses into a stranded narrow column.
        Force it full-width and render it as a clean intro line above the cards. */
  .ad-cmp caption{
    display:block; width:100%; caption-side:top;
    margin:0 0 1.6rem; padding-bottom:1.1rem;
    border-top:0; border-bottom:1px solid var(--line-soft); text-align:left;
  }

  /* 3. ease Q&A density; turn the basis line into a clear inset affordance */
  .ad-xchg{ padding-block:1.7rem; }
  .ad-a .ad-bubble{ line-height:1.7; }
  .ad-basis{
    margin-top:1.05rem; padding:.7rem .85rem; gap:.35rem .7rem;
    background:rgba(198,163,90,.05); border:1px solid var(--line-soft);
  }
  .ad-basis-refs{ font-size:.68rem; line-height:1.5; }

  /* 4. tap-target comfort on small screens */
  .hero-links .tlink, .bridge .tlink{ padding-block:.5rem; }
}

/* 2026-07-13 deep audit: .ad-xchg:last-of-type never matches (the foot div is
   the last div sibling), so the last exchange kept its bottom rule and doubled
   with the foot's top rule — keep exactly one rule between them */
.ad-chat-foot{ border-top:0; }