/* PUB-01 -- the homepage, and PUB-02's result inside it.
   ==========================================================================
   Linked rather than inlined (views.go's shellHeadExtra says why), and it
   assumes the Rev 5 tokens, which every page already carries inline.

   Section 19.2's numbers are used literally where the brief gives them: the
   hero grid is 7:5 with a 48px gap and 72px of vertical padding, the public
   container is 1280, public sections are 96/56px, the dark panel's radius is
   24. Where the brief gives no number, the 4px scale does.
   ========================================================================== */

.h5-wrap{max-width:var(--w-public);margin:0 auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right))}

/* An eyebrow, 12/18 at 500 with .08em -- 19.2's metadata row. */
.h5-eyebrow{font-size:var(--fs-xs);line-height:18px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s3)}

/* ---------- The introduction ----------------------------------------------
   Centred, no panel, no form. The 7:5 hero it replaces put the demonstration
   in the small half; the comparison below now gets the whole page width and
   this block does one job -- say what the product is in three lines.

   The numbers are the spec's: 36px above, eyebrow to H1 12px, H1 58/62 at
   -.04em, paragraph 18/27 with 16px above it, the CTA row 20px below that at
   a 12px gap, the helper 13/20 8px under. */
.h5-intro{background:var(--page);padding:36px 0 0}
.h5-intro-in{text-align:center}
.h5-intro .h5-eyebrow{margin:0 0 12px}

/* THE TWO SPANS ARE INLINE UNTIL 1100px.

   The intended break is "Make your business easier to find" / "in AI
   answers.", and a <br> would have delivered it -- and then delivered it on
   every narrower screen too, where it produces a two-word orphan line. Spans
   that only become blocks inside a min-width query give the same break where
   it was designed and ordinary prose wrapping everywhere else, and a media
   query can undo a display value where it cannot undo an element. */
.h5-h1{font-family:var(--font-display);font-weight:600;font-size:58px;line-height:62px;
  letter-spacing:-.04em;color:var(--ink);max-width:1000px;margin:0 auto;text-wrap:balance}
/* Only these two words are coloured, and they are coloured in the dark green
   -- the lime is a BACKGROUND in this system and fails as text at any size. */
.h5-h1 em{font-style:normal;color:var(--link)}
@media(min-width:1100px){.h5-h1 span{display:block}}

.h5-lede{font-size:18px;line-height:27px;color:var(--ink-2);max-width:760px;
  margin:16px auto 0}
.h5-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:20px 0 0}
.h5-cta .btn{min-height:52px}
.btn-arr{margin-left:8px;font-size:1.05em;line-height:1}
.h5-helper{font-size:13px;line-height:20px;color:var(--ink-3);margin:8px 0 0}

/* ---------- The answer comparison ----------------------------------------
   Two full conversation windows, both readable without touching anything.
   This is the page's demonstration, so it gets the page's width. */
.aex{background:var(--page);padding:28px 0 72px;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
  max-width:var(--w-public);margin:0 auto}
.aex-h{text-align:center;margin:0 0 var(--s4)}
.aex-h h2{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:30px;
  letter-spacing:var(--ls-h2);margin:0}
.aex-h p{font-size:13px;line-height:20px;color:var(--ink-3);margin:6px 0 0}

/* THE SWITCH IS display:none UNTIL SCRIPT SAYS OTHERWISE, and display:none is
   the point rather than visibility or opacity: it takes the buttons out of the
   tab order, so a visitor with no JavaScript cannot focus a control that does
   nothing. .aex-js is added by home5.js after its listeners exist. */
.aex-sw{display:none}
/* align-items:start, NOT stretch, and the spec allows either.
   Stretch equalises the two frames, which sounds tidier and is not: the two
   answers cite a different number of sources, so the shorter window got 130px
   of nothing between its single source and the composer strip pinned to its
   bottom edge. That reads as a rendering fault, and the spec's own rule for
   the message body -- no minimum height, never vertically centre a reply --
   is the same instinct applied one level in. Two frames of honest, different
   heights, aligned at the top where the eye compares them, is the readable
   arrangement. */
.aex-g{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.aex-col{display:flex;flex-direction:column;min-width:0}

/* The scenario labels live ABOVE the frame. Inside it they would read as part
   of the conversation, which is the one thing this component must not blur. */
.aex-lab{margin:0 0 8px}
.aex-lab-t{font-family:var(--font-display);font-size:16px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);margin:0}
.aex-lab-d{font-size:13px;line-height:20px;color:var(--ink-3);margin:2px 0 0}

.aex-diff{text-align:center;font-size:var(--fs-body);line-height:1.6;color:var(--ink);
  margin:var(--s5) auto 0;max-width:70ch}
/* The method label is legible ordinary text. It is not a warning banner and
   not the section headline -- five badges around a chat window was the defect
   this replaces. */
.aex-method{text-align:center;font-size:12px;line-height:18px;color:var(--ink-3);
  margin:8px 0 0}
.aex-about{max-width:70ch;margin:var(--s4) auto 0;text-align:center}
.aex-about > summary{cursor:pointer;font-size:13px;color:var(--link);
  list-style:none;display:inline-flex;align-items:center;gap:6px;padding:6px 0}
.aex-about > summary::-webkit-details-marker{display:none}
.aex-about > summary::after{content:"";width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
.aex-about[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.aex-about > summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.aex-about-b{text-align:left}
.aex-about-b p{font-size:13px;line-height:20px;color:var(--ink-2);margin:0 0 var(--s3)}

/* ---------- One conversation window --------------------------------------
   It has to read as a chat application before a word of it is read, which is
   what the app bar and the composer strip are for. It must NOT read as
   somebody else's chat application: no provider mark, no model name, no
   account, no connected indicator. */
.cw{flex:1 1 auto;display:flex;flex-direction:column;background:#FFFFFF;
  border:1px solid #D7DEDA;border-radius:16px;box-shadow:0 12px 36px rgba(20,33,38,.07);
  overflow:hidden}
/* A restrained border, not a glow. Both windows keep identical text contrast:
   the comparison is only honest if the baseline is as readable as the good
   answer. */
.cw-best{border-color:#AFC2B6}

.cw-bar{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;
  border-bottom:1px solid var(--divider)}
.cw-bar-i{display:inline-flex;width:20px;height:20px;color:var(--ink-3);flex:none}
.cw-bar-i svg{width:100%;height:100%}
.cw-bar-t{font-size:13px;font-weight:600;color:var(--ink)}
.cw-bar-x{margin-left:auto;font-size:11px;letter-spacing:.04em;color:var(--ink-4);
  background:var(--sf-subtle);border-radius:var(--r-full);padding:3px 9px}

.cw-b{padding:20px;display:flex;flex-direction:column}

/* The question. Right-aligned, grey, with the one squared corner that says
   "this end of the exchange". Never lime: a lime bubble reads as the product
   speaking rather than the customer. */
.cw-user{align-self:flex-end;max-width:88%;background:#EFF2EF;color:var(--ink);
  font-size:15px;line-height:22px;border-radius:16px 16px 6px 16px;padding:10px 14px;
  margin:0}

.cw-a{display:flex;gap:10px;margin:18px 0 0}
.cw-av{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sf-subtle);
  color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center}
.cw-av svg{width:15px;height:15px}
.cw-a-b{min-width:0;flex:1 1 auto}
.cw-a-l{font-size:12px;line-height:18px;color:var(--ink-4);margin:0 0 4px}
/* Prose on white, not a second coloured bubble. The answer is the thing being
   demonstrated; a bubble around it makes it decoration. */
.cw-p{font-size:15px;line-height:23px;font-weight:400;color:var(--ink);margin:0 0 10px}
.cw-p:last-child{margin-bottom:0}
.cw-p strong{font-weight:600}

/* A citation is a link with an accessible name, resolving to the source in
   the row below -- never a hover card, which no touch device can open. */
.cw-cite{display:inline-block;font-size:12px;font-weight:600;line-height:1;
  color:var(--link);text-decoration:none;background:var(--ok-sf);
  border-radius:4px;padding:2px 4px;vertical-align:1px}
.cw-cite:hover{background:#DCEBE2;text-decoration:none}
.cw-cite:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* The sources, visible without hovering: a named business and a real domain
   rather than three generic trust badges. */
.cw-srcs{margin:14px 0 0;padding:10px 0 0;border-top:1px solid var(--divider)}
.cw-owner{font-size:12px;line-height:18px;color:var(--ink-2);margin:0 0 8px}
.cw-owner b{display:block;font-weight:600;color:var(--ink)}
.cw-src-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cw-src-l li{min-width:0}
.cw-src-l a{display:flex;align-items:baseline;gap:6px;font-size:13px;line-height:19px;
  font-weight:600;color:var(--link);overflow-wrap:anywhere}
.cw-src-n{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;border-radius:4px;background:var(--ok-sf);
  font-size:11px;font-weight:600;color:var(--link);align-self:center}
/* The published title in its own language, under the English caption: a
   visitor who follows "ABS / ESP services" lands on a page headed "ABS / ESP
   centrale", and this is what tells them so before they click. */
.cw-src-t,.cw-src-h{display:block;font-size:12px;line-height:17px;color:var(--ink-2);
  margin-left:23px;overflow-wrap:anywhere}
.cw-src-d{display:block;font-size:11px;line-height:16px;color:var(--ink-4);
  margin-left:23px}

/* Chrome. aria-hidden, no input, no button, no tab stop -- it makes the frame
   recognisable and must never imply a live chat is available. */
.cw-comp{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-top:1px solid var(--divider);background:var(--sf)}
.cw-comp-p,.cw-comp-s{flex:none;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  background:var(--sf-subtle);color:var(--ink-4)}
.cw-comp-t{flex:1 1 auto;font-size:13px;color:var(--ink-4)}

/* ---------- The website check --------------------------------------------
   Its own section, its own slot. The example never lands here and this never
   lands in the example. */
.h5-check-s{background:var(--sf-subtle);padding:72px 0;scroll-margin-top:calc(var(--h-hdr) + 12px)}
.h5-check-in{max-width:760px}
.h5-check-h h2{margin:0 0 var(--s3)}
.h5-check-h p{font-size:var(--fs-body);line-height:1.6;color:var(--ink-2);margin:0 0 var(--s5)}
.h5-check{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;margin:0}
.h5-check-f{flex:1 1 300px;min-width:0}
.h5-check-f label{display:block;font-size:var(--fs-label);font-weight:600;
  line-height:20px;color:var(--ink);margin-bottom:var(--s2)}
.h5-check-f input{width:100%;min-height:var(--h-ctl-hero);padding:12px var(--s4);
  font-family:var(--font);font-size:16px;line-height:1.4;color:var(--ink);
  background:var(--sf);border:1px solid var(--control);border-radius:var(--r)}
.h5-check-f input:focus{outline:none;border-color:var(--focus);box-shadow:var(--glow)}
.h5-check .btn{flex:0 0 auto}
.h5-check-help{font-size:var(--fs-sm);color:var(--ink-2);margin:var(--s3) 0 0}
.h5-check-alt{font-size:var(--fs-sm);margin:var(--s2) 0 0}
/* Empty until a check runs. It has no border, no heading and no placeholder
   copy: an empty box labelled "your result will appear here" is a promise the
   page makes on every load to visitors who never press the button. */
.h5-slot:not(:empty){margin-top:var(--s6)}

/* ---------- Sections ---------- */
/* The header is sticky and about 65px tall, so a jump to #pricing or
   #what-you-get otherwise lands with the eyebrow hidden under it. Every
   anchored section on this page keeps that much clear. */
section[id]{scroll-margin-top:5rem}

/* ---------- PUB-02, in the hero slot ---------- */
.chk{background:var(--sf);border:1px solid var(--divider);border-radius:var(--r-xl);
  padding:var(--s5);box-shadow:var(--shadow)}
.chk-t{font-family:var(--font-display);font-size:22px;line-height:1.27;
  letter-spacing:-.014em;margin:0 0 var(--s2)}
.chk-t:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.chk-sub{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 var(--s3)}
.chk-summary{font-size:var(--fs-body);line-height:1.55;margin:0 0 var(--s5)}
/* 8:4 on a wide result page; one column in the hero slot, which is 5/12 of
   the grid and never wide enough for two. */
/* minmax(0,1fr), not the implicit auto track: a grid item's min-width is
   auto, so one long unbreakable line inside the findings column sized the
   whole track to its max-content and pushed the check result 56px past a
   320px viewport. The two-column desktop rule below already states its own
   tracks; this is the single-column default that never did. */
.chk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.chk-grid>*{min-width:0}
.chk-group{margin-bottom:var(--s5)}
.chk-gt{font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-family:var(--font);margin:0 0 var(--s3)}
.chk-gn{display:inline-flex;align-items:center;justify-content:center;min-width:20px;
  height:18px;padding:0 5px;border-radius:var(--r-full);background:var(--sf-subtle);
  color:var(--ink-2);font-size:11px}
.chk-row{padding:var(--s3) 0;border-top:1px solid var(--divider)}
.chk-row-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap}
.chk-k{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.chk-badge{font-size:11px;font-weight:600;color:var(--ink-2);background:var(--sf-subtle);
  border-radius:var(--r-sm);padding:3px 8px;white-space:nowrap}
.chk-group-ok .chk-badge{background:var(--ok-sf);color:var(--link)}
.chk-group-review .chk-badge{background:var(--attn-sf);color:var(--attn)}
.chk-d{font-size:var(--fs-xs);line-height:1.55;color:var(--ink-2);margin:4px 0 0}
.chk-more > summary{cursor:pointer;font-size:var(--fs-sm);color:var(--link);
  min-height:44px;display:flex;align-items:center}
.chk-next-in{background:var(--sf-subtle);border-radius:var(--r-lg);padding:var(--s5)}
.chk-next h3{font-size:var(--fs-h3);letter-spacing:var(--ls-h3);margin:0 0 var(--s3)}
.chk-next p{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);margin:0 0 var(--s4)}
.chk-next .btn{margin-bottom:var(--s2)}
.chk-help,.chk-scope,.chk-note{font-size:var(--fs-xs);color:var(--ink-3);margin:var(--s2) 0 0}
.chk-note{color:var(--ink)}
.chk-failed-acts{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.chk-retry{margin:0}
/* Running: a phase, never a percentage. */
.chk-running{min-height:440px;display:flex;flex-direction:column;justify-content:center}
.chk-phase{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-body);
  font-weight:600;margin:0 0 var(--s3)}
.chk-spin{width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid var(--divider-2);border-top-color:var(--ink);
  animation:chk-spin 700ms linear infinite}
@keyframes chk-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.chk-spin{animation:none}}
/* The standalone no-JS result page. Two columns there, where there is room. */
.chk-page{padding:var(--s7) 0 var(--s9);max-width:960px}
.chk-page .chk{border:0;box-shadow:none;padding:0;background:0}
.chk-page .chk-grid{grid-template-columns:8fr 4fr;align-items:start}
.chk-page .chk-next{position:sticky;top:calc(var(--h-hdr) + var(--s5));max-width:360px}

/* ---------- Tablet ---------- */
@media(max-width:1023px){
  .h5-h1{font-size:46px;line-height:50px}
  .chk-page .chk-grid{grid-template-columns:1fr}
  .chk-page .chk-next{position:static;max-width:none}
}

/* ---------- The comparison, under 800px ------------------------------------
   One column, and a real switch above it.

   EVERY RULE THAT HIDES AN ANSWER LIVES INSIDE THIS QUERY, and both halves of
   that matter.

   Inside the query, because at 800px and up the selected state is not read at
   all -- so resizing a phone-width window to desktop after choosing "Without"
   cannot strand the other answer hidden. That requirement is met by the
   cascade rather than by a resize listener somebody has to remember to write.

   Behind .aex-js, because the class is added by home5.js AFTER its listeners
   exist. Before that -- and forever, if the script never loads -- the switch
   is display:none and both windows are visible and complete. The server is
   incapable of shipping a hidden answer. */
@media(max-width:799px){
  .aex-g{grid-template-columns:1fr;gap:var(--s6)}
  .aex-js .aex-sw{display:flex;gap:8px;margin:0 0 var(--s5)}
  .aex-sw-b{flex:1 1 0;min-width:0;min-height:44px;padding:10px 12px;
    font-family:var(--font);font-size:14px;font-weight:600;line-height:1.25;
    color:var(--ink);background:var(--sf);border:1px solid var(--control);
    border-radius:var(--r);cursor:pointer}
  .aex-sw-b[aria-pressed="true"]{background:var(--cta);border-color:var(--cta);
    color:var(--cta-ink)}
  .aex-sw-b:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
  .aex-js .aex-col[data-aex-on="0"]{display:none}
}

/* ---------- Mobile ---------- */
@media(max-width:639px){
  /* Left-aligned below 600: a centred 38px headline over three centred lines
     of prose is harder to read on a narrow column than the same block set
     ragged-right. */
  .h5-intro-in,.aex-h,.aex-diff,.aex-method{text-align:left}
  .h5-intro{padding-top:var(--s6)}
  .h5-h1{font-size:38px;line-height:41px;max-width:none}
  .h5-lede{font-size:17px;line-height:26px;margin-left:0;margin-right:0}
  .aex{padding-bottom:56px}
  .aex-about{margin-left:0;margin-right:0}
  /* The primary is a full-width button and the secondary becomes a plain
     link. Two stacked 52px buttons of equal weight give a visitor two equally
     loud instructions at the exact moment they are deciding. */
  .h5-cta{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .h5-cta .btn-accent{width:100%;justify-content:center}
  .h5-cta .btn-ghost{background:0;border:0;box-shadow:none;min-height:44px;
    color:var(--link);text-decoration:underline;padding:0;justify-content:flex-start}
  .h5-check-s{padding:56px 0}
  .h5-check{flex-direction:column;align-items:stretch}
  /* flex-basis follows the MAIN axis, and the main axis just became vertical.
     A basis of 300px sized the field's WIDTH on desktop and its HEIGHT here,
     so the label and the input sat in a 300px-tall box with a 230px hole
     between them and the button. Resetting the basis is the whole fix. */
  .h5-check-f{flex:0 0 auto}
  .h5-check .btn{width:100%;justify-content:center}
  /* Chat padding 16px and the answer keeps its 15/23 -- it is the payload of
     this page and does not get shrunk to buy vertical space. */
  .cw-b{padding:16px}
  .cw-comp{padding:10px 12px}
  .cw-user{max-width:92%}
  .chk-running{min-height:220px}
  .chk{padding:var(--s4)}
}

/* ---------- 360px and under ------------------------------------------------
   Not a separate design, just the two places where the type stops fitting.
   "Without X-Protocols" is 19 characters in a button that has to share the row
   with another one; at 320px the pair needs the smaller size to keep both
   labels on two lines rather than three. */
@media(max-width:360px){
  .h5-h1{font-size:33px;line-height:37px}
  .aex-sw-b{font-size:13px;padding:8px 8px}
}

/* ---------- Touch targets (Task 13) -----------------------------------------
   The same rule the app stylesheet states: WCAG 2.2 SC 2.5.8 wants 24x24 CSS px
   of anything you can press, and exempts a link inside a sentence. These three
   are the homepage's standalone ones -- a source in the sources list, and the
   two alternatives that sit alone under a button. `.cw-cite` is deliberately
   absent: it is a citation marker inside a sentence of the answer, and making
   it taller would open the line it belongs to. */
@media(hover:none),(max-width:767px){
  .cw-src-l a{padding:5px 0}
  .h5-check-alt>a{display:inline-block;padding:6px 0}
}

/* ===========================================================================
   REV 6 -- the lower half of the homepage
   ===========================================================================
   Six sections and the product frame, built to a supplied design. What that
   design shipped as was a standalone page with its own reset, its own :root
   and its own `.wrap` -- three things that would have redefined the header,
   the footer and the embedded dashboard the moment this file loaded, because
   servedCSS is inlined into every page and this sheet is linked after it.

   So every rule below is SCOPED TO `.h6`, the class each Rev 6 section
   carries, and the design's colour names are bridged to the tokens that
   already exist rather than redeclared with their own hex. --line and --page
   in the design were byte-for-byte our --divider and --page; keeping two
   names for one colour is how a palette drifts, so there is one name.
   ======================================================================== */

.h6{--muted:var(--ink-2);--line:var(--divider);--dark:var(--graphite);
  --light:var(--inv);--lime:var(--cta);--green:var(--link);--labs:#E9EEE2;
  --white:var(--sf);--subtle:var(--sf-subtle);--gutter:40px;
  --display:var(--font-display);--h6-body:var(--font)}
.h6 h2,.h6 h3,.h6 h4{font-family:var(--display);font-weight:600;line-height:1.12;margin:0}
.h6 p{margin:0}
.h6-wrap{width:min(1200px,calc(100% - var(--gutter)*2));margin-inline:auto}

/* The eyebrow: the design's square mark rather than PUB-01's plain caps. Both
   exist on the page, above and below the check, and they are the same size --
   the mark is what says a Rev 6 section has started. */
.h6-eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:650;
  letter-spacing:.13em;line-height:1.5;text-transform:uppercase;color:var(--ink-2)}
.h6-eyebrow::before{content:'';width:7px;height:7px;background:var(--green);border-radius:1px}

.h6-textlink{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;
  line-height:1.5;color:var(--green)}
.h6-textlink:hover{text-decoration:underline}
.h6-arr{width:17px;height:17px;transition:transform .18s ease;flex-shrink:0}
.h6-textlink:hover .h6-arr{transform:translateX(3px)}
.h6-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;
  padding:4px 9px;border-radius:var(--r-full);background:var(--sf-subtle);color:var(--ink-2);
  border:1px solid var(--divider-2);white-space:nowrap}

/* ---------- The offer strip ------------------------------------------------
   One line under the hero. Deliberately the shortest band on the page: no
   heading, no padding block of its own beyond what one line of text needs,
   and no button -- a second accent button this high up competes with the two
   the hero already carries. It wraps to two centred lines under 520px rather
   than shrinking the type, because 11px on a phone is the thing the mobile
   sweep exists to catch.
   ------------------------------------------------------------------------ */
.h6-offer{background:var(--sf-subtle);border-block:1px solid var(--divider);
  padding-block:11px}
.h6-offer-in{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px 18px;text-align:center}
.h6-offer-t{font-size:14px;line-height:1.5;font-weight:600;color:var(--ink)}
.h6-offer-a{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  font-weight:600;line-height:1.5;color:var(--link);white-space:nowrap}
.h6-offer-a:hover{text-decoration:underline}
.h6-offer-r{transition:transform .18s ease}
.h6-offer-a:hover .h6-offer-r{transform:translateX(3px)}
@media(max-width:639px){
  .h6-offer{padding-block:10px}
  .h6-offer-t{font-size:13px}
  .h6-offer-a{font-size:12px}
}
@media(hover:none),(max-width:767px){
  .h6-offer-a{min-height:24px}
}
@media(prefers-reduced-motion:reduce){
  .h6-offer-r{transition:none!important}
}

/* ---------- Practical advice ---------------------------------------------- */
.h6-advice{padding:86px 0;background:var(--white);border-bottom:1px solid var(--line)}
.h6-advice-g{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}
.h6-advice-c h2{font-size:44px;line-height:1.1;letter-spacing:-1.6px;max-width:470px;
  margin-top:22px}
.h6-advice-c>p:not(.h6-eyebrow){font-size:15px;line-height:1.85;color:var(--muted);
  max-width:455px;margin-top:20px}
.h6-advice-cta{margin-top:26px}
.h6-advice-n{display:block;font-size:11px;color:var(--muted);margin-top:13px}

/* The example review card. Rotated half a degree, which is the design saying
   "this is a thing on a desk" rather than a panel of the page. */
.h6-review{border:1px solid var(--line);border-radius:13px;background:var(--white);
  box-shadow:0 16px 46px -30px rgba(20,33,38,.25);overflow:hidden;transform:rotate(.5deg)}
.h6-review-bar{display:flex;align-items:center;gap:9px;padding:14px 22px;
  background:var(--page);border-bottom:1px solid var(--line);font-size:12px;font-weight:600}
.h6-review-i{color:var(--green)}
.h6-review-bar .h6-badge{margin-left:auto}
.h6-review-b{padding:25px 25px 18px}
.h6-review-d{font-size:11px;color:var(--muted);margin-bottom:9px;overflow-wrap:anywhere}
.h6-review-b h3{font-size:21px;letter-spacing:-.5px;margin-bottom:22px}
.h6-finding{border-top:1px solid var(--line)}
.h6-finding summary{list-style:none;display:flex;align-items:flex-start;gap:12px;
  padding:16px 0;cursor:pointer;font-size:13px;font-weight:600;line-height:1.45}
.h6-finding summary::-webkit-details-marker{display:none}
.h6-finding summary small{display:block;font-size:11px;font-weight:400;color:var(--muted);
  margin-top:4px}
.h6-dot{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-full);
  font-size:13px;flex-shrink:0}
.h6-dot-warn{background:var(--attn-sf);color:var(--attn)}
/* A PLUS THAT BECOMES A MINUS, NOT A PLUS THAT BECOMES A CROSS. Rotating the
   glyph 45 degrees is the usual trick and it is wrong here: on a list of
   findings about somebody's website, an x on the row reads as "dismiss this",
   which is the one thing this control does not do. Two bars, and the upright
   one goes away. */
.h6-exp{margin-left:auto;position:relative;flex:none;width:11px;height:11px}
.h6-exp::before,.h6-exp::after{content:"";position:absolute;background:var(--muted)}
.h6-exp::before{left:0;right:0;top:50%;height:1.5px;transform:translateY(-50%)}
.h6-exp::after{top:0;bottom:0;left:50%;width:1.5px;transform:translateX(-50%)}
.h6-finding[open] .h6-exp::after{opacity:0}
.h6-finding-a{font-size:12px;color:var(--muted);line-height:1.8;padding:0 0 18px 38px}
.h6-finding-a code{font-size:11px;background:var(--page);padding:2px 4px;border-radius:3px}
.h6-finding-act{margin-top:10px;color:var(--ink)}
.h6-review-n{font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:15px}

/* ---------- Being found ---------------------------------------------------- */
.h6-vis{padding:60px 0;background:var(--subtle)}
.h6-vis-g{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:90px}
.h6-vis-g h2{font-size:36px;letter-spacing:-1.1px;margin-top:19px}
.h6-vis-g>div>p:not(.h6-eyebrow){color:var(--muted);font-size:14px;line-height:1.8;
  max-width:435px;margin-top:18px}
.h6-vis-n{font-size:12px!important;margin-top:14px!important}
.h6-search-q{display:flex;align-items:center;gap:15px;padding:20px 23px;background:var(--white);
  border:1px solid var(--divider-2);border-radius:9px;box-shadow:0 6px 14px -14px var(--ink)}
.h6-search-q .icon{width:19px;height:19px;color:var(--green)}
.h6-search-q p{font-size:15px;font-weight:500;line-height:1.6}
.h6-search-c{font-size:11px;color:var(--muted);margin:17px 0 12px;text-transform:uppercase;
  letter-spacing:.07em}
.h6-match{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0}
.h6-match dt{font-size:11px;color:var(--muted);margin-bottom:5px}
.h6-match dd{margin:0;font-size:12px;font-weight:600;line-height:1.5}

/* ---------- How it works --------------------------------------------------- */
.h6-how{padding:78px 0 70px}
.h6-how-h h2{font-size:38px;letter-spacing:-1.1px;margin-top:18px}
.h6-how-h>p:last-child{color:var(--muted);font-size:14px;margin-top:15px;max-width:62ch}
.h6-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;list-style:none;
  padding:0;margin:36px 0 0}
.h6-steps li{display:flex;align-items:flex-start;gap:15px;padding-top:24px;
  border-top:1px solid var(--divider-2)}
.h6-step-n{font-family:var(--display);font-size:16px;color:var(--green);line-height:1.6}
.h6-steps h3{font-size:18px;line-height:1.4;letter-spacing:-.3px}
.h6-steps p{font-size:13px;color:var(--muted);line-height:1.8;margin-top:10px}

/* ---------- The product: the real dashboard in a frame ---------------------
   The panel inside is APP-01's own markup, so it carries APP-01's own rules
   out of servedCSS and this block adds none of them. What it does is give the
   frame a CONTAINER, because .ov5's own breakpoints are viewport media
   queries: a 1000px-wide dashboard inside a 1200px page would otherwise stay
   in its four-across desktop layout at every width the frame ever has. The
   container query below asks the frame how wide IT is, which is the question
   that was actually being asked all along. */
.h6-product{background:#E9EEEA;padding:65px 0 48px;border-block:1px solid var(--line)}
.h6-product-h h2{font-size:38px;letter-spacing:-1.2px;margin-top:18px}
.h6-product-h p:not(.h6-eyebrow){font-size:14px;line-height:1.8;max-width:640px;
  color:var(--muted);margin-top:16px}
.h6-app{background:var(--sf);border:1px solid var(--divider-2);border-radius:13px;
  box-shadow:0 20px 42px -30px rgba(20,33,38,.38);overflow:hidden;margin-top:30px}
/* NO pointer-events:none HERE ANY MORE. The panel is meant to be used. What
   stops a click reaching /app is that demoNeutralise took the href off every
   link in Go, which no stylesheet can undo and no browser can ignore. */
.h6-app [data-demo-href]{cursor:default}
.h6-app .ov5-att-a{cursor:pointer}
.h6-app-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 22px;border-bottom:1px solid var(--line);background:#FBFCFA;min-height:58px}
.h6-app-brand svg{height:26px;width:auto;color:var(--ink)}
.h6-app-who{font-size:11px;color:var(--muted)}
.h6-app-layout{display:grid;grid-template-columns:196px minmax(0,1fr)}
.h6-app-side{background:#F6F8F4;border-right:1px solid var(--line);padding:22px 12px;
  display:flex;flex-direction:column}
.h6-app-biz{margin:0 8px 24px}
.h6-app-biz-k{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.h6-app-biz b{font-size:13px;line-height:1.35}
.h6-app-nav{display:grid;gap:4px}
.h6-app-nav-a{display:flex;align-items:center;gap:9px;padding:9px;border-radius:6px;
  font-size:11px;line-height:1.5;color:var(--muted)}
.h6-app-nav-a .icon{width:15px;height:15px}
.h6-app-nav-a .icon svg{width:15px;height:15px}
.h6-app-nav-a.is-active{background:#E2EBD9;color:#28482D;font-weight:600}
.h6-app-side-f{margin-top:auto;padding:28px 8px 0;font-size:11px;color:var(--muted);
  line-height:1.6}
.h6-app-main{min-width:0;container-type:inline-size;container-name:h6app}
.h6-app-crumbs{padding:13px 24px;border-bottom:1px solid var(--line);font-size:11px;
  color:var(--muted);letter-spacing:.04em}
/* The dashboard's own container rules, neutralised for the frame. */
.h6-app-body.wrap{max-width:none;padding:0 24px}
.h6-app-body.ov5{padding-top:22px;padding-bottom:26px}
.h6-app-body .ov5-head h1{font-size:26px}
@container h6app (max-width:900px){
  .h6-app-body .ov5-grid{grid-template-columns:1fr}
  .h6-app-body .ov5-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container h6app (max-width:560px){
  .h6-app-body .ov5-strip{grid-template-columns:1fr;gap:var(--s4)}
  .h6-app-body .ov5-metrics{grid-template-columns:1fr}
}
.h6-app-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:11px;color:var(--muted);line-height:1.7;margin-top:14px;max-width:70ch}
.h6-demo-reset{font:inherit;font-weight:600;color:var(--green);background:none;
  border:0;border-bottom:1px solid currentColor;padding:4px 0;cursor:pointer;
  min-height:24px}

/* THE OPENED TASK. A row on the Overview says what was found and where it
   lives; this is the level below, which the product keeps on /app/next-steps
   and which is the reason anybody opens a task at all.

   IT IS DRAWN AS THE CARD CONTINUING, not as a panel under it: the card is
   .ov5-att-a and the expansion is its sibling, so without this it reads as a
   separate thing that happens to be nearby. Same border, top corners squared,
   pulled up by the list's own gap so the two meet. */
.ov5-att-i.is-open .ov5-att-a{border-bottom-left-radius:0;border-bottom-right-radius:0;
  border-bottom-color:transparent}
.h6-demo-open{border:1px solid var(--divider);border-top:0;border-radius:0 0 var(--r) var(--r);
  background:var(--sf);padding:2px var(--s4) var(--s4)}
.h6-demo-why{font-size:12px;line-height:1.7;color:var(--muted)}
.h6-demo-task-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.h6-demo-done{background:var(--green);color:#fff;border:0}

/* The question chips under the answer field. They are the questions somebody
   would actually type, which is faster than typing them and, for a reader who
   does not know what this product answers, more instructive. */
.h6-demo-chips-h{font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-top:18px}
.h6-demo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.h6-demo-chip{font:inherit;font-size:12px;line-height:1.4;text-align:left;
  background:var(--sf-2,#F3F5F3);border:1px solid var(--divider-2);border-radius:99px;
  padding:7px 13px;min-height:24px;cursor:pointer;color:inherit}
.h6-demo-chip:hover{border-color:var(--green);color:var(--green)}
.h6-demo-apv{max-height:min(86vh,760px);overflow-y:auto}

.h6-after{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:30px;
  padding-top:28px;border-top:1px solid var(--divider-2)}
.h6-after article{display:flex;align-items:flex-start;gap:14px}
.h6-after-i{font-family:var(--display);font-size:15px;line-height:1.5;color:var(--green)}
.h6-after h3{font-size:17px;letter-spacing:-.3px;line-height:1.35}
.h6-after p{font-size:12px;color:var(--muted);line-height:1.8;margin-top:9px}

/* ---------- The real profiles ---------------------------------------------- */
.h6-profiles{padding:78px 0 76px}
.h6-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;
  margin-bottom:32px}
.h6-intro h2{font-size:clamp(32px,3.15vw,42px);letter-spacing:-1.5px;max-width:650px;
  margin-top:17px}
.h6-intro-n{max-width:320px;color:var(--muted);font-size:13px;line-height:1.7;
  padding-bottom:2px}
.h6-profile-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.h6-profile{display:flex;flex-direction:column;min-width:0;background:var(--white);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:box-shadow .2s,border-color .2s,transform .2s}
.h6-profile:hover{border-color:var(--control);box-shadow:0 12px 28px -20px rgba(20,33,38,.44);
  transform:translateY(-3px)}
.h6-profile:focus-within{border-color:var(--green)}
.h6-profile-b{display:flex;align-items:center;gap:18px;padding:25px 26px}
.h6-profile-i{display:grid;place-items:center;width:58px;height:58px;flex-shrink:0;
  border-radius:12px;background:#EDF2E9;color:var(--green);font-family:var(--display);
  font-size:19px;font-weight:600}
.h6-profile h3{font-size:20px;letter-spacing:-.5px;margin-bottom:6px;overflow-wrap:anywhere}
.h6-profile-c{font-size:13px;color:var(--muted)}
.h6-profile-f{margin-inline:26px;padding:17px 0;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.h6-profile-s{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}
.h6-profile-s::before{content:'';width:5px;height:5px;border-radius:var(--r-full);
  background:var(--green)}
.h6-profile-f .h6-textlink{font-size:12px}

/* ---------- The one closing decision ---------------------------------------- */
.h6-start{padding-bottom:78px}
.h6-panel{display:grid;grid-template-columns:1.16fr 1fr;gap:64px;padding:58px 60px;
  background:var(--dark);color:var(--light);border-radius:18px;overflow:hidden}
.h6-panel-c{display:flex;flex-direction:column;align-items:flex-start}
.h6-panel-c .h6-eyebrow{color:var(--inv-2);margin-bottom:24px}
.h6-panel-c .h6-eyebrow::before{background:var(--lime)}
.h6-panel-c h2{font-size:clamp(34px,3.8vw,50px);letter-spacing:-1.7px;line-height:1.06;
  max-width:460px}
.h6-panel-c h2 span{color:var(--lime)}
.h6-panel-c>p:not(.h6-eyebrow){max-width:380px;color:var(--inv-2);font-size:15px;
  line-height:1.8;margin-top:22px}
.h6-quiet{margin-top:auto;padding-top:28px;color:#E0E9E4;display:inline-flex;
  align-items:center;gap:9px;font-size:12px;font-weight:500}
.h6-quiet:hover{text-decoration:underline}
.h6-quiet .h6-arr{width:15px;height:15px}
.h6-plan{padding-left:46px;border-left:1px solid #40504E;align-self:center}
.h6-plan-top{display:flex;justify-content:space-between;align-items:center;gap:18px;
  margin-bottom:22px}
.h6-plan h3{font-size:44px;letter-spacing:-1.6px;color:var(--light)}
.h6-nocard{font-size:11px;color:#C6D2CC;border:1px solid #52605B;border-radius:var(--r-full);
  padding:5px 10px;white-space:nowrap}
.h6-plan-l{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:11px;font-size:14px;
  color:#E4EBE7}
.h6-plan-l li{display:flex;align-items:center;gap:12px}
.h6-plan-l svg{width:16px;height:16px;color:var(--lime);flex-shrink:0}
.h6-plan-n{margin-top:15px;text-align:center;color:var(--inv-2);font-size:12px;line-height:1.7}
.h6-plan-n a{color:var(--light);text-decoration:underline}
.h6-plan-n a:hover{color:var(--lime)}

.h6-paths{display:grid;grid-template-columns:1fr 1fr;padding-top:34px;gap:40px}
.h6-path{display:grid;grid-template-columns:40px 1fr;gap:15px;align-items:start;
  padding:7px 28px 0 6px}
.h6-path+.h6-path{border-left:1px solid var(--line);padding-left:38px}
.h6-path-s{width:38px;height:38px;background:var(--subtle);border-radius:var(--r-full);
  display:grid;place-items:center}
.h6-path-s svg{width:19px;height:19px;color:var(--green)}
.h6-path h3{font-size:18px;letter-spacing:-.45px;line-height:1.35;margin-bottom:7px}
.h6-path p{font-size:13px;color:var(--muted);max-width:360px;line-height:1.7}
.h6-path .h6-textlink{font-size:12px;margin-top:14px}

/* ---------- Questions -------------------------------------------------------- */
.h6-faq{background:var(--white);border-block:1px solid var(--line);padding:76px 0 82px}
.h6-faq-g{display:grid;grid-template-columns:.8fr 1.35fr;gap:80px;align-items:start}
.h6-faq-i h2{font-size:36px;letter-spacing:-1.2px;line-height:1.14;max-width:340px;
  margin-top:19px}
.h6-faq-i>p:not(.h6-eyebrow){font-size:13px;color:var(--muted);max-width:240px;margin-top:22px}
.h6-faq-i .h6-textlink{font-size:12px;margin-top:12px}
.h6-faq-l{border-top:1px solid var(--line)}
.h6-q{border-bottom:1px solid var(--line)}
.h6-q summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:19px 0;list-style:none;font-size:14px;font-weight:600;line-height:1.6}
.h6-q summary::-webkit-details-marker{display:none}
.h6-q summary:hover{color:var(--green)}
.h6-q summary::after{content:'+';flex-shrink:0;display:grid;place-items:center;width:24px;
  height:24px;border:1px solid var(--line);border-radius:var(--r-full);font-weight:400;
  font-size:19px;line-height:1;transition:background .2s}
.h6-q[open] summary::after{content:'\2212';background:var(--subtle);border-color:var(--subtle)}
.h6-q[open] summary{padding-bottom:11px}
.h6-a{max-width:580px;padding:0 34px 21px 0;color:var(--muted);font-size:14px;line-height:1.8}

/* ---------- X-Labs ----------------------------------------------------------- */
.h6-labs{background:var(--labs);padding:54px 0 66px}
.h6-labs-head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:24px;border-bottom:1px solid #BAC5B5}
.h6-labs-brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.h6-labs-word{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-1px;
  line-height:1}
.h6-labs-desc{font-size:11px;letter-spacing:.075em;text-transform:uppercase;
  color:var(--muted);border-left:1px solid #BAC5B5;padding-left:18px;line-height:1.5}
.h6-labs-head .h6-textlink{font-size:12px}
.h6-labs-g{display:grid;grid-template-columns:.87fr 1.15fr;gap:90px;padding-top:40px}
.h6-labs-i{display:flex;flex-direction:column;align-items:flex-start}
.h6-labs-i h2{font-size:40px;line-height:1.09;letter-spacing:-1.6px;max-width:420px}
.h6-labs-i>p{font-size:14px;color:#46574C;line-height:1.85;max-width:360px;margin-top:20px}
.h6-labs-a{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:36px}
.h6-labs-in{display:grid;place-items:center;height:36px;width:36px;border:1px solid #B3C0AC;
  border-radius:var(--r-full);font-family:var(--display);font-size:12px}
.h6-labs-a p{font-size:11px;line-height:1.7}
.h6-labs-a span{display:block;color:#52624F;font-size:11px}
.h6-labs-pt{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-bottom:16px}
.h6-labs-lbl{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:#40543F}
.h6-labs-st{display:inline-flex;align-items:center;gap:6px;border:1px solid #B9C6AF;
  border-radius:var(--r-full);padding:4px 9px;font-size:11px;color:#40543F;white-space:nowrap}
.h6-labs-st::before{content:'';height:4px;width:4px;border-radius:var(--r-full);
  background:#617C45}
.h6-labs-p h3{font-size:27px;line-height:1.22;letter-spacing:-.85px;max-width:500px}
.h6-labs-p>p{font-size:13px;line-height:1.8;color:#46574C;max-width:490px;margin-top:14px}
.h6-labs-p>.h6-textlink{margin-top:18px;font-size:12px}
.h6-journal{margin-top:28px;border-top:1px solid #BAC5B5}
.h6-journal-i{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:15px 0;border-bottom:1px solid #BAC5B5}
.h6-journal-t{font-size:11px;color:#52624F;white-space:nowrap}
.h6-journal-i a{font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:-.25px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex:1}
.h6-journal-i a:hover{text-decoration:underline}
.h6-journal-i .h6-arr{width:15px;height:15px}

/* ---------- Rev 6 responsive ------------------------------------------------- */
@media(max-width:1100px){
  .h6{--gutter:32px}
  .h6-advice-g{gap:50px}.h6-advice-c h2{font-size:38px}
  .h6-vis-g{gap:55px}
  .h6-app-layout{grid-template-columns:160px minmax(0,1fr)}
  .h6-panel{gap:35px;padding:46px 40px}.h6-plan{padding-left:34px}
  .h6-faq-g{gap:52px}.h6-labs-g{gap:58px}
}
@media(max-width:900px){
  .h6-advice-g{gap:34px}.h6-advice-c h2{font-size:33px}
  .h6-advice{padding:62px 0}.h6-advice-c>p:not(.h6-eyebrow){font-size:13px}
  .h6-review-b{padding:20px}.h6-review-b h3{font-size:19px}
  .h6-vis-g{gap:38px}.h6-vis-g h2{font-size:30px}
  .h6-search-q{padding:17px;gap:10px}.h6-search-q p{font-size:13px}
  .h6-match{gap:12px}.h6-match dd{font-size:11px}
  .h6-how{padding:62px 0}.h6-steps{gap:24px}.h6-steps h3{font-size:16px}
  .h6-steps p{font-size:12px}
  /* The sidebar goes, exactly as the real app's does below 1024px. */
  .h6-app-layout{grid-template-columns:1fr}.h6-app-side{display:none}
  .h6-product-h h2{font-size:33px}.h6-after{gap:23px}
  .h6-intro{gap:30px}.h6-intro-n{max-width:250px;font-size:12px}
  .h6-panel{gap:30px;padding:40px 32px}.h6-panel-c h2{font-size:37px}
  .h6-plan{padding-left:26px}.h6-plan h3{font-size:38px}
  .h6-plan-top{align-items:flex-start;flex-direction:column;gap:10px}
  .h6-nocard{border:0;padding:0}.h6-plan-l{font-size:12px}
  .h6-path{padding-right:0;grid-template-columns:34px 1fr;gap:12px}
  .h6-path+.h6-path{padding-left:26px}.h6-paths{gap:22px}
  .h6-path-s{width:32px;height:32px}.h6-path h3{font-size:16px}
  .h6-faq-g{gap:42px;grid-template-columns:.8fr 1.2fr}.h6-faq-i h2{font-size:30px}
  .h6-faq{padding:60px 0}.h6-q summary{font-size:13px}.h6-a{font-size:13px}
  .h6-labs-g{gap:46px;grid-template-columns:.85fr 1.15fr}.h6-labs-i h2{font-size:34px}
  .h6-labs-p h3{font-size:23px}.h6-labs-desc{display:none}
}
@media(max-width:680px){
  .h6{--gutter:22px}
  .h6-advice-g,.h6-vis-g{grid-template-columns:1fr;gap:32px}
  .h6-advice{padding:49px 0}.h6-advice-c h2{font-size:32px;max-width:370px}
  .h6-advice-c>p:not(.h6-eyebrow){font-size:14px}
  .h6-review{transform:none}.h6-review-bar{padding:13px 19px}
  .h6-review-b{padding:22px 19px 17px}.h6-finding-a{padding-left:0}
  .h6-vis{padding:43px 0}.h6-vis-g h2{font-size:31px}
  .h6-match{grid-template-columns:1fr;gap:10px}
  .h6-match div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
  .h6-match dt{margin-bottom:0}.h6-match dd{text-align:right}
  .h6-how{padding:48px 0}.h6-how-h h2{font-size:32px}
  .h6-steps{grid-template-columns:1fr;gap:20px;margin-top:28px}
  .h6-steps li{gap:17px;padding-top:20px}.h6-steps h3{font-size:18px}
  .h6-steps p{font-size:13px;margin-top:7px}
  .h6-product{padding:44px 0 38px}.h6-product-h h2{font-size:32px}
  .h6-product-h p:not(.h6-eyebrow){font-size:13px}
  .h6-app-top{padding:12px 15px;min-height:54px}.h6-app-brand svg{height:22px}
  .h6-app-who{display:none}
  .h6-app-crumbs{padding:11px 15px}
  .h6-app-body.wrap{padding:0 15px}
  .h6-after{grid-template-columns:1fr;gap:22px;padding-top:26px;margin-top:23px}
  .h6-profiles{padding:46px 0 42px}
  .h6-intro{display:block;margin-bottom:26px}
  .h6-intro h2{font-size:31px;letter-spacing:-1.1px}
  .h6-intro-n{max-width:none;margin-top:16px;font-size:13px}
  .h6-profile-g{grid-template-columns:1fr;gap:14px}
  .h6-profile-b{padding:22px;gap:16px}.h6-profile-i{width:52px;height:52px;font-size:17px}
  .h6-start{padding-bottom:46px}
  .h6-panel{grid-template-columns:1fr;gap:30px;padding:32px 26px;border-radius:13px}
  .h6-panel-c h2{font-size:38px;letter-spacing:-1.5px}
  .h6-panel-c>p:not(.h6-eyebrow){font-size:14px;margin-top:20px;max-width:350px}
  .h6-quiet{margin-top:0;padding-top:20px}
  .h6-plan{border-left:0;border-top:1px solid #40504E;padding:24px 0 0}
  .h6-plan-top{flex-direction:row;align-items:center;margin-bottom:18px}
  .h6-plan h3{font-size:35px}
  .h6-nocard{font-size:11px;border:1px solid #52605B;padding:5px 9px}
  .h6-plan-l{font-size:13px;gap:10px;margin-bottom:21px}
  .h6-paths{grid-template-columns:1fr;gap:0;padding-top:24px}
  .h6-path{padding:16px 4px 22px}
  .h6-path+.h6-path{border-left:0;border-top:1px solid var(--line);padding:22px 4px 0}
  .h6-path h3{font-size:17px}
  .h6-faq-g{grid-template-columns:1fr;gap:28px}.h6-faq{padding:46px 0 49px}
  .h6-faq-i h2{font-size:31px;max-width:340px}
  .h6-faq-i>p:not(.h6-eyebrow){margin-top:16px;max-width:none;font-size:12px}
  .h6-q summary{padding-block:17px;font-size:13px}.h6-a{padding-right:20px;font-size:13px}
  .h6-labs{padding:36px 0 44px}.h6-labs-head{gap:16px;padding-bottom:20px}
  .h6-labs-word{font-size:24px}
  .h6-labs-head .h6-textlink{font-size:11px}
  .h6-labs-g{grid-template-columns:1fr;gap:30px;padding-top:28px}
  .h6-labs-i h2{font-size:33px;max-width:330px}.h6-labs-i h2 br{display:none}
  .h6-labs-i>p{font-size:13px;max-width:365px;margin-top:16px}
  .h6-labs-a{padding-top:22px}
  .h6-labs-p{border-top:1px solid #BAC5B5;padding-top:26px}
  .h6-labs-p h3{font-size:25px}.h6-journal-i a{font-size:15px}
}
@media(max-width:360px){
  .h6{--gutter:17px}
  .h6-panel{padding:28px 22px}.h6-panel-c h2{font-size:34px}
  .h6-advice-c h2,.h6-intro h2{font-size:29px}
  .h6-profile-b{padding:19px 17px;gap:12px}
  .h6-labs-head .h6-textlink{font-size:11px}.h6-journal-t{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .h6-profile,.h6-arr{transition:none!important}
}
/* WCAG 2.2 SC 2.5.8 -- the standalone links in these sections. */
@media(hover:none),(max-width:767px){
  .h6-journal-i a,.h6-profile-f .h6-textlink,.h6-faq-i .h6-textlink,
  .h6-labs-head .h6-textlink,.h6-path .h6-textlink,.h6-quiet{min-height:24px}
}
/* The demoted dashboard heading. Same size and weight as the .ov5-head h1 it
   replaces -- see demoteHeading for why it is not an h1. */
.h6-app-body .ov5-demo-h1{font-family:var(--font-display);font-weight:600;font-size:26px;
  line-height:1.15;letter-spacing:var(--ls-h1,-.02em);margin:0;color:var(--ink)}