/*
  Styles for the worked example at /example. A thin layer on top of landing.css.
  Two jobs: the numbered timeline that is the whole shape of this page (rail,
  number circles, who/time chips, tally), and the three visuals the homepage has
  no equivalent for (the faff chips over step 2, the question stack in step 4,
  the top-up card in step 6). Every other visual is a homepage class, unchanged.
  It deliberately does not restyle the homepage's .story blocks, .points or
  .owner-quote: this page uses none of them, because the point is that the
  reader counts eight numbered steps and sees how few belong to Sunil.
  It deliberately introduces no new colours, radii or type sizes, and no new
  beat mechanism: everything is driven by the .in class landing.js already adds.
  Order: tokens, opening, timeline, step visuals, tally, desktop, motion.
*/

/* The five accent fills used by .walker live in demo.css, which this page does
   not load. Re-declared here so step 1's walkers are the same colours as the
   homepage's rather than transparent. */
:root{
  --terracotta:#d8694a; --sage:#8fae8b; --sky:#9cc4e4; --mustard:#e3b23c; --plum:#7b5ea7;
  /* the timeline's own rhythm, much tighter than landing.css's --rhythm */
  --step-gap:40px;
  --rail:56px;
}

/* ---- opening: the hero shape without a form ---- */
.opening{padding:44px var(--gutter) 8px}
.opening-inner{max-width:var(--wrap);margin:0 auto}
.opening-title{font-size:clamp(28px,5.2vw,50px);font-weight:700;line-height:1.1;
  letter-spacing:-.025em;margin:0;max-width:20ch}
.opening-lead{font-size:16px;line-height:1.45;color:var(--ink-soft);margin:12px 0 0;max-width:52ch}
/* the header wordmark is a link here, so it needs the anchor reset */
.mark-home{text-decoration:none}

/* the three summary chips sit in a row and are visible immediately: they are
   part of the first screen, not something to scroll for */
.opening-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.opening-chips .chip{opacity:1;transform:none}

/* the press strip is the homepage's own, and the only outside proof here, so it
   sits directly under the summary chips rather than at the foot of a fold */
.press{border-top:0;padding-top:28px}

/* ================================================================
   The timeline. One <ol>, one <li> per step, a rail down the left.
   ================================================================ */
.timeline{list-style:none;margin:0;padding:36px var(--gutter) 8px;
  max-width:var(--wrap);margin-inline:auto}
.step{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  padding-bottom:var(--step-gap)}

/* the rail column: the circle, and the hairline running down to the next one */
.step-mark{position:relative;display:grid;justify-items:start}
.step-num{position:relative;z-index:1;width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);background:var(--paper);border:1.5px solid var(--ink)}
/* the segment starts at --rule and is redrawn in ink from the top as the step
   arrives, so the line reads as being drawn by the reader's own scrolling */
.step-rail{position:absolute;left:21px;top:44px;bottom:calc(var(--step-gap) * -1);
  width:1.5px;background:var(--rule)}
.step-rail::after{content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleY(0);transform-origin:top}
.step-last .step-rail{display:none}

.beat.in .step-num{color:var(--paper);background:var(--ink);
  transition:background .3s ease,color .3s ease}
.beat.in .step-rail::after{animation:rail-draw .6s ease .18s both}
@keyframes rail-draw{to{transform:scaleY(1)}}

/* the content column */
.step-body{display:grid;gap:16px;min-width:0;padding-top:4px}
.step-text{min-width:0}
.step-visual{min-width:0;max-width:640px}

.step-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.step-who,.step-time{display:inline-flex;align-items:center;font-size:13px;
  border-radius:8px;padding:5px 10px;line-height:1.2}
/* who did it: Sunil carries the acid swipe, we are ink, the shop is quiet */
.step-who{color:var(--ink);background:var(--card);border:1px solid var(--rule);font-weight:500}
.step-who-us{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.step-who-sunil{background:transparent;border-color:transparent;padding-inline:0}
.step-time{color:var(--ink-soft);background:var(--card);border:1px solid var(--rule)}

.step-title{font-size:24px;line-height:1.15;font-weight:700;letter-spacing:-.02em;
  margin:0;max-width:22ch}
.step-line{font-size:15px;line-height:1.45;color:var(--ink-soft);margin:8px 0 0;max-width:52ch}

/* the ledger rides under step 6's sentence rather than in its own column.
   These rules used to live in landing.css, where the homepage had a ledger of
   its own; that beat is gone, so the table belongs to this page now. */
.ledger{display:grid;margin:22px 0 0;max-width:340px}
.ledger-row{display:flex;justify-content:space-between;gap:20px;padding:12px 0;
  border-top:1px solid var(--rule);font-size:16px}
.ledger-row:first-child{border-top:0}
.ledger-row dt{color:var(--ink-soft);margin:0}
.ledger-row dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.ledger-total{border-top:1px solid var(--line)}
.step-text .ledger{margin-top:18px}

/* the rows arrive one after another with the rest of the beat */
.ledger-row{opacity:0}
.beat.in .ledger-row{animation:beat-rise .4s ease both}
.beat.in .ledger-row:nth-child(2){animation-delay:.22s}
.beat.in .ledger-row:nth-child(3){animation-delay:.44s}

/* ---- the stages sit in a narrower column than the homepage's ----
   landing.css pins .stage to 4:3 and lets its child overflow. In this column
   that is too short for the paste stage, whose chips then sit on the button,
   so the stages here size to their content and keep 4:3 as a floor. */
.step-visual .stage{aspect-ratio:auto;min-height:0;height:auto}
/* two exceptions keep a fixed box: the map, whose phone sizes to the stage
   height and whose map must stay visible around it, and the question stack,
   whose photograph is absolutely positioned */
.step-visual .stage-map,.step-visual .stage-photo{aspect-ratio:4/3}
/* the phone fills most of this column, so the float sits along the bottom edge
   of the map, where nothing else is, rather than across the post */
.stage-map .chip-float{right:auto;top:auto;bottom:12px;left:50%;
  transform:translateX(-50%) translateY(6px)}
.beat.in .stage-map .chip-float{animation:float-rise .4s ease .3s both}
@keyframes float-rise{to{transform:translateX(-50%);opacity:1}}
/* landing.css sizes the feed phone from the stage height, which in this column
   makes the post wider than the frame and clips its name and button */
.stage-map .feed{justify-content:center}
.stage-map .phone-feed{width:min(248px,74%);aspect-ratio:auto;height:100%;padding:8px}
/* the feed stops short of the bottom so the float has a clear band under it,
   below the phone rather than tucked behind its lower edge */
.stage-map .feed{align-items:start;height:calc(100% - 46px)}
.stage-map .chip-float{white-space:nowrap;z-index:2}
/* the phone and the chips stack until the column itself is wide enough */
.step-visual .paste-row{flex-direction:column;align-items:center;gap:14px}
.step-visual .paste-row .chips{width:100%}
/* the site capture is a tall full-page shot, so the frame keeps a phone's
   proportions instead of growing with the column */
.step-visual .phone-site{width:min(212px,60%);aspect-ratio:9/16;flex:0 0 auto}

/* ---- step 2: the faff, crossed off over the photograph ----
   The chips sit on the photo rather than beside it, so the bench stays visible
   behind the list of things Sunil would otherwise have to learn.
   Two columns: the five crosses fill them, the ink chip spans the full width
   underneath as the answer. One column of six is taller than a 3:2 photo at
   phone width, so it would be clipped top and bottom. */
.photo-faff .faff{list-style:none;position:absolute;inset:0;margin:0;
  padding:14px;display:grid;gap:5px;align-content:center;justify-items:start;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.photo-faff .chip{max-width:100%;padding:6px 10px;font-size:13px}
.photo-faff .chip-ink{grid-column:1/-1}
.chip-crossed{color:var(--ink-faint);text-decoration:line-through}
.chip-cross{flex:0 0 auto;color:var(--ink-faint)}
/* the last chip is the answer, so it inverts to read as the primary line */
.chip-ink{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.chip-ink .chip-tick{color:var(--acid-ink)}

/* landing.css only staggers the first three chips; these six run one after
   another, and the ink chip waits for the five crosses to land. */
.beat.in .faff .chip{animation:beat-rise .3s ease both}
.beat.in .faff .chip:nth-child(2){animation-delay:.24s}
.beat.in .faff .chip:nth-child(3){animation-delay:.48s}
.beat.in .faff .chip:nth-child(4){animation-delay:.72s}
.beat.in .faff .chip:nth-child(5){animation-delay:.96s}
.beat.in .faff .chip:nth-child(6){animation-delay:1.4s}

/* ---- step 4: two question cards, played in sequence over the photo ----
   The photo is absolutely positioned, so unlike the other stages this one needs
   its own box rather than sizing to its content (set just above). */
.stage-photo{position:relative;padding:0}
/* the photograph is scenery, so it sits back far enough for the cards to read */
.stage-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.asks{position:relative;z-index:1;width:100%;height:100%;display:grid;padding:20px;
  place-items:center}
.ask{grid-area:1/1;width:min(320px,100%);background:var(--card);
  border:1px solid var(--rule);border-radius:8px;padding:16px;opacity:0}
.ask-q{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px}
.ask-options{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ask-option{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:14px;color:var(--ink-soft);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.ask-tick{flex:0 0 auto;color:var(--acid-ink);opacity:0}
/* the chosen option starts looking like the others and only turns ink when the
   tick lands, so the choice reads as one event rather than a pre-set state */
.ask-chosen{color:var(--ink-soft);border-color:var(--line)}
/* card 1's answer arrives already chosen, faintly, so the reader sees that the
   sensible option is the default rather than something to work out */
.ask-default{background:var(--sunken)}
.ask-default .ask-tick{opacity:.35}

.ask-done{grid-area:1/1;align-self:center;justify-self:center;opacity:0}

/* Card 1 rises, its option ticks, then it slides up and out; card 2 takes its
   place and ticks; the Done chip closes the step. One timeline, no script. */
.beat.in .ask-1{animation:beat-rise .34s ease .2s both,ask-out .45s ease 3.1s both}
.beat.in .ask-1 .ask-chosen{animation:mark-chosen .2s ease 1.5s both}
/* the default tick is already faintly there, so it brightens rather than rises */
.beat.in .ask-1 .ask-tick{animation:tick-confirm .24s ease 1.5s both}
@keyframes tick-confirm{from{opacity:.35}to{opacity:1;transform:none}}
.beat.in .ask-2{animation:beat-rise .4s ease 3.4s both,ask-out .45s ease 6.3s both}
.beat.in .ask-2 .ask-chosen{animation:mark-chosen .2s ease 4.7s both}
.beat.in .ask-2 .ask-tick{animation:beat-rise .24s ease 4.7s both}
/* .ask-done is a .chip and the third child of .asks, so landing.css's
   .beat.in .chip:nth-child(3) delay outranks a plain .ask-done rule */
.beat.in .asks .ask-done{animation:beat-rise .4s ease 6.6s both}
@keyframes ask-out{to{opacity:0;transform:translateY(-24px)}}
@keyframes mark-chosen{to{color:var(--ink);border-color:var(--ink)}}

/* ---- the opening's example marker ---- */
.opening-note{margin:12px 0 0;font-size:14px;color:var(--ink-faint);max-width:44ch}

/* ---- step 6: the top-up card ---- */
.topup{width:min(320px,100%);background:var(--card);border:1px solid var(--rule);
  border-radius:8px;padding:16px;display:grid;gap:12px;justify-items:start;
  /* the stage stretches its child, so the card holds its own height */
  align-content:start;height:-moz-fit-content;height:fit-content}
.topup-label{font-size:13px;color:var(--ink-soft);margin:0}
.topup-amounts{list-style:none;margin:0;padding:0;display:flex;gap:8px;width:100%}
/* the amounts carry no figures: the page names no price anywhere, so these are
   three blank choices and the height is set rather than inherited from text */
.topup-amount{flex:1 1 0;height:40px;background:var(--paper);
  border:1px solid var(--line);border-radius:8px}
/* the chosen one only turns ink once the press happens, but it arrives already
   selected, so the first pill reads as the default rather than a decision */
.topup-picked{border-color:var(--line)}
.topup-default{background:var(--sunken)}
.topup-live{opacity:0;margin:0}

/* the default is pressed, then the ads go live.
   press and beat-rise are landing.css keyframes. */
.beat.in .topup-picked{animation:press .14s ease .5s 2 alternate,
  mark-chosen .2s ease .6s both}
.beat.in .topup-live{animation:beat-rise .4s ease 1.4s both}

/* ---- step 8: the stat shares the photo with the notification ----
   On the homepage a notify photo carries nothing else, so both sit bottom left.
   Here step 8 has both, and in a column this narrow the stat has to clear the
   notification horizontally as well, so it sits in the opposite corner. */
.photo-notify .stat{top:16px;bottom:auto;left:auto;right:16px}

/* ================================================================
   The tally. The whole argument of the page in two columns: four
   small jobs on the left, everything we did on the right.
   ================================================================ */
.tally{padding:8px var(--gutter) var(--rhythm)}
.tally-inner{max-width:var(--wrap);margin:0 auto}
.tally-cols{display:grid;gap:28px;padding-top:28px;border-top:1px solid var(--rule)}
.tally-head{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px}
.tally-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.tally-row{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.45;
  opacity:0;transform:translateY(6px)}
.tally-tick{flex:0 0 auto;color:var(--acid-ink);margin-top:3px}
.tally-time{color:var(--ink-soft)}
/* what we do not do: the limits, stated plainly, because a page that only
   claims upside reads as a sales pitch */
/* the heading clears the lists above it by the same 28px the two columns use
   between their own headings and the block above */
.tally-not{margin:28px 0 0;opacity:0}
.tally-not-line{font-size:15px;line-height:1.45;color:var(--ink-soft);margin:0;max-width:64ch}
.beat.in .tally-not{animation:beat-rise .4s ease .55s both}

.tally-line{font-size:21px;line-height:1.26;font-weight:600;letter-spacing:-.02em;
  margin:24px 0 0;text-wrap:pretty}

/* The nine rows land one after another, then the limits, then the line. The
   two columns run together rather than in series: staggering them left the
   right column visibly empty for most of a second. */
.beat.in .tally-row{animation:beat-rise .32s ease both}
.beat.in .tally-row:nth-child(2){animation-delay:.08s}
.beat.in .tally-row:nth-child(3){animation-delay:.16s}
.beat.in .tally-row:nth-child(4){animation-delay:.24s}
.beat.in .tally-row:nth-child(5){animation-delay:.32s}
.beat.in .tally-col:nth-child(2) .tally-row{animation-delay:.06s}
.beat.in .tally-col:nth-child(2) .tally-row:nth-child(2){animation-delay:.14s}
.beat.in .tally-col:nth-child(2) .tally-row:nth-child(3){animation-delay:.22s}
.beat.in .tally-col:nth-child(2) .tally-row:nth-child(4){animation-delay:.3s}
.beat.in .tally-col:nth-child(2) .tally-row:nth-child(5){animation-delay:.38s}
.tally-line{opacity:0}
.beat.in .tally-line{animation:beat-rise .4s ease .8s both}

/* ================================================================
   The closing band. The product's own three-step stepper, restyled
   for the ink band, so the page ends inside the real flow.
   ================================================================ */
.closing .steps{display:flex;flex-wrap:wrap;align-items:center;font-size:13px;
  margin:18px 0 0}
.closing .steps .s{color:rgba(250,246,238,.66)}
.closing .steps .s.now{color:var(--paper);font-weight:600}
.closing .steps .dot{width:4px;height:4px;border-radius:50%;
  background:rgba(250,246,238,.4);margin:0 10px;flex:none}
.closing-line{font-size:15px;line-height:1.45;color:rgba(250,246,238,.66);
  margin:10px 0 0;max-width:52ch}
/* the batch line is a second, quieter trust line under the first */
.closing .batches{margin-top:6px}

/* ---- desktop ---- */
@media (min-width:900px){
  :root{--step-gap:56px}

  .opening{padding:64px var(--gutter) 16px}
  .opening-title{font-size:clamp(34px,4.1vw,50px)}
  .opening-lead{font-size:17px;margin-top:16px}

  .timeline{padding-top:48px}
  /* text left, visual right, both aligned to the top of the step */
  .step-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;
    align-items:start}

  /* the photo is tall enough here for the six to stack in one column again */
  .photo-faff .faff{padding:24px;gap:8px;grid-template-columns:minmax(0,auto)}
  .photo-faff .chip{padding:9px 12px;font-size:14px}

  /* step 5 is the ten-ad grid, which wants the full width rather than a column */
  .step-body-wide{grid-template-columns:minmax(0,1fr);gap:24px}
  .step-body-wide .step-visual{max-width:none}
  .step-body-wide .step-title{max-width:28ch}

  .tally-cols{grid-template-columns:1fr 1fr;gap:48px;padding-top:36px}
  /* the limits keep the same clear space above them as the lists have, and the
     closing line stays tight to them rather than drifting off on its own */
  .tally-not{margin-top:36px}
  .tally-line{font-size:28px;margin-top:28px}
}

/* ---- reduced motion: the finished state, nothing moving ----
   The two question cards share one grid cell, so the finished state is card 2
   alone; card 1 has already been answered and slid away. The chosen colours and
   the drawn rail come from animations here, so they are restated as plain
   declarations. */
@media (prefers-reduced-motion:reduce){
  .ask-1{display:none}
  .ask,.ask-done,.ask-tick,.topup-live{opacity:1}
  .beat .faff .chip{opacity:1;transform:none}
  .ledger-row{opacity:1;transform:none}
  .ask-chosen,.topup-picked{color:var(--ink);border-color:var(--ink)}
  .stage-map .chip-float{transform:translateX(-50%);opacity:1}
  .step-num{color:var(--paper);background:var(--ink)}
  .step-rail::after{transform:scaleY(1)}
  .tally-row,.tally-line,.tally-not{opacity:1;transform:none}
  .ask-default .ask-tick{opacity:1}
}