/* =====================================================================
   ENGINE · the public site.
   Shared by every page under pages/: the front page, pricing, the three
   product pages, integrations, and the four pages that are only words.

   Colour is used the way the product uses it: five channel hues that
   only ever appear as dots, never as filled areas, and one clay accent.
   One warm dark and one warm light with no hue cast in either, and
   every one of the neutrals is the app's own value, which
   tools/check-pickers.mjs holds in both directions. Repainted in
   `_112` from the teal and the green-grey ramp, with the app, from the
   two previews approved on Sep 15.

   Recomposed in `_113` to the hero approved the same day: every
   selling page opens on a dark band that is dark in both themes, with
   the bar over it, and the front page's band carries the engine, a
   wheel that turns once a week. Headings dropped from 600 to 500 and
   lost their accent word; every section opens with a small line above
   its heading; every button is a pill, filled in the ink or outlined;
   every card is flat, on a hairline, and the frame that draws the app
   is light on either ground, because the app is.

   Recomposed again in `_114`, below the hero and around it: the band
   opens out of a field of pixels while the engine draws itself in, a
   strip of every part goes by under it, the frame sits in a window,
   the three products are three cards hanging off one account, the
   week has a line filling beside it, the assistant is four claims
   beside one question, the questions have a head that stays put, and
   the closing band carries the engine's ghost. Motion is one
   vocabulary in src/site/motion.tsx: words rising out of clipped
   boxes, rows that go by, buttons that lean, lines that fill. The
   copy did not move and the tokens did not move.

   Rewritten in `_108` for the React site. The class vocabulary is the
   one the checks read (.bar, .hero, .acts, .shot, .scene, .rig and
   the rest), so nothing that measures the site had to learn new
   names; what changed is the scale, the room, and what moves. Motion
   that CSS can carry is here, in keyframes gated on reduced motion;
   motion that needs to know where the reader is lives in src/site.
   ===================================================================== */

:root{
  /* The app's five, by name and by value. The names are stored in the
     database and did not move in `_112`; what they resolve to did. See
     the note on them in src/styles.css. */
  --c-coral:#D97757; --c-gold:#788C5D; --c-lime:#9C9F55;
  --c-violet:#9A8CC0; --c-sky:#6A9BCC;

  /* Two faces since `_112`: Schibsted Grotesk for structure and
     Newsreader for anything a person reads. `--disp` and `--body` are
     both the grotesk, because `--body` is what every button, link, label
     and switch on this sheet names in its `font` shorthand, and those
     are structure. The serif is `--serif`, reached for by one block at
     the foot of this sheet. Before `_66` the site set its headings in
     Newsreader and its body in Inter, which is the opposite arrangement
     and not this one. */
  --disp:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --body:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --r:12px; --r-lg:16px; --r-xl:22px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
}

/* Dark is the default, because that's what the app is. */
/* The neutrals are the app's own, value for value, and --ink-3 is the
   app's solved value rather than the approved #87867F, which is under AA
   on --surface-2 in both themes. check-pickers.mjs computes every one of
   these rather than trusting this note.

   THE BAND BLOCK BELOW IS THIS BLOCK AGAIN, and has to be. A dark band
   on a light page cannot reach the dark theme's values any other way
   than by declaring them, so it declares them, and check-screens.mjs
   holds the two blocks equal, token for token: a value that moves here
   and not there fails the build rather than shipping two darks. */
:root,
:root[data-theme="dark"]{
  --bg:#141413; --bg-2:#1A1A19; --surface:#1F1E1D; --surface-2:#262624;
  --hair:#30302E; --hair-2:#3D3D3A;
  --ink:#FAF9F5; --ink-2:#B0AEA5; --ink-3:#96958C;
  /* The sentence under a heading, since `_113`: brighter than --ink-2
     and quieter than --ink, the value the approved hero sets its lede in. */
  --say:#D1CFC5;
  /* Hairlines as alpha rather than as a solid, since `_113`, so one rule
     draws the same line on the ground, on a card and on the band. The
     second is the edge of an outlined button and of an input. */
  --line:rgba(250,249,245,.10); --line-2:rgba(250,249,245,.26);
  /* Clay, the one accent. A fill and a mark as it is; set as a word it
     is --accent-text, solved on clay's own line in the app. */
  --accent:#D97757; --accent-ink:#141413;
  --accent-text:#DB7E5F;
  --accent-tint:rgba(217,119,87,.12); --accent-on-tint:#E19074;
  /* The primary button, the light ink on the dark ground, the way the
     approved preview draws it. Since `_113` this is the site's own
     button as well as the frame's. */
  --press:#FAF9F5; --on-press:#141413; --press-hover:#E8E6DC;
  --lift:rgba(0,0,0,.45);
  --edge:#3D3D3A;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#FAF9F5; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F0EEE6;
  --hair:#E8E6DC; --hair-2:#D1CFC5;
  --ink:#141413; --ink-2:#5E5D59; --ink-3:#686760;
  --say:#5E5D59;
  --line:rgba(20,20,19,.10); --line-2:rgba(20,20,19,.16);
  /* The same clay as dark. It carries ink rather than white, 5.90 to
     2.96, and as a word it is the darker value beside it. */
  --accent:#D97757; --accent-ink:#141413;
  --accent-text:#AC4827;
  --accent-tint:rgba(217,119,87,.08); --accent-on-tint:#A54525;
  --press:#141413; --on-press:#FAF9F5; --press-hover:#3D3D3A;
  --lift:rgba(20,20,19,.10);
  --edge:#D1CFC5;
  color-scheme:light;
}

/* ---- the band ------------------------------------------------------ */
/* The dark hero band, committed in both themes, and the bar while it is
   over it. The dark theme's block, again, for the reason given above
   it. Everything inside a band is drawn by the same rules as everything
   outside one; only the tokens differ. */
.band,
.bar.over{
  --bg:#141413; --bg-2:#1A1A19; --surface:#1F1E1D; --surface-2:#262624;
  --hair:#30302E; --hair-2:#3D3D3A;
  --ink:#FAF9F5; --ink-2:#B0AEA5; --ink-3:#96958C;
  --say:#D1CFC5;
  --line:rgba(250,249,245,.10); --line-2:rgba(250,249,245,.26);
  --accent:#D97757; --accent-ink:#141413;
  --accent-text:#DB7E5F;
  --accent-tint:rgba(217,119,87,.12); --accent-on-tint:#E19074;
  --press:#FAF9F5; --on-press:#141413; --press-hover:#E8E6DC;
  --lift:rgba(0,0,0,.45);
  --edge:#3D3D3A;
  color-scheme:dark;
}
.band{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}

/* ---- faces --------------------------------------------------------- */
/* Files on this origin since `_112`, the same ten the app declares, and
   the policy's font-src is 'self'. See the faces block in
   src/styles.css for why they live under /assets/. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:italic;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:italic;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/newsreader-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/newsreader-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/newsreader-vietnamese-wght-normal.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Newsreader;font-style:italic;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/newsreader-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:italic;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/newsreader-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:italic;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/newsreader-vietnamese-wght-italic.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:var(--press);
  color:var(--on-press);padding:10px 16px;border-radius:99px;font-weight:500}

/* THE FIELD CLIPS THE FRAME'S OVERHANG. The frame's shadow reaches 120px
   past each side of the wrap, and a mobile browser answers content past
   the edge by widening its layout viewport to fit it, whatever
   `overflow-x:hidden` on the body says. Measured in `_108` on the built
   site: innerWidth read 795 on a 390 phone with the clip off, and 390
   with it on. `overflow-x:clip` rather than `hidden` because clip makes
   no scroll container, so the frame's deliberate overrun below the
   field is untouched. */
.field{position:relative;isolation:isolate;overflow-x:clip}

/* ---- bar ----------------------------------------------------------- */
/* Brand left; the pages, the two switches and one solid button right.
   Over a band the bar wears the band, through the tokens `.bar.over`
   scopes above; past it, it is the page's own frosted bar. */
/* No transition on the bar since `_113`: it passes between two grounds,
   light words on the band and dark words on the page, and a cross-fade
   between those is a bar no one can read for a third of a second. The
   walk's probe photographed exactly that frame. */
.bar{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent}
.bar.solid{background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--hair)}
.bar.over{background:var(--bg);color:var(--ink);border-color:var(--line)}
/* The row has 1012px inside the wrap at any window over 1140, and
   tools/check-mobile.mjs adds it up from these rules against the real
   glyph advances and fails when it stops fitting inside the wrap, so a
   wider word here is a red check there rather than a wrapped button on
   a laptop. Nothing in the bar may wrap: a button on two lines is what
   the `_108` walk photographed when the row was 57px over and the check
   measured against the window instead of the wrap. */
/* The bar and the band's stage share a wider wrap than the sections do,
   1160 to 1060: a 76px headline beside a 520px wheel needs the room, and
   the bar's edges are the stage's, the way the approved hero draws them. */
.bar .wrap{display:flex;align-items:center;gap:14px;height:72px;white-space:nowrap;max-width:1160px;
  transition:height .3s var(--ease)}
.bar.solid .wrap{height:62px}
.brand{display:flex;align-items:center;gap:10px;font:600 15px var(--disp);
  letter-spacing:-.016em;text-decoration:none;color:var(--ink)}
.brand svg{transition:transform .5s var(--spring)}
.brand:hover svg{transform:rotate(-8deg)}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
/* :not(.btn) so the nav's link colour can't outrank the button's own. */
.nav a:not(.btn){color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:400;
  transition:color .2s;position:relative}
/* A hairline that draws under the page you are on and the one under
   the pointer, from the left, the way a Framer bar does. */
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
.bar-panel > .btn{padding:9px 16px;font-size:13.5px}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current="page"]{color:var(--ink)}
.bar-end{display:flex;align-items:center;gap:10px}

/* The panel is display:contents above the breakpoint, so its three
   children are flex items of .wrap and the row is the row it always
   was. The order values keep it in that order: brand, links, theme,
   marketing, button. */
.bar-panel{display:contents}
.bar .nav{order:1}
.bar .bar-end{order:2}
.bar-panel > .sw{order:3}
.bar-panel > .btn{order:4}
.bar-menu{display:none}

/* The bar arrives with the page, `_114`: each thing on it a beat after
   the one before, from first paint, in CSS, so it needs no script. */
.bar .brand,.bar .nav a,.bar .switches,.bar-panel > .sw,.bar-panel > .btn,.bar-menu{
  animation:rise .8s var(--ease) both}
.bar .brand{animation-delay:.1s}
.bar .nav a:nth-child(1){animation-delay:.22s}
.bar .nav a:nth-child(2){animation-delay:.27s}
.bar .nav a:nth-child(3){animation-delay:.32s}
.bar .nav a:nth-child(4){animation-delay:.37s}
.bar .nav a:nth-child(5){animation-delay:.42s}
.bar .nav a:nth-child(6){animation-delay:.47s}
.bar .switches,.bar-menu{animation-delay:.5s}
.bar-panel > .sw{animation-delay:.55s}
.bar-panel > .btn{animation-delay:.6s}

/* The thin line along the top saying how far down the page is. Two
   pixels, the accent, and the one piece of chrome that is pure motion. */
.progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:61;background:var(--accent);
  transform-origin:left;pointer-events:none}

/* ---- buttons ------------------------------------------------------- */
/* Every button on the site is a pill, and there are two: the filled one
   is the ink of whichever ground it sits on, light on the band and dark
   on the page, and the outlined one beside it is the way round. That is
   the pairing the approved hero draws, and it settles what `_112` left
   open: the accent left the buttons and stayed a dot, a tint and a
   link. `.btn-solid` and `.btn` are the same button; the name stays
   because the markup and the checks say it. */
.btn{
  display:inline-block;padding:14px 24px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;background:var(--press);color:var(--on-press);font:500 15px var(--body);
  text-decoration:none;line-height:1.35;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--press-hover)}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--press);color:var(--on-press)}
.btn-solid:hover{background:var(--press-hover)}
.btn-line{background:none;color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{background:var(--surface);border-color:var(--hair-2)}
/* The magnet is the box a button leans inside; the button itself is
   untouched, so the checks that measure the pair still read the pair. */
.magnet{display:inline-block}

/* the two switches */
.switches{display:flex;gap:6px;align-items:center}
.sw{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:none;border:1px solid var(--hair-2);border-radius:99px;
  color:var(--ink-2);font:500 12.5px var(--body);padding:7px 12px;
  transition:color .2s,border-color .2s,background .2s;
}
.sw:hover{color:var(--ink);border-color:var(--ink-3)}
.sw svg{display:block}
.sw .dotted{width:7px;height:7px;border-radius:99px;background:var(--ink-3);
  transition:background .25s}
.sw[aria-pressed="true"]{color:var(--ink);border-color:var(--ink-3)}
.sw[aria-pressed="true"] .dotted{background:var(--accent)}
:root[data-theme="light"] .moon{display:none}
:root[data-theme="dark"] .sun,:root:not([data-theme="light"]) .sun{display:none}

/* ---- type ---------------------------------------------------------- */
/* One ramp, and it is the approved previews' own, drawn in this face:
   500 for every heading, closing from -.032em at the top to -.016em at
   nineteen pixels, and .07em on the small capitals. tools/measure.mjs
   reads every tracked rule in both sheets and fails when one leaves it. */
h1{font:500 clamp(40px,6.4vw,76px)/1.02 var(--disp);letter-spacing:-.032em;
  margin:0 0 24px;text-wrap:balance}
h2{font:500 clamp(26px,3.4vw,40px)/1.05 var(--disp);letter-spacing:-.028em;
  margin:0 0 16px;max-width:20ch;text-wrap:balance}
h3{font:500 20px var(--disp);letter-spacing:-.016em;margin:0 0 8px}
.lede{font-size:19px;color:var(--say);max-width:54ch;margin:0 auto 32px}
.sub{color:var(--ink-2);max-width:58ch;margin:0 0 44px;font-size:17px;line-height:1.55}
/* 78ch, so a note under a full-width row breaks where a line of small
   type should rather than running the wrap and leaving one word on the
   second line. The hero's note is shorter still, below. */
.note{margin-top:20px;color:var(--ink-3);font-size:15px;max-width:78ch}
section{padding:clamp(72px,9vw,120px) 0;border-top:1px solid var(--hair)}
/* The small line above a heading: capitals, no pill, no border. */
.eyebrow{display:block;margin:0 0 14px;font:500 10.5px var(--body);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
/* A section's opening, since `_114`: one group, measured once. */
.sec-head{max-width:100%}

/* The masked reveal. A word sits in its own clipped box and rises out
   of it; the box leaves room under the baseline for a descender, or an
   Everything would lose the foot of its y and g. `vertical-align:top`
   so the boxes sit on one line the way the words would. */
.mask{display:inline}
.mw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.2em;margin-bottom:-.2em}
.mi{display:inline-block}
.masked{overflow:visible}

/* ---- the hero, on the band ------------------------------------------ */
/* Two columns on the front page: the words, and the engine. One column
   on the other selling pages, which carry `.stage-one`. `.stage` sits on
   the same element as `.wrap`, so it sets its top and bottom and never
   the shorthand: `_108` photographed the headline flush against a
   phone's left edge when a shorthand took the wrap's sides with it. */
.stage{
  max-width:1160px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(32px,5vw,72px);align-items:center;
  padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,96px);
}
.stage-one{grid-template-columns:minmax(0,1fr);
  padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,80px)}
.hero{text-align:left;min-width:0;position:relative;z-index:1}
.hero .eyebrow{margin-bottom:18px;display:flex;align-items:center;gap:9px}
.eye-dot{width:7px;height:7px;border-radius:99px;background:var(--hue,var(--accent));display:block}
/* The headline is one balanced block. It arrives a word at a time,
   each word rising out of its own clipped box, and the delays are here
   rather than inline: the opening's clock, `--h0`, then 70ms a word.
   On the front page `--h0` is a second, which is the second the mosaic
   in src/site/veil.tsx needs to arrive and settle over an empty band;
   on the other selling pages it is shorter, with the shorter mosaic. */
.opening{--h0:.95s}
.stage-one{--h0:.45s}
.hero h1{margin:0;max-width:none}
.stage-one .hero h1{font-size:clamp(36px,5vw,60px);max-width:18ch}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.22em;margin-bottom:-.22em}
.hero h1 .wi{display:inline-block;animation:word .95s var(--ease) both;animation-delay:var(--h0)}
.hero h1 .w:nth-child(2) .wi{animation-delay:calc(var(--h0) + .07s)}
.hero h1 .w:nth-child(3) .wi{animation-delay:calc(var(--h0) + .14s)}
.hero h1 .w:nth-child(4) .wi{animation-delay:calc(var(--h0) + .21s)}
.hero h1 .w:nth-child(5) .wi{animation-delay:calc(var(--h0) + .28s)}
.hero h1 .w:nth-child(6) .wi{animation-delay:calc(var(--h0) + .35s)}
.hero h1 .w:nth-child(7) .wi{animation-delay:calc(var(--h0) + .42s)}
.hero h1 .w:nth-child(8) .wi{animation-delay:calc(var(--h0) + .49s)}
.hero h1 .w:nth-child(9) .wi{animation-delay:calc(var(--h0) + .56s)}
.hero h1 .w:nth-child(10) .wi{animation-delay:calc(var(--h0) + .63s)}
.hero h1 .w:nth-child(11) .wi{animation-delay:calc(var(--h0) + .7s)}
.hero h1 .w:nth-child(12) .wi{animation-delay:calc(var(--h0) + .77s)}
.hero h1 .w:nth-child(n+13) .wi{animation-delay:calc(var(--h0) + .84s)}
.hero h1 u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.13em}
@keyframes word{from{transform:translateY(130%)}to{transform:none}}
.hero .lede{margin:28px 0 0;max-width:52ch;font-size:clamp(17px,2vw,22px);line-height:1.5;color:var(--say)}
.acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .acts{justify-content:flex-start;margin-top:32px}
/* The price, under a hairline, in the serif: a claim rather than a
   caption. */
.hero .note{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:16px;line-height:1.6;color:var(--ink-2);max-width:46ch}
/* Each part arrives a beat after the one above it, from first paint, in
   CSS, so the entrance needs no script and stops under reduced motion
   with everything else. The words are their own stagger, above, and
   everything under them follows the same clock. */
.hero .eyebrow,.hero .lede,.hero .acts,.hero .note{animation:rise .9s var(--ease) both}
.hero .eyebrow{animation-delay:calc(var(--h0) - .25s)}
.hero .lede{animation-delay:calc(var(--h0) + .6s)}
.hero .acts{animation-delay:calc(var(--h0) + .72s)}
.hero .note{animation-delay:calc(var(--h0) + .84s)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* The opening. The band holds the mosaic: a canvas over everything in
   it, transparent until a script paints it and gone once it has fallen
   away, so a page with no script never sees it and a reader who asked
   for less motion never does either. */
.opening{position:relative;overflow:hidden}
.veil{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;display:block}
.veil[data-done]{display:none}

/* The engine. A square that the drawing fills: the still in the markup,
   the canvas over it once it runs, and the day in the middle. The still
   rises on the sheet's clock for a page with no script; the moment the
   canvas draws a frame the still is off and the rise with it, because
   the canvas draws itself in instead. */
.engine{
  position:relative;aspect-ratio:1;width:100%;max-width:520px;justify-self:center;margin:0;
  animation:rise 1.2s var(--ease) calc(var(--h0) + .1s) both;
}
.engine[data-run="on"]{animation:none}
.engine canvas,.engine .engine-still{position:absolute;inset:0;display:block;width:100%;height:100%}
.engine[data-run="on"] .engine-still{display:none}
.engine figcaption{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;transition:opacity .9s var(--ease);
}
/* Gated on the run attribute, so with no script the day is simply there. */
.engine[data-run="on"]:not([data-day]) figcaption{opacity:0}
.engine .d{font:400 10.5px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.engine .n{font:500 34px/1.1 var(--disp);letter-spacing:-.028em;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:4px}

/* ---- the strip of every part ----------------------------------------- */
/* Under the front page's band: every part of every product going by,
   each in its product's hue. A row that never stops, in CSS. */
.ticker{border-bottom:1px solid var(--hair);padding:18px 0;background:var(--bg)}
.tick{display:inline-flex;align-items:center;gap:10px;padding:0 22px;font:500 13.5px var(--body);
  letter-spacing:-.006em;color:var(--ink);white-space:nowrap}
.tick i{width:7px;height:7px;border-radius:99px;display:block;flex:none}
.tick em{font-style:normal;font-size:12px;color:var(--ink-3);font-weight:400}

/* A row that goes by. The content is written twice and the row slides
   by exactly half of itself, so the second copy takes the first copy's
   place and the seam is invisible. The mask fades the ends. */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-in{display:flex;width:max-content;animation:marq 46s linear infinite}
.marq-back .marq-in{animation-direction:reverse}
.marq:hover .marq-in{animation-play-state:paused}
.marq-half{display:flex;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* =====================================================================
   THE PRODUCT, IN A WINDOW

   The screen a staff member opens, drawn rather than photographed, and
   light on either ground, because the app is: the frame scopes the
   light theme's tokens onto itself, and everything inside it is drawn
   by the same rules as the rest of the sheet. Its shadow is the page's
   own --lift, not the frame's, since the shadow falls on the page.
   Since `_114` it sits in a window with the church's address on it,
   and opens the way a window opens.

   It runs off the bottom of the section on purpose: a frame that ends
   inside the fold reads as a picture of an app, and one that carries
   on reads as the app. The section below is opaque and covers the
   last 110px of it, and the frame is faded into the page colour before
   the section reaches it, or the cover is a hard edge cut through a
   lit screen. Two numbers, and they are a pair: the fade is 190px tall
   and fully the page 40% of the way down it, which leaves the bottom
   114px solid against a cover of 110px. The stop is measured from the
   TOP of the band: `_108`'s walk photographed a row still half visible
   under the cut when the stop was written as 60%, because 60% down
   leaves only 76px solid, and the cover is 110. The fade has to finish
   above the cover or the cut comes back.
   ===================================================================== */
.shot-hold{
  margin:clamp(48px,7vw,80px) 0 -110px;perspective:1600px;position:relative;
}
/* 120px past each side, because the frame's shadow reaches that far
   and a fade that covered only the box left a lighter column of page
   colour running down through the darker shadow on either side of it,
   visible in the light theme as a seam. `.field` clips the overhang on
   a phone. */
.shot-hold::after{
  content:"";position:absolute;left:-120px;right:-120px;bottom:0;height:190px;
  background:linear-gradient(to bottom,transparent,var(--bg) 40%);
  pointer-events:none;z-index:2;
}
.win{position:relative;perspective:1600px}
/* The window opens on the sheet's clock: a little below, a little
   smaller, tilted back, and flat by the time the band's opening ends.
   `both`, so a page with no script opens it too. */
.win-in{
  border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);box-shadow:0 44px 110px var(--lift);
  animation:win-in 1.2s var(--ease) 2.4s both;
}
@keyframes win-in{from{opacity:0;transform:translateY(44px) scale(.96) rotateX(7deg)}to{opacity:1;transform:none}}
.win-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);
  background:var(--surface-2)}
.win-dots{display:flex;gap:6px}
.win-dots i{width:9px;height:9px;border-radius:99px;background:var(--hair-2);display:block}
.win-url{margin:0 auto;padding:5px 14px;border-radius:99px;background:var(--bg);border:1px solid var(--line);
  font:12.5px var(--body);color:var(--ink-3);letter-spacing:-.006em}
.shot{
  --bg:#FAF9F5; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F0EEE6;
  --hair:#E8E6DC; --hair-2:#D1CFC5;
  --ink:#141413; --ink-2:#5E5D59; --ink-3:#686760;
  --say:#5E5D59;
  --line:rgba(20,20,19,.10); --line-2:rgba(20,20,19,.16);
  --accent-text:#AC4827;
  --accent-tint:rgba(217,119,87,.08); --accent-on-tint:#A54525;
  --press:#141413; --on-press:#FAF9F5; --press-hover:#3D3D3A;
  display:grid;grid-template-columns:232px minmax(0,1fr);
  background:var(--bg-2);color:var(--ink);
  min-height:520px;text-align:left;
}
/* The window's bar is the light frame's too: it scopes the same tokens. */
.win-in .win-bar{
  --surface-2:#F0EEE6; --bg:#FAF9F5; --line:rgba(20,20,19,.10); --hair-2:#D1CFC5; --ink-3:#686760;
}
/* The same frame holding still under the week: no tilt, no shadow
   that reads as floating, its own edge and radius since it has no
   window, and a fixed height so the list can change without the
   column moving. */
.shot-still{border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 20px 60px var(--lift);min-height:0;height:100%}

/* The rail: the approved sidebar at frame scale. */
.shot-side{
  border-right:1px solid var(--line);background:var(--surface-2);
  padding:16px 12px;display:flex;flex-direction:column;gap:2px;
}
.shot-brand{display:flex;align-items:center;gap:8px;padding:2px 8px 12px;color:var(--ink)}
.shot-brand b{font:600 13.5px var(--disp);letter-spacing:-.016em;color:var(--ink)}
.shot-find{
  margin:0 0 10px;padding:8px 12px;border:1px solid var(--line-2);border-radius:99px;
  background:var(--bg);color:var(--ink-3);font-size:12px;
}
.shot-item{
  display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:7px;
  font-size:13px;font-weight:400;color:var(--ink-2);white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.shot-item i{width:12px;height:12px;border-radius:4px;
  border:1.4px solid var(--ink-3);flex:none;display:block;transition:border-color .3s}
/* The current item is the sidebar inverted, the way the approved rail
   draws Home. */
.shot-item.on{background:var(--press);color:var(--on-press);font-weight:500}
.shot-item.on i{border-color:var(--on-press)}
/* `shot-sub` and not `sub`: `.sub` is the section subtitle five hundred
   lines up, and a sub-item wearing that name inherited its 44px bottom
   margin, which spread the frame's tree down the whole column. Two
   elements with one name, the `.tile-open` hazard on the other sheet,
   and it had been shipping since the frame existed. */
.shot-item.shot-sub{padding-left:24px}
.shot-item em{
  margin-left:auto;font-style:normal;font-size:10.5px;font-weight:600;
  color:var(--accent-on-tint);background:var(--accent-tint);border-radius:99px;padding:1px 6px;
}
.shot-g{
  display:flex;align-items:center;gap:8px;padding:14px 10px 4px;
  font:500 10.5px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
}
.shot-g i{width:7px;height:7px;border-radius:99px;display:block;flex:none}
.shot-me{
  margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 8px 2px;
  border-top:1px solid var(--line);
}
.shot-av{
  width:26px;height:26px;border-radius:99px;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font:600 11px var(--body);
}
.shot-me b{display:block;font-size:13px;font-weight:500}
.shot-me em{display:block;font-style:normal;font-size:11px;color:var(--ink-3)}

.shot-main{padding:30px 34px 32px;min-width:0}
.shot-eye{margin:0 0 6px;font:500 10.5px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.shot-h{margin:0;font:500 26px/1.15 var(--disp);letter-spacing:-.022em}
.shot-say{margin:6px 0 0;font-size:15px;color:var(--ink-2)}
/* the question, with the answer already in it: clay's tint and edge, the
   one place clay fills anything */
.shot-card{
  margin-top:22px;padding:18px 20px;border-radius:var(--r-lg);
  border:1px solid rgba(217,119,87,.34);background:var(--accent-tint);
}
.shot-q{margin:0;font:500 19px/1.25 var(--disp);letter-spacing:-.016em}
.shot-q b{color:var(--accent-text);font-weight:500}
.shot-why{margin:8px 0 0;font-size:15px;color:var(--ink-2)}
.shot-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.shot-acts span{
  font-size:13px;font-weight:400;padding:7px 14px;border-radius:99px;
  border:1px solid var(--line-2);color:var(--ink);
}
.shot-acts .go{background:var(--press);color:var(--on-press);border-color:transparent;font-weight:500}
.shot-block{margin-top:24px}
.shot-bh{display:flex;align-items:baseline;gap:10px;padding:0 0 8px;border-bottom:1px solid var(--line)}
.shot-bh b{font-size:15px;font-weight:600;letter-spacing:-.006em}
.shot-bh span{margin-left:auto;font-size:12px;color:var(--ink-3)}
.shot-row{
  display:flex;align-items:center;gap:11px;padding:10px 2px;
  border-bottom:1px solid var(--line);
}
.shot-tick{
  width:16px;height:16px;border-radius:5px;flex:none;
  border:1.5px solid var(--line-2);display:block;
}
.shot-row i{width:7px;height:7px;border-radius:99px;flex:none;display:block}
.shot-t{font-size:14px;font-weight:500;min-width:0;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-t em{
  display:block;font-style:normal;font-size:13px;color:var(--ink-3);
  font-weight:400;margin-top:1px;
}
.shot-w{font-size:12px;color:var(--ink-3);flex:none}
.shot-w.late{color:var(--accent-text)}

/* =====================================================================
   THE WEEK, WALKED THROUGH

   Three numbered blocks down the left with a line filling beside them
   as they are read, and the frame holding still on the right, its list
   changing to the product the reader has reached. That is the one
   scroll-driven section on the site, and it is the framework document's
   own shape: what starts it, what the church decides once, what lands
   on a list.
   ===================================================================== */
/* 1fr to 1.25fr: the frame carries a 200px tree and a list, and at half
   the wrap its list had 84px for a title and drew "Save the d…". */
.week{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:start}
.week-frame{position:sticky;top:96px;height:520px;perspective:1600px}
.week-frame .shot{grid-template-columns:200px minmax(0,1fr)}
.week-frame .shot-main{padding:24px 24px 26px}
/* The still frame is 520px tall and the rail has eleven rows and three
   heads to fit in it, so they sit a little closer than in the hero's. */
.week-frame .shot-side{padding:14px 10px}
.week-frame .shot-item{padding:4px 10px}
.week-frame .shot-g{padding-top:10px}
.week-list{min-height:0}
.week-blocks{display:flex;flex-direction:column;gap:0;position:relative;padding-left:34px}
/* A line that fills as the blocks are read: a hairline track with the
   fill scaling down it from the top. */
.rail{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--hair);border-radius:2px;overflow:hidden}
.rail-fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.week-rail{left:6px}
.week-block{padding:56px 0;border-top:1px solid var(--hair)}
.week-block:first-child{border-top:0;padding-top:0}
.week-block:last-child{padding-bottom:12px}
.week-k{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.week-k .eyebrow{margin:0;display:inline-flex;align-items:center;gap:9px}
/* The block's number, in the serif, big and quiet. It brightens when
   the block is the one being read. */
.week-num{font:400 30px/1 var(--serif);color:var(--ink-3);font-variant-numeric:tabular-nums;
  transition:color .4s var(--ease)}
.week-on .week-num{color:var(--ink)}
.week-block h3{font:500 clamp(24px,2.6vw,30px) var(--disp);letter-spacing:-.024em;margin:0 0 22px}
.week-dot{width:7px;height:7px;border-radius:99px;display:block;flex:none;background:var(--hue)}
.week-qs{margin:0;display:grid;grid-template-columns:1fr;gap:14px}
.week-qs dt{font:500 10.5px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.week-qs dd{margin:4px 0 0;color:var(--ink-2);font-size:16px;line-height:1.6}
/* The block's own small list: drawn on a phone, where the frame is
   not, so the words on the right still have the picture beside them. */
.week-mini{display:none;margin-top:26px;padding:14px 14px 6px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface)}

/* ---- the scene -----------------------------------------------------
   The mark, large, floating, with the three forms coming off the spine
   in sequence and a signal running out to a panel of each product.
   Everything is SVG and CSS, so it costs a few kB rather than a video.
   On the integrations page since `_114`; the front page draws the three
   products as three cards hanging off one account instead.
   -------------------------------------------------------------------- */
.scene{
  position:relative;height:560px;margin:0;
  perspective:1000px;pointer-events:none;
}
.scene-hold{margin:6px 0 56px}
.scene-in{position:absolute;inset:0}

/* Nothing loops while it's off screen. Set by the component, so with no
   JS at all the scene simply runs. `*` matches elements and not
   pseudo-elements, so the two that animate from one have to be named. */
.scene[data-run="off"] *,
.scene[data-run="off"] *::before,
.scene[data-run="off"] *::after{animation-play-state:paused}

.mark-big{
  position:absolute;left:50%;top:50%;width:250px;height:250px;
  transform:translate(-50%,-50%);animation:bob 7s var(--ease) infinite;
}
@keyframes bob{
  0%,100%{transform:translate(-50%,-50%) rotate(-1.2deg)}
  50%{transform:translate(-50%,calc(-50% - 20px)) rotate(1.2deg)}
}
.mark-big .spine{animation:breathe 7s var(--ease) infinite}
@keyframes breathe{0%,100%{opacity:.95}50%{opacity:1}}
/* the three forms light in order, so the signal reads as leaving the spine */
.mark-big .form{animation:emit 4.2s var(--ease) infinite;transform-origin:left center}
.mark-big .f1{animation-delay:0s}
.mark-big .f2{animation-delay:.28s}
.mark-big .f3{animation-delay:.56s}
@keyframes emit{
  0%,62%,100%{opacity:.42;transform:scaleX(.97)}
  22%{opacity:1;transform:scaleX(1)}
}

/* what comes off it */
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wires path{fill:none;stroke:var(--accent);stroke-width:1.25;opacity:.22}
/* The pip sets its own opacity, since it would inherit the wire's .22.
   The gap in the dash has to exceed the longest path or two pips ride
   the same wire. */
.wires .pip{
  fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;opacity:.9;
  stroke-dasharray:3 420;animation:run 4.2s linear infinite;
}
.wires .p2{animation-delay:.28s}
.wires .p3{animation-delay:.56s}
@keyframes run{from{stroke-dashoffset:423}to{stroke-dashoffset:0}}

/* the panels, drifting out of phase with each other */
.card-float{
  position:absolute;width:250px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 15px;
  box-shadow:0 24px 60px var(--lift);animation:drift 9s var(--ease) infinite;
}
.card-float.c2{animation-duration:11s;animation-delay:-3s}
.card-float.c3{animation-duration:10s;animation-delay:-6s}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.cf-a{left:2%;top:8%}
.cf-b{left:6%;bottom:6%}
.cf-c{right:2%;top:32%;width:280px}
.cf-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cf-head i{width:7px;height:7px;border-radius:99px;display:block;flex:none}
.cf-head b{font:600 12.5px var(--body);letter-spacing:-.006em}
.cf-head span{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.cf-mark{display:inline-grid;place-items:center;width:15px;height:15px;flex:0 0 auto}
.cf-mark svg{display:block}
.cf-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px}
.cf-row i{width:6px;height:6px;border-radius:99px;display:block;flex:none}
.cf-row span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-row em{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-style:normal}
.cf-row.new{animation:slot .6s var(--spring) both}
.cf-row.new.r2{animation-delay:.12s}
@keyframes slot{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.cf-tick{width:13px;height:13px;border:1.5px solid var(--accent);border-radius:99px;
  flex:none;position:relative}
.cf-tick::after{
  content:"";position:absolute;inset:2px;border-radius:99px;background:var(--accent);
  animation:fill 5s var(--ease) infinite;
}
@keyframes fill{0%,55%{transform:scale(0)}70%,100%{transform:scale(1)}}

@media(max-width:1080px){
  .cf-a{left:-2%}.cf-b{left:0}.cf-c{right:-2%}
}

/* =====================================================================
   THE SCENE, ON A PHONE

   A different drawing of the same sentence: the engine the setup
   wizard assembles, with a lead out to a part for each of the three.
   One viewBox at width:100%, so nothing in it is laid out against the
   phone and nothing in it can be wrong at a particular width.
   ===================================================================== */
.rig{
  display:none;overflow:visible;
  --ft:var(--surface-2);
  --fr:var(--surface);
  --fl:color-mix(in srgb,var(--surface) 74%,var(--bg));
}
@media(max-width:900px){
  .scene-hold{margin:2px 0 30px}
  .scene{height:auto;margin:0;perspective:none}
  .scene-in{display:none}
  .rig{display:block;width:100%;max-width:430px;height:auto;margin:0 auto;pointer-events:auto;cursor:pointer}
}
.e-part{
  stroke:var(--ink-2);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
}
.e-part .e-top{fill:var(--ft)}
.e-part .e-rgt{fill:var(--fr)}
.e-part .e-lft{fill:var(--fl)}
.e-part .e-rib{fill:none}
.e-part circle{fill:var(--fr)}
.e-on{stroke:var(--ink-2)}
.rig-eng .e-part{stroke:var(--ink-3)}
.rig-part{stroke:var(--rig-hue);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.rig-part path,.rig-part ellipse{vector-effect:non-scaling-stroke}
.rig-part .e-top{fill:color-mix(in srgb,var(--rig-hue) 17%,var(--surface))}
.rig-part .e-rgt{fill:color-mix(in srgb,var(--rig-hue) 10%,var(--surface))}
.rig-lead{
  fill:none;stroke:var(--rig-hue);stroke-width:1.4;opacity:.5;
  stroke-dasharray:4 4;vector-effect:non-scaling-stroke;
  animation:rig-crawl 1.5s linear infinite;
}
@keyframes rig-crawl{from{stroke-dashoffset:8}to{stroke-dashoffset:0}}
.rig-name{fill:var(--ink);font:600 13px var(--body);letter-spacing:-.006em}
.rig-sub{fill:var(--ink-3);font:11px var(--mono)}
.rig-l1{--d:.06s}
.rig-l2{--d:.24s}
.rig-l3{--d:.42s}
/* Gated on the attribute existing rather than on its value, so a page
   with no JS at all never matches this and the drawing is simply there. */
.scene[data-run] .rig-leg{opacity:0}
.scene[data-run="on"] .rig-leg{animation:rig-in .01s linear var(--d) both}
.scene[data-run="on"] .rig-part{animation:rig-seat .8s var(--ease) var(--d) both}
.scene[data-run="on"] .rig-lead,
.scene[data-run="on"] .rig-mark,
.scene[data-run="on"] .rig-name,
.scene[data-run="on"] .rig-sub{
  animation:rig-fade .55s var(--ease) calc(var(--d) + .2s) both;
}
@keyframes rig-in{to{opacity:1}}
@keyframes rig-seat{
  0%{transform:translate(-9px,-22px);opacity:0}
  40%{opacity:1}
  100%{transform:translate(0,0);opacity:1}
}
@keyframes rig-fade{from{opacity:0}to{opacity:1}}

/* Opaque and positioned, and both are load-bearing. `.field` is
   position:relative, so every part of the frame paints in the positioned
   layer, above any later block that is not positioned. Anything
   following the frame has to be positioned too, and opaque, or the
   frame simply carries on over it. */
.sold section{position:relative;z-index:1;background:var(--bg)}
.sold .cta{position:relative;z-index:1}

/* =====================================================================
   THE THREE PRODUCTS, `_114`

   Three cards hanging off one account. The drawing above them is one
   node, one bar and three drops, with a pip running down each drop,
   which is the sentence the old fan drew. Each card is its product's
   what, its parts, and the way to its page, in its product's hue on
   the dot and the hairline the pointer lights.
   ===================================================================== */
.spine{position:relative;margin:8px 0 0;text-align:center}
.spine-node{
  display:inline-flex;align-items:center;gap:9px;margin:0;padding:8px 16px;
  border:1px solid var(--line-2);border-radius:99px;background:var(--surface);
  font:500 13px var(--body);letter-spacing:-.006em;color:var(--ink);position:relative;z-index:1;
}
.spine-node i{width:7px;height:7px;border-radius:99px;background:var(--accent);display:block}
.spine-svg{display:block;width:100%;height:76px;margin-top:-6px;overflow:visible}
.spine-line{fill:none;stroke:var(--hair-2);stroke-width:1;vector-effect:non-scaling-stroke}
/* A pip runs down each drop: a short dash on a long gap, the gap longer
   than the path, the way the wires' pips are drawn. */
.spine-pip{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:2 1200;animation:spine-run 5s linear infinite}
.sp1{animation-delay:0s}
.sp2{animation-delay:.5s}
.sp3{animation-delay:1s}
@keyframes spine-run{from{stroke-dashoffset:1202}to{stroke-dashoffset:0}}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:0}
.tcard{
  display:flex;flex-direction:column;padding:26px 26px 24px;border:1px solid var(--line);
  border-radius:var(--r-xl);background:var(--surface);position:relative;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.tcard:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 70px var(--lift)}
/* The product's hue as a hairline along the top of the card, drawn on
   hover from the left. */
.tcard::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:2px;
  background:var(--hue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.tcard:hover::before{transform:scaleX(1)}
.tcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.tcard-dot{width:10px;height:10px;border-radius:99px;background:var(--hue);display:block}
.tcard-k{font:400 14px var(--serif);color:var(--ink-3);font-variant-numeric:tabular-nums}
.tcard h3{font:500 clamp(24px,2.6vw,30px) var(--disp);letter-spacing:-.024em;margin:0 0 10px}
.tcard-what{margin:0 0 22px;font-size:17px;line-height:1.5;color:var(--say)}
.tcard-parts{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--line)}
.tcard-parts li{padding:12px 0;border-bottom:1px solid var(--line)}
.tcard-parts b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.006em;margin-bottom:3px}
.tcard-parts span{font-size:14.5px;line-height:1.5;color:var(--ink-3);display:block}
.tcard-more{margin-top:auto;font-size:14.5px;font-weight:500;color:var(--accent-text);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px}
.tcard-more span{display:inline-block;transition:transform .3s var(--ease)}
.tcard:hover .tcard-more span{transform:translateX(4px)}
.tcard-more:hover{text-decoration:underline}
.foot-note{margin:28px 0 0;color:var(--ink-3);font-size:15px;max-width:62ch}

/* =====================================================================
   WORKS WITH, `_115`

   Four systems a church is likely to run already, on one strip under
   the frame: a hairline drawn in above each as it arrives and the mark
   in the vendor's own artwork, with everything else the catalogue
   names as small chips under them since `_116`. No cards, because the
   marks are the point and a box around each would make four boxes the
   point. The marks come out of
   src/site/logos.tsx and their sizes are set there, in the attributes,
   so the strip lays out the same with no sheet at all; the sheet's job
   is the row, the line, and the colour a wordmark takes on each ground.
   ===================================================================== */
.works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
.works-cell{position:relative;padding:26px 0 0;min-width:0}
/* The line that draws in as the cell arrives, and the accent line the
   pointer draws over it. Both from the left, the way the card's hairline
   and the nav's underline draw. */
.works-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair-2);
  transform-origin:left;display:block}
.works-cell::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.works-cell:hover::after{transform:scaleX(1)}
/* The mark sits in a row of fixed height, so four marks of four shapes
   share one baseline of air; each is sized in its own attributes. */
.works-logo{display:flex;align-items:center;gap:11px;height:52px;color:var(--ink);
  transition:transform .4s var(--ease)}
.works-cell:hover .works-logo{transform:translateY(-2px)}
.works-logo svg{display:block;flex:none}
/* Microsoft asks a partner to write the product's name in type beside
   the icon rather than reproduce the wordmark, so Teams is the icon and
   its name in the grotesk. */
.works-name{font:600 19px var(--disp);letter-spacing:-.016em;white-space:nowrap;color:var(--ink)}
/* The long tail under the four, `_116`: every other system the
   catalogue names, as a small chip, its mark and its name, wrapping
   as a row. The integrations page's `.tool` at three quarters of the
   size, and the same monogram tiles. */
.works-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px}
.works-chip{
  display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 5px;
  border:1px solid var(--line);border-radius:99px;background:var(--surface);
  font:500 13px var(--body);letter-spacing:-.006em;color:var(--ink-2);white-space:nowrap;
}
.works-chip svg,.works-chip .mark-tile{flex:none}
/* A wordmark takes the current colour, and the current colour is the
   vendor's own: on the light page Google's and Planning Center's grey
   and Slack's black are the ink and the two greys; on the dark page all
   three are the page's ink, which is each vendor's own treatment for a
   dark ground. Planning Center's tile is the lighter blue their own
   dark surfaces use. The four names are asked for by the strip, one
   each, whatever the mark needs. */
.logo-slack,.logo-gw,.logo-teams,.logo-pc{color:var(--ink)}
:root[data-theme="light"] .logo-gw{color:#5F6368}
:root[data-theme="light"] .logo-pc{color:#464646}
.pc-mark{fill:#3B78FF}
:root[data-theme="light"] .pc-mark{fill:#2565F4}

/* ---- cells --------------------------------------------------------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cell{padding:24px 26px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.cell:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 24px 60px var(--lift)}
.cell h3{font:600 17px var(--disp);letter-spacing:-.012em;margin:0 0 8px}
.cell p{color:var(--ink-2);margin:0;font-size:15.5px;line-height:1.55}
/* The line drawing above a cell's heading, in the ink, on the card's
   own second surface. */
.cell-glyph{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--surface-2);color:var(--ink);margin-bottom:18px}
.cell-glyph svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* A cell that is the way to another product wears that product's dot. */
.cell-dot{width:9px;height:9px;border-radius:99px;background:var(--hue);display:block;margin-bottom:16px}
.cell-link .prod-more{margin-top:14px}
.prod-more{margin:0;font-size:14.5px}
.prod-more a{color:var(--accent-text);text-decoration:none;font-weight:500}
.prod-more a:hover{text-decoration:underline}

/* Four reasons in a two by two, each with its own drawing. */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fact{padding:26px 28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.fact:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 24px 60px var(--lift)}
.fact h3{font:600 17px var(--disp);letter-spacing:-.012em;margin:0 0 8px}
.fact p{color:var(--ink-2);margin:0;font-size:15.5px;line-height:1.55}
.fact-glyph{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--accent-tint);color:var(--accent-on-tint);margin-bottom:18px}
.fact-glyph svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- the assistant: four claims beside one question ------------------- */
.duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
.duo-side{position:sticky;top:110px}
.claims-hold{position:relative;padding-left:34px}
.claims{display:flex;flex-direction:column}
.claim{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--hair)}
.claim:first-child{border-top:0;padding-top:0}
.claim-n{font:400 15px var(--serif);color:var(--ink-3);flex:none;padding-top:3px;font-variant-numeric:tabular-nums}
.claim-body h3{font:500 19px var(--disp);letter-spacing:-.016em;margin:0 0 6px}
.claim-body p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.6}

/* ---- the ask ------------------------------------------------------- */
.ask{margin:0;max-width:450px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px;
  box-shadow:0 20px 60px var(--lift)}
.ask-eye{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:500 10.5px var(--body);
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.ask-eye i{width:7px;height:7px;border-radius:99px;background:var(--accent);display:block}
.ask h4{margin:0 0 6px;font:500 19px var(--disp);letter-spacing:-.016em}
.ask p{margin:0 0 16px;color:var(--ink-2);font-size:15px}
.ask-acts{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.ask-acts .quiet{color:var(--ink-2);font:400 13.5px var(--body);padding:9px 12px}
.ask-acts .go{background:var(--press);color:var(--on-press);border-radius:99px;
  font:500 13.5px var(--body);padding:8px 16px;position:relative}
/* A ring that grows out of the one button and fades, twice a lifetime
   of the section: the button is the point, and the ring says so. */
.ask-acts .go::after{content:"";position:absolute;inset:-3px;border-radius:99px;border:1.5px solid var(--accent);
  animation:ring 3.2s var(--ease) infinite;pointer-events:none}
@keyframes ring{0%{opacity:.9;transform:scale(.92)}45%,100%{opacity:0;transform:scale(1.28)}}
.ask-cap{margin:16px 4px 0;color:var(--ink-3);font-size:14px;max-width:44ch}

/* ---- the demo ------------------------------------------------------ */
/* A part's section, on a product page: the words on one side, the
   worked example on the other, sides swapping down the page, and a line
   filling beside the words. */
.part-full .duo{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px}
.part-alt .duo .duo-text{order:2}
.duo-text{position:relative;padding-left:34px}
.duo-text .sub{margin-bottom:18px}
.part-why{margin:0;color:var(--ink-3);font-size:16px;line-height:1.6;max-width:52ch}
.duo-demo{min-width:0}
.demo{margin:0 auto;max-width:760px;text-align:left}
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 20px 60px var(--lift);overflow:hidden;
}
.panel-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 22px;border-bottom:1px solid var(--line)}
.panel-top b{font:600 17px var(--disp);letter-spacing:-.012em}
.panel-top .when{color:var(--ink-3);font-size:13px}
.size{margin-left:auto;display:flex;background:var(--bg);border:1px solid var(--line-2);
  border-radius:99px;padding:3px;gap:2px}
.size button{border:0;background:none;color:var(--ink-2);cursor:pointer;
  border-radius:99px;font:500 12.5px var(--body);padding:7px 13px;
  transition:background .3s var(--ease),color .3s var(--ease)}
.size button[aria-pressed="true"]{background:var(--press);color:var(--on-press)}
.rows{padding:12px 10px 8px;min-height:300px}
.rows-in{display:block}
.row{display:flex;align-items:center;gap:11px;padding:10px 12px;margin:2px 0;
  border-radius:10px;transition:background .2s;
  animation:pop .45s var(--spring) both;animation-delay:calc(var(--n)*.055s)}
.row:hover{background:var(--surface-2)}
@keyframes pop{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.row .dot{width:8px;height:8px;border-radius:99px;flex:none}
.row b{font:500 14.5px var(--body);letter-spacing:-.006em}
.row .s{color:var(--ink-3);font-size:13px}
.row .gap{flex:1}
.row .tag{font-size:12px;color:var(--ink-2);background:var(--surface-2);
  padding:3px 9px;border-radius:99px;white-space:nowrap}
.row .meta{font:12px var(--mono);color:var(--ink-3);width:96px;text-align:right;
  white-space:nowrap}
.panel-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 22px;
  border-top:1px solid var(--line);color:var(--ink-2);font-size:13.5px}
.panel-foot .count{color:var(--accent-text);font-weight:500}
.caption{margin:18px 4px 0;color:var(--ink-3);font-size:14px;text-align:center}

/* ---- questions a church asks --------------------------------------- */
/* Always open. A list a reader has to click through is a list an
   answer engine cannot quote, and the answers are the point. The head
   stays put on the left while the questions go by on the right. */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:64px;align-items:start}
.faq-side{min-width:0}
.faq .sub{margin-bottom:0;max-width:34ch}
.faq-stick{position:sticky;top:110px}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-item{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.faq-n{font:400 15px var(--serif);color:var(--ink-3);flex:none;padding-top:3px;font-variant-numeric:tabular-nums}
.faq-body h3{font:500 19px var(--disp);letter-spacing:-.016em;margin:0 0 8px}
.faq-body p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.6}

/* ---- pricing ------------------------------------------------------- */
/* One card, because there is one plan. The number is the biggest type
   on the site after the headline, counted up to as it arrives, beside
   what it buys rather than above three columns of ticks. */
.plan{
  margin:56px 0 88px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);box-shadow:0 34px 90px var(--lift);
  animation:rise 1s var(--ease) 1.1s both;
}
.plan-price{
  padding:44px 40px;border-right:1px solid var(--line);background:var(--surface-2);
  display:flex;flex-direction:column;justify-content:center;
}
.plan-eye{margin:0 0 18px;font:500 10.5px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.plan-num{margin:0;display:flex;align-items:flex-start;gap:4px;line-height:1}
.plan-cur{font:500 clamp(28px,3vw,38px) var(--disp);color:var(--ink-2);margin-top:12px}
.plan-n{font:500 clamp(84px,10vw,124px)/1 var(--disp);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.plan-per{margin:12px 0 0;font:400 16px/1.35 var(--body);color:var(--ink-2)}
.plan-free{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:16px;color:var(--ink)}
.plan-body{padding:40px}
.plan-say{margin:0 0 22px;font-size:17px;color:var(--ink)}
.plan-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:8px}
.plan-list li{display:flex;gap:12px;align-items:baseline;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg)}
.plan-list i{width:8px;height:8px;border-radius:99px;background:var(--hue);flex:none;
  position:relative;top:-1px;display:block}
.plan-list b{font-weight:600;font-size:15px}
.plan-list span{color:var(--ink-3);font-size:14.5px}
.plan-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.plan-note{color:var(--ink-3);font-size:14px}

/* The trial as a line with three stops on it, the line drawn from left
   to right as the section arrives. */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;padding-top:28px}
.tl-line{position:absolute;left:0;right:0;top:12px;height:1px;background:var(--hair-2)}
.tl-stop{position:absolute;left:26px;top:-22px;width:11px;height:11px;border-radius:99px;
  background:var(--accent);border:3px solid var(--bg);box-sizing:content-box;margin:-4px 0 0 -4px;display:block}
.day{position:relative;padding:24px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.day:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 24px 60px var(--lift)}
.day-n{margin:0 0 12px;font:500 10.5px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text)}
.day h3{font:600 17px var(--disp);letter-spacing:-.012em;margin:0 0 8px}
.day p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55}

/* ---- CTA ----------------------------------------------------------- */
/* The same band the page opened on, with the engine's ghost behind the
   words: large, faint, still. */
.cta{margin:clamp(64px,8vw,104px) 0 0;padding:clamp(88px,10vw,124px) 0;text-align:center;overflow:hidden}
.cta .wrap{position:relative;z-index:1}
.cta h2{margin:0 auto 14px;max-width:24ch}
/* Wide enough for the landing page's closing line to sit on one line
   at a laptop; at 54ch it broke with "church." alone on the second. */
.cta .lede{max-width:70ch;margin-bottom:32px}
.ghost{position:absolute;left:50%;top:50%;width:min(820px,140vw);height:auto;transform:translate(-50%,-50%);
  pointer-events:none;animation:turn 240s linear infinite}
@keyframes turn{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---- the foot ------------------------------------------------------- */
.foot{padding:56px 0 34px;border-top:1px solid var(--hair);color:var(--ink-3);font-size:14px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr);gap:48px;align-items:start}
.foot-brand{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center}
.foot-brand b{font:600 15px var(--disp);letter-spacing:-.016em;color:var(--ink)}
.foot-brand p{grid-column:1/-1;margin:8px 0 0;max-width:34ch;color:var(--ink-2);font-size:15px;line-height:1.55}
.foot-mark{display:flex;align-items:center;color:var(--ink)}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-h{margin:0 0 4px;font:500 10.5px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.foot a{color:var(--ink-2);text-decoration:none;font-size:14.5px;transition:color .2s}
.foot a:hover{color:var(--ink)}
.foot-line{display:flex;gap:22px;justify-content:space-between;flex-wrap:wrap;margin-top:44px;padding-top:22px;
  border-top:1px solid var(--hair);font-size:13.5px}

/* =====================================================================
   MARKETING OFF

   A different page, not the same one with the selling removed. Two
   columns filling the window: a statement on the left saying what
   isn't here, the assistant on the right taking the rest.
   ===================================================================== */
.plain-only{display:none}
:root[data-plain="on"] .sold{display:none !important}
:root[data-plain="on"] .plain-only{display:block}
:root[data-plain="on"] .bar{position:static;border-bottom:1px solid var(--hair)}
:root[data-plain="on"] .bar.solid{background:none;backdrop-filter:none}
:root[data-plain="on"] .progress{display:none}

.split{
  display:grid;grid-template-columns:1fr 1.08fr;gap:56px;
  align-items:start;padding:64px 0 40px;min-height:calc(100vh - 190px);
}
.say h2{
  font:500 clamp(36px,4.9vw,60px)/1.05 var(--disp);letter-spacing:-.028em;
  margin:0;max-width:14ch;text-align:left;color:var(--ink);
}
.say .off{
  display:flex;align-items:center;gap:9px;margin:30px 0 0;
  font:500 10.5px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
}
.say .off i{width:7px;height:7px;border-radius:99px;background:var(--accent);display:block}
.say .lines{margin:38px 0 0;max-width:34ch}
.say .lines p{margin:0 0 8px;font-size:17px;color:var(--ink-2)}
.say .lines p:first-child{color:var(--ink)}
.say .foot{margin:36px 0 0;font-size:14px;color:var(--ink-3);padding:0;border:0}
.say .foot a{color:var(--accent-text);font-size:14px}

.chat{display:flex;flex-direction:column;min-height:0}
.chat .tab{font:13px var(--mono);color:var(--ink-3);margin:0 0 10px}
.log{
  flex:1;border:1px solid var(--line);background:var(--surface);
  padding:22px 24px;overflow-y:auto;min-height:340px;max-height:56vh;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.log .hint{margin:0;color:var(--ink-3);font-size:16px}
.turn{margin:0 0 18px;max-width:70ch}
.turn:last-child{margin-bottom:0}
.turn b{
  display:block;font:500 10.5px var(--body);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px;
}
.turn p{margin:0;white-space:pre-wrap;font-size:16px;line-height:1.6}
.turn.me p{color:var(--ink-2)}
.turn.them p{color:var(--ink)}
.chat-form{
  display:flex;gap:12px;align-items:center;padding:14px 16px;
  border:1px solid var(--line);border-top:0;background:var(--surface);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.chat-form input{
  flex:1;font:16px var(--body);padding:11px 14px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink);border-radius:11px;
}
.chat-form input:focus{outline:2px solid var(--accent-text);outline-offset:-1px}
.chat-form .enter{font-size:12.5px;color:var(--ink-3)}
.chat-form button{
  font:500 14.5px var(--body);padding:11px 20px;border:0;border-radius:99px;
  background:var(--press);color:var(--on-press);cursor:pointer;
}
.chat-form button:hover{background:var(--press-hover)}
.chat-form button[disabled]{opacity:.45;cursor:default}
.tries{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tries button{
  font:14px var(--body);padding:7px 14px;border:1px solid var(--line-2);border-radius:99px;
  background:none;color:var(--ink-2);cursor:pointer;
}
.tries button:hover{border-color:var(--ink-3);color:var(--ink)}

/* ---- the integrations page ------------------------------------------ */
.int-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:16px;margin:0 0 28px;
}
.int{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.int:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 24px 60px var(--lift)}
.int-mark{
  display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--surface-2);color:var(--ink-2);margin-bottom:16px;
}
.int h3{margin:0 0 6px;font:600 16px var(--body);letter-spacing:-.006em;color:var(--ink)}
.int p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-3)}
.bands{display:flex;flex-direction:column;gap:26px}
.int-band{margin:0}
.int-band h3{
  margin:0 0 12px;font:500 10.5px var(--body);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
}
/* The system chips and the monogram tile. The same shapes the app
   draws in src/styles.css, written twice because the two sheets do not
   share one. The geometry they wrap is not written twice: that is
   src/lib/integrations.json, read by both. */
.tools{display:flex;flex-wrap:wrap;gap:10px}
.tool{
  display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 7px;
  border:1px solid var(--line);border-radius:99px;background:var(--surface);
  font-size:14px;color:var(--ink-2);white-space:nowrap;
}
.mark-tile{
  display:grid;place-items:center;border-radius:5px;
  color:#fff;font-weight:620;letter-spacing:-.02em;line-height:1;
}
/* The two rows of every system going by, above the standing list. */
.going{display:flex;flex-direction:column;gap:12px;margin:0 0 40px}
.going .tool{margin:0 6px}

/* ------------------------------------------------------------------ *
 *  A PAGE THAT IS ONLY WORDS
 *  Privacy, terms, support and the 404. No new layout: `.doc` is a
 *  measure and a rhythm over the same headings, the same rules and the
 *  same tokens the rest of the sheet uses, because a legal page that
 *  looks like a different site is a legal page people distrust.
 * ------------------------------------------------------------------ */
.doc{max-width:70ch;margin:0 auto;padding:0 0 40px;animation:rise .9s var(--ease) .1s both}
.doc h1{font-size:clamp(36px,5vw,56px);margin:0 0 18px;max-width:none}
.doc h2{font:500 22px var(--disp);letter-spacing:-.022em;margin:46px 0 12px;color:var(--ink);max-width:none}
.doc h2:first-of-type{margin-top:8px}
.doc h3{font:600 16px var(--body);letter-spacing:-.006em;margin:26px 0 8px;color:var(--ink)}
.doc .lede{margin:0 0 28px;max-width:none;text-align:left}
.doc p{margin:0 0 14px;color:var(--ink-2);font-size:16px;line-height:1.68}
.doc ul{margin:0 0 16px;padding-left:20px;color:var(--ink-2)}
.doc li{margin:0 0 8px;font-size:16px;line-height:1.68}
.doc a{color:var(--accent-text);text-decoration:none;border-bottom:1px solid var(--hair-2)}
.doc a:hover{border-bottom-color:var(--accent)}
.doc strong{color:var(--ink);font-weight:600}
.doc code{
  font:13px var(--mono);color:var(--ink);background:var(--surface-2);
  border:1px solid var(--hair);border-radius:5px;padding:1px 5px;
}
.doc-when{
  display:inline-block;margin:0 0 10px;font:500 10.5px var(--body);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.07em;
}
.doc-who{
  display:grid;grid-template-columns:180px 1fr;gap:6px 18px;
  margin:0 0 20px;padding:18px 20px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);
}
.doc-who dt{font-size:15px;font-weight:600;color:var(--ink)}
.doc-who dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}

/* The 404. Centred, short, and it offers the two things a person who
   got here actually wants: the front page and the way in. */
.lost{
  min-height:56vh;display:grid;place-content:center;justify-items:center;
  text-align:center;padding:60px 0;animation:rise .9s var(--ease) .1s both;
}
.lost .code{
  font:500 10.5px var(--body);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.07em;margin:0 0 14px;
}
.lost h1{margin:0 0 12px}
.lost p{max-width:46ch;margin:0 0 26px;color:var(--ink-2);font-size:17px}

/* The line saying what is kept in this browser. `_102`. Bottom left
   rather than a strip across the foot of the page, because it is a
   notice and not a gate. Text is --ink-2 rather than --ink-3 at 13px:
   --ink-3 clears AA on --surface with nothing to spare and this is the
   smallest copy on the sheet outside a caption. */
.tell{
  position:fixed;z-index:40;
  left:max(16px,env(safe-area-inset-left));
  bottom:max(16px,env(safe-area-inset-bottom));
  right:auto;max-width:420px;
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 12px 12px 14px;
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:0 12px 34px var(--lift);
  opacity:0;transform:translateY(10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.tell.in{opacity:1;transform:none}
.tell p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.tell a{color:var(--accent-text);text-decoration:none;border-bottom:1px solid var(--hair-2)}
.tell a:hover{border-bottom-color:var(--accent)}
.tell-x{
  flex:none;width:26px;height:26px;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--line-2);border-radius:8px;
  color:var(--ink-2);transition:color .18s var(--ease),border-color .18s var(--ease);
}
.tell-x:hover{color:var(--ink);border-color:var(--ink-3)}
.tell-x svg{display:block}

/* =====================================================================
   THE SITE ON A TABLET, AND ON A PHONE

   The bar first, because a bar that overflows is the one thing that
   switches every breakpoint on the page off at once: iOS widens the
   layout viewport until the content fits and every max-width query is
   then measured against that wider viewport. tools/check-mobile.mjs
   measures the row against the real glyph advances at every width from
   320 to 1920 and fails if it stops fitting.

   1140, and this number is measured rather than chosen. Adding a nav
   link means re-running check-mobile.mjs and moving this number, and
   the matchMedia in src/site/chrome.tsx that closes the menu when the
   window grows past it.
   ===================================================================== */
@media(max-width:1140px){
  .bar-menu{
    display:grid;place-items:center;gap:5px;width:40px;height:36px;
    border:1px solid var(--hair-2);border-radius:99px;
    background:none;color:var(--ink-2);cursor:pointer;padding:0 10px;
  }
  .bar-menu span{display:block;width:100%;height:1.5px;border-radius:2px;
    background:currentColor;transition:transform .25s var(--ease)}
  .bar-menu[aria-expanded="true"]{color:var(--ink);border-color:var(--ink-3)}
  .bar-menu[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .bar-menu[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

  .bar .wrap{position:relative;height:62px}
  .bar.solid,.bar[data-menu="on"]{background:var(--bg);border-color:var(--hair)}
  .bar-end{margin-left:auto}

  .bar-panel{
    display:none;position:absolute;top:calc(100% + 8px);left:24px;right:24px;
    flex-direction:column;align-items:stretch;gap:4px;padding:10px;
    background:var(--surface);border:1px solid var(--line-2);
    border-radius:var(--r-lg);box-shadow:0 24px 60px var(--lift);
  }
  .bar[data-menu="on"] .bar-panel{display:flex;animation:menu-in .22s var(--ease) both}
  .bar .nav{flex-direction:column;align-items:stretch;gap:0;margin:0;flex:none}
  .bar .nav a:not(.btn){display:block;padding:11px 12px;border-radius:10px;font-size:15.5px;animation:none}
  .bar .nav a:not(.btn)::after{display:none}
  .bar .nav a:not(.btn):hover{background:var(--surface-2)}
  .bar-panel > .sw{justify-content:center;margin:6px 0 4px;animation:none}
  .bar-panel > .btn{text-align:center;padding:12px 20px;font-size:15px;animation:none}
  /* Four wordmarks in a row need 232px each, which is what the wrap
     gives from 1141 up; below it the strip is two by two. */
  .works{grid-template-columns:1fr 1fr;gap:36px 28px}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* The band goes to one column before the week does, because a 76px
   headline beside a 520px wheel needs the whole wrap. The wheel comes
   under the words, centred, and a little smaller. */
@media(max-width:980px){
  .stage{grid-template-columns:minmax(0,1fr);gap:40px}
  .engine{max-width:min(420px,78vw)}
}

/* The week stacks before the scene does, because two columns of the
   frame and the words need more room than the fan does. The frame
   comes off and each block draws its own small list instead. */
@media(max-width:960px){
  .week{grid-template-columns:1fr;gap:0}
  .week-frame{display:none}
  .week-mini{display:block}
  .week-block{padding:44px 0}
  .duo,.part-full .duo,.faq-grid{grid-template-columns:1fr;gap:36px}
  .duo-side,.faq-stick{position:static}
  .part-alt .duo .duo-text{order:0}
  .ask{max-width:none}
  .foot-top{grid-template-columns:1fr;gap:36px}
}

@media(max-width:900px){
  .shot-hold{margin-bottom:-70px;perspective:none}
  /* The overrun is 70px here, so the fade is shorter and still finishes
     above it: 140px solid from 45% down leaves the bottom 77px solid. */
  .shot-hold::after{height:140px;background:linear-gradient(to bottom,transparent,var(--bg) 45%)}
  .shot{grid-template-columns:1fr;min-height:0}
  .shot-side{
    flex-direction:row;align-items:center;gap:6px;overflow:hidden;
    border-right:none;border-bottom:1px solid var(--line);padding:10px 12px;
  }
  .shot-g,.shot-me,.shot-find,.shot-item.shot-sub{display:none}
  .shot-main{padding:20px 18px 24px}
  .shot-h{font-size:22px}
  .plan{grid-template-columns:1fr}
  .plan-price{border-right:0;border-bottom:1px solid var(--line);padding:36px 32px}
  .plan-body{padding:32px}
  .three,.timeline{grid-template-columns:1fr 1fr}
  .tl-line{display:none}
  .tl-stop{display:none}
  .timeline{padding-top:0}
  .trio{grid-template-columns:1fr}
  .spine-svg{display:none}
  .spine{margin-bottom:22px}
  .split{grid-template-columns:1fr;gap:36px;padding-top:40px;min-height:0}
  .log{max-height:none}
}

@media(max-width:860px){
  .two,.quad{grid-template-columns:1fr}
  .size{margin-left:0;width:100%;justify-content:space-between}
  .row .meta{display:none}
}

/* ---- the phone --------------------------------------------------------
   Everything here is spacing. 120px between sections is a third of a
   phone screen spent on nothing, and 28px of padding inside a card on a
   375px page leaves 275px for the sentence. The hero's two buttons
   wrap to two left-aligned buttons at their own widths rather than off
   the side of the page: the widest pair on the site needs 413px and
   the widest phone has 394px. */
@media(max-width:620px){
  .wrap{padding:0 max(18px,env(safe-area-inset-left)) 0 max(18px,env(safe-area-inset-right))}
  section{padding:64px 0}
  .stage{padding-top:44px;padding-bottom:52px;gap:36px}
  .stage-one{padding-top:40px;padding-bottom:44px}
  .hero .lede{margin-top:22px;font-size:17px}
  .hero .acts{margin-top:26px;gap:10px}
  .hero .acts .btn{padding:13px 20px}
  .hero .note{margin-top:28px;font-size:15px}
  .engine{max-width:min(340px,82vw)}
  h2{font-size:28px}
  .lede,.sub{font-size:16px}
  .sub{margin-bottom:30px}
  .bar-panel{left:18px;right:18px}
  .ticker{padding:14px 0}
  .tcard{padding:22px 20px 20px}
  .works{grid-template-columns:1fr;gap:24px}
  .works-cell{padding-top:20px}
  .works-more{margin-top:32px}
  .cell,.day,.int,.fact{padding:20px}
  .cell h3,.day h3,.fact h3{font-size:16px}
  .three,.timeline{grid-template-columns:1fr}
  .claims-hold,.duo-text,.week-blocks{padding-left:22px}
  .week-rail{left:2px}
  .faq-item{padding:22px 0;gap:14px}
  .cta{margin-top:64px;padding:72px 0}
  .foot{padding:40px 0 28px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:20px}
  .foot-line{gap:8px;flex-direction:column;margin-top:32px}
  .shot-main{padding:16px 14px 20px}
  .shot-side{padding:9px 10px}
  .win-bar{padding:9px 12px}
  .win-url{font-size:11.5px;padding:4px 10px}
  .plan{margin:44px 0 64px}
  .plan-price{padding:28px 22px}
  .plan-body{padding:24px 22px}
  .plan-n{font-size:84px}
  .week-block h3{font-size:24px}
  .week-num{font-size:24px}
  .doc-who{grid-template-columns:1fr;gap:2px 0;padding:16px 18px}
  .doc-who dd{margin:0 0 12px}
  .doc h2{font-size:19px;margin-top:34px}
  .doc p,.doc li{font-size:15px}
  .tell{right:max(16px,env(safe-area-inset-right));max-width:none}
}

/* =====================================================================
   _124: TWO SITES
   promoengine.church sells Promo Engine and engine.church says what is
   coming, on one sheet. What is new is small: the state on each of
   engine.church's three cards, the long headline a size down, the three
   steps, the promo shell in the frame, the plan on the front page, the
   coming-soon cards' parts line, and the one line on a policy page
   saying who Engine is. Everything else on both sites is the same rule
   it always was, which is the point of one sheet.
   ===================================================================== */
/* Open, or coming: the state on a product card, beside the number. */
.tcard-top{justify-content:flex-start;gap:10px}
.tcard-state{margin-left:auto;font:500 10.5px var(--body);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);text-align:right}
.tcard-open{color:var(--accent-text)}
/* Eleven words where the other front page has seven: a size down, so
   the hero stays the height of the engine beside it. tools/measure.mjs
   reads this clamp for the promo headline the way it reads h1's. */
.hero-long h1{font-size:clamp(36px,5.2vw,62px)}
/* How it works: three numbered steps in a row. */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.step{position:relative;padding:28px 26px 26px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.step:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 24px 60px var(--lift)}
.step-n{display:block;margin:0 0 18px;font:400 15px var(--serif);color:var(--ink-3);font-variant-numeric:tabular-nums}
.step h3{font:500 22px var(--disp);letter-spacing:-.016em;margin:0 0 10px}
.step p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.6}
/* The promo shell in the frame: the bar across the top, the six tabs,
   the church on the right, and no rail. */
.shot-promo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.shot-bar{display:flex;align-items:center;gap:14px;padding:10px 18px;min-width:0;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.shot-bar .shot-brand{padding:0;flex:none}
.shot-tabs{display:flex;gap:2px;min-width:0;overflow:hidden}
.shot-tab{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:7px;
  font-size:13px;color:var(--ink-2);white-space:nowrap}
.shot-tab.on{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--accent)}
.shot-tab em{font-style:normal;font-size:10.5px;font-weight:600;
  color:var(--accent-on-tint);background:var(--accent-tint);border-radius:99px;padding:1px 6px}
.shot-church{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.shot-bar .shot-av{flex:none}
/* The plan, on the front page: the pricing page's card without the
   pricing page's clock, because it is a long way down. */
.plan-on-page{margin:0;animation:none}
.plan-note a{color:var(--accent-text);text-decoration:none;font-weight:500}
.plan-note a:hover{text-decoration:underline}
/* Coming soon: the two cards' parts, on one line under the sentence. */
.soon{position:relative}
.cell .soon-parts{margin:12px 0 0;font-size:14px;color:var(--ink-3)}
.soon .foot-note a{color:var(--accent-text);text-decoration:none;font-weight:500}
.soon .foot-note a:hover{text-decoration:underline}
/* Who Engine is, on a policy page read on the other host. */
.doc-made{margin:-8px 0 30px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);font-size:15px;line-height:1.55;color:var(--ink-2)}
@media(max-width:900px){
  .steps{grid-template-columns:1fr}
}
@media(max-width:620px){
  .step{padding:22px 20px}
  .step h3{font-size:19px}
  .shot-bar{padding:8px 12px;gap:10px}
  .shot-bar .shot-brand b{display:none}
  .shot-tab{padding:6px 8px;font-size:12px}
  /* The first four tabs, so the open one is in view; a phone's frame
     has no room for six. */
  .shot-tab[data-k="sermons"],.shot-tab[data-k="framework"],.shot-tab em,.shot-church{display:none}
}

/* =====================================================================
   _126: THE FRONT DOOR OF engine.church
   One screen on a solid grey ground: the mark and the name, the engine,
   one button, the small print. It wears the band's tokens (the engine
   is drawn in light ink for a dark ground) with the ground itself a
   grey rather than the band's near-black, in both themes. The small
   print is --ink-2, not --ink-3: the band's third ink was mixed for a
   near-black ground and sits at 4.52:1 on this grey, which passes the
   walk's 4.5 by nothing.
   ===================================================================== */
.front{--h0:.2s;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:34px;padding:48px 24px;text-align:center;border-bottom:0}
.band.front{--bg:#2E2E2C;--bg-2:#343432;background:var(--bg)}
.front-brand{display:inline-flex;align-items:center;gap:10px;margin:0;font:600 21px var(--disp);
  letter-spacing:-.024em;color:var(--ink);animation:rise .9s var(--ease) both}
.front .engine{max-width:min(440px,78vw);justify-self:auto}
.front-btn{animation:rise .9s var(--ease) calc(var(--h0) + .3s) both}
.front-small{margin:12px 0 0;display:flex;gap:18px;font:500 12px var(--body);letter-spacing:.01em;color:var(--ink-2);
  animation:rise .9s var(--ease) calc(var(--h0) + .5s) both}
.front-small a{color:inherit;text-decoration:none}
.front-small a:hover{color:var(--ink)}
@media(max-width:620px){.front{gap:28px;padding:40px 20px}}

/* =====================================================================
   _126: THE PLAYBOOKS
   One page per event and the list. The three levels as three cells with
   the one in use marked; the schedule as a table that becomes a stack
   of labelled rows on a phone, each cell carrying its column's name in
   `data-k`; the channel paragraphs with the channel's hue on the dot;
   the cards on the list with the next date above the name.
   ===================================================================== */
.pb-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pb-level{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.pb-level.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pb-level h3{font:600 17px var(--disp);letter-spacing:-.012em;margin:0 0 6px}
.pb-level p{color:var(--ink-2);margin:0;font-size:15px;line-height:1.5}
.pb-level-n{font:600 11.5px var(--disp);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px !important}
.pb-table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45;border-top:1px solid var(--line)}
.pb-table th{text-align:left;font:600 11.5px var(--disp);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  padding:14px 12px 10px 0;border-bottom:1px solid var(--line)}
.pb-table td{padding:13px 12px 13px 0;border-bottom:1px solid var(--hair);color:var(--ink-2);vertical-align:top}
.pb-table td:nth-child(3){color:var(--ink);font-weight:600}
.pb-table td:nth-child(4){white-space:nowrap}
.pb-ch{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pb-ch i{width:9px;height:9px;border-radius:99px;background:var(--hue);flex:none}
.pb-say{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pb-say-item{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.pb-say-item h3{display:flex;align-items:center;gap:10px;font:600 16px var(--disp);letter-spacing:-.01em;margin:0 0 8px}
.pb-say-item h3 i{width:9px;height:9px;border-radius:99px;background:var(--hue);flex:none}
.pb-say-item p{color:var(--ink-2);margin:0;font-size:15.5px;line-height:1.6}
.pb-grid{margin-top:4px}
.pb-card h3{margin-bottom:6px}
.pb-card h3 a{color:inherit;text-decoration:none}
.pb-card h3 a:hover{color:var(--accent-text)}
.pb-card-when{font:600 11.5px var(--disp);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px !important}
@media(max-width:900px){
  .pb-levels{grid-template-columns:1fr}
  .pb-say{grid-template-columns:1fr}
}
@media(max-width:720px){
  .pb-table thead{display:none}
  .pb-table,.pb-table tbody,.pb-table tr,.pb-table td{display:block}
  .pb-table tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .pb-table td{padding:3px 0;border:0;display:grid;grid-template-columns:76px 1fr;gap:10px}
  .pb-table td::before{content:attr(data-k);font:600 11px var(--disp);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
  .pb-table td:nth-child(4){white-space:normal}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .tell{transition:none}
  .tell-x{transition:none}
  .progress{display:none}
}

/* =====================================================================
   _112: THE SERIF, IN ONE PLACE
   Newsreader for anything a person reads, and this list is the whole of
   what that means on the site: the sentences under the headings, the
   paragraphs in a card, the answers, the policies, the price under the
   hero, and since `_113` the two lines in the frame that the app itself
   sets in the serif. Headings, buttons, links that act as buttons,
   labels and the rest of the frame stay in the grotesk. A link that ends
   a card's paragraph list is structure, which is why .prod-more is
   excluded rather than listed. Tracking is the body's, which on this
   sheet is none. `_114` added the new compositions' own sentences: a
   product card's what and its parts, a claim, a reason, a question's
   answer, a part's why, the plan's free line, and the foot's sentence.
   ===================================================================== */
.lede,.sub,.note,.caption,.tcard-what,.tcard-parts span,.foot-note,.cell p:not(.prod-more),
.ask p,.faq-body p,.plan-say,.plan-note,.plan-free,.day p,.week-qs dd,.say .lines p,.say .foot,
.turn p,.int p,.doc p,.doc li,.doc-who dd,.lost p,.shot-say,.shot-why,.claim-body p,.fact p,
.part-why,.foot-brand p,.ask-cap,.step p,.doc-made,.pb-level p:not(.pb-level-n),.pb-say-item p,
.pb-table td:not(:nth-child(3)){font-family:var(--serif)}