:root{
    --ground:#ffffff; --panel:#f4f7f8; --panel-2:#eaeff2; --ink:#2b3138; --ink-hi:#0a1013; --muted:#5c6771;
    --blue:#0d3552; --blue-2:#1c5b91; --sky:#3aa0c9; --sun:#FFC61E; --vest:#e8792a; --sand:#8a5209;
    --rule:#cfd8dd; --rule-2:#e6ebee; --grid:#e7edf0; --ink-inv:#eaf1f6;
    --maxw:1300px; --r:18px; --r-sm:12px;
    --mono: ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
    --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--ground);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  img,svg{display:block;max-width:100%}
  a{color:var(--blue-2);text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
  section{padding:76px 0}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-2);margin:0 0 16px}
  h1,h2,h3{color:var(--ink-hi);line-height:1.06;letter-spacing:-.02em;margin:0}
  h1{font-size:clamp(40px,5.6vw,72px);font-weight:800}
  h2{font-size:clamp(30px,3.6vw,46px);font-weight:800}
  h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
  p{margin:0 0 1em}
  .lead{font-size:clamp(18px,1.5vw,21px);color:var(--muted)}
  .sec-head{max-width:56ch;margin-bottom:36px}
  .btn{display:inline-flex;align-items:center;gap:8px;font:600 16px/1 var(--sans);padding:15px 24px;border-radius:var(--r-sm);background:var(--blue);color:#fff;border:1px solid var(--blue);cursor:pointer;transition:transform .12s,background .15s,box-shadow .15s;box-shadow:0 1px 0 rgba(10,16,19,.04)}
  .btn:hover{background:#0a2a42;transform:translateY(-1px);box-shadow:0 8px 22px rgba(13,53,82,.18)}
  .btn.ghost{background:#fff;color:var(--blue);border-color:var(--rule);box-shadow:none}
  .btn.ghost:hover{border-color:var(--blue);background:#fff}
  .btn.big{padding:17px 30px;font-size:17px}

  /* top utility bar */
  .topbar{background:var(--blue);color:var(--ink-inv)}
  .topbar .wrap{display:flex;align-items:center;gap:16px;min-height:40px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;flex-wrap:wrap}
  .topbar .t-tag{opacity:.92}
  .topbar .t-right{margin-left:auto;display:flex;gap:18px;align-items:center}
  .topbar a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
  .topbar a:hover{border-color:#fff}

  /* header */
  header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--rule-2)}
  .bar{display:flex;align-items:center;gap:20px;height:70px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-weight:700;letter-spacing:.1em;color:var(--blue);font-size:15px}
  .brand .mk{width:36px;height:36px}
  nav.main{margin-left:auto;display:flex;gap:26px;align-items:center}
  nav.main a{font:500 15.5px/1 var(--sans);color:var(--ink)}
  nav.main a:hover,nav.main a[aria-current="page"]{color:var(--blue)}
  nav.main .btn{padding:11px 18px;color:#fff}
  .navtoggle{display:none}

  /* hero */
  /* THE PRESENCE DIAGRAM, the second mark.
     Every hero carries it at low opacity: the site is one node in a
     system, not the whole product. The radial gradient sits ON TOP of
     it so the drawing fades out behind the headline instead of
     competing with it. Faint by design; if you can read it easily it
     is too strong. */
  .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule-2);
    background-color:#fff;
    background-image:
      /* the wash that keeps type readable, unchanged */
      linear-gradient(to right, rgba(255,255,255,.90) 0%, rgba(255,255,255,.74) 26%,
                                rgba(255,255,255,.62) 46%, rgba(255,255,255,.18) 62%,
                                rgba(255,255,255,0) 74%),
      radial-gradient(135% 125% at 72% 12%, rgba(255,255,255,0) 62%, rgba(255,255,255,.80) 88%, #fff 100%),
      /* three depth layers. Each is a different file with a different seed,
         placed at a different scale and offset, so nothing lines up and the
         field never shows a repeat. Near is drawn last, so it sits on top. */
      /* two layers, not three. Three overlapping fields was the chaos:
         when everything is present at once nothing recedes, and depth needs
         something to recede. Near carries the detail, far carries the scale,
         and the middle was only ever filling space. */
      url(/assets/presence-l3.svg),
      url(/assets/presence-l1.svg),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:auto, auto, auto 128%, auto 190%, 32px 32px, 32px 32px;
    background-position:0 0, 0 0, right -60px center,
                        right -150px bottom -90px, 0 0, 0 0;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat}
  /* Narrow screens get their own wash. The desktop one runs left to right,
     to protect a text column that sits beside the card. On a phone there is
     no column, the text spans the full width, and that same gradient whitens
     almost the whole screen and erases the drawing. So mobile gets an even
     veil instead: light enough to read through, heavy enough to read over. */
  @media (max-width:820px){ .hero{
    background-image:
      linear-gradient(to bottom, rgba(255,255,255,.58) 0%, rgba(255,255,255,.76) 38%,
                                 rgba(255,255,255,.80) 72%, rgba(255,255,255,.62) 100%),
      radial-gradient(150% 60% at 50% 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,.55) 100%),
      url(/assets/presence-l3.svg),
      url(/assets/presence-l2.svg),
      url(/assets/presence-l1.svg),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:auto, auto, auto 78%, auto 62%, auto 120%, 32px 32px, 32px 32px;
    background-position:0 0, 0 0, left -30px top 12%, right -50px top 44%,
                        right -120px bottom -60px, 0 0, 0 0;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat} }
  .hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:center;padding:84px 32px 92px}
  .dim{display:flex;align-items:center;gap:0;margin:0 0 22px}
  .dim .tick{width:1px;height:10px;background:var(--blue)}
  .dim .line{height:1px;width:60px;background:var(--blue)}
  .dim span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-left:12px;color:var(--blue-2)}
  .hero h1 .u{color:var(--blue)}
  .hero p.sub{font-size:clamp(18px,1.55vw,22px);color:var(--muted);max-width:46ch;margin-top:22px}
  .actions{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
  .heronote{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--muted)}
  .heronote b{color:var(--ink-hi);font-weight:600}
  .herofig{position:relative;justify-self:center;width:100%;max-width:360px}
  .herocard{position:relative;background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:26px 26px 0;box-shadow:0 24px 60px rgba(13,53,82,.14);
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px}
  .herocard svg{width:100%;height:auto;color:var(--blue);filter:drop-shadow(0 10px 20px rgba(13,53,82,.12))}
  .herocard .plate{position:absolute;left:18px;top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--blue-2)}
  .herocard .plate.r{left:auto;right:18px}

  /* chip strip */
  .chips{background:var(--blue);color:#fff}
  .chips .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
  .chip{padding:26px 26px;border-left:1px solid rgba(255,255,255,.14)}
  .chip:first-child{border-left:0}
  .chip .ic{width:24px;height:24px;color:var(--sun);margin-bottom:12px}
  .chip b{display:block;color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
  .chip span{color:#c6d4e0;font-size:13.5px}

  /* pillars */
  .pillars .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .pillar{border:1px solid var(--rule-2);border-top:3px solid var(--blue);border-radius:var(--r);padding:30px 28px;background:#fff;transition:box-shadow .15s,transform .12s}
  .pillar:hover{box-shadow:0 16px 40px rgba(13,53,82,.10);transform:translateY(-2px)}
  .pillar .n{font-family:var(--mono);color:var(--vest);font-size:12px;letter-spacing:.24em}
  .pillar h3{margin:14px 0 10px}
  .pillar p{color:var(--muted);margin:0;font-size:15.5px}

  /* steps */
  .steps{background:var(--panel);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
  .stepgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px}
  .step{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r);padding:24px 22px;position:relative}
  .step .k{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--blue-2)}
  .step h3{font-size:18px;margin:12px 0 8px}
  .step p{color:var(--muted);font-size:14.5px;margin:0}

  /* band */
  .band{background:#fff}
  .band .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .band.alt{background:var(--panel);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
  .kvs{margin-top:4px}
  .kv{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid var(--rule-2)}
  .kv:first-child{border-top:1px solid var(--rule-2)}
  .kv .k{color:var(--ink-hi);font-weight:600;font-size:16px;white-space:nowrap}
  .kv .dot{flex:1;border-bottom:1px dotted var(--rule);position:relative;top:-4px}
  .kv .v{color:var(--muted);font-size:15px;text-align:right}

  /* compare */
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-top:8px}
  .compare .col{padding:30px 30px}
  .compare .col.own{background:#fff}
  .compare .col.rent{background:var(--panel-2)}
  .compare h3{font-size:16px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
  .compare .own h3{color:var(--blue)}
  .compare .rent h3{color:var(--muted)}
  .compare ul{list-style:none;margin:0;padding:0}
  .compare li{padding:11px 0 11px 28px;position:relative;border-bottom:1px solid var(--rule-2);font-size:15.5px}
  .compare li:last-child{border-bottom:0}
  .compare .own li{color:var(--ink-hi)}
  .compare .rent li{color:var(--muted)}
  .compare li::before{position:absolute;left:0;top:10px;font-family:var(--mono);font-size:13px}
  .compare .own li::before{content:"+";color:var(--blue)}
  .compare .rent li::before{content:"x";color:var(--vest)}

  /* audience */
  .aud{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
  .tag{border:1px solid var(--rule);border-radius:100px;padding:9px 16px;font-size:14px;color:var(--ink-hi);background:#fff}

  /* cta */
  .cta{background:var(--blue);color:#fff;position:relative;overflow:hidden}
  .cta::after{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      url(/assets/presence-l3-inv.svg),
      url(/assets/presence-l2-inv.svg),
      url(/assets/presence-l1-inv.svg);
    background-size:auto 140%, auto 105%, auto 190%;
    background-position:left -60px top -30px, center, right -140px bottom -90px;
    background-repeat:no-repeat, no-repeat, no-repeat;
    opacity:.9}
  .cta .wrap{text-align:center;position:relative;z-index:1}
  .cta h2{color:#fff;max-width:22ch;margin:0 auto}
  .cta p{color:#c9d6e2;margin:16px auto 0;max-width:48ch}
  .cta .btn{background:#fff;color:var(--blue);border-color:#fff;margin-top:26px}
  .cta .btn:hover{background:#eef3f7}

  /* footer */
  footer.site{background:#0a141d;color:#a7b4bd}
  .foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;padding:56px 32px 22px}
  .foot .tag{max-width:34ch;margin-top:14px}
  .foot .brand{color:#fff}
  .foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#75838d;margin:0 0 14px}
  .foot a{display:block;color:#a7b4bd;padding:6px 0}
  .foot a:hover{color:#fff}
  .rule{border-top:1px solid #17232e;margin:8px 32px 0}
  .fine{max-width:var(--maxw);margin:0 auto;padding:18px 32px 34px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#5f6d77}

  /* tablet */
  @media (max-width:1040px){
    .foot{grid-template-columns:1fr 1fr 1fr}
    .band .wrap{gap:40px}
  }
  /* mobile */
  @media (max-width:820px){
    .wrap{padding:0 22px}
    section{padding:56px 0}
    nav.main{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--rule-2);flex-direction:column;align-items:stretch;gap:0;padding:8px 0;display:none;box-shadow:0 18px 40px rgba(10,16,19,.10)}
    nav.main a{padding:14px 22px}
    nav.main .btn{margin:10px 22px;justify-content:center}
    label.navtoggle{display:inline-flex;margin-left:auto;background:none;border:1px solid var(--rule);border-radius:var(--r-sm);width:44px;height:40px;align-items:center;justify-content:center;cursor:pointer}
    .navtoggle span,.navtoggle span::before,.navtoggle span::after{content:"";display:block;width:20px;height:2px;background:var(--ink-hi);position:relative}
    .navtoggle span::before{position:absolute;top:-6px}
    .navtoggle span::after{position:absolute;top:6px}
    #nav:checked ~ nav.main{display:flex}
    .hero .wrap{grid-template-columns:1fr;gap:34px;padding:44px 22px 54px}
    .herofig{order:-1;justify-self:start;max-width:220px}
    .chips .wrap{grid-template-columns:1fr 1fr}
    .chip{border-top:1px solid rgba(255,255,255,.14)}
    .chip:nth-child(-n+2){border-top:0}
    .chip:nth-child(odd){border-left:0}
    .pillars .grid{grid-template-columns:1fr}
    .stepgrid{grid-template-columns:1fr 1fr}
    .band .wrap{grid-template-columns:1fr;gap:26px}
    .compare{grid-template-columns:1fr}
    .foot{grid-template-columns:1fr 1fr}
  }
  @media (max-width:480px){
    .chips .wrap{grid-template-columns:1fr}
    .chip{border-left:0}
    .stepgrid{grid-template-columns:1fr}
    .kv .v{display:none}
    .foot{grid-template-columns:1fr}
    .topbar .t-right{display:none}
  }

/* growth art and filler */
.growthwrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.growthchart{width:100%;height:auto;max-width:560px;margin:0 auto;display:block}
.growthchart text{font-family:var(--mono)}
.cap-illus{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);margin-top:16px}
.cta .curve{position:absolute;right:0;bottom:0;width:min(560px,58%);height:auto;opacity:.15;color:#fff;pointer-events:none;z-index:0}
@media (max-width:820px){ .growthwrap{grid-template-columns:1fr;gap:28px} .cta .curve{width:82%;opacity:.1} }

/* spec table: a ruled "what you get" panel, cleaner than dot-leader lines */
.spectable-wrap{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.spectable{width:100%;border-collapse:collapse;background:#fff}
.spectable th{background:var(--blue);color:#fff;text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:12px 16px;font-weight:400}
.spectable td{padding:12px 16px;border-top:1px solid var(--rule-2);font-size:15px}
.spectable tbody tr:nth-child(even) td{background:var(--panel)}
.spectable td:first-child{color:var(--ink-hi);font-weight:600}
.spectable td:last-child{color:var(--muted);text-align:right}

/* round every form field */
input,textarea,select{border-radius:var(--r-sm)}

/* hero personality: transparent 'the internet', italic 'can't tell' */
.hero h1 .ghost{color:rgba(11,17,20,.30)}
.hero h1 em{font-style:italic}
.hero h1 .hollow{color:var(--blue);font-style:italic}
@supports ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){.hero h1 .hollow{color:transparent;-webkit-text-stroke:2px var(--blue);text-stroke:2px var(--blue)}}

/* topbar sticker header + dual CTA */
.topbar .t-tag{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 13px;opacity:1}
.topbar .t-cta{gap:10px;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:5px 14px;background:rgba(255,255,255,.06)}
.topbar .t-cta a{border-bottom:0;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:11px;white-space:nowrap}
.topbar .t-cta .sep{opacity:.45}

/* ═══════════════════════════════════════════════════════════════════════
   THE BLUEPRINT LAYER

   Everything above this line is the site. Everything below turns it into a
   drawing. It is appended rather than woven in so it can be deleted in one
   cut if it ever stops earning its place.

   The principle: a blueprint is not blue paper with a building on it. It is
   a sheet with a coordinate system, drawings placed on that system, and
   annotation that tells you what you are looking at. So the moves here are
   structural, not decorative.

     1  the page becomes graph paper, with a heavy line every fifth square
     2  a sheet border with registration marks, the edge of the drawing
     3  every section is a detail, auto lettered, with a leader into its title
     4  panels get corner ticks instead of full frames
     5  dividers are centerlines, dash dot, not solid rules
     6  the footer becomes a title block

   Nothing here changes a single word of copy.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --grid-min:#e9eef1;      /* the fine square */
  --grid-maj:#dbe4e9;      /* every fifth, heavier, the way real paper is ruled */
  --draft:#9aabb6;         /* annotation ink, quieter than body text */
}

/* ── 1 · THE PAPER ───────────────────────────────────────────────────
   Two grids, not one. A single even grid reads as a spreadsheet. The
   heavier line every fifth square is what the eye recognises as drafting
   stock, and it gives the page a measurable rhythm. 30px minor, 150 major. */
body{
  background-color:var(--ground);
  background-image:
    linear-gradient(var(--grid-maj) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-maj) 1px, transparent 1px),
    linear-gradient(var(--grid-min) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-min) 1px, transparent 1px);
  background-size:150px 150px, 150px 150px, 30px 30px, 30px 30px;
  background-position:0 0;
  background-attachment:fixed;   /* the sheet stays put, the drawings scroll */
}

/* white sections were hiding the paper. They go transparent; the panels and
   cards that sit on top stay opaque, which is what makes them read as pasted
   onto the sheet rather than printed into it. */
.band{background:transparent}
.band.alt{background:rgba(244,247,248,.82)}
.steps{background:rgba(244,247,248,.86)}

/* ── 2 · NO SHEET BORDER ─────────────────────────────────────────────
   There used to be a hairline frame inset from the viewport with a
   registration tick at each corner. It was the most literally "drafting"
   element on the site and it had to go, because it was fixed to the viewport
   while the navy topbar scrolls under it. The line cut straight across that
   dark bar and read as a rendering artifact rather than as the edge of a
   sheet. Austin spotted it as "a weird border", which is exactly right.

   Nothing is lost. The paper, the title block, the detail bubbles and the
   centerlines all carry the drawing idea, and none of them fight the layout.
   A frame is the one piece of drafting furniture that has to sit outside the
   content, and in a scrolling page there is no outside. */

/* ── 3 · EVERY SECTION IS A DETAIL ───────────────────────────────────
   On a real sheet each drawing carries a bubble with its letter, and a
   leader line running from the bubble to what it labels.

   The lettering is a CSS counter, so sections number themselves. Add a
   section, reorder them, delete one: the sequence stays correct and nobody
   has to remember to renumber anything by hand. */
/* The counter advances on the eyebrow, not on the section. Counting sections
   meant the hero and the chips bar silently consumed A and B, so the first
   bubble a visitor ever saw was lettered C, which reads like two drawings
   went missing. Counting the labels themselves makes the visible sequence
   start at A and stay contiguous. */
body{counter-reset:detail}
.eyebrow{counter-increment:detail}
.eyebrow{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.eyebrow::before{
  content:counter(detail, upper-alpha);
  flex:0 0 auto;display:inline-grid;place-items:center;
  width:22px;height:22px;margin-right:0;border-radius:50%;
  border:1.5px solid var(--blue-2);color:var(--blue-2);
  font-family:var(--mono);font-size:11px;letter-spacing:0;line-height:1}
.eyebrow::after{
  content:"";flex:0 0 26px;height:1px;background:var(--blue-2);opacity:.42;
  margin:0 12px 0 0}
/* The leader has to sit BETWEEN the bubble and the words, so the run reads
   bubble, line, label. The text of .eyebrow is an anonymous flex item at
   order 0, and ::after generates after it in the box tree, so at equal order
   the line landed to the RIGHT of the label. Pulling both pseudo elements to
   order -1 puts them ahead of the text, and ::before still precedes ::after
   inside that group, which gives the run the correct order. */
.eyebrow::before{order:-1;margin-right:10px}
.eyebrow::after{order:-1}

/* ── 4 · PANELS GET TICKS, NOT FRAMES ────────────────────────────────
   A full border round a card says "box". Four corner ticks say "this area
   is called out", which is the drafting convention and is also lighter on
   the page. The card keeps a hairline so it still separates from the paper. */
.pillar, .herocard, .spectable-wrap{position:relative}
.pillar::before, .pillar::after,
.herocard::before, .herocard::after{
  content:"";position:absolute;width:11px;height:11px;pointer-events:none;
  border:0 solid var(--blue-2);opacity:.5}
.pillar::before, .herocard::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.pillar::after, .herocard::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}

/* ── 5 · CENTERLINES ─────────────────────────────────────────────────
   Dash dot is the drafting line type for an axis. Solid rules between
   sections read as a web page; centerlines read as a drawing. */
.band.alt, .steps{border-top:0;border-bottom:0;position:relative}
.band.alt::before, .band.alt::after,
.steps::before, .steps::after{
  content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  background-image:repeating-linear-gradient(to right,
    var(--rule) 0 14px, transparent 14px 20px,
    var(--rule) 20px 23px, transparent 23px 29px)}
.band.alt::before, .steps::before{top:0}
.band.alt::after, .steps::after{bottom:0}

/* ── 6 · THE TITLE BLOCK ─────────────────────────────────────────────
   Every drawing ends in a title block: who drew it, what it is, what scale,
   which revision. It is the single most recognisable piece of drafting
   furniture, and unlike most blueprint styling it carries real information
   rather than pretending to. */
.titleblock{border:1.5px solid rgba(255,255,255,.22);margin:0 32px 30px;
  display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr .8fr;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.titleblock div{border-left:1px solid rgba(255,255,255,.16);padding:11px 14px}
.titleblock div:first-child{border-left:0}
.titleblock .k{display:block;color:#6b7a85;font-size:9px;letter-spacing:.22em;margin-bottom:5px}
.titleblock .v{color:#dbe6ee}
@media (max-width:820px){
  .titleblock{grid-template-columns:1fr 1fr;margin:0 20px 22px}
  .titleblock div:nth-child(odd){border-left:0}
  .titleblock div{border-top:1px solid rgba(255,255,255,.16)}
}

/* the hero already carried its own grid. It now inherits the paper, so its
   local 32px squares are dropped to avoid a moire against the 30px sheet. */
.hero{background-attachment:scroll}

/* the footer tagline was picking up the global .tag pill, white on near
   black, which read as a sticker somebody left on the drawing. On the sheet
   it is a note, so it is set as one. */
.foot .tag{background:none;border:0;border-left:2px solid var(--sun);
  border-radius:0;padding:2px 0 2px 13px;color:#9fb0bb;font-size:14px}

/* round 2 audit, 23 Sep */
/* the logo stands alone: no card, no border, no shadow, no plate */
.herofig .heromark{display:block;width:100%;height:auto;aspect-ratio:1/1;color:var(--blue)}
.herofig{max-width:400px}
/* phones already show the mark in the header, so the hero gives that space to the headline and the buttons */
@media (max-width:820px){.herofig{display:none}}
/* the headline is solid ink; emphasis is color, never transparency or outline */
.hero h1 .accent,.hero h1 .ghost,.hero h1 .hollow{color:var(--blue);-webkit-text-stroke:0;font-style:normal}
.hero p.sub{color:var(--ink)}
/* the longer headline gets a smaller size and a shorter top margin, so the buttons stay on the first screen */
.hero h1.long{font-size:clamp(34px,4.3vw,58px)}
@media (min-width:821px){.hero .wrap{padding-top:56px}}
/* design pass, 23 Sep */
/* ONE ART DIRECTION. The paper grid on the body is the blueprint, everywhere.
   Illustration only lives where it has its own frame: the hero figure and the
   outer edges of the navy band. Nothing is ever drawn behind a line of text. */

/* heroes sit on the paper; no second grid (it made a moire against the sheet), no instruments */
html body .hero, html body .page-head{background:rgba(255,255,255,.72);background-image:none}
html body .hero{border-bottom:1px solid var(--rule-2)}
.hero .copy{position:relative;z-index:1}

/* inner pages: a title, not a billboard. The section itself carries no padding;
   the wrap does, so the space is set once and not doubled */
html body .hero, html body .page-head{padding:0}
.hero.hero-page .wrap, html body .page-head .wrap{padding:52px 32px 44px}
.hero.hero-page h1{font-size:clamp(36px,4.6vw,60px)}
@media (max-width:820px){.hero.hero-page .wrap, html body .page-head .wrap{padding:36px 22px 32px}}

/* home hero figure: the mark on its own construction drawing, inside its column only */
.herofig{max-width:440px}
.herofig .herodraw{display:block;width:100%;height:auto;color:var(--blue)}
@media (max-width:820px){.herofig{display:none}}

/* content bands are clean paper; the dash dot centerlines stay */
.band.alt::before, .band.alt::after, .steps::before, .steps::after{
  content:"";position:absolute;left:0;right:0;height:1px;inset:auto 0;pointer-events:none;opacity:1;
  background-image:repeating-linear-gradient(to right, var(--rule) 0 14px, transparent 14px 20px, var(--rule) 20px 23px, transparent 23px 29px);
  background-size:auto}
.band.alt::before, .steps::before{top:0}
.band.alt::after, .steps::after{bottom:0}

/* the navy band: its own faint grid, and a compass swing at each outer edge, clear of the words */
.cta{background-color:var(--blue);
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:30px 30px}
.cta::after{background-image:url(/assets/band-field.svg);background-size:auto 100%;background-position:center;background-repeat:no-repeat;opacity:1}
.cta .wrap{padding-top:8px;padding-bottom:8px}

/* the mark, small: header and footer use the compact lockup */
.brand .mk{width:34px;height:34px;flex:0 0 auto}
.foot .brand .mk{--mk-screen:#fff;--mk-cut:#0a141d;width:30px;height:30px}

/* the growth chart sits in a card like every other figure */
.growthchart{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r);padding:10px}

/* the nav button stays white text on its own page (contact marked it current, navy on navy) */
nav.main a.btn[aria-current="page"]{color:#fff}

/* spacing the old title block used to provide, and a heading that was touching its paragraph */
footer.site .foot{padding-top:56px}
@media (max-width:820px){footer.site .foot{padding-top:44px}}
.growthwrap h2{margin-bottom:18px}
/* the topbar hook holds one line on a phone */
@media (max-width:480px){.topbar .t-tag{font-size:10.5px;white-space:nowrap;padding:3px 11px}.topbar .wrap{min-height:36px}}

/* the client screenshot sits in a browser frame, so it reads as a live site, not a pasted image */
.chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#eef2f4;border-bottom:1px solid var(--rule-2)}
.chrome i{width:9px;height:9px;border-radius:50%;background:#cfd8dd}
.chrome b{margin-left:10px;flex:1;max-width:220px;height:18px;border-radius:9px;background:#fff;border:1px solid var(--rule-2);
  font:500 10.5px/16px var(--mono);letter-spacing:.06em;color:var(--muted);padding:0 10px;overflow:hidden;white-space:nowrap}
/* system pass, 24 Sep */
/* the stat band: the reason the system exists, sourced */
.statband{background:#0a2236;color:#dbe6ef;position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:30px 30px}
.statband .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.stat .num{font-size:clamp(72px,11vw,150px);font-weight:800;letter-spacing:-.04em;line-height:.9;color:#fff}
.stat .unit{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sun);margin-top:18px;max-width:30ch;line-height:1.6}
.statcopy h2{color:#fff;font-size:clamp(26px,3vw,38px);margin-bottom:16px}
.statcopy p{color:#c3d2de;font-size:17px;max-width:54ch}
.statcopy .src{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:#8ea6ba;margin-top:18px}
.statcopy .src a{color:#c3d2de;border-bottom:1px solid rgba(255,255,255,.3)}

/* the loop */
.system{position:relative}
.loopwrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.loopfig{max-width:520px;width:100%;justify-self:center}
.loopdraw{width:100%;height:auto;display:block}
.loopdraw .lp-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;fill:#5c6771}
.loopdraw .lp-w{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;fill:#0d3552}
.loopdraw .lp-c{font-family:var(--mono);font-size:10px;letter-spacing:.2em;fill:#c3d2de}
.legend{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:10px}
.legend .k{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 6px 0 14px;vertical-align:-1px;border:2px solid var(--blue)}
.legend .k.you{border-color:#e8a200;background:#fff8e1}
.stages{list-style:none;margin:0;padding:0;counter-reset:none}
.stages li{background:#fff;border:1px solid var(--rule-2);border-left:3px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;margin:0 0 14px}
.stages li.you{border-left-color:#e8a200}
.stages .st-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2)}
.stages li.you .st-k{color:#9a6a00}
.stages h3{font-size:19px;margin:6px 0 6px}
.stages p{color:var(--muted);margin:0;font-size:15.5px}

/* maintenance grid */
.maint{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mcard{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r);padding:22px 20px}
.mcard .ic{width:26px;height:26px;color:var(--blue-2);margin-bottom:14px}
.mcard h3{font-size:17px;margin:0 0 6px}
.mcard p{color:var(--muted);font-size:14.5px;margin:0;line-height:1.55}

/* who does what */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#fff}
.split .yours{background:#fff8e1;padding:30px;border-right:1px solid var(--rule)}
.split .ours{padding:30px}
.split .who{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-2);margin:0 0 10px}
.split .yours .who{color:#9a6a00}
.split .big{font-size:clamp(24px,2.6vw,32px);font-weight:800;color:var(--ink-hi);letter-spacing:-.02em;line-height:1.1;margin:0 0 18px}
.split ul{list-style:none;margin:0;padding:0}
.split li{padding:10px 0 10px 26px;position:relative;border-bottom:1px solid var(--rule-2);font-size:16px;color:var(--ink-hi)}
.split li:last-child{border-bottom:0}
.split li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:2px;background:var(--blue)}
.split .yours li::before{background:#e8a200}
.split .note{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin:16px 0 0}

/* the rhythm, a schedule you can read down */
.rhythm{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#fff}
.rw{display:grid;grid-template-columns:190px 150px 1fr;gap:18px;align-items:baseline;padding:18px 24px;border-top:1px solid var(--rule-2)}
.rw:first-child{border-top:0}
.rw .when{font-weight:700;color:var(--ink-hi)}
.rw .who{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-2)}
.rw .who.you{color:#9a6a00}
.rw p{margin:0;color:var(--muted);font-size:15.5px}

@media (max-width:1040px){.maint{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .statband .wrap{grid-template-columns:1fr;gap:26px}
  .loopwrap{grid-template-columns:1fr;gap:28px}
  .split{grid-template-columns:1fr}
  .split .yours{border-right:0;border-bottom:1px solid var(--rule)}
  .rw{grid-template-columns:1fr;gap:4px}
}
@media (max-width:480px){.maint{grid-template-columns:1fr}}
/* type polish, 24 Sep */
/* headings balance their lines, so no headline ends on a lonely last word;
   body copy avoids a single word on its last line */
h1,h2,h3,.stat .unit,.statcopy h2{text-wrap:balance}
p,li{text-wrap:pretty}
/* section heads were capped at 56 characters of body text, which squeezed the
   big headings into three narrow lines. Wider cap, balanced breaks */
.sec-head{max-width:760px}
/* the home headline sets in three lines on every desktop width: a wider copy
   column, a slightly smaller size, and the figure takes what is left */
@media (min-width:821px){.hero .wrap{grid-template-columns:1.5fr .6fr;gap:40px}}
.hero h1.long{font-size:clamp(30px,3.75vw,56px)}
@media (min-width:481px) and (max-width:820px){.hero h1.long{font-size:clamp(36px,6vw,46px)}}
@media (max-width:480px){.hero h1.long{font-size:31px}}
.stat .unit{max-width:34ch}
/* accessibility pass, 24 Sep */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.foot h2.fh{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8d9ba5;margin:0 0 14px;font-weight:600;line-height:1.4}
.split .yours .who,.stages li.you .st-k,.rw .who.you{color:#7a5300}
.fine{color:#8d9ba5}
/* search pass, 25 Sep */
main p a:not(.btn), main li a:not(.btn){color:var(--blue-2);border-bottom:1px solid rgba(28,91,145,.3)}
main p a:not(.btn):hover, main li a:not(.btn):hover{border-bottom-color:var(--blue-2)}
/* copy and AI pass, 25 Sep */
.aisec .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.aichecks{list-style:none;margin:22px 0 0;padding:0}
.aichecks li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--rule-2);color:var(--muted);font-size:15.5px}
.aichecks li:last-child{border-bottom:1px solid var(--rule-2)}
.aichecks li b{color:var(--ink-hi)}
.aichecks li::before{content:"";position:absolute;left:0;top:17px;width:14px;height:14px;border-radius:50%;background:var(--sun);box-shadow:inset 0 0 0 4px #fff8e1}
.aicard{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:22px;box-shadow:0 20px 50px rgba(13,53,82,.10);position:relative}
.aicard .ai-tag{position:absolute;top:14px;right:16px;margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:2px 9px}
.ai-q{background:var(--blue);color:#fff;border-radius:16px 16px 4px 16px;padding:12px 16px;margin:28px 0 14px auto;max-width:88%;font-size:15px}
.ai-a{background:var(--panel);border-radius:16px 16px 16px 4px;padding:14px 16px;font-size:14.5px;color:var(--ink)}
.ai-a p{margin:0 0 8px}
.ai-a ol{margin:0;padding-left:20px}
.ai-a li{margin:0 0 8px}
.ai-a li span{display:block;color:var(--muted);font-size:13.5px}
.ai-a li.win b{color:var(--blue);background:#fff3c4;padding:0 4px;border-radius:3px}
.ai-note{margin:14px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--muted)}
@media (max-width:820px){.aisec .wrap{grid-template-columns:1fr;gap:28px}}
/* who does what, 25 Sep */
.split2{display:grid;grid-template-columns:.78fr 1.22fr;gap:22px;align-items:stretch}
.yours2{display:flex;flex-direction:column;background:var(--blue);color:#dbe6ef;border-radius:var(--r);padding:30px;position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px}
.yours2 .who,.ours2 .who{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px}
.yours2 .who{color:var(--sun)}
.ours2 .who{color:var(--blue-2)}
.yours2 .big{font-size:clamp(28px,3vw,38px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.05;margin:0 0 24px}
.ysteps{list-style:none;margin:0;padding:0}
.ysteps li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.14);font-size:16.5px;color:#fff}
.ysteps li span{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:var(--blue);font:700 14px/1 var(--mono)}
.ours2{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:30px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{border:1px solid var(--rule-2);border-radius:var(--r-sm);padding:16px;background:var(--panel)}
.tile .ic{width:24px;height:24px;color:var(--blue-2);margin-bottom:10px}
.tile b{display:block;font-size:17px;color:var(--ink-hi);margin-bottom:4px}
.tile span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}
.ours2 .note{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin:18px 0 0}
.yfoot{margin:auto 0 0;padding-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#9fb6c9}
@media (max-width:1040px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.split2{grid-template-columns:1fr}}
@media (max-width:480px){.tiles{grid-template-columns:1fr}.yours2,.ours2{padding:24px}}
/* audience centered, 25 Sep */
.audsec .sec-head{margin-left:auto;margin-right:auto;text-align:center}
.audsec .eyebrow{justify-content:center}
.audsec .aud{justify-content:center;max-width:980px;margin-left:auto;margin-right:auto}
/* contrast, 25 Sep */
:root{
  --ink:#1d232a;
  --muted:#3e4851;
  --draft:#66767f;
  --grid-maj:#e3eaee;
  --grid-min:#f0f3f5;
  --grid:#edf1f3;
}
.lead{color:var(--muted)}
.band.alt{background:rgba(244,247,248,.92)}
.steps{background:rgba(244,247,248,.94)}
.fine{color:#45515a}
.titleblock .k{color:#4f5c66}
.foot h4{color:#9aa8b2}
.foot h2.fh{color:#aab7c0}
.statcopy .src{color:#b3c6d6}
.yfoot{color:#b9cbda}
.aichecks li,.aichecks li:last-child{border-color:var(--rule)}
/* visuals, 25 Sep */
/* figure card: white sheet on the drafting grid, the same frame as every other figure */
.vz-card{margin:0;min-width:0;background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:22px 24px 18px;box-shadow:0 18px 44px rgba(13,53,82,.09)}
.vz-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);margin:0 0 6px}
.vz-h{font-size:19px;font-weight:700;color:var(--ink-hi);letter-spacing:-.01em;line-height:1.25;margin:0 0 14px;text-wrap:balance}
.vz-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.vz-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;cursor:default}
.vz-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.vz-sourced{color:var(--blue-2);background:#eef4f9}
.vz-modeled{color:#7a5300;background:#fff6d6}
.vz-measured{color:#1d6a3a;background:#eaf6ee}
.vz-terms{color:var(--blue);background:var(--panel)}
.vz-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.vz-svg{width:100%;height:auto;display:block;overflow:visible}

/* bar chart */
.vz-bars .vz-gl{stroke:var(--rule-2);stroke-width:1}
.vz-bars .vz-base{stroke:var(--ink-hi);stroke-width:1.2}
.vz-bars .vz-ax{font:500 12px var(--mono);fill:var(--muted)}
.vz-bars .vz-yr{font:600 13px var(--mono);fill:var(--ink-hi)}
.vz-bars .vz-val{font:700 14px var(--sans);fill:var(--ink-hi)}
.vz-bars .vz-bar{fill:var(--blue-2)}
.vz-bars .vz-bar.hi{fill:var(--blue)}

/* gantt */
.vz-gantt .g-band{fill:var(--panel)}
.vz-gantt .g-grid{stroke:var(--rule-2);stroke-width:1}
.vz-gantt .g-m{font:600 12.5px var(--mono);fill:var(--muted)}
.vz-gantt .g-mk{letter-spacing:.12em;text-transform:uppercase;font-size:10.5px}
.vz-gantt .g-lbl{font:600 14px var(--sans);fill:var(--ink-hi)}
.vz-gantt .g-note{font:500 12px var(--mono);fill:var(--muted)}
.vz-gantt .g-in{fill:var(--blue)}
.vz-gantt .g-bar{fill:var(--blue-2)}
.vz-gantt .g-navy{fill:var(--blue)}
.vz-gantt .g-sun{fill:var(--sun);stroke:#7a5300;stroke-width:.8}
.vz-gantt .g-cont{fill:#dbe7f1;stroke:var(--blue-2);stroke-width:1}
.vz-gantt .g-own{fill:#ffe68f;stroke:#7a5300;stroke-width:1}
.vz-gantt .g-mile{fill:var(--sun);stroke:var(--blue);stroke-width:1.6}

/* tables */
.vz-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45;color:var(--ink)}
.vz-table th,.vz-table td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--rule-2)}
.vz-table thead th{font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-2);border-top:0;padding-top:4px;vertical-align:bottom}
.vz-table tbody th{font-weight:700;color:var(--ink-hi)}
.vz-table tr > :first-child{padding-left:0}
.vz-table tr > :last-child{padding-right:0}
.vz-cmp .vz-table{min-width:600px}
.vz-cmp .vz-table tbody th{width:22%}
.vz-cmp .vz-table .us{background:#eef4f9;color:var(--ink-hi);font-weight:600;padding-left:12px;padding-right:12px}
.vz-cmp .vz-table thead .us{background:var(--blue);color:#fff;border-radius:10px 10px 0 0;padding-top:9px}
.vz-cmp .vz-table tbody tr:last-child .us{border-radius:0 0 10px 10px}
.vz-look{min-width:460px;font-size:14px}
.vz-look tbody th{width:26%}
.vz-short tbody th{width:44%}
.vz-pieces .vz-short tbody th{width:40%}

/* bar table */
.vz-bt{width:100%;border-collapse:collapse}
.vz-bt th,.vz-bt td{padding:11px 0;border-top:1px solid var(--rule-2);vertical-align:middle}
.vz-bt thead th,.vz-bt thead .n{font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-2);border-top:0;padding:0 0 6px}
.vz-bt thead .n{text-align:right;padding-right:14px}
.vz-bt th{text-align:left;font-size:15.5px;font-weight:700;color:var(--ink-hi);line-height:1.3;width:44%;padding-right:12px}
.vz-bt th span{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
.vz-bt .n{font:800 22px/1 var(--sans);color:var(--ink-hi);text-align:right;padding-right:14px;white-space:nowrap;width:1%}
.vz-bt .b{width:40%}
.vz-bt .b i{display:block;height:14px;border-radius:3px;background:var(--blue-2)}
.vz-bt tbody tr:first-child .b i{background:var(--blue)}

/* the Gantt's table twin: hidden on wide screens, the phone view below 560px */
.vz-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:560px){
  .vz-alt{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  .vz-gscroll{display:none}
  .vz-galt{font-size:14px}
  .vz-bars .vz-ax{font-size:16px}
  .vz-bars .vz-yr{font-size:18px}
  .vz-bars .vz-val{font-size:20px}
  .vz-galt td:last-child{white-space:nowrap;text-align:right;font-weight:700;color:var(--ink-hi)}
}

/* wide tables on phones: one block per row, each cell labeled */
@media (max-width:560px){
  .vz-table.vz-stack{min-width:0}
  .vz-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vz-stack tr{display:block;border-top:1px solid var(--rule-2);padding:12px 0 10px}
  .vz-stack tbody th,.vz-stack td{display:grid;grid-template-columns:118px 1fr;gap:10px;width:auto!important;border:0;padding:3px 0}
  .vz-stack tbody th{display:block;padding:0 0 6px;font-size:15.5px}
  .vz-stack td::before{content:attr(data-l);font:600 10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-2);padding-top:2px}
  .vz-cmp .vz-stack .us,.vz-cmp .vz-stack tbody tr:last-child .us{background:#eef4f9;border-radius:6px;padding:5px 8px;margin:0 -8px}
}

/* layouts */
.hero .wrap.vz-hwrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.vz-hwrap .copy{max-width:none!important}
.vz-hwrap .lead,.vz-hwrap p.sub{max-width:52ch!important}
.vz-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.vz-2col .vz-main > *{max-width:none!important}
@media (min-width:821px){.vz-sticky{position:sticky;top:96px}}
.vz-termgrid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
.vz-termgrid .kvs{margin-top:0}
.clients.vz-clients{grid-template-columns:minmax(300px,1fr) minmax(0,2fr);align-items:start}
.vz-pieces .vz-short th,.vz-pieces .vz-short td{padding-top:13px;padding-bottom:13px}

/* on navy: the stat band carries the same chart */
.vz-band{margin:26px 0 0;max-width:520px}
.statband .vz-bars .vz-gl{stroke:rgba(255,255,255,.12)}
.statband .vz-bars .vz-base{stroke:rgba(255,255,255,.55)}
.statband .vz-bars .vz-ax{fill:#b9cbda}
.statband .vz-bars .vz-yr{fill:#dbe6ef}
.statband .vz-bars .vz-val{fill:#fff}
.statband .vz-bars .vz-bar{fill:#6b9cc8}
.statband .vz-bars .vz-bar.hi{fill:var(--sun)}
.statband .vz-bars .vz-val.hi{fill:var(--sun)}
.statband .vz-foot{color:#c3d2de}
.statband .vz-sourced{color:#dbe6ef;background:rgba(255,255,255,.06)}

@media (max-width:1100px){
  .vz-termgrid{grid-template-columns:1fr;gap:34px}
  .vz-2col{gap:36px}
  .hero .wrap.vz-hwrap{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:32px}
}
@media (max-width:900px){.clients.vz-clients{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .hero .wrap.vz-hwrap{grid-template-columns:1fr}
  .vz-2col{grid-template-columns:1fr;gap:30px}
  .clients.vz-clients{grid-template-columns:1fr}
}
@media (max-width:480px){
  .vz-card{padding:18px 16px 16px}
  .vz-bt .n{font-size:19px}
}
/* faq, 25 Sep */
.fq-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px;align-items:start}
.fq-rail{position:sticky;top:96px;background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:20px 18px 16px}
.fq-rk,.fq-total{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);margin:0 0 10px}
.fq-total{color:var(--muted);letter-spacing:.08em;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--rule-2)}
.fq-chips{display:flex;flex-direction:column;gap:2px}
.fq-chips a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink-hi);font-weight:600;font-size:15.5px}
.fq-chips a b{font:700 12px/1 var(--mono);color:var(--blue);background:var(--panel);border:1px solid var(--rule-2);border-radius:999px;padding:5px 8px}
.fq-chips a:hover{background:var(--panel)}
.fq-chips a:focus-visible{outline:2px solid var(--blue-2);outline-offset:1px}
.fq-group{padding:0;margin:0 0 44px;scroll-margin-top:96px}
.fq-gh{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;margin:0 0 14px}
.fq-n{font:700 13px/1 var(--mono);color:var(--blue);background:var(--sun);border-radius:6px;padding:6px 7px}
.fq-gh h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.015em}
.fq-gh p{grid-column:2;margin:6px 0 0;color:var(--muted);font-size:15.5px}
.fq{background:#fff;border:1px solid var(--rule);border-radius:var(--r-sm);margin:0 0 10px;scroll-margin-top:96px;transition:box-shadow .15s,border-color .15s}
.fq[open]{border-color:#b9c7d0;box-shadow:0 10px 28px rgba(13,53,82,.08)}
.fq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;cursor:pointer;border-radius:var(--r-sm)}
.fq summary::-webkit-details-marker{display:none}
.fq[open] summary{border-bottom:1px solid var(--rule-2);border-radius:var(--r-sm) var(--r-sm) 0 0}
.fq summary:hover h3{color:var(--blue)}
.fq summary:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.fq summary h3{font-size:18px;line-height:1.35;color:var(--ink-hi);letter-spacing:-.01em;margin:0}
.fq-ic{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule);color:var(--blue);background:var(--panel);transition:transform .2s,background .15s}
.fq-ic svg{width:15px;height:15px}
.fq[open] .fq-ic{transform:rotate(45deg);background:var(--blue);border-color:var(--blue);color:#fff}
.fq-a{padding:0 20px 20px;max-width:none}
.fq-a p{margin:0;font-size:16px;line-height:1.65;color:var(--ink);max-width:70ch}
.fq-a .fq-lead{font-size:17px;font-weight:600;color:var(--ink-hi);line-height:1.5;padding:16px 0 10px 14px;position:relative}
.fq-a .fq-lead::before{content:"";position:absolute;left:0;top:20px;bottom:12px;width:3px;border-radius:2px;background:var(--sun)}
.fq-a p a{color:var(--blue-2);border-bottom:1px solid var(--rule)}
.fq-a p a:hover{border-color:var(--blue-2)}
.fq-ask{display:flex;align-items:center;justify-content:space-between;gap:24px 32px;flex-wrap:wrap;margin-top:8px;padding:28px 30px;border-radius:var(--r);background:var(--blue);color:#dbe6ef;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px}
.fq-ask h2{color:#fff;font-size:clamp(24px,2.4vw,30px);margin:0 0 6px}
.fq-ask p{margin:0;color:#dbe6ef;max-width:46ch}
.fq-ask .btn{background:#fff;color:var(--blue);border-color:#fff}
.fq-ask .btn:hover{background:#eef3f7}
.fq-go{color:var(--ink-hi);border-bottom:1px solid var(--rule)}
.fq-go:hover{color:var(--blue);border-color:var(--blue-2)}
@media (max-width:1100px){.fq-layout{grid-template-columns:220px minmax(0,1fr);gap:40px}}
@media (max-width:820px){
  .fq-layout{grid-template-columns:1fr;gap:26px}
  .fq-rail{position:static;background:none;border:0;padding:0;min-width:0}
  .fq-rk,.fq-total{display:none}
  .fq-chips{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none}
  .fq-chips::-webkit-scrollbar{display:none}
  .fq-chips a{flex:0 0 auto;white-space:nowrap;border:1px solid var(--rule);background:#fff;border-radius:999px;padding:9px 14px;font-size:14.5px}
  .fq-band [data-vz="faq-short"],.hero [data-vz="faq-short"]{display:none}
  .fq-group{margin-bottom:34px}
}
@media (max-width:480px){
  .fq summary{padding:16px}
  .fq summary h3{font-size:17px}
  .fq-a{padding:0 16px 16px}
  .fq-ask{padding:24px 20px}
  .fq-ask .btn{width:100%;justify-content:center}
}
/* socials, 25 Sep */
.foot .socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.foot .socials a{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 12px}
.foot .socials a:hover{border-color:var(--sun);color:var(--sun)}
/* cohesion, 25 Sep */
:root{
  --pad-lg:28px; --pad-md:20px;
  --card-bd:1px solid var(--rule);
  --card-sh:0 1px 2px rgba(13,53,82,.05),0 10px 28px rgba(13,53,82,.07);
  --gap-card:20px; --gap-stack:12px; --gap-cols:56px;
  --k-font:600 11.5px/1.4 var(--mono); --k-track:.14em;
  --t-size:19px; --body-sm:15px;
  --cell-y:12px; --cell-x:14px; --label-col:40%; --label-col-wide:25%;
}
@media (max-width:1100px){:root{--gap-cols:40px}}
@media (max-width:820px){:root{--pad-lg:24px;--gap-cols:28px}}
@media (max-width:480px){:root{--pad-lg:20px;--pad-md:16px;--cell-x:10px}}

/* large cards: one border, radius, shadow and padding */
.vz-card,.aicard,.ours2,.pillar,.fq-rail,main .assure,.case,.compare,.rhythm,.growthchart{
  background-color:#fff;border:var(--card-bd);border-radius:var(--r);box-shadow:var(--card-sh)}
.yours2,.fq-ask{border:1px solid var(--blue);border-radius:var(--r);box-shadow:var(--card-sh)}
.vz-card,.aicard,.ours2,.yours2,.pillar,.fq-rail,main .assure,.fq-ask,.case{padding:var(--pad-lg)}
.compare .col{padding:var(--pad-lg)}
.growthchart{padding:var(--pad-md)}
.pillar::before,.pillar::after{display:none}
.pillar:hover{box-shadow:var(--card-sh);transform:none}
main .assure{background:#fff}

/* compact cards */
.mcard,.step,.stages li,.tile{padding:var(--pad-md);border:var(--card-bd);border-radius:var(--r-sm)}
.mcard,.step,.stages li{background:#fff;box-shadow:var(--card-sh)}
.tile{background:var(--panel);box-shadow:none}
.stages li{border-left:3px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;margin:0 0 var(--gap-stack)}
.stages li.you{border-left-color:#e8a200}
.fq{border:var(--card-bd);border-radius:var(--r-sm);box-shadow:var(--card-sh);margin:0 0 var(--gap-stack)}
.fq[open]{border-color:#b9c7d0;box-shadow:var(--card-sh)}
.fq summary{padding:var(--pad-md)}
.fq-a{padding:0 var(--pad-md) var(--pad-md)}

/* gaps and alignment */
.maint,.pillars .grid,.stepgrid,.split2,main .clients{gap:var(--gap-card)}
.tiles{gap:var(--gap-stack)}
.band .wrap,.aisec .wrap,.growthwrap,.loopwrap,.hero .wrap.vz-hwrap,.vz-2col,.fq-layout,main .contact-grid{gap:var(--gap-cols);align-items:start}
.vz-termgrid{align-items:start}
.split2,.maint,.pillars .grid,.stepgrid{align-items:stretch}

/* one kicker */
.vz-k,.yours2 .who,.ours2 .who,.stages .st-k,.pillar .n,.step .k,.fq-rk,.compare h3,.rw .who,
.vz-table thead th,.vz-bt thead th,.vz-bt thead .n{font:var(--k-font);letter-spacing:var(--k-track);text-transform:uppercase}
.vz-k,.ours2 .who,.stages .st-k,.pillar .n,.step .k,.fq-rk,.compare .own h3,.rw .who,.vz-table thead th,.vz-bt thead th,.vz-bt thead .n{color:var(--blue-2)}
.compare .rent h3{color:var(--muted)}
.yours2 .who{color:var(--sun)}
.stages li.you .st-k,.rw .who.you{color:#7a5300}
.vz-k,.yours2 .who,.ours2 .who,.pillar .n,.step .k,.fq-rk,.compare h3{margin:0 0 8px}
.stages .st-k{display:block;margin:0 0 6px}

/* one card title */
.vz-h,.stages h3,.mcard h3,.pillar h3,.step h3,.tile b,main .assure h2,.case-t{
  font-size:var(--t-size);font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink-hi)}
.vz-h{margin:0 0 14px}
.stages h3,.pillar h3,.step h3,main .assure h2{margin:0 0 8px}
.mcard h3{margin:0 0 6px}
.tile b{margin:0 0 4px}
.mcard .ic,.tile .ic{margin-bottom:12px}

/* one card text */
.mcard p,.tile span,.stages p,.pillar p,.step p,.case .loc,.rw p{font-size:var(--body-sm);line-height:1.55;color:var(--muted)}
main .assure li{font-size:var(--body-sm);line-height:1.55}

/* one table */
.vz-table{font-size:var(--body-sm);line-height:1.5}
.vz-table th,.vz-table td{padding:var(--cell-y) var(--cell-x);vertical-align:top;text-align:left;border-top:1px solid var(--rule-2)}
.vz-table thead th{padding-top:0;padding-bottom:10px;border-top:0;border-bottom:1px solid var(--rule);vertical-align:bottom}
.vz-table tbody tr:first-child > *{border-top:0}
.vz-table tr > :first-child{padding-left:0}
.vz-table tr > :last-child{padding-right:0}
.vz-table tbody th{font-weight:700;color:var(--ink-hi)}
.vz-table tbody th,.vz-short tbody th,.vz-pieces .vz-short tbody th{width:var(--label-col)}
.vz-look tbody th,.vz-cmp .vz-table tbody th,.vz-cmp .vz-table td,.vz-cmp .vz-table thead th{width:var(--label-col-wide)}
.vz-bt th{width:var(--label-col)}
.vz-galt tbody th{width:var(--label-col-wide)}
.vz-galt td:last-child{white-space:nowrap}
.vz-cmp .vz-table .us{padding-left:var(--cell-x);padding-right:var(--cell-x)}
.vz-table .n,.vz-table .num,.vz-galt td:last-child{text-align:right}
.vz-bt th,.vz-bt td{padding:var(--cell-y) 0;border-top:1px solid var(--rule-2);vertical-align:top}
.vz-bt thead th,.vz-bt thead .n{padding:0 0 10px;border-top:0;border-bottom:1px solid var(--rule);vertical-align:bottom}
.vz-bt tbody tr:first-child > *{border-top:0}
.vz-bt th{font-size:var(--body-sm)}
.vz-bt .n{padding-right:var(--cell-x);text-align:right}
.vz-bt .b{padding-top:calc(var(--cell-y) + 4px)}
.rw{padding:var(--cell-y) var(--pad-lg)}
.kv{padding:var(--cell-y) 0}
.kv .k{font-size:var(--body-sm)}
.kv .v{font-size:var(--body-sm)}
main .incl li,.aichecks li,.compare li{padding-top:var(--cell-y);padding-bottom:var(--cell-y);font-size:var(--body-sm)}

/* the case study card */
main .clients{grid-template-columns:1fr}
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad-lg);align-items:start}
.case-shot{display:block;border:var(--card-bd);border-radius:var(--r-sm);overflow:hidden;color:inherit;transition:border-color .15s,box-shadow .15s}
.case-shot:hover,.case-shot:focus-visible{border-color:var(--blue);box-shadow:0 10px 28px rgba(13,53,82,.12)}
.case-shot:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.case-shot .shot{border-bottom:0}
.case-t{margin:0 0 6px}
.case .loc{margin:0 0 18px}
.case .visit{display:inline-block;margin-top:18px;font:var(--k-font);letter-spacing:var(--k-track);text-transform:uppercase;color:var(--blue-2);border-bottom:1px solid var(--rule)}
.case .visit:hover{border-color:var(--blue-2)}

@media (max-width:1100px){.case{grid-template-columns:1fr}}
@media (max-width:820px){
  .fq-rail{padding:0;border:0;box-shadow:none;background:none}
  .stages li{margin-bottom:var(--gap-stack)}
}
/* key and value rows: on phones every page shows the value under its key
   (pricing already did; about, how it works and privacy hid the values) */
@media (max-width:480px){
  .kv{flex-wrap:wrap;row-gap:0}
  .kv .dot{display:none}
  .kv .v{display:block;flex:1 0 100%;text-align:left;margin-top:3px}
}
@media (max-width:560px){
  .vz-stack tbody th,.vz-stack td{padding:3px 0;width:auto}
  .vz-stack tbody th{padding:0 0 6px}
  .vz-cmp .vz-stack .us,.vz-cmp .vz-stack tbody tr:last-child .us{padding:5px 8px}
  .vz-stack tr{padding:var(--cell-y) 0}
  .rw{padding:var(--cell-y) var(--pad-md)}
}
/* retouch, 25 Sep */
:root{
  --rt-us:#1c5b91; --rt-us-t:#dce7f1;
  --rt-you:#e8a200; --rt-you-t:#fbe7b0;
  --rt-hi:#0d3552; --rt-ctx:#b7c8d8; --rt-grey:#9aa6b0;
  --rt-track:10px;
}

/* ---------- shared: legend keys and footers ---------- */
.rt-foot{gap:10px 16px}
.rt-key{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink)}
.rt-key i{display:inline-block;width:14px;height:8px;border-radius:99px}
.rt-k-us{background:var(--rt-us)}
.rt-k-you{background:var(--rt-you)}
.rt-k-own{background:var(--rt-hi);height:3px!important}
.rt-k-rent{background:var(--rt-grey);height:3px!important}
.vz-tag{font-weight:600;letter-spacing:.07em;padding:3px 9px 3px 8px}

/* ---------- the partnership chart ---------- */
.rt-gantt{width:100%;border-collapse:collapse;table-layout:fixed}
.rt-gantt th,.rt-gantt td{padding:0;border:0;text-align:left;vertical-align:middle}
.rt-gantt thead th{font:var(--k-font);letter-spacing:var(--k-track);text-transform:uppercase;color:var(--blue-2);padding-bottom:12px}
.rt-gantt tbody th{width:36%;padding:12px 16px 12px 0;font-size:14px;font-weight:600;color:var(--ink-hi);line-height:1.3}
.rt-gantt tbody th span{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:2px}
.rt-gantt .rt-cn{width:92px;text-align:right;padding-left:14px}
.rt-gantt thead .rt-cn{text-align:right}
.rt-axis{position:relative}
.rt-q{position:relative;display:block;height:14px}
.rt-q i{position:absolute;top:0;font-style:normal;transform:translateX(-50%);white-space:nowrap;font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:none;color:var(--muted)}
.rt-q i:nth-child(1){left:25%}
.rt-q i:nth-child(2){left:50%}
.rt-q i:nth-child(3){left:75%}
.rt-q i:nth-child(4){left:100%;transform:translateX(-100%)}
.rt-mo{display:block;text-align:right;padding-right:16px;font:500 11px/14px var(--mono);letter-spacing:.04em;text-transform:none;color:var(--muted)}
/* quarter lines run through every row as one hairline grid */
.rt-tr{background-image:linear-gradient(90deg,var(--rule-2) 1px,transparent 1px),linear-gradient(90deg,transparent calc(100% - 1px),var(--rule-2) 0);
  background-size:25% 100%,100% 100%;background-repeat:repeat-x,no-repeat}
.rt-bar{position:relative;display:block;height:var(--rt-track);border-radius:99px;background-color:var(--rt-us-t)}
.rt-you .rt-bar{background-color:var(--rt-you-t)}
.rt-d52,.rt-d26,.rt-d12{background-image:radial-gradient(circle,var(--rt-us) 0 2px,transparent 2.6px);background-repeat:repeat-x;background-position:0 50%}
.rt-d52{background-size:calc(100% / 52) 100%}
.rt-d26{background-size:calc(100% / 26) 100%}
.rt-d12{background-size:calc(100% / 12) 100%}
.rt-build{width:calc(100% / 12);background-color:var(--rt-us)}
.rt-build::after,.rt-own::after{content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 2px #fff}
.rt-build::after{right:-7px;background:var(--rt-hi)}
.rt-own{background-color:var(--rt-us-t)!important}
.rt-own::after{right:0;width:16px;height:16px;background:var(--rt-you)}
.rt-badge{display:inline-block;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--ink-hi);background:var(--panel);border:1px solid var(--rule-2);border-radius:99px;padding:3px 10px;font-variant-numeric:tabular-nums}
.rt-you .rt-badge{background:#fff8e6;border-color:#f3dfa6}
@media (max-width:1100px){.rt-gantt tbody th{width:40%}.rt-gantt .rt-cn{width:84px}}
@media (max-width:560px){
  .rt-gantt,.rt-gantt tbody,.rt-gantt thead{display:block}
  .rt-gantt tr{display:grid;grid-template-columns:1fr 84px;column-gap:12px;align-items:center}
  .rt-gantt thead th:first-child{display:none}
  .rt-gantt thead .rt-cn{display:none}
  .rt-gantt thead .rt-axis{grid-column:1}
  .rt-gantt .rt-cn{text-align:right}
  .rt-gantt tbody tr{padding:10px 0;border-top:1px solid var(--rule-2)}
  .rt-gantt tbody th{grid-column:1 / -1;width:auto;padding:0 0 8px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
  .rt-gantt tbody th span{margin:0;text-align:right}
  .rt-gantt .rt-tr{background:none}
  .rt-gantt .rt-cn{width:auto;padding:0}
}

/* ---------- emphasis bars: one row per year, 2023 in navy ---------- */
.rt-hbars{display:grid;gap:12px;margin:4px 0 0;padding:4px 0 2px;border-left:1px solid var(--rule)}
.rt-hb{display:grid;grid-template-columns:56px 1fr;align-items:center;margin-left:-57px}
.rt-hbars{margin-left:57px}
.rt-y{font:600 12.5px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;padding-right:12px;text-align:right}
.rt-t{display:flex;align-items:center;gap:10px;padding-right:64px;margin-left:1px}
.rt-t i{flex:none;display:block;width:calc(var(--p) * 100%);height:18px;border-radius:0 4px 4px 0;background:var(--rt-ctx);transition:filter .15s}
.rt-t b{flex:none;font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rt-hb.hi .rt-y{color:var(--ink-hi)}
.rt-hb.hi i{background:var(--rt-hi)}
.rt-hb.hi b{color:var(--ink-hi);font-weight:800}
.rt-hb:hover i{filter:brightness(1.1)}
.rt-hbars + .sr + .vz-foot{margin-top:18px}
.rt-stat{display:flex;align-items:center;gap:16px;margin:4px 0 22px;padding:0 0 20px;border-bottom:1px solid var(--rule-2)}
.rt-stat b{font-size:clamp(40px,4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--rt-hi)}
.rt-stat span{font-size:14px;line-height:1.45;color:var(--muted)}
/* the same bars on navy */
.rt-dark{border-left-color:rgba(255,255,255,.35)}
.rt-dark .rt-y{color:#9fb6c9}
.rt-dark .rt-t i{background:rgba(255,255,255,.26)}
.rt-dark .rt-t b{color:#c3d2de}
.rt-dark .hi .rt-y,.rt-dark .hi b{color:#fff}
.rt-dark .hi i{background:var(--sun)}

/* ---------- the stat band: number and its history, one figure ---------- */
.statband .stat .rt-bandfig{margin:30px 0 0;max-width:420px}
.statband .rt-bandfig .vz-foot{margin-top:14px}
@media (max-width:820px){.statband .stat .rt-bandfig{max-width:none}}

/* ---------- growth chart ---------- */
.growthwrap .rt-growth{padding:var(--pad-md) var(--pad-lg) var(--pad-lg)}
.rt-gsvg{display:block;width:100%;height:auto}
.rt-grid line{stroke:var(--rule-2);stroke-width:1}
.rt-base{stroke:var(--rule);stroke-width:1}
.rt-gwash{fill:var(--rt-hi);opacity:.08}
.rt-gown{fill:none;stroke:var(--rt-hi);stroke-width:3;stroke-linecap:round}
.rt-grent{fill:none;stroke:var(--rt-grey);stroke-width:2;stroke-linecap:round}
.rt-end-own{fill:var(--rt-hi);stroke:#fff;stroke-width:2.5}
.rt-end-rent{fill:var(--rt-grey);stroke:#fff;stroke-width:2.5}
.rt-cross{fill:#fff;stroke:var(--muted);stroke-width:1.8}
.rt-lab-own{font:600 15px var(--sans);fill:var(--ink-hi)}
.rt-lab-rent{font:500 15px var(--sans);fill:var(--muted)}
.rt-axl{font:500 13px var(--sans);fill:var(--muted)}
/* on phones the legend carries identity; the in-plot labels would be too small to read */
@media (max-width:560px){.rt-lab-own,.rt-lab-rent{display:none}.rt-axl{font-size:22px}}

/* ---------- compare: our column carries a check ---------- */
.vz-cmp .vz-table tbody td{color:var(--muted)}
.vz-cmp .vz-table tbody .us{color:var(--ink-hi);font-weight:600;background-color:#f1f6fa;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%231c5b91'/%3E%3Cpath d='M6 10.4l2.7 2.7L14.2 7.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px 16px;background-position:14px 15px;padding-left:38px}
.vz-cmp .vz-table thead .us{padding-left:14px;background:var(--rt-hi)}
@media (max-width:560px){
  .vz-cmp .vz-stack tbody .us,.vz-cmp .vz-stack tbody tr:last-child .us{background-image:none;padding-left:8px}
}

.vz-cmp .vz-table tbody th,.vz-cmp .vz-table thead th:first-child{width:21%}
.vz-cmp .vz-table .us,.vz-cmp .vz-table thead .us{width:33%}
.vz-cmp .vz-table tbody td:not(.us),.vz-cmp .vz-table thead th:nth-child(n+3){width:23%}

/* ---------- about: meters on tinted tracks ---------- */
.vz-bt .b{background:linear-gradient(var(--rt-us-t),var(--rt-us-t)) left 50%/100% var(--rt-track) no-repeat;border-radius:99px}
.vz-bt .b i,.vz-bt tbody tr:first-child .b i{height:var(--rt-track);border-radius:99px;background:var(--rt-us)}
.vz-bt .b{vertical-align:middle}
.vz-bt .n{font-weight:800;font-size:22px}
@media (max-width:560px){
  .vz-bt,.vz-bt tbody{display:block}
  .vz-bt thead{display:none}
  .vz-bt tbody tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--rule-2)}
  .vz-bt tbody tr:first-child{border-top:0}
  .vz-bt tbody th,.vz-bt tbody td{border:0;padding:0;width:auto}
  .vz-bt .n{padding:0;font-size:20px}
  .vz-bt .b{grid-column:1 / -1;display:block;width:auto!important;height:var(--rt-track);margin-top:10px;padding:0}
}

/* ---------- where your customers look: an icon per place ---------- */
.rt-place{display:flex;align-items:center;gap:10px}
.rt-ic{flex:0 0 32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#e8f0f7;color:var(--rt-us)}
.rt-ic svg{width:17px;height:17px}
.vz-look tbody th,.vz-look thead th:first-child{width:31%}
.vz-look tbody td,.vz-look thead th:nth-child(n+2){width:34.5%}
@media (max-width:560px){.vz-look .rt-place{gap:8px}}

/* ---------- faq short answers ---------- */
.vz-short tbody tr{transition:background .15s}
.vz-short tbody tr:hover{background:#f6f9fb}
.vz-short .fq-go{border-bottom:0}
.vz-short .fq-go::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-top:2px solid var(--blue-2);border-right:2px solid var(--blue-2);transform:translateY(-2px) rotate(45deg)}
.vz-short .fq-go:hover{color:var(--blue-2)}

/* ---------- icons sit in tinted chips ---------- */
.mcard .ic,.tile .ic{box-sizing:content-box;width:20px;height:20px;padding:8px;border-radius:10px;background:#e8f0f7;color:var(--rt-us)}
.tile .ic{background:#fff;border:1px solid var(--rule-2)}
/* on phones a tile is a compact row: icon, then its words */
@media (max-width:480px){
  .tile{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start}
  .tile .ic{grid-row:span 2;margin:0}
}

/* ---------- your part: the three steps sit in the middle of the card, not at its top ---------- */
.yours2 .ysteps{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.yours2 .ysteps li{padding:16px 0}
.yours2 .ysteps li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}

/* ---------- the loop: no dotted outer ring ---------- */
.loopdraw circle[stroke-dasharray]{display:none}

/* ---------- the AI chat mock ---------- */
.aicard{padding-top:18px}
.ai-head{display:flex;align-items:center;gap:10px;padding:0 0 14px;margin:0 0 16px;border-bottom:1px solid var(--rule-2)}
.ai-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--rt-hi);color:var(--sun)}
.ai-av svg{width:16px;height:16px}
.ai-name{font-weight:700;font-size:14.5px;color:var(--ink-hi)}
.aicard .ai-head .ai-tag{position:static;margin-left:auto}
.ai-q{margin-top:0}
.ai-a{background:var(--panel);border:1px solid var(--rule-2)}
.ai-a ol{list-style:none;padding:0;counter-reset:ai}
.ai-a li{counter-increment:ai;position:relative;padding:10px 12px 10px 40px;border-radius:10px;margin:0 0 6px}
.ai-a li::before{content:counter(ai);position:absolute;left:12px;top:10px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 11.5px/1 var(--sans);background:#e3e9ee;color:var(--ink)}
.ai-a li.win{background:#fff;border:1px solid #cfdceb;box-shadow:0 6px 18px rgba(13,53,82,.08)}
.ai-a li.win::before{background:var(--rt-hi);color:var(--sun)}
.ai-a li.win b{background:none;padding:0;color:var(--rt-hi)}
.ai-a li:last-child{margin-bottom:0}
.ai-note{font:400 13.5px/1.5 var(--sans);letter-spacing:0;color:var(--muted);margin-top:16px}

/* ---------- clients: the stage ---------- */
.case{align-items:stretch}
.case-shot{position:relative;min-height:440px;border:0;border-radius:var(--r-sm);overflow:hidden;
  background-color:var(--rt-hi);
  background-image:radial-gradient(120% 90% at 20% 0%,rgba(28,91,145,.55),rgba(13,53,82,0) 60%),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:auto,28px 28px,28px 28px}
.case-shot:hover,.case-shot:focus-visible{box-shadow:0 14px 34px rgba(13,53,82,.22)}
.rt-desk{position:absolute;left:6%;top:7%;width:82%;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 22px 48px rgba(3,14,24,.45);transition:transform .25s}
.rt-desk .chrome{height:26px;background:#eef2f4}
.rt-desk .shot{aspect-ratio:16 / 10}
.rt-phone{position:absolute;right:5%;bottom:6%;width:27%;aspect-ratio:1 / 2;border-radius:24px;padding:5px;background:#08131d;box-shadow:0 22px 48px rgba(3,14,24,.5),inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .25s}
.rt-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:19px}
.case-shot:hover .rt-desk{transform:translateY(-3px)}
.case-shot:hover .rt-phone{transform:translateY(-6px)}
.rt-live{position:absolute;left:6%;bottom:7%;display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 var(--mono);letter-spacing:.08em;color:#dbe6ef;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:8px 12px}
.rt-live i{width:8px;height:8px;border-radius:50%;background:#3ccf7a;box-shadow:0 0 0 3px rgba(60,207,122,.25)}
@media (max-width:1100px){.case-shot{min-height:0;aspect-ratio:16 / 11}}
@media (max-width:560px){
  .case-shot{aspect-ratio:4 / 3.3}
  .rt-desk{left:5%;top:6%;width:84%;border-radius:7px}
  .rt-desk .chrome{height:18px}
  .rt-desk .chrome b{display:none}
  .rt-phone{width:29%;border-radius:16px;padding:3px}
  .rt-phone img{border-radius:13px}
  .rt-live{display:none}
}
/* honesty chips navy, 25 Sep */
.vz-modeled{color:var(--blue);background:#eaf0f5;border-color:var(--blue)}
.statband .vz-modeled,.p-credits .vz-modeled{color:#dbe6ef;background:rgba(255,255,255,.06);border-color:rgba(219,230,239,.6)}
/* hero mark 2x, 26 Sep */
@media (min-width:821px){.hero .wrap{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:24px}.herofig{max-width:600px;justify-self:end}}
/* launches live v3, 26 Sep */
.rt-anim .rt-t i{width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.rt-anim.rt-go .rt-t i{width:calc(var(--p) * 100%)}
.rt-anim .rt-hb:nth-child(2) i{transition-delay:.14s}
.rt-anim .rt-hb:nth-child(3) i{transition-delay:.28s}
.rt-anim .rt-hb:nth-child(4) i{transition-delay:.42s}
.rt-anim .rt-t b{opacity:0;transition:opacity .4s}
.rt-anim.rt-go .rt-t b{opacity:1}
.lc-big{font-variant-numeric:tabular-nums}
.lc-cap .lc-line{display:inline-flex;align-items:center;gap:10px}
.lc-cap .lc-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:#b3c6d6;line-height:1.45}
.rt-stat .lc-cap .lc-sub{color:var(--muted);font-size:13px;margin-top:6px}
.lc-pulse{flex:none;display:inline-block;width:9px;height:9px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 0 rgba(47,191,113,.5);animation:lcPulse 2s infinite}
@keyframes lcPulse{0%{box-shadow:0 0 0 0 rgba(47,191,113,.45)}70%{box-shadow:0 0 0 9px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}
.statband .lc-cap .vz-modeled{color:#dbe6ef;background:rgba(255,255,255,.06);border-color:rgba(219,230,239,.6)}
@media (prefers-reduced-motion: reduce){.lc-pulse{animation:none}}
/* launches caption one line, 26 Sep */
.stat .unit.lc-cap{max-width:none}
.lc-cap .lc-line{white-space:nowrap}
@media (max-width:480px){.lc-cap .lc-line{white-space:normal}}
/* finish, 26 Sep */
/* ---------- 1. the loop: bigger, and it runs once ---------- */
@media (min-width:821px){
  .loopwrap{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center}
  .loopfig{max-width:640px}
}
.loopdraw .lp-guide{fill:none;stroke:#e1e8ee;stroke-width:1.6;opacity:0;transition:opacity .6s}
.lp-arm:not(.lp-done) .lp-guide{opacity:1}
.loopdraw .lp-arc{fill:none;stroke:var(--sun);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.45,0,.2,1)}
.loopdraw .lp-arr{fill:#e8a200;transition:opacity .18s .36s}
.loopdraw .lp-cardbg{fill:var(--blue)}
.loopdraw .lp-bar{fill:#1f4a6d}
.loopdraw .lp-dot{fill:var(--sun);transform-box:fill-box;transform-origin:center}
.loopdraw .lp-l1{fill:#fff}
.loopdraw .lp-l2,.loopdraw .lp-l3{fill:#6f8ea8}
.loopdraw .lp-btn{fill:var(--sun)}
.loopdraw .lp-ln{transform-box:fill-box;transform-origin:left center}
.loopdraw .lp-ring{fill:#fff;stroke:var(--blue);stroke-width:2.4;transition:fill .35s,stroke .35s}
.loopdraw .lp-you .lp-ring{fill:#fff8e1;stroke:#e8a200}
.loopdraw .lp-n,.loopdraw .lp-w{transition:fill .35s}
.loopdraw .lp-n{font-size:12.5px}
.loopdraw .lp-w{font-size:14px}
.loopdraw .lp-pop{transform-box:fill-box;transform-origin:center}
/* armed by the script: everything waits, dim, for its turn */
.lp-arm .lp-node:not(.on) .lp-ring{fill:#fff;stroke:#d6e0e8}
.lp-arm .lp-node:not(.on) .lp-n,.lp-arm .lp-node:not(.on) .lp-w{fill:#a3afb9}
.lp-arm .lp-arc:not(.on){stroke-dashoffset:var(--len)}
.lp-arm .lp-arr:not(.on){opacity:0}
.lp-arm .lp-node.on .lp-pop{animation:lpPop .5s cubic-bezier(.3,.7,.3,1)}
.lp-arm .lp-card.on .lp-ln{animation:lpRefresh .9s cubic-bezier(.5,0,.2,1) both}
.lp-arm .lp-card.on .lp-l2{animation-delay:.08s}
.lp-arm .lp-card.on .lp-l3{animation-delay:.16s}
.lp-arm .lp-card.on .lp-btn{animation-delay:.24s}
.lp-arm .lp-card.on .lp-dot{animation:lpDot .9s ease .55s}
@keyframes lpPop{0%{transform:scale(.94)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes lpRefresh{0%{transform:scaleX(1)}40%{transform:scaleX(.08);opacity:.5}100%{transform:scaleX(1);opacity:1}}
@keyframes lpDot{0%{transform:scale(1)}40%{transform:scale(2.2)}100%{transform:scale(1)}}

/* ---------- 2. your part: steps under the heading, the day in the space ---------- */
.yours2 .ysteps{flex:none;display:block}
.yours2 .ysteps li{padding:14px 0}
.fn-day{flex:1 1 auto;display:flex;align-items:center;gap:22px;padding:26px 0 6px}
.fn-dial{flex:0 0 auto;width:148px;height:148px;display:block}
.fn-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:12}
.fn-tk{stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-linecap:round}
.fn-mj{stroke:rgba(255,255,255,.5);stroke-width:1.6}
.fn-ours{fill:none;stroke:#3f78ab;stroke-width:12;stroke-dasharray:var(--len);stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.45,0,.2,1) .45s}
.fn-you{fill:none;stroke:var(--sun);stroke-width:14;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:opacity .3s .1s,transform .5s cubic-bezier(.3,.7,.3,1) .1s}
.fn-n{font:800 36px/1 var(--sans);fill:#fff;letter-spacing:-.02em}
.fn-u{font:600 9.5px/1 var(--mono);fill:#b9cbda;letter-spacing:.22em}
.fn-arm:not(.fn-go) .fn-ours{stroke-dashoffset:var(--len)}
.fn-arm:not(.fn-go) .fn-you{opacity:0;transform:scale(.4)}
.fn-key{display:flex;flex-direction:column;gap:10px;margin:0;font-size:15px;line-height:1.35;color:#fff}
.fn-key span{display:flex;align-items:center;gap:10px}
.fn-key i{flex:none;width:12px;height:12px;border-radius:50%}
.fn-k-you{background:var(--sun)}
.fn-k-ours{background:#3f78ab}
@media (max-width:1100px) and (min-width:821px){.fn-day{flex-direction:column;align-items:flex-start;gap:16px}}
@media (max-width:480px){.fn-dial{width:120px;height:120px}.fn-day{gap:18px;padding-top:22px}.fn-key{font-size:14.5px}}

/* ---------- 3. key and value tables ---------- */
.kvt{background:#fff;border:var(--card-bd);border-radius:var(--r);box-shadow:var(--card-sh);padding:6px var(--pad-lg)}
.kvt-t{width:100%;border-collapse:collapse;font-size:var(--body-sm);line-height:1.45}
.kvt-t th,.kvt-t td{padding:14px 0;border-top:1px solid var(--rule-2);vertical-align:middle;text-align:left}
.kvt-t tr:first-child > *{border-top:0}
.kvt-t th{width:50%;padding-right:18px;font-weight:500;color:var(--ink)}
.kvt-k{display:flex;align-items:center;gap:12px}
.kvt-t td{font-weight:600;color:var(--ink-hi)}
.kvt-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#e8f0f7;color:var(--rt-us,#1c5b91)}
.kvt-ic svg{width:16px;height:16px}
main .kvt{max-width:none}
.privacy-body .kvt,main > section .wrap > .kvt{max-width:760px}
@media (max-width:480px){
  .kvt{padding:2px var(--pad-md)}
  .kvt-t,.kvt-t tbody{display:block}
  .kvt-t tr{display:block;position:relative;padding:13px 0 13px 42px;border-top:1px solid var(--rule-2)}
  .kvt-t tr:first-child{border-top:0}
  .kvt-t th,.kvt-t td{display:block;width:auto;padding:0;border:0}
  .kvt-t td{margin-top:3px}
  .kvt-k{display:block}
  .kvt-ic{position:absolute;left:0;top:13px;margin:0}
}
/* launches no flash, 26 Sep */
.lcjs .stat .num:not(.lc-big),.lcjs .stat .unit:not(.lc-cap),.lcjs .rt-stat b:not(.lc-big),.lcjs .rt-stat span:not(.lc-cap){visibility:hidden}
/* live chat card v3, 26 Sep */
.ai-play .ai-q{opacity:0;transform:translateY(12px) scale(.98);transform-origin:right bottom;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.ai-play.ai-s1 .ai-q{opacity:1;transform:none}
.ai-play .ai-a{position:relative;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.ai-play.ai-s2 .ai-a{opacity:1;transform:none}
.ai-a .w,.ai-a li span.w{display:inline;font-size:inherit;color:inherit}
.ai-play .ai-a .w{opacity:0;transition:opacity .22s ease}
.ai-play .ai-a .w.on{opacity:1}
.ai-play .ai-a li{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease,background-color .6s ease,border-color .6s ease,box-shadow .6s ease}
.ai-play .ai-a li.in{opacity:1;transform:none}
.ai-play:not(.ai-done) .ai-a li.win{background-color:transparent;border-color:transparent;box-shadow:none}
.ai-dots{display:none;gap:5px;align-items:center;height:20px;padding:0 2px}
.ai-play.ai-s2:not(.ai-s3) .ai-dots{display:flex}
.ai-play.ai-s2:not(.ai-s3) .ai-a{width:max-content}
.ai-play:not(.ai-s3) .ai-a > p,.ai-play:not(.ai-s3) .ai-a > ol{display:none}
.ai-play .ai-a li:not(.in){display:none}
.ai-dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:aiDot 1.1s infinite ease-in-out}
.ai-dots i:nth-child(2){animation-delay:.15s}
.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.ai-play .ai-note{opacity:0;transition:opacity .5s ease .2s}
.ai-play.ai-done .ai-note{opacity:1}
/* growth chart motion, 26 Sep */
.rtg-edge{stroke:var(--blue-2);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .3s}
.rtg-go:not(.rtg-done) .rtg-edge{opacity:.55}
.rtg-play .rt-cross,.rtg-play .rt-end-own,.rtg-play .rt-end-rent{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.6,.4,1)}
.rtg-cross .rt-cross,.rtg-done .rt-end-own,.rtg-done .rt-end-rent{opacity:1;transform:none}
.rtg-play .rt-lab-rent,.rtg-play .rt-lab-own{opacity:0;transition:opacity .5s ease}
.rtg-go .rt-lab-rent{opacity:1;transition-delay:.5s}
.rtg-cross .rt-lab-own{opacity:1;transition-delay:.7s}
/* clarity, 26 Sep */
/* ---------- chips: plain words, room to breathe ---------- */
.vz-tag,.aicard .ai-tag{display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;
  padding:5px 12px 5px 10px;border-radius:999px;border:1px solid currentColor;white-space:normal;text-align:left}
.vz-tag::before{flex:none}
.aicard .ai-tag{color:var(--blue);background:#eaf0f5;border-color:#b8cadb}
.aicard .ai-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.vz-foot.ck{flex-direction:column;align-items:center;justify-content:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-2);text-align:center}
.ck-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.ck-cap{max-width:46ch;font-size:13.5px;line-height:1.5;color:var(--muted)}
.statband .vz-foot.ck{align-items:flex-start;text-align:left;border-top-color:rgba(255,255,255,.14)}
.statband .ck-cap{color:#c3d2de}
.lc-cap .lc-sub .vz-tag{margin-top:2px}

/* ---------- centering: intros sit centered above what they introduce ---------- */
main .sec-head{max-width:760px;margin-left:auto;margin-right:auto;margin-bottom:52px;text-align:center}
main .sec-head .eyebrow{justify-content:center}
main .sec-head .lead{max-width:62ch;margin-left:auto;margin-right:auto}
main .sec-head h2{text-wrap:balance}

/* ---------- rhythm: more air between sections and inside cards ---------- */
section.band,section.system,section.pillars,section.steps,section.statband{padding-top:104px;padding-bottom:104px}
.maint,.pillars .grid,.stepgrid{gap:24px}
.mcard,.step{padding:24px}
.vz-card .vz-h{margin-bottom:20px}
.ours2 .tiles{margin-top:6px}
@media (max-width:820px){
  section.band,section.system,section.pillars,section.steps,section.statband{padding-top:72px;padding-bottom:72px}
  main .sec-head{margin-bottom:36px}
}
@media (max-width:480px){
  section.band,section.system,section.pillars,section.steps,section.statband{padding-top:60px;padding-bottom:60px}
  .mcard,.step{padding:20px}
}

/* ---------- two column sections: balanced, figure centered on the text ---------- */
@media (min-width:821px){
  .band .wrap,.aisec .wrap,.growthwrap,.loopwrap,.hero .wrap.vz-hwrap,.vz-2col,main .contact-grid{align-items:center}
  .vz-2col:not(.vz-termgrid){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vz-termgrid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  .vz-sticky{position:static}
  .statband .wrap{align-items:center}
}
@media (max-width:1100px) and (min-width:821px){.vz-termgrid{grid-template-columns:1fr}}

/* the FAQ's rail stays pinned to the top of its column */
.fq-layout{align-items:start}
/* readable ai search, 26 Sep */
.aisec .lead{max-width:52ch}
.aichecks{counter-reset:aic;margin-top:28px;display:grid;gap:10px}
.aichecks li,.aichecks li:last-child{counter-increment:aic;display:grid;grid-template-columns:36px 1fr;column-gap:14px;align-items:start;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--r-sm);background:#fff;font-size:15px;line-height:1.55;color:var(--ink)}
.aichecks li::before{content:counter(aic,decimal-leading-zero);position:static;grid-row:1 / span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;box-shadow:none;font:700 12px/1 var(--mono);letter-spacing:.02em;margin-top:1px}
.aichecks li b{display:block;font-size:16.5px;line-height:1.3;color:var(--ink-hi);margin:0 0 4px}
@media (max-width:480px){.aichecks li,.aichecks li:last-child{padding:14px;grid-template-columns:30px 1fr;column-gap:12px}.aichecks li::before{width:28px;height:28px;font-size:11px}}
/* tech backgrounds v3, 26 Sep */
.audsec,.statband,.cta,html body .page-head,.hero.hero-page{position:relative;isolation:isolate}
.techbg{position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-repeat:no-repeat}
.statband::before,.cta::before,html body .page-head::before,.hero.hero-page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-repeat:no-repeat}
.audsec .techbg{background-image:url(/assets/bg/tech-laptop-code.webp);background-position:center 45%;opacity:.26;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 48% 58% at 50% 45%,rgba(0,0,0,.18) 25%,#000 100%);mask-image:radial-gradient(ellipse 48% 58% at 50% 45%,rgba(0,0,0,.18) 25%,#000 100%)}
.statband::before{background-image:url(/assets/bg/tech-monitor-code.webp);background-position:center;opacity:.2;mix-blend-mode:luminosity}
.cta::before{background-image:url(/assets/bg/tech-desk-night.webp);background-position:center 60%;opacity:.3;-webkit-mask-image:radial-gradient(ellipse 55% 75% at 50% 50%,rgba(0,0,0,.25) 30%,#000 100%);mask-image:radial-gradient(ellipse 55% 75% at 50% 50%,rgba(0,0,0,.25) 30%,#000 100%)}
.cta .curve{z-index:0}
html body .page-head::before,.hero.hero-page::before{background-image:url(/assets/bg/tech-monitor-code.webp);background-position:right center;background-size:cover;opacity:.2;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 85%);mask-image:linear-gradient(90deg,transparent 35%,#000 85%)}
@media (max-width:820px){.audsec .techbg{opacity:.16}html body .page-head::before,.hero.hero-page::before{opacity:.12}}
/* guided scroll v2, 26 Sep */
html{scroll-padding-top:74px}
.guide{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:12px;padding:10px 7px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--rule-2);box-shadow:0 6px 18px rgba(13,53,82,.08)}
.guide-dot{position:relative;display:block;width:10px;height:10px;border-radius:50%;background:#b7c8d8;border:0;transition:transform .2s ease,background-color .2s ease}
.guide-dot:hover,.guide-dot:focus-visible{background:var(--blue-2);transform:scale(1.25);outline:none}
.guide-dot[aria-current="true"]{background:var(--blue);transform:scale(1.35);box-shadow:0 0 0 3px rgba(255,198,30,.55)}
.guide-tip{position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(4px);white-space:nowrap;font:600 12px/1 var(--sans);color:#fff;background:var(--blue);padding:7px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.guide-dot:hover .guide-tip,.guide-dot:focus-visible .guide-tip{opacity:1;transform:translateY(-50%)}
@media (max-width:1100px){.guide{display:none}}
/* section separation, 26 Sep */
main > section.tone-w.tone-w{background:rgba(255,255,255,.9)}
main > section.tone.tone{background:linear-gradient(180deg,#eef4fa 0%,#e8f0f7 100%);border-top:1px solid #d3dfea;border-bottom:1px solid #d3dfea}
main > section.tone.tone + section.tone-w,main > section.tone-w + section.tone{box-shadow:none}
main > section.tone .vz-card,main > section.tone .mcard,main > section.tone .tile,main > section.tone .pillar,main > section.tone .step{background:#fff}
/* tech background why different v2, 26 Sep */
main > section.has-techbg{position:relative;isolation:isolate}
.techbg-diff{background-image:url(/assets/bg/tech-monitor-code.webp);background-position:center 40%;opacity:.22;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 52% 60% at 50% 50%,rgba(0,0,0,.15) 30%,#000 100%);mask-image:radial-gradient(ellipse 52% 60% at 50% 50%,rgba(0,0,0,.15) 30%,#000 100%)}
@media (max-width:820px){.techbg-diff{opacity:.18}}
/* tech backgrounds everywhere, 26 Sep */
main > section.has-techbg{position:relative;isolation:isolate}
.techbg{position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-repeat:no-repeat}
.tbg-l,.tbg-r,.tbg-c{opacity:.24;mix-blend-mode:multiply}
.tbg-l{background-position:left center;-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.35) 100%)}
.tbg-r{background-position:right center;-webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.35) 100%)}
.tbg-c{background-position:center;-webkit-mask-image:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(0,0,0,.15) 30%,#000 100%);mask-image:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(0,0,0,.15) 30%,#000 100%)}
main > section.tone .tbg-l,main > section.tone .tbg-r,main > section.tone .tbg-c{opacity:.2}
@media (max-width:820px){.tbg-l,.tbg-r,.tbg-c{opacity:.14}}
/* section moods, 26 Sep */
main > section[class*="mood-"]{border-top:1px solid rgba(13,53,82,.14);box-shadow:inset 0 22px 30px -26px rgba(13,53,82,.35)}
main > section.mood-1.mood-1{background:linear-gradient(180deg,#ffffff 0%,#f6f9fc 100%)}
main > section.mood-2.mood-2{background:linear-gradient(180deg,#e4eff8 0%,#d5e5f2 100%)}
main > section.mood-3.mood-3{background:linear-gradient(180deg,#eceff3 0%,#dfe5eb 100%)}
main > section.mood-4.mood-4{background:linear-gradient(180deg,#fbf8f1 0%,#f3eee2 100%)}
main > section.mood-1 .techbg{filter:none;opacity:.22}
main > section.mood-2 .techbg{filter:hue-rotate(-14deg) saturate(1.45) brightness(1.05);opacity:.3}
main > section.mood-3 .techbg{filter:grayscale(.9) contrast(1.25);opacity:.3}
main > section.mood-4 .techbg{filter:sepia(.55) saturate(1.2) hue-rotate(-8deg);opacity:.2}
main > section.mood-4 .eyebrow .n,main > section.mood-4 .eyebrow::before{border-color:#8a5209}
@media (max-width:820px){main > section[class*="mood-"] .techbg{opacity:.16}}
/* fade in on load, 26 Sep */
@keyframes iaFadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: no-preference){body{animation:iaFadeIn .25s ease-out both}}
/* motion system, 26 Sep */
:root{--mo-ease:cubic-bezier(.2,.7,.2,1);--mo-pop:cubic-bezier(.3,1.5,.5,1)}

/* reveal: hidden only once motion.js has armed the page */
html.mo-js .mo{opacity:0;transform:translateY(14px)}
html.mo-js .mo.mo-in{opacity:1;transform:none;transition:opacity .38s var(--mo-ease),transform .38s var(--mo-ease)}
html.mo-js tr.mo{transform:translateY(8px)}
.mo-w{display:inline-block}
html.mo-js .mo-w.mo{transform:translateY(.28em)}

/* the hero mark, drafted */
html.mo-js .herodraw.mo-draft .orbit > circle{transform-box:view-box;transform-origin:220px 222px}
html.mo-js .herodraw.mo-draft .orbit > g path,html.mo-js .herodraw.mo-draft .orbit > g circle{transform-box:fill-box}
html.mo-js .herodraw.mo-draft .orbit > g:nth-of-type(1) path:nth-child(1){transform-origin:right center}
html.mo-js .herodraw.mo-draft .orbit > g:nth-of-type(1) path:nth-child(2){transform-origin:left center}
html.mo-js .herodraw.mo-draft .orbit > g:nth-of-type(1) path:nth-child(3){transform-origin:center bottom}
html.mo-js .herodraw.mo-draft .orbit > g:nth-of-type(1) path:nth-child(4){transform-origin:center top}
html.mo-js .herodraw.mo-draft .orbit > g:nth-of-type(2) circle{transform-origin:center}
html.mo-js .herodraw.mo-draft:not(.mo-go) .orbit > g:nth-of-type(1) path:nth-child(-n+2){transform:scaleX(0)}
html.mo-js .herodraw.mo-draft:not(.mo-go) .orbit > g:nth-of-type(1) path:nth-child(n+3){transform:scaleY(0)}
html.mo-js .herodraw.mo-draft:not(.mo-go) .orbit > circle{opacity:0;transform:rotate(-70deg) scale(.94)}
html.mo-js .herodraw.mo-draft:not(.mo-go) .orbit > g:nth-of-type(2) circle{opacity:0;transform:scale(0)}
html.mo-js .herodraw.mo-draft:not(.mo-go) > use{opacity:0;transform:translateY(16px)}
html.mo-js .herodraw.mo-go .orbit > g:nth-of-type(1) path{transition:transform .38s var(--mo-ease)}
html.mo-js .herodraw.mo-go .orbit > circle{transition:opacity .5s var(--mo-ease) .18s,transform .75s var(--mo-ease) .18s}
html.mo-js .herodraw.mo-go .orbit > g:nth-of-type(2) circle{transition:opacity .2s .62s,transform .3s var(--mo-pop) .62s}
html.mo-js .herodraw.mo-go .orbit > g:nth-of-type(2) circle:nth-child(2){transition-delay:.68s}
html.mo-js .herodraw.mo-go .orbit > g:nth-of-type(2) circle:nth-child(3){transition-delay:.74s}
html.mo-js .herodraw.mo-go .orbit > g:nth-of-type(2) circle:nth-child(4){transition-delay:.8s}
html.mo-js .herodraw.mo-go > use{transition:opacity .5s var(--mo-ease) .5s,transform .7s var(--mo-ease) .5s}

/* the compare table ticks our checks one by one */
html.mo-js .vz-cmp .vz-table tbody td.us{position:relative;background-image:none}
html.mo-js .vz-cmp .vz-table tbody td.us::after{content:"";position:absolute;left:14px;top:15px;width:16px;height:16px;opacity:0;transform:scale(.3);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%231c5b91'/%3E%3Cpath d='M6 10.4l2.7 2.7L14.2 7.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  transition:opacity .2s,transform .34s var(--mo-pop)}
html.mo-js .vz-cmp .vz-table tbody td.us.mo-tick::after{opacity:1;transform:none}
@media (max-width:560px){html.mo-js .vz-cmp .vz-table tbody td.us::after{display:none}}

/* the maintenance checklist lights chip by chip */
html.mo-js .maint .mcard .ic.mo-chip{opacity:.3;transform:scale(.82)}
html.mo-js .maint .mcard .ic.mo-chip.mo-lit{opacity:1;transform:none;transition:opacity .25s,transform .4s var(--mo-pop)}

/* numbers keep their width while they count */
.mo-num{display:inline-block;font-variant-numeric:tabular-nums;text-align:right}

/* hover: small cards lift, their chip nudges; buttons press */
.mcard,.tile,.step,.pillar,.stages li{transition:transform .25s var(--mo-ease)}
.mcard .ic,.tile .ic{transition:transform .25s var(--mo-ease)}
@media (hover:hover){
  html .mcard:hover,html .tile:hover,html .step:hover,html .pillar:hover,html .stages li:hover{transform:translateY(-3px)}
  html .mcard:hover .ic,html .tile:hover .ic,html.mo-js .maint .mcard:hover .ic.mo-chip.mo-lit{transform:translateY(-2px) rotate(-6deg)}
}
.btn{position:relative}
html body .btn:active{transform:translateY(0) scale(.97);transition-duration:.08s}

/* the last ask, once */
.cta .btn::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--sun);opacity:0;pointer-events:none}
.cta .btn.mo-pulse::after{animation:moPulse 1.3s var(--mo-ease) 1}
@keyframes moPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.28,1.6)}}

/* the backdrop drifts: room to move, clipped to its section */
html.mo-js main > section.has-techbg{overflow:clip}
html.mo-js main > section.has-techbg > .techbg{top:-32px;bottom:-32px;will-change:transform}

@media (prefers-reduced-motion: reduce){
  .mcard,.tile,.step,.pillar,.stages li,.mcard .ic,.tile .ic{transition:none}
  html .mcard:hover,html .tile:hover,html .step:hover,html .pillar:hover,html .stages li:hover,html .mcard:hover .ic,html .tile:hover .ic{transform:none}
  .cta .btn.mo-pulse::after{animation:none}
}
/* results first story, 26 Sep */
@media (min-width:821px){
  .statband .wrap{grid-template-columns:1.1fr .9fr}
  .statband .stat{order:2}
  .statband .statcopy{order:1}
  .aisec .wrap{grid-template-columns:.95fr 1.05fr}
  .aisec .aicard{order:-1}
}
.compare .own li::before{content:"";top:12px;width:18px;height:18px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.compare .own li{padding-left:30px}
.soc4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.soc4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.soc4{grid-template-columns:1fr}}
/* sticky topbar, 26 Sep */
:root{--tb-h:36px;--bar-h:62px;--hdr-h:calc(var(--tb-h) + var(--bar-h))}
html{scroll-padding-top:calc(var(--hdr-h) + 10px)}
.topbar{position:sticky;top:0;z-index:42}
.topbar .wrap{height:var(--tb-h);min-height:0;flex-wrap:nowrap;overflow:hidden}
.topbar .t-tag{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:3px;padding-bottom:3px}
.topbar .t-cta{padding-top:3px;padding-bottom:3px;flex:none}
header.site{top:var(--tb-h);z-index:41;box-shadow:0 8px 24px -18px rgba(13,53,82,.45)}
.bar{height:var(--bar-h)}
.fq-group,.fq{scroll-margin-top:calc(var(--hdr-h) + 18px)}
.fq-rail{top:calc(var(--hdr-h) + 18px)}
@media (max-width:480px){.topbar .wrap{min-height:0}}

/* signed in: the avatar */
.tb-av{display:inline-grid;place-items:center;border-radius:50%;font:800 12px/1 var(--sans);letter-spacing:0;text-transform:none;border:0;text-decoration:none;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
.tb-av:hover,.tb-av:focus-visible{transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,198,30,.35)}
.topbar .t-cta a.tb-av{width:22px;height:22px;background:var(--sun);color:var(--blue);border-bottom:0;padding:0;font-size:11.5px;animation:tbIn .35s cubic-bezier(.2,.7,.2,1) both}
.tb-av-phone{display:none;flex:none;width:24px;height:24px;margin-left:auto;background:var(--sun);color:var(--blue);font-size:12px;animation:tbIn .35s cubic-bezier(.2,.7,.2,1) both}
@media (max-width:480px){.topbar .wrap .tb-av-phone{display:inline-grid;border-bottom:0;padding:0}}
@keyframes tbIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.topbar .t-cta a.tb-av,.tb-av-phone{animation:none}.tb-av{transition:none}}
@media print{.topbar,header.site{position:static}}
/* loop card, 26 Sep */
/* the website in the middle of the loop */
.loopdraw .lp-cardbg{fill:var(--blue)}
.loopdraw .lp-chrome{fill:#1f4a6d}
.loopdraw .lp-wd{fill:#6f8ea8}
.loopdraw .lp-dot{fill:var(--sun)}
.loopdraw .lp-url{fill:#0d3552}
.loopdraw .lp-urlt{font:500 7.6px var(--mono);fill:#c3d2de;letter-spacing:.02em}
.loopdraw .lp-hero{fill:#2a5b83}
.loopdraw .lp-hills{fill:#1f4a6d}
.loopdraw .lp-sun{fill:var(--sun);opacity:.9}
.loopdraw .lp-l1{fill:#fff}
.loopdraw .lp-l2{fill:#c3d2de}
.loopdraw .lp-l3{fill:#6f8ea8}
.loopdraw .lp-cta{fill:var(--sun)}
.loopdraw .lp-ctat{font:700 7.6px var(--sans);fill:var(--blue)}
.loopdraw .lp-thbg{fill:#2a5b83}
.loopdraw .lp-thmt{fill:#1f4a6d}
.loopdraw .lp-thsun{fill:#c3d2de}
.loopdraw .lp-star{fill:var(--sun)}
.loopdraw .lp-chipbg{fill:#fff;stroke:#cfd8dd;stroke-width:1}
.loopdraw .lp-live{fill:#2fbf71}
.loopdraw .lp-c{font:700 8px var(--mono);letter-spacing:.14em;fill:var(--blue)}
.loopdraw .lp-th,.loopdraw .lp-star,.loopdraw .lp-live{transform-box:fill-box;transform-origin:center}
/* the update beat, once, when the loop arrives at Update */
.lp-arm .lp-card.on .lp-th{animation:lpThumb .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.35s + var(--k) * .12s)}
.lp-arm .lp-card.on .lp-star{animation:lpStar .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.75s + var(--k) * .07s)}
.lp-arm .lp-card.on .lp-live{animation:lpDot .9s ease .5s}
@keyframes lpThumb{0%{opacity:1}35%{opacity:.25;transform:scale(.94)}100%{opacity:1;transform:none}}
@keyframes lpStar{0%{opacity:.3;transform:scale(.5)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lp-arm .lp-card.on .lp-th,.lp-arm .lp-card.on .lp-star,.lp-arm .lp-card.on .lp-live{animation:none}}

/* magnetic scroll: sections land flush under the sticky header */
html{scroll-padding-top:calc(var(--hdr-h,98px) + 1px)}
/* touch: native snapping, so momentum stays the phone's own */
@media (pointer:coarse) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
  main > section{scroll-snap-align:start;scroll-snap-stop:normal}
}
/* section order, 26 Sep */
@media (min-width:821px){
  .statband .wrap{grid-template-columns:.9fr 1.1fr}
  .statband .stat{order:1}
  .statband .statcopy{order:2}
}
/* one screen per stop, 26 Sep */
@media (min-width:900px) and (min-height:560px) and (orientation:landscape){
  main.fit > section{min-height:var(--fit-h,calc(100vh - var(--hdr-h,98px)));padding-top:clamp(16px,3vh,40px)!important;padding-bottom:clamp(16px,3vh,40px)!important;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
  main.fit > section > .wrap{width:100%}
  main.fit .sec-head{margin-bottom:clamp(20px,3.2vh,36px)}
  main.fit .sec-head .lead{margin-top:10px!important}
  main.fit .aichecks{grid-template-columns:1fr 1fr;gap:10px;margin-top:clamp(16px,2.4vh,26px)}
  main.fit .aichecks li,main.fit .aichecks li:last-child{padding:13px 15px;font-size:14.5px;line-height:1.5}
  main.fit .aichecks li:nth-child(5){grid-column:1 / -1}
  main.fit .aichecks li{align-content:start}
  /* the system: words and the four turns on the left, the loop on the right */
  main.fit .system > .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"head fig" "list fig";column-gap:clamp(28px,4vw,64px);row-gap:clamp(16px,2.6vh,28px);align-items:center}
  main.fit .system .loopwrap{display:contents}
  main.fit .system .sec-head{grid-area:head;text-align:left;margin:0;max-width:none;align-self:end}
  main.fit .system .sec-head .eyebrow{justify-content:flex-start}
  main.fit .system .loopfig{grid-area:fig;width:100%;max-width:min(560px,calc(var(--fit-h,700px) - 60px));justify-self:center}
  main.fit .system .stages{grid-area:list;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;align-self:start}
  main.fit .system .stages li{padding:12px 14px;margin:0}
  main.fit .system .stages li p{font-size:13.5px;line-height:1.5;margin:4px 0 0}
  main.fit .system .stages li h3{margin:2px 0 0}
  /* pricing, the terms: heading and terms on the left, the comparison on the right */
  main.fit .wrap:has(> .vz-termgrid){display:grid!important;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);grid-template-areas:"head cmp" "kv cmp";column-gap:clamp(24px,3.5vw,56px);row-gap:18px;align-items:start}
  main.fit .wrap > .vz-termgrid{display:contents}
  main.fit .vz-termgrid > .vz-main{grid-area:kv;align-self:start}
  main.fit .vz-termgrid > .vz-cmp{grid-area:cmp;margin:0}
  main.fit .wrap:has(> .vz-termgrid) > .sec-head{grid-area:head;text-align:left;margin:0;align-self:end}
  main.fit .wrap:has(> .vz-termgrid) > .sec-head .eyebrow{justify-content:flex-start}
  main.fit .vz-cmp .vz-table th,main.fit .vz-cmp .vz-table td{padding-top:7px;padding-bottom:7px}
  main.fit .maint{gap:14px}
  main.fit .maint .mcard{padding:18px 20px}
  main.fit .maint .mcard h3{margin-top:10px}
  main.fit > section.cta{min-height:0}
  html{scroll-padding-top:var(--hdr-h,98px)}
}
@media (pointer:coarse) and (prefers-reduced-motion:no-preference){
  html:has(main.fit){scroll-snap-type:y mandatory}
  main.fit > section{scroll-snap-align:start;scroll-snap-stop:always}
  html:has(main.fit) footer.site{scroll-snap-align:end}
}
@media (max-width:899px),(orientation:portrait){
  main.fit > section.band,main.fit > section.system{padding-top:52px;padding-bottom:52px}
  main.fit .sec-head{margin-bottom:26px}
}
/* end one screen per stop */
/* say what we do, 26 Sep */
.heropromise{font-family:var(--sans)!important;font-size:clamp(15px,1.2vw,17px)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;max-width:46ch;line-height:1.55;margin-top:22px}
.heropromise b{display:block;color:var(--ink-hi);font-weight:800}
.statlist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.statlist li{position:relative;padding-left:32px;color:#e8f0f6;font-weight:600}
.statlist li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#FFC61E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3552' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat}
/* end say what we do */
/* everything answers a click, 26 Sep */
.ix{cursor:pointer}
:is(div,li,figure,article,tr,button,span).ix:active{transform:scale(.985)}
.mcard .ic,.tile .ic,.pillar .ic,.step .ic,.rw .ic{transform-origin:50% 55%;transform-box:fill-box}
.ix-hit{animation:ixPop .45s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 0 3px rgba(255,198,30,.5),0 18px 40px -22px rgba(13,53,82,.55)!important}
@keyframes ixPop{0%{transform:scale(1)}35%{transform:scale(1.035)}100%{transform:scale(1)}}
.ix-spin .ic{animation:ixSpin .8s cubic-bezier(.3,.7,.2,1)}
@keyframes ixSpin{to{transform:rotate(360deg)}}
.ix-twinkle .ic{animation:ixTwinkle .85s}
@keyframes ixTwinkle{30%{transform:scale(1.35) rotate(-14deg);filter:drop-shadow(0 0 6px #FFC61E)}60%{transform:scale(.92) rotate(8deg)}100%{transform:none}}
.ix-gauge .ic{animation:ixGauge .9s cubic-bezier(.3,.7,.2,1)}
@keyframes ixGauge{30%{transform:rotate(-38deg)}70%{transform:rotate(26deg)}100%{transform:none}}
.ix-shield .ic{animation:ixShield .9s}
@keyframes ixShield{35%{transform:scale(1.25);filter:drop-shadow(0 0 8px rgba(29,106,58,.8))}100%{transform:none}}
.ix-play .ic{animation:ixPlay .9s}
@keyframes ixPlay{20%,60%{transform:scale(1.25)}40%,80%{transform:scale(.95)}100%{transform:none}}
.ix-drop .ic{animation:ixDrop .8s cubic-bezier(.3,.7,.2,1)}
@keyframes ixDrop{0%{transform:translateY(-22px);opacity:0}55%{transform:translateY(3px);opacity:1}75%{transform:translateY(-4px)}100%{transform:none}}
.ix-link .ic{animation:ixLink .7s}
@keyframes ixLink{25%{transform:rotate(-18deg) scale(1.1)}50%{transform:rotate(14deg)}75%{transform:rotate(-6deg)}100%{transform:none}}
.ix-slide .ic{animation:ixSlide .75s}
@keyframes ixSlide{30%{transform:translateX(-10px);opacity:.3}60%{transform:translateX(8px);opacity:1}100%{transform:none}}
.ix-buzz .ic{animation:ixBuzz .5s linear}
@keyframes ixBuzz{10%,30%,50%,70%,90%{transform:translateX(-3px) rotate(-4deg)}20%,40%,60%,80%{transform:translateX(3px) rotate(4deg)}100%{transform:none}}
.ix-glow .ic{animation:ixGlow .9s}
@keyframes ixGlow{40%{transform:scale(1.2);filter:drop-shadow(0 0 8px rgba(28,91,145,.9))}100%{transform:none}}
.ix-build .ic{animation:ixBuild .8s cubic-bezier(.3,.7,.2,1)}
@keyframes ixBuild{0%{transform:scale(.5);opacity:.2}60%{transform:scale(1.18);opacity:1}100%{transform:none}}
.ix-plan .ic{animation:ixPlan .8s}
@keyframes ixPlan{30%{transform:translateY(-6px) rotate(-10deg)}100%{transform:none}}
.ix-bars .ic{animation:ixBars .8s cubic-bezier(.3,.7,.2,1);transform-origin:50% 100%}
@keyframes ixBars{0%{transform:scaleY(.3)}60%{transform:scaleY(1.15)}100%{transform:none}}
.ix-pop .ic{animation:ixIcon .6s}
@keyframes ixIcon{40%{transform:scale(1.25)}100%{transform:none}}
/* AI search: the answer rewrites itself */
.aichecks li.ix-on{border-color:var(--blue)!important;box-shadow:0 0 0 2px var(--sun),0 12px 28px -18px rgba(13,53,82,.5)}
.ai-a li.ix-win{animation:ixWin 1.3s cubic-bezier(.2,.7,.2,1)}
@keyframes ixWin{0%{box-shadow:0 0 0 0 rgba(255,198,30,.8)}35%{box-shadow:0 0 0 8px rgba(255,198,30,.28);transform:scale(1.025)}100%{box-shadow:0 0 0 0 rgba(255,198,30,0);transform:none}}
.ix-cta{margin:16px 0 0}
.ix-cta a{font-weight:700;color:var(--blue);text-decoration:none;border-bottom:2px solid var(--sun);padding-bottom:2px}
.ix-cta a:hover span{display:inline-block;transform:translateX(4px);transition:transform .2s}
/* the loop: the turn you click lights up and the site acts it out.
   The nodes and the card are placed with SVG transforms, so only their
   insides move. */
.lp-node.ix{cursor:pointer}
.lp-node.lp-hit .lp-ring{transform-box:fill-box;transform-origin:center;animation:lpHit 1.2s cubic-bezier(.2,.7,.2,1);stroke:#FFC61E;stroke-width:5}
@keyframes lpHit{30%{transform:scale(1.22)}60%{transform:scale(.96)}100%{transform:none}}
.lp-cardhit{animation:lpCard 1.2s cubic-bezier(.2,.7,.2,1)}
@keyframes lpCard{35%{filter:drop-shadow(0 0 14px rgba(255,198,30,.85))}100%{filter:none}}
.lp-do1 .lp-th,.lp-do2 .lp-star,.lp-do3 .lp-ln,.lp-do4 .lp-live{transform-box:fill-box;transform-origin:center}
.lp-do1 .lp-th{animation:lpTh .9s cubic-bezier(.2,.7,.2,1) both}
.lp-do1 .lp-th:nth-of-type(2){animation-delay:.12s}.lp-do1 .lp-th:nth-of-type(3){animation-delay:.24s}
@keyframes lpTh{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:none}}
.lp-do2 .lp-star{animation:lpStar .9s}
@keyframes lpStar{40%{transform:scale(1.6);fill:#FFC61E}100%{transform:none}}
.lp-do3 .lp-ln{animation:lpLn .9s cubic-bezier(.2,.7,.2,1);transform-origin:left center}
@keyframes lpLn{0%{transform:scaleX(0)}100%{transform:none}}
.lp-do4 .lp-live{animation:lpLive .9s}
@keyframes lpLive{30%,70%{transform:scale(1.8)}100%{transform:none}}
.stages li.ix-on{box-shadow:0 0 0 2px var(--sun),0 14px 30px -18px rgba(13,53,82,.5)}
/* numbers */
.rt-t i{transform-origin:left center}
.ix-bar .rt-t i{animation:ixBar .8s cubic-bezier(.2,.7,.2,1)}
@keyframes ixBar{from{transform:scaleX(0)}to{transform:none}}
.ix-bar .rt-t b{animation:ixIcon .6s .4s}
.ix-count{animation:ixCount .8s cubic-bezier(.2,.7,.2,1);transform-origin:left center}
@keyframes ixCount{30%{transform:scale(1.06);text-shadow:0 0 24px rgba(255,198,30,.7)}100%{transform:none}}
.ix-grow .rt-gown{animation:ixOwn 1.5s}
@keyframes ixOwn{40%{stroke-width:7}100%{}}
.ix-grow .rt-grent{animation:ixRent 1.5s}
@keyframes ixRent{40%{opacity:.2}100%{opacity:1}}
/* the Google number flips between this year and the last five */
.lc-click{cursor:pointer}
.lc-click.num{transition:text-shadow .25s,transform .25s}
.lc-click.num:hover{text-shadow:0 0 28px rgba(255,198,30,.35);transform:scale(1.015)}
.lc-click.num:focus-visible{outline:3px solid var(--sun);outline-offset:8px;border-radius:8px}
.lc-flip{margin-top:12px;font:700 13px/1 var(--sans);color:#0d3552;background:#FFC61E;border:0;border-radius:999px;padding:9px 16px;cursor:pointer;transition:transform .2s}
.lc-flip:hover{transform:translateY(-1px)}
.lc-flip:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lc-latest{display:block;margin-top:12px;font:600 13.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:#cfe0ee;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lc-latest::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#35c46a;margin-right:8px;box-shadow:0 0 0 0 rgba(53,196,106,.6);animation:lcLive 2s infinite}
.lc-latest:hover{color:#fff;text-decoration:underline}
@keyframes lcLive{70%{box-shadow:0 0 0 8px rgba(53,196,106,0)}100%{box-shadow:0 0 0 0 rgba(53,196,106,0)}}
.lc-cap.lc-swap .lc-line,.lc-cap.lc-swap .lc-sub{animation:lcSwap .4s ease}
@keyframes lcSwap{0%{opacity:1}45%{opacity:0;transform:translateY(6px)}55%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
/* lists and tables */
.compare li.ix-yes::before{animation:ixYes .7s cubic-bezier(.2,.7,.2,1)}
@keyframes ixYes{40%{transform:scale(1.5)}100%{transform:none}}
.compare li.ix-no{animation:ixNo .5s;text-decoration:line-through;text-decoration-color:rgba(179,38,30,.7)}
@keyframes ixNo{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}100%{transform:none}}
.ysteps li span{transition:transform .2s}
.ysteps li.ix-pop span{animation:ixIcon .6s}
.fn-you.ix-sliver{animation:ixSliver 1.2s}
@keyframes ixSliver{40%{stroke-width:22;filter:drop-shadow(0 0 6px #FFC61E)}100%{}}
.fn-ours.ix-sweep{stroke-dasharray:var(--len);animation:ixSweep 1.4s cubic-bezier(.2,.7,.2,1)}
@keyframes ixSweep{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
tr.ix-row,li.ix-row{animation:ixRow .9s}
@keyframes ixRow{0%{background-color:rgba(255,198,30,.38)}100%{background-color:transparent}}
.herofig.ix-hero .heromark{animation:ixHero 1.3s cubic-bezier(.2,.7,.2,1)}
@keyframes ixHero{35%{transform:rotate(-8deg) scale(1.05)}70%{transform:rotate(4deg)}100%{transform:none}}
/* the market check */
.aud button.tag{font:inherit;cursor:pointer;background:#fff;transition:background .2s,color .2s,border-color .2s,transform .2s}
.aud button.tag:hover{border-color:var(--blue);transform:translateY(-1px)}
.aud button.tag[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.aud button.tag:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.ix-pick{animation:ixPop .4s}
.mkt{max-width:760px;margin:clamp(18px,3vh,28px) auto 0;text-align:left;background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:18px 22px;box-shadow:0 18px 40px -26px rgba(13,53,82,.55)}
.mkt-q{font-weight:800;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em;color:var(--ink-hi);margin:0 0 12px}
.mkt-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.mkt label{flex:1 1 220px;display:grid;gap:6px;font:600 13px var(--sans);color:var(--muted)}
.mkt input{font:inherit;font-size:16px;font-weight:400;color:var(--ink-hi);padding:13px 14px;border:1px solid var(--rule);border-radius:10px;background:#fff}
.mkt input:focus{outline:3px solid rgba(28,91,145,.25);border-color:var(--blue-2)}
.mkt .mkt-go{flex:none}
.mkt:not(.is-ready) .mkt-go{opacity:.75}
.mkt-where{margin:8px 0 0;font:500 13px/1.4 var(--sans);color:#1d6a3a}
.mkt-note{font-size:13px;color:var(--muted);margin:10px 0 0}
.mkt.ix-open{animation:ixOpen .9s}
@keyframes ixOpen{30%{box-shadow:0 0 0 6px rgba(255,198,30,.35),0 18px 40px -26px rgba(13,53,82,.55)}100%{}}
@media (prefers-reduced-motion:reduce){.ix,.ix *,.ix-hit,.ix-cta a span,.aud button.tag{animation:none!important;transition:none!important}:is(div,li,figure,article,tr,button,span).ix:active{transform:none}}
/* end everything answers a click */
/* show it, 26 Sep */
.gx{margin:0;position:relative}
.gx svg{display:block;width:100%;height:auto;overflow:visible}
.gx *{animation-play-state:paused}
.gx.gx-on *{animation-play-state:running}
/* 1. social: film, caption, post, found */
.gx-soc svg{filter:drop-shadow(0 24px 40px rgba(13,53,82,.18))}
.gx-rec{animation:gxBlink 1s steps(2,start) infinite}
@keyframes gxBlink{to{opacity:.15}}
.gx-prog,.gx-cap{transform-box:fill-box;transform-origin:left center}
.gx-prog{animation:gxProg 6s linear infinite}
@keyframes gxProg{0%{transform:scaleX(0)}24%,100%{transform:scaleX(1)}}
.gx-cap1{animation:gxCap1 6s infinite}.gx-cap2{animation:gxCap2 6s infinite}.gx-cap3{animation:gxCap3 6s infinite}
@keyframes gxCap1{0%,25%{transform:scaleX(0)}32%,100%{transform:scaleX(1)}}
@keyframes gxCap2{0%,31%{transform:scaleX(0)}38%,100%{transform:scaleX(1)}}
@keyframes gxCap3{0%,37%{transform:scaleX(0)}43%,100%{transform:scaleX(1)}}
.gx-spark{transform-box:fill-box;transform-origin:center;animation:gxSpark 6s infinite}
@keyframes gxSpark{0%,24%{transform:scale(.4);opacity:.3}30%{transform:scale(1.4) rotate(45deg);opacity:1}40%,100%{transform:none;opacity:1}}
.gx-post{transform-box:fill-box;transform-origin:center;animation:gxPost 6s infinite}
@keyframes gxPost{0%,45%{transform:none}49%{transform:scale(.9)}53%{transform:scale(1.06)}57%,100%{transform:none}}
.gx-path{animation:gxDash 1.2s linear infinite}
@keyframes gxDash{to{stroke-dashoffset:-22}}
.gx-new{transform-box:fill-box;transform-origin:center;animation:gxNew 6s infinite}
.gx-new2{animation-name:gxNew2}
@keyframes gxNew{0%,70%{transform:scale(.3);opacity:0}78%{transform:scale(1.1);opacity:1}84%,96%{transform:none;opacity:1}100%{opacity:0}}
@keyframes gxNew2{0%,73%{transform:scale(.3);opacity:0}81%{transform:scale(1.1);opacity:1}87%,96%{transform:none;opacity:1}100%{opacity:0}}
.gx-step{fill:transparent;animation:6s infinite}
.gx-s1{animation-name:gxS1}.gx-s2{animation-name:gxS2}.gx-s3{animation-name:gxS3}
@keyframes gxS1{0%,24%{fill:#FFC61E}26%,100%{fill:transparent}}
@keyframes gxS2{0%,24%{fill:transparent}26%,44%{fill:#FFC61E}46%,100%{fill:transparent}}
@keyframes gxS3{0%,44%{fill:transparent}46%,78%{fill:#FFC61E}80%,100%{fill:transparent}}
/* 2. rented against owned */
.gx-own svg{background:#fff;border-radius:var(--r);box-shadow:0 24px 50px -30px rgba(13,53,82,.55);padding:6px}
.gx-ad{animation:gxAd 7s infinite}
@keyframes gxAd{0%,52%{opacity:1}54%{opacity:.2}56%{opacity:.9}58%{opacity:.1}60%,94%{opacity:0}100%{opacity:1}}
.gx-adoff{animation:gxAdOff 7s infinite}
@keyframes gxAdOff{0%,58%{opacity:0}62%,94%{opacity:1}100%{opacity:0}}
.gx-budget{transform-box:fill-box;transform-origin:left center;animation:gxBudget 7s linear infinite}
@keyframes gxBudget{0%{transform:scaleX(1)}56%,94%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.gx-rdot{animation:gxRdot 7s infinite;animation-delay:calc(var(--k) * -.12s)}
@keyframes gxRdot{0%,50%{opacity:1}60%,94%{opacity:.08}100%{opacity:1}}
.gx-odot{opacity:.12;transform-box:fill-box;transform-origin:center}
.gx-on .gx-odot{animation:gxOdotIn .45s calc(var(--k) * .28s) both}
@keyframes gxOdotIn{from{opacity:.12;transform:scale(.3)}to{opacity:1;transform:none}}
.gx-line{stroke-dasharray:240;stroke-dashoffset:240}
.gx-on .gx-line{animation:gxLine 4s .3s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes gxLine{to{stroke-dashoffset:0}}
.gx-aud{transform-box:fill-box;transform-origin:left center;transform:scaleX(.08)}
.gx-on .gx-aud{animation:gxAud 4s .3s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes gxAud{to{transform:scaleX(1)}}
/* 3. the market map */
.gx-map svg{filter:drop-shadow(0 24px 40px rgba(13,53,82,.16))}
.mp{transform-box:fill-box;transform-origin:50% 100%;opacity:0}
.gx-on .mp{animation:mpDrop .55s calc(var(--k) * .09s) cubic-bezier(.3,.7,.2,1) both}
@keyframes mpDrop{0%{opacity:0;transform:translateY(-26px)}60%{opacity:1;transform:translateY(3px)}100%{opacity:1;transform:none}}
.mp-ring{transform-box:fill-box;transform-origin:center;animation:mpRing 2.4s ease-out infinite}
.mp-ring2{animation-delay:1.2s}
@keyframes mpRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.mp-you{transform-box:fill-box;transform-origin:50% 100%;animation:mpBob 2.4s ease-in-out infinite}
@keyframes mpBob{50%{transform:translateY(-5px)}}
.mp-you.ix-drop{animation:mpDrop .6s cubic-bezier(.3,.7,.2,1)}
.mp-card{transform-box:fill-box;transform-origin:left center}
.mp-card.ix-drop{animation:ixPop .45s}
/* 4. the calendar */
/* 4. the last call: the market check card */
.gx-call{background:#fff;color:#1d2a36;border-radius:22px;padding:clamp(20px,2.4vw,30px);box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.4);text-align:left;width:100%;max-width:520px;justify-self:end;font-family:var(--sans)}
.cc-top{display:flex;align-items:center;gap:10px;font-size:15px;color:#0d3552;padding-bottom:16px;border-bottom:1px solid #e3eaf0}
.cc-top b{font-size:17px}
.cc-len{margin-left:auto;font-size:13px;font-weight:600;color:#5b6b78;background:#eef4fa;border-radius:999px;padding:5px 11px}
.cc-live{width:10px;height:10px;border-radius:50%;background:#35c46a;box-shadow:0 0 0 0 rgba(53,196,106,.6);animation:lcLive 2s infinite}
.cc-status{display:flex;gap:16px;align-items:center;margin:20px 0 18px;padding:16px;border-radius:16px;background:#f4f8fb}
.cc-pin{position:relative;flex:none;width:52px;height:52px;display:grid;place-items:center}
.cc-pin svg{width:40px;height:40px;position:relative;z-index:1}
.gx-on .cc-pin svg{animation:mpDrop .7s cubic-bezier(.3,.7,.2,1) both}
.cc-ring{position:absolute;inset:6px;border-radius:50%;border:3px solid #FFC61E;opacity:0}
.gx-on .cc-ring{animation:mpRing 2.4s .6s ease-out infinite}
.cc-where{margin:0;font-size:clamp(18px,1.6vw,22px);font-weight:800;color:#0a1013;letter-spacing:-.01em}
.cc-state{margin:6px 0 0;display:flex;align-items:center;gap:10px;font-size:14px;color:#44596b}
.cc-bar{flex:none;width:54px;height:6px;border-radius:3px;background:#dde7ef;overflow:hidden}
.cc-bar i{display:block;height:100%;width:40%;border-radius:3px;background:#0d3552;transform:translateX(-100%)}
.gx-on .cc-bar i{animation:ccScan 1.6s ease-in-out infinite}
@keyframes ccScan{to{transform:translateX(260%)}}
.cc-k{margin:0 0 10px;font:700 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#1c5b91}
.cc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cc-list li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(15px,1.2vw,17px);font-weight:600;color:#0a1013;line-height:1.4;opacity:.15;transform:translateY(8px)}
.cc-list li svg{flex:none;width:22px;height:22px;margin-top:1px}
.gx-on .cc-list li{animation:ccIn .5s calc(.5s + var(--k) * .35s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ccIn{to{opacity:1;transform:none}}
.cc-foot{margin:18px 0 0;font-size:13.5px;color:#5b6b78}
/* the call section styles its own paragraphs light; the card keeps its own colors */
.cta .gx-call p,.cta .gx-call li,.cta .gx-call b{opacity:1}
.cta .gx-call .cc-where{color:#0a1013!important;font-size:clamp(18px,1.6vw,22px)!important;margin:0!important;max-width:none!important}
.cta .gx-call .cc-state{color:#44596b!important;font-size:14px!important;margin:6px 0 0!important;max-width:none!important}
.cta .gx-call .cc-k{color:#1c5b91!important;font-size:12px!important;margin:0 0 10px!important;max-width:none!important}
.cta .gx-call .cc-foot{color:#5b6b78!important;font-size:13.5px!important;margin:18px 0 0!important;max-width:none!important}
.gx-pick{animation:gxPick 5s infinite}
@keyframes gxPick{0%,48%{fill:#eef4fa}52%,92%{fill:#1d6a3a}100%{fill:#eef4fa}}
.gx-check{stroke-dasharray:40;stroke-dashoffset:40;animation:gxCheck 5s infinite}
@keyframes gxCheck{0%,52%{stroke-dashoffset:40}62%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
.gx-cursor{animation:gxCursor 5s cubic-bezier(.45,.05,.3,1) infinite}
@keyframes gxCursor{0%{transform:translate(90px,250px)}44%,92%{transform:translate(262px,190px)}100%{transform:translate(90px,250px)}}
.gx-slot{transition:fill .2s}
/* 5. the hero compass: squeeze, spin, trace */
.herofig.ix{cursor:pointer}
/* fill box origins: the hinge sits at 88.8% 2% of the left leg and 11.2% 2% of the right;
   the compass carries an invisible ring centred on its spin point so its box never shifts */
.cmp-l{transform-box:fill-box;transform-origin:88.8% 2%}
.cmp-r{transform-box:fill-box;transform-origin:11.2% 2%}
.cmp-bar,.cmp{transform-box:fill-box;transform-origin:50% 50%}
.cmp-trace{stroke-dasharray:365;stroke-dashoffset:365;opacity:0}
.herofig.ix-hero .cmp-l{animation:cmpL 1.9s cubic-bezier(.45,.05,.3,1)}
.herofig.ix-hero .cmp-r{animation:cmpR 1.9s cubic-bezier(.45,.05,.3,1)}
.herofig.ix-hero .cmp-bar{animation:cmpBar 1.9s cubic-bezier(.45,.05,.3,1)}
.herofig.ix-hero .cmp{animation:cmpSpin 1.9s cubic-bezier(.45,.05,.3,1)}
.herofig.ix-hero .cmp-trace{animation:cmpTrace 1.9s cubic-bezier(.45,.05,.3,1)}
@keyframes cmpL{0%{transform:none}16%,80%{transform:rotate(-15deg)}100%{transform:none}}
@keyframes cmpR{0%{transform:none}16%,80%{transform:rotate(15deg)}100%{transform:none}}
@keyframes cmpBar{0%{transform:none}16%,80%{transform:scaleX(.28)}100%{transform:none}}
@keyframes cmpSpin{0%,16%{transform:rotate(0)}80%,100%{transform:rotate(360deg)}}
.herofig.ix-hero .orbit > *{transform-box:view-box;transform-origin:220px 222px;animation:orbRev 1.9s cubic-bezier(.45,.05,.3,1)}
@keyframes orbRev{0%,16%{transform:rotate(0)}80%,100%{transform:rotate(-360deg)}}
@keyframes cmpTrace{0%,16%{stroke-dashoffset:365;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
/* layout: the words on one side, the graphic on the other */
@media (min-width:900px) and (min-height:560px) and (orientation:landscape){
  main.fit .band.social > .wrap,main.fit .wrap:has(> .gx-own),main.fit .audsec > .wrap{display:grid!important;column-gap:clamp(28px,4vw,64px);row-gap:clamp(14px,2.2vh,24px);align-items:center}
  main.fit .band.social > .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"head fig" "cards fig"}
  main.fit .band.social .sec-head,main.fit .wrap:has(> .gx-own) > .sec-head,main.fit .audsec .sec-head{grid-area:head;text-align:left;margin:0;max-width:none;align-self:end}
  main.fit .band.social .sec-head .eyebrow,main.fit .wrap:has(> .gx-own) .eyebrow,main.fit .audsec .eyebrow{justify-content:flex-start}
  main.fit .band.social .soc4{grid-area:cards;grid-template-columns:1fr 1fr!important;gap:12px;align-self:start}
  main.fit .gx-soc{grid-area:fig}
  main.fit .wrap:has(> .gx-own){grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head cmp" "fig cmp"}
  main.fit .wrap:has(> .gx-own) > .compare{grid-area:cmp;grid-template-columns:1fr;margin:0}
  main.fit .gx-own{grid-area:fig;align-self:start}
  main.fit .audsec > .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"head fig" "chips fig" "mkt fig"}
  main.fit .audsec .aud{grid-area:chips;justify-content:flex-start;margin:0}
  main.fit .audsec .mkt{grid-area:mkt;margin:0;max-width:none}
  main.fit .gx-map{grid-area:fig}
  main.fit > section.cta.cta-full{min-height:var(--fit-h)!important;display:flex}
  main.fit .cta-full > .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(28px,5vw,80px);align-items:center;text-align:left}
  main.fit .cta-full > .wrap > h2{grid-column:1;grid-row:2;font-size:clamp(44px,5.2vw,78px);line-height:1.02;margin:0}
  main.fit .cta-full > .wrap > p{grid-column:1;grid-row:3;font-size:clamp(18px,1.7vw,23px);max-width:36ch;margin:18px 0 26px}
  main.fit .cta-full > .wrap > .btn{grid-column:1;grid-row:4;justify-self:start;font-size:clamp(17px,1.4vw,20px);padding:18px 34px}
  main.fit .cta-full > .wrap > .gx-cal{grid-column:2;grid-row:1 / -1}
}
@media (max-width:899px),(orientation:portrait){
  .gx{max-width:480px;margin:26px auto 0}
  .gx-cal{max-width:340px}
}
@media (prefers-reduced-motion:reduce){.cc-list li{opacity:1;transform:none}.gx *{animation:none!important}.gx circle animateMotion{display:none}.mp{opacity:1}.gx-line{stroke-dashoffset:0}.gx-aud{transform:none}.gx-odot{opacity:1}.gx-new{opacity:1}.gx-adoff{opacity:0}}
/* end show it */
/* text flows in and out, 27 Sep */
html.fl-js .mo[data-fl="l"]{transform:translateX(-44px)}
html.fl-js .mo[data-fl="r"]{transform:translateX(44px)}
html.fl-js [data-fl]{transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
html.fl-js .fl-out{opacity:0!important}
html.fl-js .fl-out[data-fl="l"]{transform:translateX(-44px)!important}
html.fl-js .fl-out[data-fl="r"]{transform:translateX(44px)!important}
html.fl-js .fl-out[data-fl="u"]{transform:translateY(-26px)!important}
html.fl-js.fl-up .fl-out[data-fl="u"]{transform:translateY(26px)!important}
@media (prefers-reduced-motion:reduce){html.fl-js [data-fl]{transition:none!important;transform:none!important;opacity:1!important}}
/* end text flows */
/* no accent bars, 26 Sep */
.heropromise,.foot .tag{border-left:0!important;padding-left:0!important}
.stages li{border:1px solid var(--rule-2)!important;border-radius:var(--r-sm)!important}
.stages li.you{border-color:#ecd9a8!important;background:#fffaf0!important}
.aichecks li.ix-on{box-shadow:0 0 0 2px var(--sun),0 12px 28px -18px rgba(13,53,82,.5)!important}
/* end no accent bars */
/* avatar menu, 27 Sep */
.topbar .wrap{overflow:visible}
.tb-menu{position:relative;display:inline-flex;align-items:center}
.tb-menu.tb-av-phone{display:none;width:auto;height:auto;background:none;animation:none;border-radius:0}
.tb-menu .tb-av{cursor:pointer;padding:0;background:var(--sun);color:var(--blue);animation:tbIn .35s cubic-bezier(.2,.7,.2,1) both}
.tb-av-top .tb-av{width:22px;height:22px;font-size:11.5px}
.tb-av-phone .tb-av{width:26px;height:26px;font-size:12px}
.tb-av-app{margin-left:auto}
.tb-av-app .tb-av{width:40px;height:40px;font-size:16px;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--rule)}
.tb-menu.is-open .tb-av{transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,198,30,.45)}
.tb-drop{position:absolute;right:0;top:calc(100% + 10px);min-width:210px;background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 22px 44px -16px rgba(13,53,82,.45);padding:6px;z-index:90;transform-origin:top right;animation:tbDrop .2s cubic-bezier(.2,.7,.2,1) both;text-align:left}
.tb-drop[hidden]{display:none}
.tb-drop .tb-who{margin:6px 10px 6px;font:600 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tb-drop .tb-item{display:flex!important;align-items:center;gap:10px;width:100%;padding:11px 12px!important;border:0!important;border-radius:9px;background:none;cursor:pointer;font:600 15px/1.2 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink-hi)!important;white-space:nowrap;text-decoration:none}
.tb-drop .tb-item:hover,.tb-drop .tb-item:focus-visible{background:#eef4f9;outline:none}
.tb-drop .tb-item svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.tb-drop .tb-item:hover svg{transform:translateX(2px)}
.tb-drop .tb-out{color:#8a1c1c!important;margin-top:4px}
.tb-drop .tb-out:hover{background:#fdecea}
@keyframes tbDrop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
html.is-signed-in body.p-app .p-me{display:none}
@media (max-width:480px){.topbar .wrap .tb-av-phone{display:inline-flex}.tb-drop{position:fixed;left:12px;right:12px;top:calc(var(--tb-h,36px) + 8px);min-width:0}}
@media (prefers-reduced-motion:reduce){.tb-drop,.tb-menu .tb-av{animation:none}}
/* end avatar menu */
/* phone first, 27 Sep */
/* the mail button, every public page */
.mail-fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--blue,#0d3552);color:#fff;box-shadow:0 10px 26px -8px rgba(13,53,82,.6),0 0 0 3px #fff;text-decoration:none;border:0;opacity:0;transform:scale(.4) translateY(20px);transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.3),box-shadow .2s}
.mail-fab.is-on{opacity:1;transform:none}
.mail-fab:hover,.mail-fab:focus-visible{transform:scale(1.08);box-shadow:0 14px 30px -8px rgba(13,53,82,.7),0 0 0 3px var(--sun,#FFC61E)}
.mail-fab svg{width:32px;height:32px;position:relative;z-index:1;overflow:visible}
.mail-fab .mf-env{fill:var(--sun,#FFC61E);stroke:none}
.mail-fab .mf-flap{fill:none;stroke:var(--blue,#0d3552);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-origin:16px 9px;transition:transform .35s}
.mail-fab .mf-letter{fill:#fff;stroke:var(--blue,#0d3552);stroke-width:1.4;transform:translateY(6px);opacity:0;transition:transform .35s,opacity .2s}
.mail-fab .mf-lines{fill:none;stroke:var(--blue,#0d3552);stroke-width:1.4;stroke-linecap:round;transform:translateY(6px);opacity:0;transition:transform .35s,opacity .2s}
.mail-fab:hover .mf-flap,.mail-fab:focus-visible .mf-flap{transform:scaleY(-1)}
.mail-fab:hover .mf-letter,.mail-fab:hover .mf-lines,.mail-fab:focus-visible .mf-letter,.mail-fab:focus-visible .mf-lines{transform:translateY(-5px);opacity:1}
.mail-fab .mf-ring{position:absolute;inset:-5px;border-radius:50%;border:3px solid var(--sun,#FFC61E);animation:mfRing 2.4s ease-out infinite;pointer-events:none}
@keyframes mfRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}
.mail-fab.is-sent svg{animation:mfSend .7s cubic-bezier(.3,.7,.3,1)}
@keyframes mfSend{0%{transform:none}35%{transform:translate(-3px,3px) rotate(-8deg)}70%{transform:translate(14px,-16px) rotate(12deg);opacity:0}71%{transform:translate(-10px,10px);opacity:0}100%{transform:none;opacity:1}}
.mail-fab .mf-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(10px,-50%);opacity:0;pointer-events:none;white-space:nowrap;background:#fff;color:var(--ink-hi,#0b1620);font:700 14px/1 var(--sans);padding:11px 14px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(13,53,82,.5);border:1px solid var(--rule,#dfe6ec);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.mail-fab:hover .mf-tip,.mail-fab.is-tell .mf-tip{opacity:1;transform:translate(0,-50%)}
html.is-signed-in .mail-fab{display:none}
@media print{.mail-fab{display:none}}
@media (prefers-reduced-motion:reduce){.mail-fab,.mail-fab *{animation:none!important;transition:none!important}}

/* phones: centered, big, and moving */
@media (max-width:820px){
  body{overflow-x:hidden}
  main section{text-align:center}
  main section .wrap{overflow-wrap:anywhere}
  main section :is(ul,ol,table,details,summary,dl,form,label,.fq,.vz-table,.a-items){text-align:left}
  main section :is(h1,h2,h3){margin-left:auto;margin-right:auto;text-wrap:balance}
  main section :is(p,.sub,.lead){margin-left:auto;margin-right:auto;text-wrap:pretty}
  main section .dim,main section .eyebrow,main section .kicker{justify-content:center;margin-left:auto;margin-right:auto}
  main section .dim .tick,main section .dim .line{display:none}
  main section :is(.actions,.cta-row,.btns){display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:440px;margin-left:auto;margin-right:auto}
  main section :is(.actions,.cta-row,.btns) .btn{width:100%;justify-content:center;text-align:center}
  main section .card :is(svg,.ic,.icon,.ico):first-child{margin-left:auto;margin-right:auto}
  main section .card{text-align:center}
  main section .card :is(ul,ol){display:inline-block;text-align:left}
  /* the hero: the drafting mark on top, words centered under it */
  .hero .wrap{display:flex!important;flex-direction:column;align-items:center;text-align:center}
  .hero .copy{display:flex;flex-direction:column;align-items:center;width:100%}
  .hero .herofig{display:block!important;order:-1;width:min(44vw,190px);max-width:190px;margin:-6px auto 0;animation:mbHero .8s cubic-bezier(.2,.8,.2,1) both}
  .hero .herofig svg{width:100%;height:auto}
  .hero h1{font-size:clamp(34px,9.6vw,46px)!important;line-height:1.04}
  .hero .sub{font-size:17.5px;max-width:34ch}
  .hero .heropromise{max-width:36ch;margin-left:auto;margin-right:auto}
  @keyframes mbHero{from{opacity:0;transform:scale(.85) rotate(-6deg)}to{opacity:1;transform:none}}
  /* chips and trade pickers wrap inside the screen */
  main section :is(.mkt,.trades,.chips,.fq-chips){justify-content:center;flex-wrap:wrap;max-width:100%}
  .mkt :is(button,.chip){max-width:100%}
  .gx-call,.gx-call *{max-width:100%;min-width:0}
  .gx-call{text-align:left}
  /* the mail button sits above the phone's toolbar */
  .mail-fab{width:58px;height:58px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .mail-fab .mf-tip{font-size:13px}
  /* pieces slide in and off as the page moves */
  html.mb-js [data-mb]{transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity}
  html.mb-js [data-mb].mb-wait{opacity:0}
  html.mb-js [data-mb="l"].mb-wait{transform:translateX(-36px)}
  html.mb-js [data-mb="r"].mb-wait{transform:translateX(36px)}
  html.mb-js [data-mb="u"].mb-wait{transform:translateY(28px)}
  html.mb-js [data-mb].mb-gone-up{opacity:0;transform:translateY(-22px) scale(.98)}
  html.mb-js [data-mb].mb-gone-dn{opacity:0;transform:translateY(22px) scale(.98)}

  /* flow.js slides sideways on wide screens; on phones everything moves up and down */
  html.fl-js .mo[data-fl="l"],html.fl-js .mo[data-fl="r"]{transform:translateY(18px)}
  html.fl-js .fl-out[data-fl="l"],html.fl-js .fl-out[data-fl="r"]{transform:translateY(-18px)!important}
  /* the footer centers too */
  footer.site .foot{text-align:center;justify-items:center}
  footer.site .foot .col{display:flex;flex-direction:column;align-items:center}
  footer.site .fine{text-align:center}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  html.mb-js [data-mb]{opacity:1!important;transform:none!important;transition:none!important}
  .hero .herofig{animation:none}
}
/* no accent bars: the pillar cards */
.pillar{border-top:1px solid var(--rule-2)!important}
/* end phone first */
/* answers and links, 27 Sep */
.qa-band .qa-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start}
.qa-band.qa-only .qa-wrap{grid-template-columns:1fr}
.qa-col h2{margin:0 0 16px;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em}
.qa-col .fq summary h3{font-size:17px}
.qa-col .fq-a p{font-size:15.5px}
.qa-more,.qa-card{text-decoration:none}
.qa-more{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:700;color:var(--blue)}
.qa-more svg,.qa-card i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.qa-more:hover svg{transform:translateX(4px)}
.qa-read{display:grid;gap:12px;align-self:stretch;grid-template-rows:auto repeat(3,1fr)}
.qa-band .qa-wrap{align-items:stretch}
.qa-band.qa-only .qa-read{grid-template-rows:auto}
.qa-band.qa-only .qa-read{grid-template-columns:repeat(3,minmax(0,1fr))}
.qa-band.qa-only .qa-k{grid-column:1/-1}
.qa-k{margin:0 0 2px;font:700 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2,#1c5b91)}
.qa-card{position:relative;display:grid;gap:4px;padding:18px 52px 18px 20px;background:#fff;border:1px solid var(--rule);border-radius:var(--r-sm,14px);color:inherit;box-shadow:0 10px 26px -18px rgba(13,53,82,.35);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .2s}
.qa-card b{font-size:17px;color:var(--ink-hi)}
.qa-card span{font-size:14.5px;color:var(--muted);line-height:1.45}
.qa-card i{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#eef4f9;color:var(--blue);transition:background .2s,color .2s}
.qa-card:hover,.qa-card:focus-visible{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 18px 34px -18px rgba(13,53,82,.55)}
.qa-card:hover i,.qa-card:focus-visible i{background:var(--sun,#FFC61E);color:var(--blue)}
.qa-card:hover i svg{transform:translateX(3px)}
.qa-card:active{transform:scale(.98)}
a.xl{color:inherit;text-decoration:underline;text-decoration-color:rgba(28,91,145,.45);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s,color .2s,background-size .3s;background:linear-gradient(transparent 62%,rgba(255,198,30,.35) 62%) no-repeat 0 0/0 100%}
a.xl:hover,a.xl:focus-visible{color:var(--blue);text-decoration-color:var(--blue);background-size:100% 100%}
.fq-a .fq-lead{padding-left:0!important;font-weight:700!important}
.fq-a .fq-lead::before{display:none!important}
.fq:target{border-color:var(--blue);box-shadow:0 0 0 3px rgba(255,198,30,.45)}
@media (max-width:820px){.qa-band .qa-wrap,.qa-band.qa-only .qa-read{grid-template-columns:1fr}.qa-col h2{text-align:center}.qa-card{text-align:left}}
@media (prefers-reduced-motion:reduce){.qa-card,.qa-more svg,.qa-card i svg,a.xl{transition:none}.qa-card:hover{transform:none}}
/* end answers and links */
/* words where they belong, 27 Sep */
main p,main li,main td,main .lead,main .sub{text-wrap:pretty}
main h1,main h2,main h3{text-wrap:balance}
.nw{white-space:nowrap}
/* the Google number: the sentence on its own line, the label under it */
.lc-cap .lc-sub{flex-direction:column;align-items:flex-start;gap:10px}
.lc-cap .lc-subt{display:block;max-width:100%;white-space:nowrap;overflow:hidden}
@media (max-width:899px){.lc-cap .lc-subt{white-space:normal}}
/* the rhythm, as six cards */
.rhythm.rh2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border:0;border-radius:0;background:none;overflow:visible;box-shadow:none}
.rh2 .rw{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic freq" "when when" "who who" "p p";align-content:start;align-items:center;gap:10px 12px;padding:22px 22px 20px!important;background:#fff;border:1px solid var(--rule)!important;border-radius:var(--r);box-shadow:0 12px 30px -20px rgba(13,53,82,.45);cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .2s}
.rh2 .rw:hover,.rh2 .rw:focus-visible{transform:translateY(-3px);border-color:var(--blue)!important;box-shadow:0 20px 40px -22px rgba(13,53,82,.6);outline:none}
.rh2 .rw:active{transform:scale(.98)}
.rh2 .rh-ic{grid-area:ic;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#e8f0f7;color:var(--blue)}
.rh2 .rh-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.rh2 .rw.is-you .rh-ic{background:#fff4d6;color:#7a5300}
.rh2 .rw.is-both .rh-ic{background:linear-gradient(135deg,#fff4d6 50%,#e8f0f7 50%)}
.rh2 .rh-freq{grid-area:freq;justify-self:end;font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-2);background:#eef4f9;border-radius:999px;padding:7px 11px}
.rh2 .when{grid-area:when;font-size:clamp(19px,1.5vw,23px);font-weight:800;letter-spacing:-.01em;color:var(--ink-hi);margin-top:4px}
.rh2 .who{grid-area:who;justify-self:start;border-radius:999px;padding:5px 10px;background:#e8f0f7;color:var(--blue-2)}
.rh2 .who.you{background:#fff4d6;color:#7a5300}
.rh2 p{grid-area:p;margin:2px 0 0!important;font-size:var(--body-sm,15.5px);line-height:1.55;color:var(--muted)}
.rh2 .rw.rh-hit .rh-ic svg{animation:rhHit .7s cubic-bezier(.2,.7,.2,1)}
.rh2 .rw.is-you.rh-hit .rh-ic svg{animation-name:rhPop}
.rh2 .rw:nth-child(5).rh-hit .rh-ic svg{animation-name:rhSpin}
@keyframes rhHit{35%{transform:translateY(-4px) rotate(-8deg)}70%{transform:translateY(1px) rotate(4deg)}}
@keyframes rhPop{40%{transform:scale(1.25)}}
@keyframes rhSpin{to{transform:rotate(360deg)}}
@media (max-width:1100px){.rhythm.rh2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.rhythm.rh2{grid-template-columns:1fr;gap:12px}.rh2 .rw{text-align:left}}
/* phones: sections glue together, nothing pokes past the edge */
@media (max-width:820px){
  html,body{overflow-x:hidden}
  @supports (overflow:clip){html,body{overflow-x:clip}}
  html,html:has(main.fit){scroll-snap-type:none!important}
  main > section{scroll-snap-align:none!important}
  section.band,section.system,section.pillars,section.steps,section.statband,section.qa-band{padding-top:44px!important;padding-bottom:40px!important}
  main > section[class*="mood-"]{box-shadow:none}
  .statband .wrap > *,.statband .stat,.statband .unit{min-width:0;max-width:100%}
  .rt-hbars,.rt-hb{max-width:100%}
}
@media (prefers-reduced-motion:reduce){.rh2 .rw,.rh2 .rh-ic svg{transition:none;animation:none!important}.rh2 .rw:hover{transform:none}}
/* end words where they belong */
/* nothing jumps, 27 Sep */
html.ia-boot main{opacity:0}
main{transition:opacity .28s ease}
@media (prefers-reduced-motion:reduce){html.ia-boot main{opacity:1}main{transition:none}}
/* end nothing jumps */
/* fluid, 27 Sep */
:root{--fx-ease:cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:no-preference){
  html.mo-js .mo.mo-in{transition:opacity .7s var(--fx-ease),transform .85s var(--fx-ease)}
  html.mo-js .mo-w.mo{transform:translateY(.16em);filter:blur(7px)}
  html.mo-js .mo-w.mo.mo-in{transform:none;filter:blur(0);transition:opacity .7s var(--fx-ease),transform .9s var(--fx-ease),filter .7s var(--fx-ease)}
  html.fl-js .mo.mo-in[data-fl]{transform:none}
  .herofig.ix-hero .cmp-l{animation:fxCmpL 2.4s linear}
  .herofig.ix-hero .cmp-r{animation:fxCmpR 2.4s linear}
  .herofig.ix-hero .cmp-bar{animation:fxCmpBar 2.4s linear}
  .herofig.ix-hero .cmp{animation:fxCmpSpin 2.4s linear}
  .herofig.ix-hero .cmp-trace{animation:fxCmpTrace 2.4s linear}
  .herofig.ix-hero .orbit > *{animation:fxOrbRev 2.4s linear}
  .herofig.hero-live .orbit > g:nth-of-type(2) circle{transform-box:fill-box;transform-origin:center;animation:fxNode 3.6s ease-in-out infinite}
  .herofig.hero-live .orbit > g:nth-of-type(2) circle:nth-child(2){animation-delay:.9s}
  .herofig.hero-live .orbit > g:nth-of-type(2) circle:nth-child(3){animation-delay:1.8s}
  .herofig.hero-live .orbit > g:nth-of-type(2) circle:nth-child(4){animation-delay:2.7s}
}
/* legs close (0 to 14%), compass and ring spin together on one curve (14 to 70%), a beat of stillness, then the legs open (78 to 100%) */
@keyframes fxCmpL{0%{transform:none;animation-timing-function:cubic-bezier(.5,0,.2,1)}14%{transform:rotate(-15deg)}78%{transform:rotate(-15deg);animation-timing-function:cubic-bezier(.3,1.3,.5,1)}100%{transform:none}}
@keyframes fxCmpR{0%{transform:none;animation-timing-function:cubic-bezier(.5,0,.2,1)}14%{transform:rotate(15deg)}78%{transform:rotate(15deg);animation-timing-function:cubic-bezier(.3,1.3,.5,1)}100%{transform:none}}
@keyframes fxCmpBar{0%{transform:none;animation-timing-function:cubic-bezier(.5,0,.2,1)}14%{transform:scaleX(.28)}78%{transform:scaleX(.28);animation-timing-function:cubic-bezier(.3,1.3,.5,1)}100%{transform:none}}
@keyframes fxCmpSpin{0%{transform:rotate(0)}14%{transform:rotate(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}70%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes fxOrbRev{0%{transform:rotate(0)}14%{transform:rotate(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}70%{transform:rotate(-360deg)}100%{transform:rotate(-360deg)}}
@keyframes fxCmpTrace{0%{stroke-dashoffset:365;opacity:0}12%{stroke-dashoffset:365;opacity:1}14%{stroke-dashoffset:365;opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}70%{stroke-dashoffset:0;opacity:1}76%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fxNode{0%,100%{transform:none;fill:#fff}50%{transform:scale(1.45);fill:#FFC61E}}
/* end fluid */
/* apple first, 27 Sep */
html.ua-apple body{-webkit-tap-highlight-color:transparent}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.ua-apple header.site{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  html.ua-apple .topbar{background:rgba(13,53,82,.88);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
}
html.ua-ios input,html.ua-ios select,html.ua-ios textarea{font-size:max(16px,1em)}
html.ua-app.ua-ios .topbar{padding-top:env(safe-area-inset-top)}
html.ua-android header.site,html.ua-windows header.site{background:rgba(255,255,255,.98);-webkit-backdrop-filter:none;backdrop-filter:none}
html.ua-windows{scrollbar-width:thin;scrollbar-color:#a9bac7 transparent}
html.ua-windows ::-webkit-scrollbar{width:10px;height:10px}
html.ua-windows ::-webkit-scrollbar-thumb{background:#a9bac7;border-radius:10px;border:3px solid transparent;background-clip:content-box}
/* end apple first */
/* the door page and the real market check, 27 Sep */
body.hi-page{min-height:100dvh}
.hi-main{max-width:460px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));text-align:center;display:grid;gap:14px}
.hi-brand{display:inline-flex;flex-direction:column;align-items:center;gap:8px;justify-self:center;color:var(--blue);font:700 12.5px/1 var(--mono);letter-spacing:.16em;text-decoration:none}
.hi-brand img{width:56px;height:56px;border-radius:13px;box-shadow:0 10px 24px -12px rgba(13,53,82,.7)}
.hi-main h1{font-size:clamp(34px,9vw,44px);line-height:1.05;letter-spacing:-.03em;margin:10px 0 0;color:var(--ink-hi)}
.hi-main h1 .accent{color:var(--blue)}
.hi-sub{margin:0 auto;max-width:34ch;color:var(--muted);font-size:17px}
.hi-save{justify-self:center;display:inline-flex;align-items:center;gap:10px}
.hi-save svg{width:22px;height:22px}
.hi-form,.hi-done{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:20px;text-align:left;display:grid;gap:12px;box-shadow:0 20px 44px -30px rgba(13,53,82,.6);transition:opacity .25s,transform .25s}
.hi-form.is-out{opacity:0;transform:translateY(-8px)}
.hi-form[hidden],.hi-done[hidden],.mkt-more[hidden]{display:none}
.hi-form h2,.hi-done h2{margin:0;font-size:22px;letter-spacing:-.01em;color:var(--ink-hi)}
.hi-note{margin:-6px 0 2px;font-size:14px;color:var(--muted)}
.hi-form label{display:grid;gap:6px;font:600 13.5px var(--sans);color:var(--ink-hi)}
.hi-form input,.hi-form select{font:inherit;font-size:16px;font-weight:400;padding:12px 13px;border:1px solid var(--rule);border-radius:12px;background:#fff;color:var(--ink-hi);width:100%;box-sizing:border-box}
.hi-form input:focus,.hi-form select:focus{outline:3px solid rgba(28,91,145,.25);border-color:var(--blue-2)}
.hi-form .hi-ok{grid-template-columns:22px 1fr;align-items:start;gap:10px;font-weight:500;color:var(--muted);font-size:13.5px;line-height:1.45}
.hi-form .hi-ok input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue)}
.hi-hp,.mkt-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.hi-form .btn{width:100%;justify-content:center}
.hi-msg,.mkt-msg{margin:0;font-size:14px;color:#1d6a3a;min-height:1em}
.hi-msg.err,.mkt-msg.err{color:#9b2c1f}
.hi-done{text-align:center;justify-items:center;opacity:0;transform:scale(.97)}
.hi-done.is-in{opacity:1;transform:none}
.hi-done p{margin:0;color:var(--muted)}
.hi-check{width:64px;height:64px}
.hi-check circle{fill:#eaf6ee;stroke:#1d6a3a;stroke-width:2}
.hi-check path{fill:none;stroke:#1d6a3a;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .6s .2s cubic-bezier(.16,1,.3,1)}
.hi-done.is-in .hi-check path{stroke-dashoffset:0}
.hi-more{justify-self:center;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--blue-2);text-decoration:none;padding:8px}
.hi-more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.hi-more:hover svg{transform:translateX(3px)}
.hi-main > *{animation:hiIn .6s cubic-bezier(.16,1,.3,1) both}
.hi-main > :nth-child(2){animation-delay:.06s}.hi-main > :nth-child(3){animation-delay:.12s}.hi-main > :nth-child(4){animation-delay:.18s}.hi-main > :nth-child(5){animation-delay:.24s}.hi-main > :nth-child(n+6){animation-delay:.3s}
@keyframes hiIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mkt-more{display:grid;gap:10px;margin-top:12px;animation:hiIn .45s cubic-bezier(.16,1,.3,1) both}
.mkt-ok{display:grid!important;grid-template-columns:22px 1fr;align-items:start;gap:10px!important;font-weight:500!important;font-size:13.5px!important;line-height:1.45}
.mkt-ok input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue);padding:0}
.mkt.is-sent{text-align:center}
@media (prefers-reduced-motion:reduce){.hi-main > *,.mkt-more{animation:none}.hi-done,.hi-form{transition:none}.hi-check path{transition:none;stroke-dashoffset:0}}
/* end door page */
/* the phone, alive, 27 Sep */
.gx-post.sx-tap{cursor:pointer;pointer-events:auto}
.gx-post.sx-tap rect{transition:fill .2s}
.gx-post.sx-tap:hover rect{fill:#ffd24d}
.gx-post.sx-down{animation:none;transform:scale(.9);transition:transform .08s}
.gx-post.sx-press{animation:sxPress .6s cubic-bezier(.3,1.6,.5,1) both}
.gx-post.sx-tap.sx-posted rect,.gx-post.sx-tap.sx-posted:hover rect{fill:#1d6a3a}
.gx-post.sx-tap.sx-posted text{fill:#fff}
@keyframes sxPress{0%{transform:scale(.88)}45%{transform:scale(1.1)}100%{transform:none}}
.sx-heart{transform-box:fill-box;transform-origin:center;opacity:0;animation:sxFloat 1.7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes sxFloat{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1;transform:translate(calc(var(--dx) * .2),-14px) scale(1.15)}100%{opacity:0;transform:translate(var(--dx),-120px) scale(.8) rotate(var(--rot))}}
.sx-bub{transform-box:fill-box;transform-origin:left bottom;opacity:0;animation:sxBub 2.2s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes sxBub{0%{opacity:0;transform:scale(.3)}12%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.sx-dot{animation:sxDot .9s ease-in-out infinite}
@keyframes sxDot{0%,60%,100%{opacity:.3}30%{opacity:1}}
.sx-comment{transform-box:fill-box;transform-origin:center bottom;animation:sxIn .5s cubic-bezier(.3,1.4,.5,1) both;transition:opacity .45s,transform .45s}
.sx-comment.sx-out{opacity:0;transform:translateY(-10px)}
@keyframes sxIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.sx-line{transform-box:fill-box;transform-origin:left center;animation:sxLine .5s .15s cubic-bezier(.16,1,.3,1) both}
.sx-l2{animation-delay:.25s}
@keyframes sxLine{from{transform:scaleX(0)}to{transform:none}}
.sx-mini{transform-box:fill-box;transform-origin:center;animation:sxPop .5s .5s cubic-bezier(.3,1.8,.5,1) both}
@keyframes sxPop{from{transform:scale(0)}to{transform:none}}
.gx-site.sx-hit > rect:first-child,.gx-gbp.sx-hit > rect:first-child{animation:sxHit .9s ease-out}
@keyframes sxHit{0%{stroke:#FFC61E;stroke-width:4}100%{stroke:#d6e2ec;stroke-width:1.5}}
.gx-site.sx-hit .gx-new,.gx-gbp.sx-hit .gx-new{animation:sxNewHit .9s cubic-bezier(.3,1.5,.5,1)}
@keyframes sxNewHit{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:none;opacity:1}}
.sx-layer *{animation-play-state:running!important}
@media (prefers-reduced-motion:reduce){.sx-heart,.sx-bub,.sx-comment{display:none}.gx-post.sx-press{animation:none}}
/* end the phone */
/* the google number, both sides, 27 Sep */
.lc-cap .lc-subt:empty{display:none}
.rt-hbars{transition:opacity .22s ease,transform .22s ease}
.rt-hbars.lc-redraw{opacity:0;transform:translateY(6px)}
.rt-hb.est .rt-t i{background:repeating-linear-gradient(135deg,rgba(255,255,255,.30) 0 6px,rgba(255,255,255,.12) 6px 12px)}
.rt-hb.est.hi .rt-t i{background:repeating-linear-gradient(135deg,var(--rt-hi,#FFC61E) 0 6px,rgba(255,198,30,.45) 6px 12px)}
.rt-hb.est .rt-y{font-style:italic}
@media (max-width:899px){
  .statband .lc-cap .lc-line{display:block;text-align:center}
  .statband .lc-cap .lc-line .lc-pulse{vertical-align:.1em;margin-right:10px}
  .statband .vz-foot{text-align:center;justify-items:center;justify-content:center;align-items:center}
  .statband .vz-foot .vz-tag{margin-left:auto;margin-right:auto}
  .statband .vz-foot .ck-cap{display:block;text-align:center}
  .statband .lc-cap .lc-sub{align-items:center}
  .lc-latest{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){.rt-hbars{transition:none}}
/* end google number */
/* found in search, 27 Sep */
@media (prefers-reduced-motion:reduce){.gx-soc .gx-find{display:none}}
/* end found in search */
/* phones: the section chip, 27 Sep */
.sec-chip{position:fixed;left:50%;top:70px;z-index:39;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);
  transform:translate(-50%,-6px);opacity:0;pointer-events:none;white-space:nowrap;
  font:700 10.5px/1 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#0d3552;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(13,53,82,.14);border-radius:999px;padding:7px 12px;box-shadow:0 6px 16px rgba(13,53,82,.10);
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.sec-chip span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sec-chip b{color:#1c5b91;font-weight:700;letter-spacing:.06em;flex:none}
.sec-chip.on{opacity:1;transform:translate(-50%,0)}
.sec-chip.hide{opacity:0!important}
.sec-chip.idle{opacity:0;transform:translate(-50%,-6px)}
@media (min-width:1101px),(pointer:fine){.sec-chip{display:none}}
@media (prefers-reduced-motion:reduce){.sec-chip{transition:none}}
/* end section chip */
/* screen aware, 27 Sep */
/* the short version of a line shows on phones; both are in the page */
.t-sm{display:none}
@media (max-width:600px){.t-lg{display:none}.t-sm{display:inline}}
html{-webkit-tap-highlight-color:transparent}
/* phones: the hook bar tucks away while you read (screens.js) */
@media (max-width:820px){
  .topbar{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  header.site{transition:top .28s cubic-bezier(.2,.8,.2,1)}
  html.sc-tuck .topbar{transform:translateY(-100%)}
  html.sc-tuck header.site{top:0}
  h1,h2,h3{text-wrap:balance}
  p,li{text-wrap:pretty}
}
/* the Home Screen app: no browser bars, so give the notch and the home bar their room */
html.ua-app body{padding-bottom:env(safe-area-inset-bottom,0px)}
html.ua-app .topbar{padding-top:env(safe-area-inset-top,0px)}
/* headsets: bigger type and targets, calmer motion */
html.ua-xr{font-size:112.5%}
html.ua-xr body{font-size:19px}
html.ua-xr .btn,html.ua-xr button,html.ua-xr .guide-dot,html.ua-xr nav a{min-height:48px;min-width:48px}
html.ua-xr *{scroll-behavior:auto!important}
html.ua-xr .hero *,html.ua-xr .gx *{animation-duration:0s!important;animation-iteration-count:1!important}
/* TVs: read from the couch, move with a remote */
html.ua-tv{font-size:125%}
html.ua-tv :focus{outline:4px solid #FFC61E!important;outline-offset:4px}
/* the section rail reads on dark sections too (Austin, 27 Sep: the dots vanished on the blue sections) */
.guide{background:rgba(255,255,255,.95);border:1px solid rgba(13,53,82,.22);box-shadow:0 6px 22px rgba(4,16,28,.35)}
.guide-dot{background:#8ea5ba}
.guide-dot[aria-current="true"]{background:var(--blue);box-shadow:0 0 0 3px rgba(28,91,145,.28)}
@media (prefers-reduced-motion:reduce){.topbar,header.site{transition:none}}
/* end screen aware */
/* the AI answer, step by step, 27 Sep */
.ax .ax-steps{list-style:none;margin:0 0 14px;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.ax .ax-steps li{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--rule);background:#fff;
  font:600 12px/1 var(--sans);color:var(--muted);transition:background .25s,color .25s,border-color .25s}
.ax .ax-steps b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--sans);background:#e3e9ee;color:var(--ink);transition:inherit}
.ax .ax-steps li.on{color:var(--ink)}
.ax .ax-steps li.done b{background:var(--rt-hi,#0d3552);color:#fff}
.ax .ax-steps li.now{background:var(--rt-hi,#0d3552);border-color:var(--rt-hi,#0d3552);color:#fff}
.ax .ax-steps li.now b{background:var(--sun,#FFC61E);color:#0d3552}
.ax .ax-thread{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;height:380px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px);mask-image:linear-gradient(to bottom,transparent 0,#000 34px)}
.ax .ax-hello{display:none}
.ax.is-empty .ax-hello{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;color:var(--muted)}
.ax .ax-hi-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--rt-hi,#0d3552);color:#9cc6ee;margin-bottom:6px}
.ax .ax-hi-ic svg{width:22px;height:22px}
.ax .ax-hello b{font:700 18px/1.3 var(--sans);color:var(--ink)}
.ax .ax-hello span:last-child{font-size:13.5px}
.ax .ax-read{flex:none}.ax .ai-q{flex:none}.ax .ai-a{flex:none}
.h2l,.h1l{text-wrap:balance}
.ai-h .h1l,.ai-h .h2l{display:block}
.ai-h .h2l{color:var(--blue,#1c5b91);margin-top:.06em}
.ax .ai-q,.ax .ax-read,.ax .ax-src,.ax .ai-a,.ax .ax-intro,.ax .ai-a li,.ax .ax-call{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.ax .ai-q:not(.on),.ax .ax-read:not(.on),.ax .ai-a:not(.on),.ax .ax-src:not(.on),.ax .ax-intro:not(.on),.ax .ai-a li:not(.on),.ax .ax-call:not(.on){display:none}
.ax .ai-q.on,.ax .ax-read.on,.ax .ai-a.on,.ax .ax-src.on,.ax .ax-intro.on,.ax .ai-a li.on,.ax .ax-call.on{animation:axIn .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes axIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ax .ai-q{align-self:flex-end;max-width:92%;margin:0}
.ax .ax-read{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 12.5px/1.2 var(--sans);color:var(--muted)}
.ax .ax-rl{margin-right:2px}
.ax .ax-src{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--muted)}
.ax .ax-src::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid #cdd8e2;border-top-color:var(--blue);animation:axSpin .7s linear infinite}
.ax .ax-src.ok{color:var(--rt-hi,#0d3552);border-color:#cfdceb}
.ax .ax-src.ok::before{animation:none;border:0;width:10px;height:10px;background:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6a3a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")}
@keyframes axSpin{to{transform:rotate(360deg)}}
.ax .ai-a li b{display:flex;align-items:center;gap:7px}
.ax .ax-ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#eaf1f7;color:var(--rt-hi,#0d3552);flex:none}
.ax .ax-ic svg{width:15px;height:15px}
.ax .ai-a li.win.hl{box-shadow:0 0 0 2px var(--sun,#FFC61E),0 10px 24px rgba(13,53,82,.12)}
.ax .ax-call{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:9px 16px;border-radius:999px;background:#1d6a3a;color:#fff;font:700 14px/1 var(--sans);position:relative}
.ax .ax-call svg{width:16px;height:16px}
.ax .ax-call.press{animation:axCall 1.1s ease-in-out infinite}
.ax .ax-call.press svg{animation:axRing .5s ease-in-out infinite}
@keyframes axCall{0%{box-shadow:0 0 0 0 rgba(29,106,58,.45)}70%{box-shadow:0 0 0 14px rgba(29,106,58,0)}100%{box-shadow:0 0 0 0 rgba(29,106,58,0)}}
@keyframes axRing{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.ax .ax-input{display:flex;align-items:center;gap:8px;margin-top:14px}
.ax .ax-field{flex:1;min-width:0;display:flex;align-items:center;height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--rule);background:#fff;
  overflow:hidden;white-space:nowrap;font:500 14px/1 var(--sans);color:var(--ink);transition:border-color .2s}
.ax .ax-field.has{border-color:var(--blue)}
.ax .ax-ph{color:#9aa7b3}
.ax .ax-field.has .ax-ph{display:none}
.ax .ax-caret{display:none;width:1.5px;height:18px;margin-left:1px;background:var(--blue);animation:axBlink 1s steps(1) infinite;flex:none}
.ax .ax-field.has .ax-caret{display:inline-block}
@keyframes axBlink{50%{opacity:0}}
.ax .ax-send{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--rt-hi,#0d3552);color:#fff;flex:none;transition:transform .15s,box-shadow .25s}
.ax .ax-send svg{width:18px;height:18px}
.ax .ax-send.press{transform:scale(.86);box-shadow:0 0 0 6px rgba(28,91,145,.22)}
.ax .ax-cap{margin:12px 0 0;min-height:2.8em;font:700 14px/1.4 var(--sans);color:var(--rt-hi,#0d3552)}
@media (max-width:600px){
  .ax .ax-steps li:not(.now) span{display:none}
  .ax .ax-steps li:not(.now){padding-right:4px}
  .ax .ax-steps{margin-bottom:10px}
  .ax .ax-thread{gap:8px;height:360px}
  .ax .ax-rl{flex-basis:100%}
  .ax .ax-src{padding:4px 8px;font-size:11.5px}
  .ax .ai-a{padding:10px 12px}
  .ax .ax-intro{margin-bottom:6px;font-size:13.5px}
  .ax .ai-a li:not(.win) > span{display:none}
  .ax .ai-a li{padding-top:7px;padding-bottom:7px}
  .ax .ai-note{display:none}
  .ax .ax-cap{margin-top:10px;min-height:2.6em}
}
@media (prefers-reduced-motion:reduce){.ax *{transition:none!important;animation:none!important}}
/* end AI answer steps */
/* tidy, 27 Sep */
/* 3. the ad budget chart: red is ads, blue is what you own, each label on its line */
.rt-growth{--rt-ad:#d64a3f;--rt-own:#1c5b91}
.rt-growth .rt-grent{stroke:var(--rt-ad);stroke-width:2.6;stroke-dasharray:7 6}
.rt-growth .rt-end-rent{fill:var(--rt-ad)}
.rt-growth .rt-gown{stroke:var(--rt-own);stroke-width:3.4}
.rt-growth .rt-end-own{fill:var(--rt-own)}
.rt-growth .rt-gwash{fill:var(--rt-own);opacity:.1}
.rt-growth .rt-k-rent{background:repeating-linear-gradient(90deg,var(--rt-ad) 0 5px,transparent 5px 8px)!important}
.rt-growth .rt-k-own{background:var(--rt-own)!important}
.rt-lab-ad{font:700 14.5px var(--sans);fill:var(--rt-ad)}
.rt-lab-grow{font:800 17px var(--sans);fill:var(--rt-own)}
.rt-lab-sub{font-weight:600}
.rt-xl{font:600 12.5px var(--mono,monospace);letter-spacing:.06em;fill:var(--muted)}
.rt-lab-ad.rt-sm{display:none}
@media (max-width:560px){
  .rt-lab-ad{display:none}.rt-lab-ad.rt-sm{display:inline;font-size:22px}
  .rt-lab-grow{font-size:24px}.rt-lab-grow.rt-lab-sub{display:none}
  .rt-xl{font-size:19px}
}
/* 4. the trade chips, three rows */
.aud{gap:8px}
.aud button.tag{font-size:15.5px;padding:8px 14px}
@media (max-width:600px){.aud button.tag{font-size:14.5px;padding:7px 12px}}
/* 5. an open answer doesn't stretch the Keep reading cards */
.qa-wrap{align-items:start}
.qa-read{align-self:start;grid-template-rows:none;grid-auto-rows:auto}
.qa-card:hover i,.qa-card:focus-visible i{background:var(--blue);color:#fff}
/* 7. the Google changes chart: this year is live, a moving stripe that keeps growing; blues, not yellow */
.rt-anim .rt-hb:nth-child(5) i{transition-delay:.56s}
.statband .lc-cap .lc-line{color:#8cc3ef}
.rt-dark .hi i{background:#6aa9e0}
.rt-hb.est.hi .rt-t i{background:repeating-linear-gradient(135deg,#6aa9e0 0 6px,rgba(106,169,224,.45) 6px 12px)}
.rt-dark .rt-hb.now .rt-y,.rt-dark .rt-hb.now b{color:#fff;font-weight:800}
.rt-hbars:not(.rt-dark) .rt-hb.est .rt-t i{background:repeating-linear-gradient(135deg,#b7c8d8 0 6px,#e3eaf1 6px 12px)}
.rt-hbars:not(.rt-dark) .rt-hb.now .rt-y,.rt-hbars:not(.rt-dark) .rt-hb.now b{color:var(--ink-hi);font-weight:800}
.rt-hb.now .rt-t i{background:repeating-linear-gradient(-45deg,#5aa0dc 0 9px,#a9d0f2 9px 18px);background-size:25.46px 25.46px;animation:rtPole .9s linear infinite;box-shadow:0 0 16px rgba(106,169,224,.5)}
.rt-anim.rt-go .rt-hb.now .rt-t i{transition:width 1s linear}
.rt-t em{flex:none;font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue,#1c5b91);margin-left:-2px}
.rt-dark .rt-t em{color:#8cc3ef}
.rt-t s.rt-star{text-decoration:none;margin-left:-8px;font-weight:700;color:inherit;opacity:.8}
@keyframes rtPole{to{background-position:25.46px 0}}
@media (prefers-reduced-motion:reduce){.rt-hb.now .rt-t i{animation:none}}
/* 6. Book a demo, under every answer */
.fq-demo{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:15px;color:var(--muted)}
.fq-demo a{border:0;display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--blue);text-decoration:none}
.fq-demo a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.fq-demo a:hover svg,.fq-demo a:focus-visible svg{transform:translateX(3px)}
.fq-demo a:hover{text-decoration:underline}
/* end tidy */
/* toys, 27 Sep */
/* the compass spins by hand (toys.js) */
.herofig.toy{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.herofig.toy:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:50%}
/* Snake on the logo's screen */
.snksec .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.snk-checks{list-style:none;margin:22px 0 0;padding:0}
.snk-checks li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--rule-2,var(--rule));color:var(--muted);font-size:15.5px}
.snk-checks li:last-child{border-bottom:1px solid var(--rule-2,var(--rule))}
.snk-checks li b{color:var(--ink-hi)}
.snk-checks li::before{content:"";position:absolute;left:0;top:17px;width:14px;height:14px;border-radius:50%;background:#6aa9e0;box-shadow:inset 0 0 0 4px #e3f0fb}
.snk-next{margin-top:22px}
.snk{margin:0;justify-self:center;width:100%;max-width:520px}
.snk-box{position:relative;display:block;width:100%;aspect-ratio:236/252;cursor:pointer;border-radius:18px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.snk-box:focus-visible{box-shadow:0 0 0 3px var(--blue)}
.snk-mon{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 22px 34px rgba(4,16,28,.28))}
.snk-cv,.snk-ov,.snk-hud{position:absolute;left:7.627%;top:7.143%;width:84.746%;height:54.762%;border-radius:3.4%/5%}
.snk-cv{display:block;background:#1b5388}
.snk-hud{pointer-events:none;display:flex;justify-content:space-between;align-items:flex-start;padding:6px 10px;font:700 13px/1 var(--mono,monospace);color:#eaf4fd;letter-spacing:.06em}
.snk-hud span{font-weight:600;color:#8cc3ef}
.snk-ov{pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#fff;transition:opacity .25s}
.snk-ov:empty{opacity:0}
.snk-ov b{font:800 clamp(18px,2.4vw,26px)/1.1 var(--sans);letter-spacing:-.01em}
.snk-ov span{font:600 13px/1.2 var(--mono,monospace);letter-spacing:.08em;color:#8cc3ef;text-transform:uppercase}
.snk-ov i{font:600 13px/1.2 var(--sans);font-style:normal;color:#dbe6ef}
.snk-ov.snk-idle,.snk-ov.snk-over{background:rgba(13,53,82,.45)}
.snk-ov.snk-idle b{padding:9px 16px;border-radius:99px;background:#fff;color:#0d3552;font-size:clamp(15px,1.8vw,18px);box-shadow:0 8px 22px rgba(0,0,0,.25);animation:snkNudge 2.4s ease-in-out infinite}
.snk-ov .snk-n{font-size:clamp(46px,7vw,84px);color:#fff;animation:snkPop .7s cubic-bezier(.2,.9,.3,1.2)}
.snk-live .snk-box{touch-action:none}
@keyframes snkPop{0%{transform:scale(.4);opacity:0}35%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:.9}}
@keyframes snkNudge{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
/* the hero radar (part 4): rings turn, the sweep goes round, the screen pings out from its center */
.hero-radar .rd > *{transform-box:view-box;transform-origin:220px 222px}
.hero-radar .rd-sweep{animation:rdSpin 5.2s linear infinite}
.hero-radar .rd-ticks{animation:rdSpin 90s linear infinite}
.hero-radar .rd-arcs{animation:rdSpin 26s linear infinite reverse}
.hero-radar .rd-arcs2{animation:rdSpin 48s linear infinite}
.hero-radar .rd-blip{fill:#6aa9e0;opacity:0;animation:rdBlip 5.2s linear infinite}
.hero-radar .bp-wave{stroke:#d9eeff;stroke-width:1.6;vector-effect:non-scaling-stroke;fill:rgba(191,224,255,.05);transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:bpWave 18s cubic-bezier(.2,.6,.35,1) infinite}
.hero-radar .bp-wave:nth-of-type(3){animation-delay:6s}
.hero-radar .bp-wave:nth-of-type(4){animation-delay:12s}
.hero-radar .bp-core{fill:#e8f4ff;transform-box:fill-box;transform-origin:50% 50%;animation:bpCore 6s ease-in-out infinite}
.hero-radar .bp-arc{stroke-dashoffset:0;animation:bpDash 14s linear infinite}
.hero-radar .rd-mag{opacity:.13}
.hero-radar .rd > .rd-mag{transform:none}
.hero-radar .rd-mag-in{transform-box:view-box;transform-origin:104px 118px;animation:rdMag 16s ease-in-out infinite}
@keyframes rdSpin{to{transform:rotate(360deg)}}
@keyframes rdBlip{0%{opacity:1;r:5.5}40%{opacity:.25;r:3.4}100%{opacity:0;r:3.4}}
@keyframes bpWave{0%{transform:scale(.03);opacity:0}8%{opacity:.9}70%{opacity:.28}100%{transform:scale(1.18);opacity:0}}
@keyframes bpCore{0%,100%{opacity:.55;transform:scale(1)}15%{opacity:1;transform:scale(1.7)}}
@keyframes bpDash{to{stroke-dashoffset:-120}}
@keyframes rdMag{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(6px,-5px) rotate(-4deg)}50%{transform:translate(-3px,-9px) rotate(2deg)}75%{transform:translate(-7px,-2px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.hero-radar .rd > *,.hero-radar .rd-blip,.hero-radar .rd-mag-in,.hero-radar .bp-wave,.hero-radar .bp-core,.hero-radar .bp-arc{animation:none}.hero-radar .bp-wave{opacity:0}}
/* share your score */
.snk-ov .snk-share{pointer-events:auto;margin:6px 0 2px;padding:9px 16px;border-radius:99px;border:0;background:#fff;color:#0d3552;font:800 14px/1 var(--sans);cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.25);animation:snkNudge 2.4s ease-in-out infinite}
.snk-ov .snk-share:hover{background:#eaf4fd}
.snk-sharemenu{position:absolute;left:7.627%;top:7.143%;width:84.746%;height:54.762%;border-radius:3.4%/5%;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:14px;background:#0d3552;z-index:9}
.snk-box:has(.snk-sharemenu) .snk-ov{opacity:0}
.snk-sharemenu b{flex-basis:100%;text-align:center;color:#fff;font:800 16px/1.2 var(--sans);margin-bottom:4px}
.snk-sharemenu a,.snk-sharemenu button{border:0;border-radius:99px;padding:8px 14px;background:#fff;color:#0d3552;font:700 13px/1 var(--sans);text-decoration:none;cursor:pointer}
.snk-sharemenu [data-close]{background:transparent;color:#cfe0ee}
/* /snake */
.snk-page .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.snk-page h1{font-size:clamp(34px,4.4vw,58px);line-height:1.04;letter-spacing:-.02em;margin:10px 0 0}
.snk-big{max-width:720px}
@media (max-width:820px){.snk-page .wrap{grid-template-columns:1fr;row-gap:14px}.snk-page .wrap>div:first-child{display:contents}.snk-page .eyebrow{order:1}.snk-page h1{order:2;margin:0}.snk-page .snk-big{order:3}.snk-page .lead{order:4;margin-top:4px!important}.snk-page .sec-next{order:5;justify-content:center!important}}
@media (min-width:900px){.snk-sharemenu{gap:10px}.snk-sharemenu b{font-size:20px}.snk-sharemenu a,.snk-sharemenu button{font-size:15px;padding:10px 18px}}
/* Jetpack on a phone screen (jet.js): phones get it in place of Snake */
.jet{margin:0;justify-self:center;width:100%;max-width:280px;display:none}
.jet-big{display:block;max-width:340px}
.jet .snk-box{aspect-ratio:184/290;border-radius:26px;touch-action:manipulation}
.jet .snk-cv,.jet .snk-ov,.jet .snk-hud,.jet .snk-sharemenu{left:4.348%;top:9.655%;width:91.304%;height:77.241%;border-radius:5.95%/4.46%}
.jet .snk-hud{flex-direction:column;justify-content:flex-start;align-items:center;gap:5px;padding-top:14px}
.jet .snk-hud b{font:900 38px/1 var(--sans);letter-spacing:-.02em;text-shadow:0 2px 0 rgba(13,53,82,.55)}
.jet .snk-sharemenu{align-content:center;padding:18px}
.jet .snk-ov.snk-idle{justify-content:flex-end;padding-bottom:16%}
@media (max-width:820px){.snksec:not(.snk-page) .snk{display:none}.snksec:not(.snk-page) .jet{display:block}.snk-page .jet-big{order:3;max-width:280px}}
/* the owned side never stops */
.gx-tick-run{animation:gxRun 2.8s linear infinite}
.gx-on .gx-odot{animation:gxOdotIn .45s calc(var(--k) * .28s) both,gxPing 3.92s calc(var(--k) * .28s + 4.2s) infinite}
.gx-aud-run{opacity:0;transition:opacity .6s}
.gx-on .gx-aud-run{opacity:1;transition-delay:4.2s}
.gx-aud-stripes{animation:gxStripe .7s linear infinite}
@keyframes gxRun{to{transform:translate(-60px,24px)}}
@keyframes gxPing{0%{transform:none;filter:none}5%{transform:scale(1.5);filter:brightness(1.35)}14%,100%{transform:none;filter:none}}
@keyframes gxStripe{to{transform:translateX(12px)}}
@media (prefers-reduced-motion:reduce){.gx-tick-run,.gx-aud-stripes{animation:none}.gx-on .gx-odot{animation:none;opacity:1}}
@media (max-width:820px){.snksec .wrap{grid-template-columns:1fr;gap:26px}.snk{max-width:420px}}
@media (prefers-reduced-motion:reduce){.snk-ov.snk-idle b,.snk-ov .snk-n{animation:none}}
/* end toys */
/* always moving, 27 Sep */
/* 6. the lead hook fits the smallest phones */
@media (max-width:360px){.topbar .t-tag{font-size:9.5px;letter-spacing:.02em;padding-left:10px;padding-right:10px}}
/* 8. every loop hands its last frame straight back to its first (loopcheck.py) */
@keyframes mpRing{0%{transform:scale(.4);opacity:0}10%{opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes mfRing{0%{transform:scale(1);opacity:0}12%{opacity:.7}100%{transform:scale(1.45);opacity:0}}
@keyframes gxProg{0%{transform:scaleX(0);opacity:0}1%{opacity:1}24%,88%{transform:scaleX(1);opacity:1}96%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes gxCap1{0%{transform:scaleX(0);opacity:0}1%,25%{transform:scaleX(0);opacity:1}32%,88%{transform:scaleX(1);opacity:1}96%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes gxCap2{0%{transform:scaleX(0);opacity:0}1%,31%{transform:scaleX(0);opacity:1}38%,88%{transform:scaleX(1);opacity:1}96%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes gxCap3{0%{transform:scaleX(0);opacity:0}1%,37%{transform:scaleX(0);opacity:1}43%,88%{transform:scaleX(1);opacity:1}96%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes gxSpark{0%,24%{transform:scale(.4);opacity:.3}30%{transform:scale(1.4) rotate(45deg);opacity:1}40%,86%{transform:none;opacity:1}100%{transform:scale(.4);opacity:.3}}
@keyframes lcLive{0%{box-shadow:0 0 0 0 rgba(53,196,106,.6)}70%{box-shadow:0 0 0 8px rgba(53,196,106,0)}100%{box-shadow:0 0 0 0 rgba(53,196,106,0)}}
@keyframes rdBlip{0%{opacity:0;r:3.4}1%{opacity:1;r:5.5}40%{opacity:.25;r:3.4}100%{opacity:0;r:3.4}}
.rt-hb.now .rt-t i{background-size:25.4558px 25.4558px}
@keyframes rtPole{to{background-position:25.4558px 0}}
/* the Snake screen: no ring around it when it's clicked */
.snk-box:focus,.snk-box:focus-visible{outline:none;box-shadow:none}
/* the AI chat screen is sized to the finished conversation (ax.js), so nothing is cut off */
.ax .ax-thread{-webkit-mask-image:none!important;mask-image:none!important;transition:opacity .35s ease}
.ax .ax-thread.ax-fade{opacity:0}
.ax.ax-tight .ax-thread{gap:7px}
.ax.ax-tight .ax-src{padding:3px 8px;font-size:11.5px}
.ax.ax-tight .ai-a{padding:10px 12px}
.ax.ax-tight .ax-intro{font-size:13px;margin-bottom:4px}
.ax.ax-tight .ai-a li{padding-top:6px;padding-bottom:6px}
.ax.ax-tight .ai-a li > span{font-size:12.5px;line-height:1.4}
.ax.ax-tight .ax-call{margin-top:6px;padding:8px 14px}
/* blues, not yellow, in the AI card */
.ax .ax-steps li.now b{background:#6aa9e0;color:#0d3552}
.ax .ai-a li.win.hl{box-shadow:0 0 0 2px #6aa9e0,0 10px 24px rgba(13,53,82,.12)}
/* quick answers: the answer eases in; the header is solid enough that nothing shows through it */
details.fq[open] > .fq-a{animation:fqIn .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes fqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
header.site{background-color:rgba(255,255,255,.97)}
/* 3. log in from a phone */
.nav-login{display:none}
@media (max-width:820px){
  nav.main a.nav-login{display:flex;justify-content:center;margin:0 22px 14px;padding:13px 18px;border:1.5px solid var(--blue);border-radius:12px;font-weight:700;color:var(--blue)}
  html.is-signed-in nav.main a.nav-login{display:none}
}
/* 1. every section asks */
.sec-next{margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;font-size:16px;color:var(--muted);text-align:center}
.sec-next a{border:0;display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--blue);text-decoration:none;padding:8px 14px;border-radius:99px;background:rgba(28,91,145,.08);transition:background .2s,transform .2s}
.sec-next a:hover,.sec-next a:focus-visible{background:rgba(28,91,145,.16);transform:translateY(-1px)}
.sec-next a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:secNudge 1.8s ease-in-out infinite}
.statband .sec-next,section.tone .sec-next{color:inherit}
.statband .sec-next{color:#c3d2de;justify-content:flex-start;text-align:left;margin-top:20px}.statband .sec-next a{color:#fff;background:rgba(255,255,255,.1)}
@keyframes secNudge{0%,60%,100%{transform:none}30%{transform:translateX(4px)}}
/* 2. the system loop never stops */
.lp-pulse-dot{fill:#fff;stroke:#1c5b91;stroke-width:2.5}
.lp-pulse-halo{fill:rgba(106,169,224,.35);animation:lpHalo 1.2s ease-in-out infinite}
.loopdraw .lp-arc{animation:lpLit 8s linear infinite}
.loopdraw .lp-arc[data-i="1"]{animation-delay:2s}.loopdraw .lp-arc[data-i="2"]{animation-delay:4s}.loopdraw .lp-arc[data-i="3"]{animation-delay:6s}
.loopdraw .lp-arr{animation:lpLit 8s linear infinite}
.loopdraw .lp-arr[data-i="1"]{animation-delay:2s}.loopdraw .lp-arr[data-i="2"]{animation-delay:4s}.loopdraw .lp-arr[data-i="3"]{animation-delay:6s}
.loopdraw .lp-cta{animation:lpCall 2s ease-in-out infinite}
.loopdraw .lp-th{animation:lpThumb 6s ease-in-out infinite;animation-delay:calc(var(--k) * 2s)}
@keyframes lpHalo{50%{transform:scale(1.5);opacity:.4}}
@keyframes lpLit{0%,100%{filter:none;opacity:.55}6%,22%{filter:drop-shadow(0 0 6px rgba(106,169,224,.9));opacity:1}30%{opacity:.55}}
@keyframes lpCall{0%,100%{filter:none}50%{filter:brightness(1.35) drop-shadow(0 0 5px rgba(255,255,255,.7))}}
@keyframes lpThumb{0%,70%,100%{opacity:1}80%{opacity:.35}90%{opacity:1}}
.lp-pulse-halo,.lp-pulse-dot{transform-box:fill-box;transform-origin:center}
/* Google keeps changing: it never goes flat */
.sb-seis{display:block;width:100%;height:46px;margin:14px 0 4px;overflow:hidden}
.sb-run{animation:sbRun 11s linear infinite}
@keyframes sbRun{to{transform:translateX(-800px)}}
/* routine fine tuning: a check walks the cards */
.maint .mcard{position:relative;animation:mcPatrol 9s ease-in-out infinite}
.maint .mcard:nth-child(2){animation-delay:1.5s}.maint .mcard:nth-child(3){animation-delay:3s}.maint .mcard:nth-child(4){animation-delay:4.5s}.maint .mcard:nth-child(5){animation-delay:6s}.maint .mcard:nth-child(6){animation-delay:7.5s}
.maint .mcard::after{content:"";position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;background:#1d6a3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;opacity:0;transform:scale(.4);animation:mcTick 9s ease-in-out infinite;animation-delay:inherit}
.maint .mcard .ic{animation:mcIcon 9s ease-in-out infinite;animation-delay:inherit}
@keyframes mcPatrol{0%,14%,100%{box-shadow:var(--card-sh,0 10px 26px -18px rgba(13,53,82,.35));border-color:var(--rule-2,#dbe4ec)}3%,10%{box-shadow:0 0 0 2px #6aa9e0,0 18px 34px -18px rgba(13,53,82,.55);border-color:#6aa9e0}}
@keyframes mcTick{0%,2%{opacity:0;transform:scale(.4)}5%,12%{opacity:1;transform:none}16%,100%{opacity:0;transform:scale(.6)}}
@keyframes mcIcon{0%,2%,14%,100%{transform:none}5%{transform:rotate(-12deg) scale(1.12)}8%{transform:rotate(8deg) scale(1.12)}}
/* who does what: the day keeps turning, your minutes blink by */
.fn-handg{transform-box:view-box;transform-origin:100px 100px;animation:fnHand 12s linear infinite}
.fn-hand{stroke:#0d3552;stroke-width:3;stroke-linecap:round}
.fn-hub{fill:#0d3552}
.fn-you{animation:fnYou 12s linear infinite}
.ysteps li{animation:ysStep 9s ease-in-out infinite}
.ysteps li:nth-child(2){animation-delay:3s}.ysteps li:nth-child(3){animation-delay:6s}
@keyframes fnHand{to{transform:rotate(360deg)}}
@keyframes fnYou{0%,1%{stroke-width:12;filter:none}3%{stroke-width:20;filter:drop-shadow(0 0 6px #6aa9e0)}8%,100%{stroke-width:12;filter:none}}
@keyframes ysStep{0%,30%,100%{transform:none}6%,22%{transform:translateX(6px)}}
/* the growth chart: owned flows up and never stops; ads drain and drip */
.rt-gflow{fill:none;stroke:#eaf4fd;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:3 34;animation:rtFlow 1.6s linear infinite;opacity:.9}
.rt-aflow{fill:none;stroke:#fff;stroke-width:2.6;stroke-dasharray:2 35;animation:rtFlow 2.4s linear infinite;opacity:.8}
.rt-growth .rt-grent{animation:rtFlowAd 2.4s linear infinite}
.rt-growth .rt-end-own,.rt-growth .rt-end-rent{display:none}
.rt-gglow{fill:none;stroke:#8cc3ef;stroke-width:9;stroke-linecap:round;stroke-dasharray:34 146;opacity:.45;animation:rtGlow 2.8s linear infinite}
.rt-ticks line{stroke:#b9c9d8;stroke-width:1.3}
.rt-ticks{animation:rtTick 3.2s linear infinite}
@keyframes rtFlow{to{stroke-dashoffset:-37}}
@keyframes rtFlowAd{to{stroke-dashoffset:-39}}
@keyframes rtGlow{to{stroke-dashoffset:-180}}
@keyframes rtTick{to{transform:translateX(-40.18px)}}
/* the last call card keeps searching */
.gx-call .cc-ring{animation:ccPing 1.8s ease-out infinite}
.gx-call .cc-bar i{animation:ccSearch 3.2s ease-in-out infinite}
.gx-call .cc-list li{animation:ccList 7.5s ease-in-out infinite;animation-delay:calc(var(--k) * 2.5s)}
@keyframes ccPing{0%{transform:scale(.6);opacity:0}10%{opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes ccSearch{0%{transform:scaleX(0);opacity:0}4%{opacity:1}62%{transform:scaleX(1);opacity:1}84%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes ccList{0%,34%,100%{transform:none}8%,26%{transform:translateX(6px)}}
/* keep reading arrows nudge */
.qa-card i svg{animation:secNudge 2.4s ease-in-out infinite}
.qa-card:nth-child(3) i svg{animation-delay:.4s}.qa-card:nth-child(4) i svg{animation-delay:.8s}
@media (prefers-reduced-motion:reduce){
  .sec-next a svg,.lp-pulse,.lp-pulse-halo,.loopdraw .lp-arc,.loopdraw .lp-arr,.loopdraw .lp-cta,.loopdraw .lp-th,.sb-run,.maint .mcard,.maint .mcard::after,.maint .mcard .ic,
  .fn-handg,.fn-you,.ysteps li,.rt-gflow,.rt-aflow,.rt-growth .rt-grent,.rt-gglow,.rt-ticks,.gx-call .cc-ring,.gx-call .cc-bar i,.gx-call .cc-list li,.qa-card i svg{animation:none}
  .lp-pulse,.rt-gflow,.rt-aflow{display:none}
}
/* end always moving */
/* presentation, 27 Sep */
.stack{grid-template-columns:repeat(3,minmax(0,1fr))}
.stack .mcard,.stack .mcard::after,.stack .mcard .ic{animation-duration:14.4s}
.stack .mcard:nth-child(1){animation-delay:0.0s}.stack .mcard:nth-child(2){animation-delay:1.2s}.stack .mcard:nth-child(3){animation-delay:2.4s}.stack .mcard:nth-child(4){animation-delay:3.6s}.stack .mcard:nth-child(5){animation-delay:4.8s}.stack .mcard:nth-child(6){animation-delay:6.0s}.stack .mcard:nth-child(7){animation-delay:7.2s}.stack .mcard:nth-child(8){animation-delay:8.4s}.stack .mcard:nth-child(9){animation-delay:9.6s}.stack .mcard:nth-child(10){animation-delay:10.8s}.stack .mcard:nth-child(11){animation-delay:12.0s}.stack .mcard:nth-child(12){animation-delay:13.2s}
@media (max-width:980px){.stack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.stack{grid-template-columns:1fr}}
/* end presentation */
/* the beat, 27 Sep */
.bt .bt-i{transition:background-color .55s ease,box-shadow .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),color .55s ease,border-color .55s ease}
/* cards and steps rise and ring in blue */
.bt div.bt-i.bt-on,.bt a.bt-i.bt-on,.bt details.bt-i.bt-on{transform:translateY(-4px);box-shadow:0 0 0 2px rgba(28,91,145,.38),0 16px 32px rgba(13,53,82,.16)}
.bt .tone div.bt-i.bt-on,.tone.bt div.bt-i.bt-on{box-shadow:0 0 0 2px rgba(142,176,207,.7),0 18px 36px rgba(3,14,24,.35)}
/* table rows: a blue bar and a light wash */
.bt tr.bt-i > *{transition:background-color .55s ease,box-shadow .55s ease}
.bt tr.bt-on > *{background-color:rgba(106,169,224,.14)}
.bt tr.bt-on > :first-child{box-shadow:inset 3px 0 0 #1c5b91}
/* list items slide over a touch */
.bt li.bt-i{transition:transform .55s cubic-bezier(.2,.7,.2,1),color .55s ease}
.bt li.bt-on{transform:translateX(6px);color:var(--ink-hi,#0d3552)}
.bt .fq-chips a.bt-i:not([aria-current]):not(.on).bt-on{background:rgba(106,169,224,.16);border-color:rgba(28,91,145,.45)}
/* then the ask */
.bt .bt-ask{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;transform:scale(1.05);box-shadow:0 0 0 5px rgba(106,169,224,.35),0 12px 26px rgba(13,53,82,.2)}
/* every closing button has a sheen that crosses it */
.cta .btn{background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);background-size:260% 100%;background-repeat:no-repeat;background-position:160% 0;animation:btSheen 4.2s ease-in-out infinite}
@keyframes btSheen{0%{background-position:160% 0}45%,100%{background-position:-60% 0}}
/* the client's site breathes on its screens, the phone a half beat behind */
.case .shot,.case .rt-phone{overflow:hidden}
.case .shot img,.case .rt-phone img{transform-origin:50% 0;animation:caseZoom 14s ease-in-out infinite}
.case .rt-phone img{animation-delay:-7s}
@keyframes caseZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* the Google chart's words stay visible inside the pricing card (an old rule hid every span there) */
.rt-stat .lc-cap span,.rt-stat .lc-cap a{visibility:visible!important}
.rt-stat .lc-cap{min-width:0}.rt-stat .lc-latest,.rt-stat .lc-latest span{white-space:normal!important;overflow-wrap:anywhere}
/* the answer desk (qa.js): questions beside one answer panel that never changes height */
.qa-was{display:none!important}
.qa-wrap.qa-on{grid-template-columns:1fr!important;align-items:start}
.qa-on .qa-read{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:none!important}
.qa-on .qa-read .qa-k{grid-column:1/-1;margin:0}
.qa-desk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,2.4vw,28px);align-items:stretch;margin:18px 0 6px}
.qa-qs{display:grid;gap:10px;align-content:start}
.qa-q{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;border:1px solid var(--rule);border-radius:14px;background:#fff;color:var(--ink-hi,#0d3552);font:700 16.5px/1.35 var(--sans);cursor:pointer;overflow:hidden;box-shadow:0 10px 26px -20px rgba(13,53,82,.35);transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s,transform .3s}
.qa-q:hover{border-color:rgba(28,91,145,.45);transform:translateX(3px)}
.qa-q:focus-visible{outline:3px solid #6aa9e0;outline-offset:2px}
.qa-q.on{background:#0d3552;color:#fff;border-color:#0d3552;box-shadow:0 18px 34px -18px rgba(13,53,82,.6);transform:none}
.qa-n{font:700 12px/1 var(--mono,monospace);letter-spacing:.08em;color:#6aa9e0}
.qa-q.on .qa-n{color:#8cc3ef}
.qa-go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef4fa;color:#1c5b91;transition:transform .3s,background-color .3s}
.qa-go svg,.qa-next svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.qa-q.on .qa-go{background:#fff;color:#0d3552;transform:translateX(4px)}
.qa-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#6aa9e0;transform:scaleX(0);transform-origin:0 50%}
.qa-stage{display:grid;background:#fff;border:1px solid var(--rule);border-radius:18px;box-shadow:0 22px 48px -28px rgba(13,53,82,.45);overflow:hidden}
.qa-p{grid-area:1/1;text-align:left;padding:clamp(20px,2.6vw,32px);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.qa-p.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease .05s,transform .45s cubic-bezier(.2,.8,.2,1) .05s,visibility 0s}
.qa-ph{margin:0 0 10px!important;font:700 12px/1.4 var(--mono,monospace)!important;letter-spacing:.1em;text-transform:uppercase;color:#1c5b91!important}
.qa-p .fq-lead{font-size:clamp(19px,1.6vw,22px)!important;line-height:1.35!important;padding:0 0 12px!important;margin:0!important;color:var(--ink-hi)}
.qa-p p{margin:0 0 12px;font-size:16.5px;line-height:1.65}
.qa-p .fq-demo{margin:18px 0 0}
.qa-next{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:#1c5b91;font:700 15px/1 var(--sans);cursor:pointer;padding:8px 0}
.qa-next svg{transition:transform .25s}
.qa-next:hover svg{transform:translateX(3px)}
@media (max-width:820px){.qa-desk{grid-template-columns:1fr}.qa-q{font-size:15.5px;padding:14px}.qa-go{display:none}.qa-on .qa-read{grid-template-columns:1fr!important}.qa-stage{display:block}.qa-p{display:none;text-align:left}.qa-p.on{display:block;animation:qaIn .35s cubic-bezier(.2,.8,.2,1)}}
@keyframes qaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* on a phone each answer opens under its own question (qa.js .qa-acc) */
.qa-acc .qa-qs{gap:10px}
.qa-acc .qa-stage{display:none}
.qa-acc .qa-q{transition:background-color .3s,color .3s,border-color .3s,border-radius .3s,box-shadow .3s}
.qa-acc .qa-q:hover{transform:none}
.qa-acc .qa-q.on{border-radius:14px 14px 0 0;box-shadow:none}
.qa-acc .qa-go{display:grid;width:26px;height:26px;background:#eef4fa;transform:rotate(90deg)}
.qa-acc .qa-q.on .qa-go{background:#fff;color:#0d3552;transform:rotate(-90deg)}
.qa-acc .qa-bar{display:none}
.qa-acc .qa-p{grid-area:auto;display:none;opacity:1;visibility:visible;transform:none;margin:-10px 0 0;padding:18px 18px 16px;background:#fff;border:1px solid #0d3552;border-top:0;border-radius:0 0 14px 14px;box-shadow:0 18px 34px -22px rgba(13,53,82,.55)}
.qa-acc .qa-p.on{display:block;transform-origin:50% 0;animation:qaDrop .38s cubic-bezier(.2,.8,.2,1)}
.qa-acc .qa-ph{display:none}
.qa-acc .qa-p .fq-lead{font-size:18.5px!important}
.qa-acc .qa-p .fq-demo{flex-direction:column;align-items:flex-start;gap:10px}
.qa-acc .qa-next{margin-left:0;padding:4px 0}
@keyframes qaDrop{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.qa-acc .qa-p.on{animation:none}}
@media (prefers-reduced-motion:reduce){.qa-p,.qa-q{transition:none}}
/* how often Google changes Search (launches.js): four toggles, circles by area, Google's words */
.gp{max-width:560px}
.gp-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 14px}
.gp-t{display:grid;gap:3px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid rgba(169,205,240,.28);background:rgba(255,255,255,.04);color:#cfe0ee;cursor:pointer;font:inherit;transition:background-color .3s,border-color .3s,color .3s,transform .3s}
.gp-t b{font:800 17px/1.1 var(--sans);color:#fff;font-variant-numeric:tabular-nums}
.gp-t span{font:600 11.5px/1.25 var(--mono,monospace);letter-spacing:.04em;text-transform:uppercase;color:#8cc3ef}
.gp-t:hover{border-color:rgba(169,205,240,.6);transform:translateY(-2px)}
.gp-t:focus-visible{outline:3px solid #6aa9e0;outline-offset:2px}
.gp-t.on{background:#eaf4fd;border-color:#eaf4fd}
.gp-t.on b{color:#0d3552}.gp-t.on span{color:#1c5b91}
.gp-viz{display:block;width:100%;height:auto;overflow:visible}
.gp-link{fill:none;stroke:#6aa9e0;stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round;opacity:.8;animation:gpFlow 1.2s linear infinite}
.gp-c{cursor:pointer}
.gp-dot{fill:rgba(106,169,224,.28);stroke:#6aa9e0;stroke-width:1.5;transition:fill .35s,stroke .35s}
.gp-halo{fill:none;stroke:#6aa9e0;stroke-width:1.5;opacity:0;transition:opacity .35s}
.gp-n{font:700 12px var(--mono,monospace);fill:#8cc3ef;transition:fill .35s}
.gp-c.on .gp-dot{fill:#eaf4fd;stroke:#eaf4fd}
.gp-c.on .gp-halo{opacity:1;transform-box:fill-box;transform-origin:center;animation:gpPing 2.4s ease-out infinite}
.gp-c.on .gp-n{fill:#fff}
.gp-q{margin:12px 0 0;padding:0;border:0;font:500 15.5px/1.6 var(--sans);color:#dbe6ef}
.gp-q p{margin:0}
.gp-q p::before{content:"“"}.gp-q p::after{content:"”"}
.gp-swap .gp-q p{animation:gpIn .45s cubic-bezier(.2,.8,.2,1)}
.gp-cap{margin-top:10px;font:500 13px/1.5 var(--sans);color:#9fb6c9}
.gp-cap b{color:#fff;font-weight:700}
@keyframes gpFlow{to{stroke-dashoffset:-20}}
@keyframes gpPing{0%{transform:scale(1);opacity:0}8%{opacity:.9}70%,100%{transform:scale(1.35);opacity:0}}
@keyframes gpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* the same thing in the light pricing card */
.gp-card .gp-t{border-color:var(--rule);background:#fff;color:var(--muted)}
.gp-card .gp-t b{color:var(--ink-hi,#0d3552)}.gp-card .gp-t span{color:#1c5b91}
.gp-card .gp-t.on{background:#0d3552;border-color:#0d3552}.gp-card .gp-t.on b{color:#fff}.gp-card .gp-t.on span{color:#8cc3ef}
.gp-card .gp-dot{fill:rgba(28,91,145,.12);stroke:#1c5b91}.gp-card .gp-halo{stroke:#1c5b91}.gp-card .gp-link{stroke:#1c5b91}
.gp-card .gp-n{fill:#1c5b91}.gp-card .gp-c.on .gp-dot{fill:#1c5b91;stroke:#1c5b91}.gp-card .gp-c.on .gp-n{fill:#0d3552}
.gp-card .gp-q{color:var(--ink,#23313d)}.gp-card .gp-cap{color:var(--muted)}.gp-card .gp-cap b{color:var(--ink-hi,#0d3552)}
@media (max-width:820px){.gp-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.gp-q{font-size:15px}}
@media (prefers-reduced-motion:reduce){.gp-link,.gp-c.on .gp-halo,.gp-swap .gp-q p{animation:none}}
/* the client screenshots keep their shape in Safari too: iPhone Safari gave the frame no height (aspect-ratio on a grid item whose contents are all absolutely placed), so the photo vanished on phones; the padding box works everywhere */
@media (max-width:1100px){.case-shot{aspect-ratio:auto!important;height:0!important;min-height:0!important;padding-top:68.75%!important;align-self:start}}
@media (max-width:560px){.case-shot{padding-top:82.5%!important}.case-shot .rt-live{display:none}}
/* phones: the mail button's tip says its piece once, then gets out of the way of the words */
@media (max-width:820px){.mail-fab:not(.is-tell) .mf-tip{opacity:0;transform:translate(10px,-50%)}}
@media (prefers-reduced-motion:reduce){.cta .btn,.case .rt-phone img,.case .shot img{animation:none}}
/* end the beat */
/* answer pages, 27 Sep */
.answerpage .ans-wrap{display:block!important;max-width:780px;margin-left:auto;margin-right:auto}
.answerpage .ans-wrap > *{text-align:left}
.answerpage .ans-body,.answerpage .ans-body p{text-align:left}
.ans-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:700 12px/1.4 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.ans-crumb a{color:#1c5b91;text-decoration:none}.ans-crumb a:hover{text-decoration:underline}.ans-crumb span{color:var(--muted)}
.answerpage h1{font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}
.ans-body{padding:clamp(20px,3vw,32px)!important;background:#fff;border:1px solid var(--rule);border-radius:18px;box-shadow:0 22px 48px -28px rgba(13,53,82,.45);animation:none!important}
.ans-body .fq-lead{font-size:clamp(19px,1.8vw,23px)!important;line-height:1.4!important;padding:0 0 12px!important}
.ans-body p{font-size:17px;line-height:1.7;margin:0 0 12px}
.ans-read{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.fq-share{margin:10px 0 0;font-size:14px}.fq-share a{color:#1c5b91;font-weight:700;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.fq-share svg,.ans-crumb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.qa-p .fq-share{display:none}
@media (max-width:820px){.ans-read{grid-template-columns:1fr!important}.answerpage h1{text-align:left}}
/* end answer pages */
/* our social profiles, 27 Sep */
.ia-socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ia-socials a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;text-decoration:none;font:600 12px/1 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,background-color .2s}
.ia-socials a:hover,.ia-socials a:focus-visible{border-color:#6aa9e0;background:rgba(106,169,224,.14)}
.ia-socials svg{width:16px;height:16px;flex:none}
.ia-socials svg.line{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ia-socials svg.fill{fill:currentColor;stroke:none}
.ia-socials a:hover svg,.ia-socials a:focus-visible svg{transform:translateY(-1px) scale(1.08)}
.ia-socials svg{transition:transform .2s ease}
@media (prefers-reduced-motion:reduce){.ia-socials svg{transition:none}}
/* end social profiles */
/* clicks that tell you more, 27 Sep */
/* 1. Your part: toggles, not boxes */
.ysteps li{position:relative;flex-wrap:wrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .35s ease,color .35s ease}
.ysteps li.ix-hit{box-shadow:none!important;animation:none!important}
.ysteps .ys-t{flex:1 1 0;min-width:0;font-weight:inherit}
.ysteps li > span{position:relative;transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .35s ease}
.ysteps li:hover > span{transform:scale(1.08)}
.ysteps li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--sun);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ysteps li.ys-on::after{transform:scaleX(1)}
.ysteps li.ys-on > span{transform:scale(1.14);box-shadow:0 0 0 5px rgba(255,198,30,.2)}
.ysteps li.ys-on > span::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--sun);animation:ysRing .8s ease-out both;pointer-events:none}
@keyframes ysRing{from{transform:scale(1);opacity:.9}to{transform:scale(2.3);opacity:0}}
.ysteps.ys-sel li{animation:none}
.ysteps.ys-sel li:not(.ys-on){opacity:.5}
.ysteps .ys-more{flex:0 0 100%;display:grid;grid-template-rows:0fr;padding-left:44px;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.ysteps .ys-more > i{overflow:hidden;min-height:0;font:400 14.5px/1.5 var(--sans);font-style:normal;color:#cfe0ee;opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.ysteps li.ys-on .ys-more{grid-template-rows:1fr}
.ysteps li.ys-on .ys-more > i{opacity:1;transform:none;padding-top:6px;transition-delay:.08s}
.ysteps li:focus-visible{outline:2px solid var(--sun);outline-offset:4px;border-radius:10px}
.fn-dial .fn-n,.fn-dial .fn-u{transform-box:fill-box;transform-origin:50% 50%}
.fn-dial .fn-n.fn-word{font-size:25px;letter-spacing:-.01em}
.fn-dial.fn-swap .fn-n,.fn-dial.fn-swap .fn-u{animation:fnSwap .5s cubic-bezier(.2,.8,.2,1)}
@keyframes fnSwap{from{opacity:0;transform:translateY(7px) scale(.92)}to{opacity:1;transform:none}}
/* 2. Other */
.aud .tag-other{border-style:dashed}
.aud .tag-other[aria-pressed="true"]{border-style:solid}
.mkt-other[hidden]{display:none!important}
.mkt.is-other .mkt-other{animation:qaIn .35s cubic-bezier(.2,.8,.2,1)}
/* 3. the AI card keeps its width while the question types */
@media (min-width:821px){.aisec .wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
@media (max-width:820px){.aisec .wrap{grid-template-columns:minmax(0,1fr)}}
.ax .ax-typed{flex:0 1 auto;min-width:0;overflow:hidden;direction:rtl;text-align:left;line-height:1.5;padding:2px 0}   /* room for g, p and y below the line (the field is 1/1 line height) */
.ax .ax-typed::after{content:"\200E"}
@media (prefers-reduced-motion:reduce){.ysteps li,.ysteps li > span,.ysteps li::after,.ysteps .ys-more,.ysteps .ys-more > i{transition:none}.ysteps li.ys-on > span::after,.fn-dial.fn-swap .fn-n,.fn-dial.fn-swap .fn-u,.mkt.is-other .mkt-other{animation:none}}
/* end clicks that tell you more */
/* the UI and UX audit, 27 Sep */
/* phones: a smaller mail button that steps aside while you scroll down (ux.js) */
@media (max-width:820px){
  .mail-fab{width:52px!important;height:52px!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)!important}
  .mail-fab svg{width:27px;height:27px}
  html.fab-away .mail-fab{opacity:0!important;transform:translateY(22px) scale(.82)!important;pointer-events:none}
}
/* Book a demo, always an overt button: filled, bold, a soft sheen that crosses it every few seconds, the arrow nudging */
a.bd{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;position:relative;isolation:isolate;overflow:hidden;
  background-color:#0d3552!important;color:#fff!important;font-weight:800!important;letter-spacing:.005em;text-decoration:none!important;border:0!important;
  border-radius:999px;padding:10px 18px;line-height:1.1;box-shadow:0 10px 22px -12px rgba(13,53,82,.75),inset 0 0 0 1px rgba(255,255,255,.08);
  background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%)!important;background-size:260% 100%!important;background-repeat:no-repeat!important;background-position:160% 0;
  animation:btSheen 4.8s ease-in-out infinite;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
a.bd:hover,a.bd:focus-visible{transform:translateY(-2px);background-color:#123f63!important;box-shadow:0 16px 28px -14px rgba(13,53,82,.85),0 0 0 3px rgba(106,169,224,.35)}
a.bd:focus-visible{outline:3px solid #6aa9e0;outline-offset:3px}
a.bd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:secNudge 1.8s ease-in-out infinite}
.btn.bd{font-weight:800!important}
.btn.big.bd{padding:15px 28px;font-size:17px}
/* on dark ground it turns white, navy words */
.topbar a.bd,.statband a.bd,section.cta a.bd,footer.site a.bd,.fq-ask a.bd,.tone-d a.bd,.dark a.bd{background-color:#fff!important;color:#0d3552!important;
  background-image:linear-gradient(100deg,transparent 42%,rgba(106,169,224,.45) 50%,transparent 58%)!important;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.topbar a.bd:hover,.statband a.bd:hover,section.cta a.bd:hover,footer.site a.bd:hover,.fq-ask a.bd:hover{background-color:#eaf4fd!important}
/* sizes that suit where it sits */
.topbar a.bd{padding:3px 10px!important;font-size:11px!important;letter-spacing:.09em;box-shadow:none}
.topbar .t-cta:has(a.bd){padding-left:4px!important}
.sec-next a.bd,.fq-demo a.bd,.qa-p .fq-demo a.bd{padding:9px 16px;font-size:15px}
footer.site a.bd{padding:7px 14px;font-size:14px;margin:2px 0 4px}
@media (prefers-reduced-motion:reduce){a.bd,a.bd svg{animation:none}}
/* a section with little in it keeps its natural height (fit.js marks it) */
@media (min-width:900px) and (min-height:560px) and (orientation:landscape){
  main.fit > section.fit-thin{min-height:0!important;padding-top:clamp(48px,9vh,110px)!important;padding-bottom:clamp(40px,7vh,90px)!important}
}
/* Everything you get: twelve cards and the ask fit one screen on a laptop (it ran 5% over) */
@media (min-width:900px) and (min-height:560px) and (orientation:landscape){
  main.fit #get .maint{gap:10px!important}
  main.fit #get .maint .mcard{padding:13px 18px!important}
  main.fit #get .maint .mcard h3{margin-top:6px!important}
  main.fit #get .sec-head{margin-bottom:clamp(12px,2vh,22px)!important}
}
/* the FAQ's short answers card fits under the header on a laptop */
@media (min-width:900px) and (max-height:1000px){
  .hero-page .vz-short th,.hero-page .vz-short td{padding-top:7px;padding-bottom:7px}
  .hero-page .vz-herofig{padding-top:18px;padding-bottom:16px}
}
/* end the UI and UX audit */