/* ---------------------------------------------------------------
   content.css — the benchmark, case-study and ad-gallery pages.

   Built to be read and to be extracted. Measure (~68ch) is set for
   reading; the answer-first lead is given real type size because
   44% of ChatGPT citations come from the first 30% of a page, and
   the source lines are deliberately visible rather than footnoted,
   since cited sources were one of the three modifications the GEO
   paper actually measured a lift from.
   --------------------------------------------------------------- */

.ct, .hb-inner{
  width:min(760px,90vw);margin:0 auto;
  padding-block:clamp(96px,12vh,150px) clamp(56px,8vh,104px);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,Arial,sans-serif;
  color:#24202d;
}
.ct{--c-ink-2:#5f5670;--c-ink-3:#766f82;--c-line:#17121f14}

.ct-kicker,.hb-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;
  background:#fff;box-shadow:inset 0 0 0 1px #17121f14;
  font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#7c3aed;
}
.ct-kicker span,.hb-kicker span{color:#a78bfa}
.ct-h,.hb-h{
  margin:clamp(16px,2vh,24px) 0 0;
  font-size:clamp(28px,3.1vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.08;
  text-wrap:balance;
}
/* the answer, first */
.ct-lead{
  margin:clamp(18px,2.4vh,28px) 0 0;
  font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:#2c2637;text-wrap:pretty;
}
.ct-lead b{font-weight:700;color:#201a2c}
.ct-sub{
  margin:clamp(12px,1.6vh,18px) 0 0;padding-left:14px;border-left:3px solid #7c3aed3d;
  font-size:clamp(13px,1.08vw,15px);line-height:1.55;color:var(--c-ink-3);
}

.ct-h2{
  margin:clamp(34px,4.4vh,56px) 0 clamp(12px,1.6vh,18px);
  font-size:clamp(19px,1.7vw,26px);font-weight:700;letter-spacing:-.025em;line-height:1.2;
}
.ct-p{margin:0 0 clamp(10px,1.4vh,16px);font-size:clamp(15px,1.22vw,17px);line-height:1.65;
  color:var(--c-ink-2);text-wrap:pretty}
.ct-p b{font-weight:650;color:#201a2c}
.ct-note{
  margin:clamp(14px,1.8vh,20px) 0 0;padding:clamp(13px,1.6vw,20px);border-radius:14px;
  background:#f6f3fc;box-shadow:inset 0 0 0 1px #7c3aed1f;
  font-size:clamp(14px,1.15vw,16px);line-height:1.6;color:#3b3348;
}
.ct-note b{font-weight:700;color:#201a2c}

.ct-l{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.3vh,15px)}
.ct-l li{
  position:relative;padding-left:20px;
  font-size:clamp(14.5px,1.18vw,16.5px);line-height:1.6;color:var(--c-ink-2);
}
/* The marker is a dot. It was a short horizontal line until 2026-10-08, which
   read as a dash in front of every point; the owner asked for a dot. Same
   colour and the same left edge, so the text does not move. */
.ct-l li::before{content:"";position:absolute;left:2px;top:.56em;width:6px;height:6px;
  border-radius:50%;background:#a78bfa}
.ct-l b{font-weight:650;color:#201a2c}
.ct-l span{color:var(--c-ink-3);font-size:.92em}

.ct-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ct-t{width:100%;border-collapse:collapse;min-width:460px}
/* the small uppercase treatment belongs to COLUMN heads only. Row heads are
   <th scope="row"> so a screen reader can say which row a cell is in, but
   they read as body text and must look like it. */
.ct-t thead th{
  text-align:left;padding:0 14px 10px 0;white-space:nowrap;
  font:700 9.5px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-ink-3);
}
.ct-t td{
  padding:clamp(9px,1.2vh,13px) 14px clamp(9px,1.2vh,13px) 0;
  border-top:1px solid var(--c-line);vertical-align:top;
  font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.45;color:var(--c-ink-2);
}
.ct-t tbody th{
  padding:clamp(9px,1.2vh,13px) 14px clamp(9px,1.2vh,13px) 0;
  border-top:1px solid var(--c-line);vertical-align:top;text-align:left;
  font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.45;
  font-weight:650;color:#201a2c;white-space:nowrap;
}
.ct-t tbody th a{color:inherit;text-decoration-color:#a78bfa}
.ct-t td:nth-child(2){font-family:ui-monospace,Menlo,monospace;font-weight:650;color:#5b21b6;
  white-space:nowrap}

/* attribution stays on the page, not in a footnote */
.ct-src{
  margin:clamp(9px,1.2vh,14px) 0 0;
  font-size:clamp(12px,1vw,13.5px);line-height:1.5;color:var(--c-ink-3);
}
.ct-src i{font-style:italic}

.ct-cite{
  margin-top:clamp(40px,5vh,72px);padding:clamp(18px,2.2vw,28px);border-radius:16px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--c-line);
}
.ct-cite-t{
  font:700 9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#7c3aed;margin-bottom:10px;
}
.ct-cite p{font-size:clamp(13px,1.08vw,15px);line-height:1.6;color:var(--c-ink-2)}
.ct-cite span{display:block;margin-top:6px;color:var(--c-ink-3)}

/* ---- a hub ---- */
.hb-l{list-style:none;margin:clamp(24px,3vh,40px) 0 0;padding:0;display:grid;gap:clamp(10px,1.4vh,16px)}
.hb-i a{
  display:block;padding:clamp(16px,2vw,24px);border-radius:16px;background:#fff;
  box-shadow:inset 0 0 0 1px #17121f14,0 14px 34px -30px #17121f;
  transition:box-shadow .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);
}
.hb-i a:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px #7c3aed3d,0 18px 40px -26px #7c3aed80}
.hb-t{font-size:clamp(17px,1.4vw,21px);font-weight:650;letter-spacing:-.022em;line-height:1.24;
  color:#201a2c;text-wrap:balance}
.hb-s{margin-top:8px;font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.55;color:#5f5670;
  text-wrap:pretty}
.hb-m{margin-top:10px;font:600 9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:#766f82}

/* ---- byline (added 2026-10-08) ----
   "By <author>", directly under the headline on benchmark and gallery pages.
   The build inserts it (injectByline in src/lib/content.ts). Same weight as
   the kicker; the link uses the violet the tables already use for figures. */
.ct-byline{
  margin:clamp(12px,1.6vh,18px) 0 0;
  font-size:clamp(13px,1.08vw,15px);font-weight:600;line-height:1.4;color:var(--c-ink-3);
}
.ct-byline a{color:#5b21b6;text-decoration:underline;text-decoration-color:#a78bfa;
  text-underline-offset:3px}
.ct-byline a:hover{text-decoration-color:#5b21b6}


/* ---- links inside article text (added 2026-10-08) -------------------------
   Links in paragraphs, lists, source lines and the cite box had no style of
   their own, so they inherited the text colour with no underline and could not
   be told from the words around them. Same violet and underline as the byline
   link above. Scoped to text containers, so cards and buttons are untouched. */
.ct-p a,.ct-l a,.ct-lead a,.ct-sub a,.ct-note a,.ct-src a,.ct-cite a{
  color:#5b21b6;text-decoration:underline;text-decoration-color:#a78bfa;
  text-underline-offset:3px}
.ct-p a:hover,.ct-l a:hover,.ct-lead a:hover,.ct-sub a:hover,.ct-note a:hover,
.ct-src a:hover,.ct-cite a:hover{text-decoration-color:#5b21b6}

/* ---- reference and product pages: a page head that stands out (2026-10-08)
   About, author, methodology, security and the six product pages. They were
   first built on the benchmark pages' heading size (28 to 44px), which suits a
   long article headline; a product page's heading is one or two words and did
   not read as the top of a page. `.ct-pg` is added by src/lib/pages.ts, so the
   benchmark and gallery pages, which share `.ct`, are not affected.

   Order of emphasis, top to bottom: the name (largest, and in the brand
   gradient on product pages), the tagline saying what it is, the lead that
   answers the page's question, then section headings clearly larger than the
   text they sit over. */
.ct-pg{width:min(840px,90vw)}
.ct-pg .ct-head{padding-bottom:clamp(24px,3.6vh,44px);border-bottom:1px solid var(--c-line)}
.ct-pg .ct-h{
  margin-top:clamp(20px,2.6vh,30px);
  font-size:clamp(38px,5.2vw,64px);line-height:1.02;letter-spacing:-.04em;
}
/* On a product page the line saying what the thing is ("What it does and how
   it works") is the headline, and the name sits above it, smaller, in the
   brand gradient. A first version had it the other way round, with the name at
   92px; the owner asked for the name to be the smaller of the two. */
.ct-pg--product .ct-h{
  margin-top:clamp(18px,2.4vh,26px);
  font-size:clamp(22px,2.5vw,32px);line-height:1.1;letter-spacing:-.03em;
  /* the site's gradient (.gv-grad in shell.css). padding-bottom keeps the
     descenders of "g" and "y" inside the clipped background */
  display:block;width:fit-content;max-width:100%;padding-bottom:.1em;
  background:linear-gradient(110deg,#8b52e7,#ca7dab,#89a6e6);
  color:transparent;background-clip:text;-webkit-background-clip:text;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .ct-pg--product .ct-h{color:#8b52e7;background:none}
}
.ct-pg-tag{
  margin:clamp(4px,.8vh,10px) 0 0;
  font-size:clamp(34px,4.8vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1.04;
  color:#201a2c;text-wrap:balance;
}
.ct-pg .ct-lead{
  margin-top:clamp(22px,3vh,34px);
  font-size:clamp(18px,1.7vw,23px);line-height:1.5;
}
.ct-pg .ct-h2{
  margin-top:clamp(46px,6.4vh,76px);
  font-size:clamp(24px,2.6vw,36px);letter-spacing:-.032em;line-height:1.14;
}
/* a paragraph straight after a list of points needs air; without this it sat
   on the last point as if it were part of it */
.ct-pg .ct-l + .ct-p,.ct-pg .ct-l + .ct-src{margin-top:clamp(14px,2vh,20px)}

/* ---- named points: the name as a subheading (2026-10-08) -------------------
   A list of labelled points ("Decode: tags 50+ attributes…") is rendered by
   src/lib/pages.ts with the name as a subheading and its text on the line
   below. It stays a dotted list, one column, exactly like the other points on
   the page; only the name is larger. (A first version used cards in a grid.
   The owner asked for points.) */
.ct-l--named{gap:clamp(16px,2.2vh,24px)}
.ct-l--named li{padding-left:22px}
/* the dot sits level with the middle of the larger name */
.ct-l--named li::before{top:calc(clamp(20px,2vw,26px) * .575 - 3px)}
.ct-h3{
  margin:0;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.028em;line-height:1.15;
  color:#201a2c;
}
.ct-h3 a{color:inherit;text-decoration:underline;text-decoration-color:#a78bfa;
  text-decoration-thickness:2px;text-underline-offset:5px}
.ct-h3 a:hover{text-decoration-color:#5b21b6}
.ct-def-p{
  margin:clamp(5px,.8vh,8px) 0 0;font-size:clamp(14.5px,1.18vw,16.5px);line-height:1.6;
  color:var(--c-ink-2);text-wrap:pretty;
}
.ct-def-p b{font-weight:650;color:#201a2c}
.ct-def-p span{color:var(--c-ink-3);font-size:.94em}
.ct-def-p a{color:#5b21b6;text-decoration:underline;text-decoration-color:#a78bfa;text-underline-offset:3px}

/* ---- the questions accordion (`.ct-faq`), moved 2026-10-09 -----------------
   Its rules are in src/sections/faq/faq.css, which is part of the site bundle.
   The new homepage shows the same rows and does not load this file, so they
   live where both pages can reach them. Nothing else here was changed. */

/* ---- a homepage section shown on a product page (added 2026-10-09) ----------
   `{{section:<slug>}}` in a page file (src/lib/pages.ts) puts that section's
   own markup here, inside `<div class="ct-embed">`. The sections were designed
   for the full width of the homepage, so the wrapper leaves the article's
   840px text column and takes the width of the window; the section then
   centres its own content as it does on `/`. Nothing above this line was
   changed.

   `100vw` includes a classic scrollbar's width, which would let the page
   scroll sideways by that much. `overflow-x:clip` on the `<main>` that holds
   an embed stops it without making `<main>` a scroll container (so anything
   sticky inside a section keeps working). */
.ct-embed{
  width:100vw;margin-left:calc(50% - 50vw);
  margin-block:clamp(8px,1.6vh,20px) clamp(4px,1vh,12px);
}
main:has(.ct-embed){overflow-x:clip}
/* the sentence that introduces a demo sits a full step below the page head */
.ct-embed-intro{margin-top:clamp(28px,4vh,44px)}

/* ---- prose tables on product pages (added 2026-10-09) ----------------------
   `.ct-t` was drawn for benchmark tables, whose second column is a figure:
   monospace, violet, never wrapped. A product page's tables hold sentences
   ("What goes in" / "What that means"), so `.ct-t--text` sets every cell as
   text, lets it wrap, and lets a row head wrap on a phone. */
.ct-t--text td:nth-child(2){font-family:inherit;font-weight:inherit;color:var(--c-ink-2);white-space:normal}
.ct-t--text tbody th{white-space:normal;min-width:9em}
.ct-t--text td a{color:#5b21b6;text-decoration:underline;text-decoration-color:#a78bfa;text-underline-offset:3px}
/* a table followed by a paragraph needs the same air a list gets */
.ct-pg .ct-tw + .ct-p,.ct-pg .ct-tw + .ct-src{margin-top:clamp(14px,2vh,20px)}

/* ---- breadcrumb trail (added 2026-10-09) -----------------------------------
   Galvor › Research › the page. The one set of trail styles on the site, for
   the one piece of markup (`breadcrumbHtml` in src/lib/content.ts): at the top
   of every article's header, where research posts had a "back" pill, and
   above the kicker on the reference and product pages. It lives in this file
   because every page that shows a trail loads it.

   The trail is one line. The page's own name is the only step that may
   shrink, and it ends in an ellipsis when the line runs out, so a long
   headline cannot push a phone's page sideways. `min-width:0` all the way
   down is what lets it shrink inside the hero's grid column. */
.gv-crumbs{min-width:0;font-size:13px;font-weight:500;line-height:1.5;color:#5f5670}
.gv-crumbs ol{display:flex;align-items:center;min-width:0;list-style:none;margin:0;padding:0}
.gv-crumbs li{display:flex;align-items:center;flex:none;white-space:nowrap}
.gv-crumbs li:last-child{flex:0 1 auto;min-width:0}
/* the chevron is two borders of a small square, not a character, so a screen
   reader has nothing to read out between the steps */
.gv-crumbs li+li::before{content:"";flex:none;width:5px;height:5px;margin:0 10px 0 7px;
  border:solid #766f82;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.gv-crumbs a{color:#5b21b6;text-decoration:underline;text-decoration-color:#a78bfa;
  text-underline-offset:3px}
.gv-crumbs a:hover{text-decoration-color:#5b21b6}
.gv-crumbs [aria-current]{overflow:hidden;text-overflow:ellipsis}
/* the kicker is an inline pill with no top margin of its own */
.ct-head .gv-crumbs{margin-bottom:clamp(14px,2vh,20px)}

/* ---- the security matrix on /security/ (added 2026-10-09) -------------------
   `{{section:stack#matrix}}` shows the homepage's "Your data stays yours"
   block on the security page. On `/` it is a dark slab. The owner asked for it
   here on the site's light ground, so these rules re-ink it, and only inside
   the embed: src/sections/stack/stack.css and `/` are not touched.

   Most of the section reads its colours from five custom properties, so they
   are set again here in the dark ink and violet the rest of `.ct` uses. The
   rest are the few colours stack.css wrote out as literals. */
.ct-embed[data-section="stack"] .stack{
  --st-ink:#201a2c;
  --st-ink-dim:#5f5670;
  --st-line:#17121f1f;
  --st-purple:#7c3aed;
  /* no ground of its own: the fixed .gv-aurora field shows through */
  background:none;
  /* the slab's padding was sized to frame a dark block between two sections */
  padding-block:clamp(28px,4vw,48px) clamp(20px,3vw,36px);
}
/* the shadow kept light type readable over the moving network */
.ct-embed[data-section="stack"] :is(.st-h,.st-sub){text-shadow:none}
.ct-embed[data-section="stack"] .st-bk{border-color:#7c3aed8c}
.ct-embed[data-section="stack"] .st-row:hover{background:#7c3aed0d}
.ct-embed[data-section="stack"] .st-row-more:hover{background:transparent}
.ct-embed[data-section="stack"] .st-more-rule{background:linear-gradient(90deg,transparent,#7c3aed8c,transparent)}
.ct-embed[data-section="stack"] .st-tail a{color:#5b21b6;text-decoration-color:#a78bfa}
/* stack.js draws the network in pale lavender at a few percent, for a dark
   ground. Darkened, the same lines read as a faint violet trace on a light one. */
.ct-embed[data-section="stack"] .st-canvas{filter:brightness(.42) saturate(2.2)}

/* ---- small screens: reference and product pages (added 2026-10-09) ----------
   From a pass over these pages at 320 to 1280 wide. Every rule here is inside
   a width query, or changes nothing that can be seen (a larger tap area), so
   the pages are the same at 1440 as they were. Rules for an embedded section
   are scoped to the embed; the section's own stylesheet and `/` are not
   touched. */

@media(max-width:510px){
  /* A two-column prose table ("What goes in" / "What that means") fits a
     phone once its cells wrap. The 460px floor is for tables of figures; on
     these it only forced a sideways scroll that hid half of the second
     column. Its two column heads may wrap as well, or the pair of them sets
     the width. */
  .ct-pg .ct-t--text:not(:has(thead th:nth-child(3))){min-width:0}
  .ct-pg .ct-t--text:not(:has(thead th:nth-child(3))) thead th{white-space:normal}

  /* Wider tables do scroll here, and nothing said so: the cut-off column read
     as a clipped page. The right edge fades out, the usual sign that there is
     more to the side. This fixed fade is for a browser without scroll
     timelines (the rule further down does it better where they exist). The
     last cell gets the width of the fade as padding, so at the end of the
     scroll no text is left under it. */
  @supports not (animation-timeline:scroll()){
    .ct-pg .ct-tw:has(thead th:nth-child(3)){
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),#0000);
      mask-image:linear-gradient(90deg,#000 calc(100% - 30px),#0000);
    }
    .ct-pg .ct-tw:has(thead th:nth-child(3)) :is(th,td):last-child{padding-right:30px}
  }
}

/* A table that scrolls sideways fades out at its right edge until it has been
   scrolled to the end. Same method as the tables inside a post (case.css,
   `--cs-tw-fade`): the fade is tied to the table's own scroll position, so a
   table that fits has no scroll range and nothing is faded. Some benchmark
   tables are wider than the 760px column on a laptop too, which is why this
   reaches up to 1280px. It stops there so that 1440 is drawn as before. */
@property --ct-tw-fade{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes ct-tw-fade{from{--ct-tw-fade:36px}to{--ct-tw-fade:0px}}
@media(max-width:1280px){
  @supports (animation-timeline:scroll()){
    .ct .ct-tw{
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--ct-tw-fade)),#0000);
      mask-image:linear-gradient(90deg,#000 calc(100% - var(--ct-tw-fade)),#0000);
      animation:ct-tw-fade linear both;animation-timeline:scroll(self inline);
    }
  }
}

/* Benchmark and gallery tables on a phone. A row head never wrapped, so one
   long head took the width of the screen, pushed the third column off the
   side and left rows 140 to 160px tall. As in a post (case.css): the row head
   may wrap, and a table of up to three columns drops its 460px floor so it
   fits. Its column heads may wrap too: three unbroken heads ("Creatives
   shipped per month") were wider together than the screen, and they were
   what pushed the third column off it. A table of four or more keeps the
   floor and scrolls, with the fade above. The reference and product pages
   (`.ct-pg`) hold sentences in their third column and keep their own rules,
   at the top of this block. */
@media(max-width:620px){
  .ct:not(.ct-pg) .ct-t tbody th{white-space:normal;min-width:7.5em}
  .ct:not(.ct-pg) .ct-t:not(:has(thead th:nth-child(4))){min-width:0}
  .ct:not(.ct-pg) .ct-t:not(:has(thead th:nth-child(4))) thead th{white-space:normal;vertical-align:bottom}
}

/* The kicker ("Benchmarks · Updated 2 October 2026") is set at a line height
   of 1, which is right for one line. On a phone it wraps, and the two lines
   touched. The padding gives back what the taller line adds, so a kicker that
   stays on one line is the height it was. */
@media(max-width:430px){
  .ct-kicker{line-height:1.4;padding-block:5px}
}

@media(max-width:900px){
  /* source lines were 12px up to a 1200px window; 13 is the floor for text
     that is meant to be read on a phone */
  .ct-pg .ct-src{font-size:13px}
}

/* Tap areas. A trail link was 20px tall and a linked point name 23px. The
   padding grows the area a finger can hit and the equal negative margin gives
   the space back, so nothing moves. */
.gv-crumbs a{padding:10px 4px;margin:-10px -4px}
.ct-h3 a{padding-block:9px}
/* a linked row head in a table (the ad gallery) was 16px tall. It is an
   inline link, so the padding adds to what can be tapped and to nothing else */
@media(max-width:768px){
  .ct-t tbody th a{padding-block:12px}
}

/* /compare/: the table scrolls sideways inside its card up to 768px with the
   first two columns pinned. Same fade as the tables above, for the same
   reason. The pinned columns are on the left, so they stay solid. */
@media(max-width:768px){
  .ct-embed[data-section="compare"] .cm-scroll{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),#0000);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),#0000);
  }
}

/* On a phone the Galvor column is 54px wide and its head, the mark beside the
   word "Galvor", is wider than that. The word ran out of the pinned column
   and sat on top of the column heads scrolling under it. Mark over word fits.
   (The table on `/` has the same fault; that file is not changed here.) */
@media(max-width:640px){
  .ct-embed[data-section="compare"] .cm-th-us{padding-inline:4px}
  .ct-embed[data-section="compare"] .cm-th-us-in{flex-direction:column;gap:3px}
}

/* /platform/brand-memory/: the pill over the heading is sized to its text
   (`width:max-content`), which is wider than a 390px screen, so its end was
   cut off by the section's edge. On a phone it may now wrap onto a second
   line. Where the text fits on one line, `fit-content` is the same width. */
@media(max-width:430px){
  .ct-embed[data-section="memory"] .gv-wrap>.gv-eyebrow{
    width:fit-content;max-width:100%;text-align:center;line-height:1.45;
  }
}
/* the pause button is a 30px circle; this widens what a finger can hit */
.ct-embed[data-section="memory"] .gv-pause{position:relative}
.ct-embed[data-section="memory"] .gv-pause::after{content:"";position:absolute;inset:-7px}

/* /platform/run/: on a phone the board's title ("Cycle 14 · Sep 8 – Sep 22")
   broke onto two lines beside the Live pill, and the line under the rail
   broke "Day 1" and "Day 14" in two. The three window dots are decoration, so
   they give up their room to the title; the day labels stay whole and the
   sentence between them is the part that wraps. */
@media(max-width:430px){
  .ct-embed[data-section="desk"] .dk-dots{display:none}
  .ct-embed[data-section="desk"] .dk-board-t{font-size:11px;letter-spacing:.04em;white-space:nowrap}
  .ct-embed[data-section="desk"] .dk-rail-t span{flex:none;white-space:nowrap}
  .ct-embed[data-section="desk"] .dk-rail-t b{text-align:center;line-height:1.35}
}

/* A filled button on a content page (first used on /pricing/, 2026-10-09).
   The site's one filled button, value for value: the nav's "Talk to founders"
   pill (.topnav .demo, base.css) at the size of the homepage's .hn-btn-go.
   Written with .ct in front so the link rules above (underline, violet) do
   not apply to it. */
.ct .ct-btn,.ct .ct-btn:hover{
  display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  padding:14px 24px;border-radius:99px;border:1px solid #ffffff38;
  background:#7936ea;color:#fff;text-decoration:none;
  font-size:15px;font-weight:600;line-height:1;letter-spacing:-.005em;
  box-shadow:0 1px 2px #2a0f5a55,0 8px 20px -8px #5a1fc0aa;
}
.ct .ct-btn:hover{background:#6a28d6}
.ct .ct-btn .gv-arr{width:11px;height:11px}

/* Plan cards (/pricing/, 2026-10-09). Two things a visitor picks between, so
   they are cards, the one case docs/DESIGN_SYSTEM.md allows them. The card is
   the site's: white, inset hairline, 14px corners. Each holds a label, a name,
   one line, where the price would be, the filled button, then what is in it
   as ticked points. Side by side from 700px, stacked below. */
.ct-plans{display:grid;gap:18px;margin:clamp(26px,3.6vh,40px) 0 0}
@media(min-width:700px){.ct-plans{grid-template-columns:1fr 1fr}}
.ct-plan{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(22px,2.4vw,30px);border-radius:14px;
  background:#ffffffd9;box-shadow:inset 0 0 0 1px #17121f14,0 18px 40px -30px #4c1d9540;
}
.ct-plan-k{margin:0;font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#7c3aed}
.ct-plan-h{margin:14px 0 0;font-size:clamp(21px,1.9vw,27px);font-weight:700;
  letter-spacing:-.025em;line-height:1.15;color:#201a2c}
.ct-plan-d{margin:10px 0 18px;font-size:15px;line-height:1.5;color:var(--c-ink-2)}
.ct-plan-l{list-style:none;margin:22px 0 0;padding:20px 0 0;width:100%;
  border-top:1px solid var(--c-line);display:grid;gap:11px}
.ct-plan-l li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;color:var(--c-ink-2)}
/* a tick, drawn as two borders, in the brand violet */
.ct-plan-l li::before{content:"";position:absolute;left:3px;top:.32em;width:9px;height:5px;
  border-left:2px solid #7c3aed;border-bottom:2px solid #7c3aed;transform:rotate(-45deg)}
.ct-plan-l a{color:#201a2c;font-weight:650;text-decoration:underline;
  text-decoration-color:#7c3aed66;text-underline-offset:3px}

/* The three short statements under a product page's lead (2026-10-09): the
   buyer's problem, what Galvor does about it, what they walk away with.
   They read straight down the reading column, one after another, directly
   under the lead and above the page's animation, so the argument comes before
   the demo. No labels, no columns and no boxes: the owner asked for the same
   words without "The problem / What we do / What you get" over them and not
   side by side. Each is a claim and two lines at most, with the brand
   gradient (.gv-grad) on the phrase that carries the point, one phrase per
   heading as everywhere else on the site. The rules for the
   words are in docs/DESIGN_SYSTEM.md, "Writing". */
.ct-pso{display:grid;gap:clamp(22px,3vh,32px);margin:clamp(30px,4vh,46px) 0 clamp(34px,4.6vh,56px);max-width:62ch}
.ct-pso-h{margin:0;font-size:clamp(21px,1.9vw,27px);font-weight:700;
  letter-spacing:-.025em;line-height:1.2;color:#201a2c;text-wrap:balance}
/* room for descenders, which a clipped gradient otherwise cuts off */
.ct-pso-h .gv-grad{padding-bottom:.12em}
.ct-pso-p{margin:8px 0 0;font-size:clamp(15.5px,1.22vw,17px);line-height:1.6;color:var(--c-ink-2);text-wrap:pretty}

/* A postal address (the privacy policy's contact section): upright, not the
   browser's italic, with the organisation's name in the heading ink. */
.ct-addr{font-style:normal}
.ct-addr b{color:#201a2c;font-weight:650}
/* an "In Short" note followed directly by its paragraph (the privacy policy):
   the note has no bottom margin of its own, so the two touched */
.ct-sub+.ct-p{margin-top:clamp(12px,1.6vh,18px)}

/* The comparison table on /compare/, tidied (owner, 2026-10-09). The section
   is the old homepage's, embedded; these rules are scoped to the embed, and
   the table's words and marks are unchanged. What was wrong, and what each
   rule answers:
   - two headings in a row (the page's, then the section's own): the
     section's head is not shown here;
   - the group labels (Decode, Brand Memory…) were faint grey text floating
     between rows: each is now a full-width band, so the table reads as four
     groups;
   - a red cross on most cells made the whole table shout "No": a "No" is
     quiet grey now, so the eye goes to the Galvor column and to the cells
     that say something;
   - the Galvor column's tick is the brand violet, a step larger;
   - the card is the site's (white, hairline, 14px), and the button is the
     site's filled violet one, not the old black pill. */
.ct-embed[data-section="compare"] .cm.compare{padding-block:clamp(4px,1vw,14px) clamp(36px,5vw,60px)}
.ct-embed[data-section="compare"] .cm-head{display:none}
.ct-embed[data-section="compare"] .cm-card{border-radius:14px;background:#fff;
  box-shadow:inset 0 0 0 1px #17121f14,0 18px 40px -30px #4c1d9540}
.ct-embed[data-section="compare"] .cm-scroll{border-radius:14px}
.ct-embed[data-section="compare"] .cm-th{color:#201a2c;font-weight:600}
.ct-embed[data-section="compare"] .cm-th-us{background:#efe8fb;color:#5b21b6}
.ct-embed[data-section="compare"] .cm-grp{background:#f8f6fc;color:#7c3aed;
  border-top:1px solid #17121f14;border-bottom:1px solid #17121f14}
.ct-embed[data-section="compare"] .cm-grp-in{background:#f8f6fc}
.ct-embed[data-section="compare"] .cm-grp-in > span{color:#766f82}
.ct-embed[data-section="compare"] .cm-cap{color:#201a2c;font-weight:500}
.ct-embed[data-section="compare"] .cm-us .cm-ic::before{color:#7c3aed;font-size:15px}
.ct-embed[data-section="compare"] .cm-no .cm-ic::before{color:#cdc5d8;font-weight:600}
.ct-embed[data-section="compare"] .cm-no .cm-txt{color:#766f82}
.ct-embed[data-section="compare"] .cm-cell:not(.cm-yes):not(.cm-no) .cm-txt{color:#3f384c}
.ct-embed[data-section="compare"] .cm-cell.cm-yes:not(.cm-us) .cm-txt{color:#12735a;font-weight:600}
.ct-embed[data-section="compare"] .cm-note{color:#5f5670}
.ct-embed[data-section="compare"] .cm-note b{color:#201a2c}
.ct-embed[data-section="compare"] .cm-cta,
.ct-embed[data-section="compare"] .cm-cta:hover{background:#7936ea;color:#fff;
  box-shadow:0 1px 2px #2a0f5a55,0 8px 20px -8px #5a1fc0aa}
.ct-embed[data-section="compare"] .cm-cta:hover{background:#6a28d6}
.ct-embed[data-section="compare"] .cm-cta:focus-visible{outline-color:#7c3aed}
@media(min-width:641px){
  .ct-embed[data-section="compare"] .cm-th{padding-block:18px;font-size:14px}
  .ct-embed[data-section="compare"] .cm-grp{padding:12px 22px;font-size:12px}
  .ct-embed[data-section="compare"] .cm-cap{padding:15px 22px;font-size:15px}
  .ct-embed[data-section="compare"] .cm-cell{padding-block:15px;font-size:14px}
  .ct-embed[data-section="compare"] tbody tr:not(.cm-grp-row):hover .cm-cap,
  .ct-embed[data-section="compare"] tbody tr:not(.cm-grp-row):hover .cm-cell:not(.cm-us){background:#fbfaff}
}