/* THE PAGE'S OWN TOKENS. The product's tokens and faces are design's (`tokens.css`,
   `fonts.css`), copied into styles/ by build.mjs; what is below is only what this page adds. */

:root{
  /* The icon is a black mark on white here and inverts in the dark, and the one button
     carries a soft light of its accent. */
  --icon-ground: #FFFFFF;
  --icon-mark:   #000000;
  --icon-shade:  color-mix(in srgb, #000 10%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 28%, transparent);

  /* A page is read at arm's length rather than between sets, so its sizes and spaces run past
     the app's scale. */
  --t-read:    16px;
  --t-lead:    18px;
  --t-label-l: 11.5px;
  --s7: 48px;
  --page:   1120px;
  --gutter: 16px;
  --r-box:  10px;
  /* The phone the mockups are drawn in. */
  --bezel:       #12171B;
  --bezel-edge:  #2A333A;
  --phone-shade: color-mix(in srgb, #0F1418 30%, transparent);
}
@media (min-width: 600px){ :root{ --gutter:32px; } }

@media (prefers-color-scheme: dark){
  :root{
    --icon-ground:#000000; --icon-mark:#FFFFFF;
    --icon-shade:color-mix(in srgb, #000 40%, transparent);
    --accent-glow:color-mix(in srgb, var(--accent) 18%, transparent);
    --bezel:#05080A; --bezel-edge:#2A333A;
    --phone-shade:color-mix(in srgb, #000 70%, transparent);
  }
}

*{ box-sizing:border-box; }

html, body{ min-height:100%; }

body{
  margin:0;
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
  background:var(--ground); color:var(--ink);
  font-family:var(--face-read); font-size:var(--t-read); line-height:var(--lead-read);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1, h2, h3, p, ul, dl, dd, figure{ margin:0; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
/* Named for a screen reader, not drawn: the section's three headings say what it holds. */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── the one screen ───────────────────────────────────────────────── */

.hero{
  width:100%; max-width:var(--page); margin:0 auto;
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  align-items:center; gap:var(--s7);
  padding:var(--s7) var(--gutter);
  padding-top:max(var(--s7), env(safe-area-inset-top));
}
@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; gap:var(--s7); padding-top:max(var(--s6), env(safe-area-inset-top)); }
}

.brand{
  display:inline-flex; align-items:center; gap:var(--s3);
  margin-bottom:var(--s7);
  color:inherit; text-decoration:none;
  font-family:var(--face-name); font-weight:var(--w-page); font-size:19px;
  font-variation-settings:'wdth' 112; letter-spacing:var(--track-page);
}
.icon{
  width:36px; height:36px;
  color:var(--icon-mark);
  filter:drop-shadow(0 1px 2px var(--icon-shade));
}
.icon-ground{ fill:var(--icon-ground); }

/* The app's label: mono, small, spaced capitals. */
.eyebrow{
  font-family:var(--face-data); font-size:var(--t-label-l); font-weight:var(--w-mark);
  text-transform:uppercase; letter-spacing:var(--track-label);
  color:var(--accent);
}

h1{
  margin-top:var(--s4);
  font-family:var(--face-name); font-weight:var(--w-page);
  font-variation-settings:'wdth' 112;
  font-size:clamp(36px, 7.6vw, 64px); line-height:var(--lead-tight);
  letter-spacing:var(--track-page);
  text-wrap:balance;
}
.h1-accent{ color:var(--accent); }

.lead{ margin-top:var(--s5); font-size:var(--t-lead); color:var(--ink-quiet); max-width:32em; }

.facts{
  margin-top:var(--s5);
  font-family:var(--face-data); font-size:var(--t-label-l);
  text-transform:uppercase; letter-spacing:var(--track-caps);
  color:var(--ink-faint);
}
.facts span{ white-space:nowrap; }
.facts i{ font-style:normal; margin:0 var(--s1); }

/* ── the app's primary button ─────────────────────────────────────── */

.btn{
  margin-top:var(--s6);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  min-height:52px; padding:var(--cap-drop) var(--s5) 0;
  border:1px solid transparent; border-radius:var(--r-card);
  background:var(--fill-accent) padding-box, var(--edge-accent) border-box;
  box-shadow:var(--shadow-raise), 0 6px 20px var(--accent-glow);
  color:var(--on-accent); text-decoration:none; white-space:nowrap;
  font-family:var(--face-data); font-size:var(--t-body); font-weight:var(--w-mark);
  line-height:var(--lead-flat);
  text-transform:uppercase; letter-spacing:var(--track-caps);
  transition:transform var(--m-tap) var(--ease-out), box-shadow var(--m-state) var(--ease-move);
}
.btn svg{
  width:var(--mk-s); height:var(--mk-s); margin-top:calc(var(--cap-drop) * -1);
  fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--m-state) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .btn:hover{ box-shadow:inset 0 0 0 100vmax var(--lift), var(--shadow-raise), 0 8px 24px var(--accent-glow); }
  .btn:hover svg{ transform:translateX(var(--s1)); }
}
.btn:active{ transform:translateY(var(--press)); }
.btn:focus-visible, a:focus-visible{ outline:var(--ring) solid var(--focus); outline-offset:var(--ring-gap); }

/* ── the phone the screenshot sits in ─────────────────────────────── */

.phone{
  justify-self:center;
  width:min(100%, 320px);
  padding:10px;
  border-radius:44px;
  background:var(--bezel);
  box-shadow:
    inset 0 0 0 1px var(--bezel-edge),
    0 2px 4px color-mix(in srgb, #000 10%, transparent),
    0 24px 60px -12px var(--phone-shade);
}
.phone img{ display:block; width:100%; height:auto; border-radius:34px; }

/* ── features and pricing ─────────────────────────────────────────── */

.wrap{ width:100%; max-width:var(--page); margin:0 auto; padding:var(--s7) var(--gutter); }

h2{
  font-family:var(--face-name); font-weight:var(--w-page);
  font-variation-settings:'wdth' 112;
  font-size:clamp(28px, 4.6vw, 40px); line-height:var(--lead-tight);
  letter-spacing:var(--track-page);
}
h3{ font-family:var(--face-name); font-weight:700; font-size:var(--t-lead); line-height:var(--lead-flat); }

.features{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s6) var(--s7);
}
.features p{ margin-top:var(--s2); color:var(--ink-quiet); }
.features p + p{ margin-top:var(--s3); }
@media (max-width: 760px){ .features{ grid-template-columns:1fr; } }

.tiers{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s4);
  margin-top:var(--s6); align-items:start;
}
@media (max-width: 960px){ .tiers{ grid-template-columns:1fr; } }
.tier{
  padding:var(--s5);
  background:var(--raised); border:1px solid var(--line); border-radius:var(--r-box);
  box-shadow:var(--shadow-raise);
}
.tier.premium{
  border-color:transparent;
  background:linear-gradient(var(--raised), var(--raised)) padding-box, var(--edge-accent) border-box;
  box-shadow:var(--shadow-raise), 0 12px 40px -12px var(--accent-glow);
}
.price{
  margin-top:var(--s2);
  font-family:var(--face-name); font-weight:var(--w-page); font-size:26px;
  font-variation-settings:'wdth' 112; letter-spacing:var(--track-page);
}
.price span{
  display:block; margin-top:var(--s1);
  font-family:var(--face-data); font-weight:var(--w-mark); font-size:var(--t-label-l);
  font-variation-settings:normal;
  text-transform:uppercase; letter-spacing:var(--track-caps);
  color:var(--ink-faint);
}
.tier.premium .price span{ color:var(--accent); }
.holds{ list-style:none; padding:var(--s4) 0 0; margin-top:var(--s4); border-top:1px solid var(--line); display:grid; gap:var(--s3); }
.holds li{ display:grid; grid-template-columns:18px 1fr; gap:var(--s3); align-items:start; }
.holds svg{ width:18px; height:18px; margin-top:2px; fill:none; stroke:var(--ink-faint); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.holds .new{ color:var(--accent); }
.holds .new svg{ stroke:var(--accent); }
/* What a key may do, marked as the app marks it on the list of keys. */
.perm{
  display:inline-block; margin-left:var(--s1); padding:1px 6px 0;
  border:1px solid var(--line-strong); border-radius:var(--s1);
  font-family:var(--face-data); font-size:var(--t-label); font-weight:var(--w-mark);
  text-transform:uppercase; letter-spacing:var(--track-caps); white-space:nowrap;
  color:var(--ink-quiet);
}
.perm.write{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.hold-detail{ display:block; margin-top:2px; font-size:var(--t-body); color:var(--ink-faint); }

.soon{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3);
  margin-top:var(--s4); padding:var(--s4) var(--s5);
  border:1px dashed var(--line-strong); border-radius:var(--r-box);
  color:var(--ink-quiet);
}
.soon svg{ width:18px; height:18px; fill:none; stroke:var(--accent); stroke-width:1.75; stroke-linejoin:round; }
.soon b{ color:var(--ink); font-family:var(--face-name); }
.soon span{
  font-family:var(--face-data); font-size:var(--t-label-l);
  text-transform:uppercase; letter-spacing:var(--track-caps); color:var(--accent);
}

/* ── what each kind of account gives ─────────────────────────────── */

.price-then{ margin-top:var(--s2); color:var(--ink-quiet); }

.gives{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s6) var(--s7);
  margin-top:var(--s7);
}
@media (max-width: 760px){ .gives{ grid-template-columns:1fr; } }
.give-text h3{ margin-top:var(--s2); }
.give-text > p:not(.kinds):not(.kinds-note){ margin-top:var(--s2); font-size:var(--t-lead); color:var(--ink-quiet); }
.kinds{ display:flex; flex-wrap:wrap; gap:var(--s1); }
.kinds span{
  padding:2px 6px 1px; border-radius:var(--s1);
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--face-data); font-size:var(--t-label); font-weight:var(--w-mark);
  text-transform:uppercase; letter-spacing:var(--track-caps);
}
.kinds-note{ margin-top:var(--s3); font-size:var(--t-body); color:var(--ink-faint); }

/* ── foot ─────────────────────────────────────────────────────────── */

.foot{
  margin-top:auto;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2) var(--s5);
  padding:var(--s4) var(--gutter) max(var(--s4), env(safe-area-inset-bottom));
  font-family:var(--face-data); font-size:var(--t-label);
  text-transform:uppercase; letter-spacing:var(--track-label);
  color:var(--ink-faint);
}
.foot a{ color:inherit; text-decoration:none; }
.foot a:hover{ color:var(--ink); }

/* ── the two shown features, each beside a mockup of the app ────────── */

.show{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:var(--s7); align-items:center;
  margin-bottom:var(--s7);
}
.show + .show{ margin-top:var(--s7); }
.show.flip .mock{ order:-1; }
.show-text p{ margin-top:var(--s3); font-size:var(--t-lead); color:var(--ink-quiet); }
@media (max-width: 860px){
  .show{ grid-template-columns:1fr; gap:var(--s5); }
  .show.flip .mock{ order:0; }
}

/* A MOCKUP DRAWS THE APP WITH THE APP'S OWN TOKENS: a raised surface, the wells, the pills and
   the rest bar as `set.css`, `well.css` and `rest.css` draw them. */
.mock{ justify-self:center; width:min(100%, 400px); }
.m-screen{
  position:relative; overflow:hidden;
  /* A picture of the app, not the app: nothing in it answers a pointer or can be selected. */
  pointer-events:none; user-select:none; -webkit-user-select:none;
  padding:var(--s4) var(--s4) 72px;
  background:var(--raised); border:1px solid var(--line); border-radius:var(--r-box);
  box-shadow:var(--shadow-raise), 0 24px 60px -18px var(--phone-shade);
  font-family:var(--face-read); font-size:var(--t-body); line-height:var(--lead-flat);
}
.m-screen p{ margin:0; }

.m-ex{ display:grid; grid-template-columns:26px 1fr; gap:var(--s3); align-items:start; }
/* THE APP'S RING (`day.css` .nring): a track and an arc that fills as the sets are done, the
   number laid over both on one grid cell, so it sits in the middle. */
.m-ring{ position:relative; display:grid; place-items:center; width:26px; height:26px;
  font-family:var(--face-data); font-size:var(--t-detail); color:var(--accent); }
.m-ring > *{ grid-area:1 / 1; }
.m-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.m-ring circle{ fill:none; stroke-width:1.5; }
.m-ring .track{ stroke:var(--line-strong); }
.m-ring .arc{ stroke:var(--accent); stroke-linecap:round; transition:stroke-dasharray 600ms var(--ease-out); }
.m-ring .arc[stroke-dasharray^="0 "]{ stroke:none; }
.m-n{ line-height:1; }
.m-name{ font-family:var(--face-name); font-weight:600; font-size:15px; }
.m-sub{ margin-top:var(--s1) !important; color:var(--ink-quiet); font-size:var(--t-detail); }
.m-part{
  display:inline-block; margin-right:var(--s1); padding:1px 6px 0;
  border:1px solid var(--line-strong); border-radius:var(--s1);
  font-family:var(--face-data); font-size:var(--t-label); text-transform:uppercase; letter-spacing:var(--track-caps);
}
.m-terms{ margin-top:var(--s1) !important; font-family:var(--face-data); font-size:var(--t-detail); color:var(--ink-quiet); }

.m-sets{ display:grid; gap:var(--s2); margin-top:var(--s4); padding-left:calc(26px + var(--s3)); }
.m-set{ display:flex; align-items:center; gap:var(--s1); font-family:var(--face-data); font-size:var(--t-detail); }
.m-i{ width:2ch; color:var(--ink-faint); }
.m-x{ color:var(--ink-faint); }
.m-well{
  position:relative; display:inline-flex; align-items:center; min-height:var(--tap-tight);
  border:1px solid transparent; border-radius:var(--r-card);
  background:linear-gradient(var(--raised), var(--raised)) padding-box,
             linear-gradient(var(--sweep), var(--line) 0%, var(--line) 70%) border-box;
  transition:box-shadow var(--m-state) var(--ease-move);
}
.m-well.focus{ box-shadow:0 0 0 var(--ring) var(--focus); }
.m-v{ min-width:6.5ch; padding:0 var(--s2); text-align:right; font-size:var(--t-input); color:var(--ink); }
.m-v:empty::before{ content:attr(data-ghost); color:var(--ink-faint);
  text-decoration:underline dotted; text-underline-offset:2px; }
.m-w .m-v{ min-width:5.5ch; padding-right:var(--s1); }
.m-unit{ padding-right:var(--s2); color:var(--ink-quiet); font-size:var(--t-detail); }
.m-set.m-off .m-well{ opacity:.45; }

.m-offers{
  position:absolute; left:50%; top:calc(100% + var(--ring) + var(--ring-gap) + var(--s1)); z-index:2;
  display:flex; flex-direction:column; gap:var(--s1); width:max-content;
  opacity:0; transform:translate(-30%, -4px); pointer-events:none;
  transition:opacity var(--m-state) var(--ease-out), transform var(--m-state) var(--ease-out);
}
.m-offers.open{ opacity:1; transform:translate(-30%, 0); }
/* Under a field near the right edge, the list keeps to that edge. */
.m-offers.end{ left:auto; right:0; transform:translateY(-4px); }
.m-offers.end.open{ transform:none; }
.m-offer{
  display:flex; align-items:center; gap:var(--s2);
  min-height:var(--tap-tight); padding:var(--s1) var(--s3);
  border:1px solid transparent; border-radius:var(--r-pill);
  background:linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box, var(--edge-accent) border-box;
  font-family:var(--face-data);
}
.m-offer .m-unit{ padding:0; }
.m-ov{ min-width:4.5ch; text-align:right; font-size:var(--t-part); font-weight:var(--w-mark); color:var(--ink); }
.m-whence{ display:flex; flex-direction:column; align-items:flex-start; font-size:var(--t-label); line-height:1.3; }
.m-src{ color:var(--accent); }
.m-ago{ color:var(--ink-quiet); }
.m-offer.sug{ background:linear-gradient(var(--accent-2-soft), var(--accent-2-soft)) padding-box,
                         linear-gradient(var(--accent-2), var(--accent-2)) border-box; }
.m-offer.sug .m-src{ color:var(--accent-2); }
/* THE STEP IS NOT AN OFFER (`set.css`): nothing in it goes into the field. The raised ground and a
   quiet edge, its words in quiet ink, and the pencil that says it opens the step to be changed. */
.m-offer.step{ background:linear-gradient(var(--raised), var(--raised)) padding-box,
                          linear-gradient(var(--line), var(--line)) border-box; }
.m-offer.step .m-src{ color:var(--ink-quiet); }
.m-pen{ flex:none; width:1em; height:1em; margin-left:var(--s2);
  fill:none; stroke:var(--ink-quiet); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.m-offer.picked{ outline:var(--ring) solid var(--focus); outline-offset:var(--ring-gap); }

.m-rest{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:linear-gradient(var(--sweep), color-mix(in srgb, var(--accent) 22%, var(--raised)), var(--accent-soft));
  border-top:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  font-family:var(--face-data); color:var(--ink);
  transform:translateY(100%); transition:transform 320ms var(--ease-out);
}
.m-rest.open{ transform:none; }
.m-lab{ font-size:var(--t-label); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--ink-quiet); }
.m-step{ font-size:var(--t-detail); color:var(--ink-quiet); }
.m-fig{ font-size:22px; font-weight:var(--w-mark); font-variant-numeric:tabular-nums; }

/* THE POINTER, gliding from one thing to the next before it presses: its tip is the point. */
.m-cursor{
  position:absolute; z-index:6; left:88%; top:92%; width:20px; height:20px;
  opacity:0; pointer-events:none;
  transition:left 560ms var(--ease-move), top 560ms var(--ease-move), opacity 200ms;
}
.m-cursor.on{ opacity:1; }
/* A plain triangle in the page's ink, its corners rounded by its own stroke, with an edge of the
   surface around it so it reads over a pill as well as over the ground. Its tip is the point. */
.m-cursor svg{ display:block; width:100%; height:100%; margin:-3px 0 0 -3px; overflow:visible;
  fill:var(--ink); stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round;
  filter:drop-shadow(0 0 0.75px var(--raised)) drop-shadow(0 0 0.75px var(--raised)) drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
/* A press's mark where the pointer is. */
.m-tap{
  position:absolute; z-index:5; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 18%, transparent);
  border:2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  opacity:0; pointer-events:none;
}
.m-tap.go{ animation:m-tap 520ms var(--ease-out); }
@keyframes m-tap{ 0%{ opacity:1; transform:scale(.55); } 100%{ opacity:0; transform:scale(1.2); } }

/* The agent's mockup: a conversation, and the plan it changed. */
.m-chat{ display:flex; flex-direction:column; gap:var(--s2); }
.m-bubble{
  max-width:86%; padding:var(--s2) var(--s3); border-radius:14px;
  font-size:var(--t-body); line-height:var(--lead-read);
  opacity:0; transform:translateY(6px);
  transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.m-bubble.open{ opacity:1; transform:none; }
.m-bubble.you{ align-self:flex-end; background:var(--accent-soft); border-bottom-right-radius:var(--s1); }
.m-bubble.agent{ align-self:flex-start; background:var(--sunken); border-bottom-left-radius:var(--s1); }
/* EVERY STATE HOLDS ITS PLACE FROM THE START, so the mockup keeps one height while it plays: the
   whole message lies hidden under the one being typed, and the dots and the answer share a cell
   the size of the answer. */
.m-bubble.you{ display:grid; }
.m-full, .m-typed{ grid-area:1 / 1; }
.m-full{ visibility:hidden; }
.m-slot{ display:grid; justify-items:start; align-items:start; }
.m-slot > *{ grid-area:1 / 1; }
.m-dots{ display:inline-flex; gap:4px; padding:4px 0; }
.m-dots i{ width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:m-dot 1s infinite; }
.m-dots i:nth-child(2){ animation-delay:.15s; } .m-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes m-dot{ 0%, 80%, 100%{ opacity:.3; } 40%{ opacity:1; } }

.m-plan{ margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); }
.m-label{ font-family:var(--face-data); font-size:var(--t-label); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--ink-faint); }
.m-chips{ display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:var(--s2); }
.m-chip{
  padding:4px 10px 3px; border:1px solid var(--line-strong); border-radius:var(--r-pill);
  font-family:var(--face-data); font-size:var(--t-detail); color:var(--ink-quiet);
  transition:background-color var(--m-state), color var(--m-state), border-color var(--m-state), transform 260ms var(--ease-out), opacity 260ms;
}
.m-chip.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.m-chip.adds{ border-style:dashed; }
.m-chip[data-id="home"]:not(.in){ display:none; }
.m-chip.pop{ animation:m-pop 320ms var(--ease-out); }
@keyframes m-pop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
.m-routine{ margin-top:var(--s3); }
.m-rhead{ display:flex; align-items:center; gap:var(--s2); font-family:var(--face-name); font-weight:600; }
.m-letter{ display:grid; place-items:center; width:22px; height:20px; padding-top:var(--cap-drop);
  border:1px solid var(--accent); border-radius:var(--s1); font-family:var(--face-data); font-size:var(--t-label); color:var(--accent); }
.m-list{ list-style:none; margin:var(--s2) 0 0; padding:0; }
.m-list li{ display:flex; justify-content:space-between; gap:var(--s3); padding:var(--s2) 0; border-bottom:1px solid var(--line); font-size:var(--t-detail); }
.m-list li:last-child{ border-bottom:0; }
/* ONE LINE A NAME, as the app's rows are: a name too long for the width ends in an ellipsis. */
.m-swap{ display:grid; min-width:0; }
.m-swap > span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-swap > span{ grid-area:1 / 1; transition:opacity 260ms var(--ease-move); }
.m-to{ opacity:0; color:var(--accent); }
.m-swap.changed .m-from{ opacity:0; }
.m-swap.changed .m-to{ opacity:1; }
.m-asks{ flex:none; font-family:var(--face-data); color:var(--ink-quiet); }
/* The set row's mockup is as tall as its longest list of offers, so nothing it shows is cut. */
.mock[data-demo="sets"] .m-screen{ min-height:452px; }
/* The exercises after the one in hand: drawn as closed rows, quieter, and fading out downward. */
/* AND THEY RUN TO THE FOOT OF THE MOCKUP, fading over the whole of that height, so the fade is
   gentle and nothing below it is left empty. */
.mock[data-demo="sets"] .m-screen{ display:flex; flex-direction:column; padding-bottom:0; }
.m-more{ flex:1; display:grid; align-content:start; gap:var(--s4); overflow:hidden;
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.m-more .m-ring{ color:var(--ink-quiet); }
.m-more .m-name{ color:var(--ink-quiet); font-weight:500; }

/* HOW THE APP IS KEPT ON A PHONE: one line and the two ways, quiet under the button. */
.install{ margin-top:var(--s5); max-width:32em; font-size:var(--t-body); color:var(--ink-quiet); }
.install ul{ list-style:none; margin:var(--s2) 0 0; padding:0; display:grid; gap:var(--s1); }
.install b{ font-weight:normal; color:var(--ink); font-family:var(--face-name); }

/* The agent's mockup has no rest bar to make room for. */
.mock[data-demo="agent"] .m-screen{ padding-bottom:var(--s4); }
/* On a narrow phone what a position asks goes under its name, so the name has the line to itself. */
@media (max-width: 420px){
  .m-list li{ flex-direction:column; gap:2px; }
}

/* The page closes on its one act. */
.closing{ display:flex; justify-content:center; padding-top:0; }