/* ==========================================================================
   GOOGLE PAY - Money Management Feature  ·  UX case study
   Rebuilt 2026-09-11 onto the MARKETPLACE SYSTEM.

   THIS FILE IS AN OVERLAY, NOT A STYLESHEET. gpay.html loads marketplace.css
   first and this second. Everything structural - the three-column hairline
   grid, the alternating bands, the display type, the eyebrows, the reveals,
   the plates, the light/dark token sets - comes from there and is not
   restated here. A second copy of that system is how the two case studies
   start drifting apart, and the whole point of this rebuild is that they do
   not.

   WHAT IS HERE is the part that is GPAY's and nowhere else:
     1. Google's four, as a per-section --tone,
     2. the hover-to-play screen recordings,
     3. the capability matrix,
     4. the components with no Marketplace equivalent - routes, flows,
        stats, signals, wireframe sheets.

   GOOGLE'S FOUR, AND THE REASON THERE ARE EIGHT OF THEM.
   The brand values are FILL colours. #FDBE01 on white measures 1.7:1 and
   #317EEE measures 3.6:1 - neither is legible as text, and a case study that
   sets its section labels in them is unreadable in exactly the places it is
   trying to be emphatic. So each colour exists twice: the brand value drives
   dots, bars, chips and rules, where contrast is not the test, and a tuned
   ink variant drives TEXT. Same hue, same recognisability, legible. The dark
   theme gets its own inks for the same reason in the other direction.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  GOOGLE'S FOUR
   -------------------------------------------------------------------------- */
:root{
  /* The brand values. Fills, dots, bars, rules - never text. */
  --g-blue:#317EEE;
  --g-red:#F44336;
  --g-yellow:#FDBE01;
  --g-green:#2DAA4F;

  /* The same four AS TEXT on a light ground. Darkened until each clears 4.5:1
     on paper; yellow has to travel furthest because it starts nearest white. */
  --g-blue-ink:#1558B0;
  --g-red-ink:#B3231A;
  --g-yellow-ink:#6F5000;
  /* #1B7A38 cleared 4.5:1 on plain paper but measured 4.39:1 on the tinted
     flow node, which is the darkest ground it actually has to work on. Tuned
     against that case rather than the easy one: 5.50:1 there, 5.9:1 on paper. */
  --g-green-ink:#16682F;

  /* ...and on a dark ground, lifted rather than darkened. */
  --g-blue-dk:#8CB8F7;
  --g-red-dk:#FF9A90;
  --g-yellow-dk:#FFD44F;
  --g-green-dk:#7ADC96;

  /* The section tone, defaulted so nothing is ever unset. A section overrides
     these three together - see the .tone-* helpers below. */
  --tone:var(--g-blue);
  --tone-ink:var(--g-blue-ink);
  /* THE FILL A FILLED OBJECT SITS ON, and the one token here that does NOT
     move with the theme. White on #317EEE measures 3.0:1, so the bright brand
     value cannot carry body copy in either theme; the darkened value can, and
     a filled card that inverted with the theme would stop being the one
     filled object in the group. Same role as the Marketplace maroon. */
  --tone-fill:var(--g-blue-ink);

  /* THE ACCENT, AND IT IS NOT MAROON HERE. marketplace.css paints the fixed
     pill, .btn-primary and the one filled card from --accent. That token is
     the Marketplace maroon, and inherited unchanged it puts a maroon pill on
     a Google Pay page. The blue INK value, not the brand value: all three of
     those objects carry white text, and #317EEE cannot. */
  --accent:var(--g-blue-ink);
  --accent-ink:var(--g-blue-ink);

  /* THE BAR. The page opens on a void band, so the navbar keeps its dark face
     and only the accent moves off maroon onto Google blue. Everything else
     about the bar is nav.css's and is not touched here. */
  --nav-accent:var(--g-blue);
}

/* THE FOUR TONE HELPERS. A section carries one class and gets both the fill
   and the legible ink, in whichever theme it is being read in. Setting --tone
   inline the way the old page did gave a section a fill colour and left the
   text colour to fend for itself. */
.tone-blue  { --tone:var(--g-blue);   --tone-ink:var(--g-blue-ink);   --tone-fill:var(--g-blue-ink); }
.tone-red   { --tone:var(--g-red);    --tone-ink:var(--g-red-ink);    --tone-fill:var(--g-red-ink); }
.tone-yellow{ --tone:var(--g-yellow); --tone-ink:var(--g-yellow-ink); --tone-fill:var(--g-yellow-ink); }
.tone-green { --tone:var(--g-green);  --tone-ink:var(--g-green-ink);  --tone-fill:var(--g-green-ink); }

/* ON A DARK GROUND the inks lift instead. Both halves of the condition are
   needed: bands three and four are dark in EVERY theme, and in the dark theme
   all four are - which is exactly the split marketplace.css already draws for
   --ink, so this rides on the same two selectors rather than inventing a
   third rule about what counts as dark. */
.band--void  .tone-blue,   .band--deep .tone-blue,
.band--void.tone-blue,     .band--deep.tone-blue   { --tone-ink:var(--g-blue-dk); }
.band--void  .tone-red,    .band--deep .tone-red,
.band--void.tone-red,      .band--deep.tone-red    { --tone-ink:var(--g-red-dk); }
.band--void  .tone-yellow, .band--deep .tone-yellow,
.band--void.tone-yellow,   .band--deep.tone-yellow { --tone-ink:var(--g-yellow-dk); }
.band--void  .tone-green,  .band--deep .tone-green,
.band--void.tone-green,    .band--deep.tone-green  { --tone-ink:var(--g-green-dk); }

/* the accent as text, lifted on every dark ground - the fill itself never moves */
.band--void,.band--deep{--accent-ink:var(--g-blue-dk)}
html.dark .band--paper,html.dark .band--wash{--accent-ink:var(--g-blue-dk)}

html.dark .band--paper .tone-blue,   html.dark .band--wash .tone-blue,
html.dark .band--paper.tone-blue,    html.dark .band--wash.tone-blue   { --tone-ink:var(--g-blue-dk); }
html.dark .band--paper .tone-red,    html.dark .band--wash .tone-red,
html.dark .band--paper.tone-red,     html.dark .band--wash.tone-red    { --tone-ink:var(--g-red-dk); }
html.dark .band--paper .tone-yellow, html.dark .band--wash .tone-yellow,
html.dark .band--paper.tone-yellow,  html.dark .band--wash.tone-yellow { --tone-ink:var(--g-yellow-dk); }
html.dark .band--paper .tone-green,  html.dark .band--wash .tone-green,
html.dark .band--paper.tone-green,   html.dark .band--wash.tone-green  { --tone-ink:var(--g-green-dk); }

/* The eyebrow's chevron ramp and its bracketed label take the section tone.
   This is the one place Google's colour is load-bearing rather than
   decorative: it is how a reader knows which of the four chapters they are
   in without reading the number. */
.eyebrow .ramp i{background:var(--tone)}
.eyebrow .lab em{color:var(--tone-ink)}

/* --------------------------------------------------------------------------
   02  THE SCREEN RECORDINGS
   A still with a muted video over it. Each clip plays ONCE per page load -
   on hover for a mouse, on scroll-in for touch - then drops its fade so the
   still takes back over. No loop, no play button, no replay: after its pass
   a clip is a static frame. The phone keeps its own aspect ratio - these
   are 640x1321 portrait screens and nothing may squash them.
   -------------------------------------------------------------------------- */
.clip{
  position:relative;
  display:block;
  overflow:hidden;
  /* THE SILHOUETTE IS THE DEVICE'S OWN, NOT A FLAT CORNER. These frames come
     from the same 1006x2060 mockup VOLA's do, and video has no alpha - the
     device is cropped out of its padding at build time and the corners are cut
     here. A flat 14px did not follow the bezel's arc, so a wedge of the frame's
     own light ground stayed visible outside the phone at all four corners.

     BOTH HALVES OF 16.5%/8% MATTER: percentages resolve per axis, so a single
     number gives an elliptical corner on a box this tall. Same values as
     vola.css, measured off the same source - if one changes, both do. */
  border-radius:16.5% / 8%;
  /* NO FILL. object-fit:contain letterboxes these 640x1321 screens, and a
     filled box turns that letterbox into a visible slab around the device.
     Transparent, the page shows through and only the phone reads. */
  background:transparent;
  /* THE ASPECT IS DECLARED, NOT INFERRED. Without it the still's intrinsic
     height governs, the video is absolutely positioned over nothing, and the
     card collapses to zero the moment the image is swapped for a taller one. */
  aspect-ratio:640/1321;
}
.clip-still,
.clip-v{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* CONTAIN, NOT COVER. These are whole screens; a cover crop would cut the
     status bar off the top and the nav bar off the bottom of every one of
     them, which is precisely the part that shows this sits inside Google Pay. */
  object-fit:contain;
  display:block;
}
.clip-v{
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.clip.is-live .clip-v{opacity:1}

/* No play button anywhere on this page. A clip starts itself - hover on a
   mouse, scroll-in on touch - and a control that also starts it is a second
   affordance for one action. The still underneath is the resting state; the
   video fades over it while it runs and hands back at `ended`. */

@media (prefers-reduced-motion:reduce){
  .clip-v{transition:none}
}

/* --------------------------------------------------------------------------
   03  THE HERO STRIP - three recordings, running, before the argument
   -------------------------------------------------------------------------- */
.hstrip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gut);
  margin-top:clamp(30px,4vw,60px);
}
/* A BOX, not a bare figure. As loose content the caption sat exactly on the
   left rule while the clip above it did not, so the two disagreed about where
   the column started. As a box they share one edge and the rule passes
   behind. --face is the band's own colour: invisible, and opaque. */
.hshot{
  margin:0;
  background:var(--face);
  padding:clamp(14px,1.6vw,20px);
}
.hshot figcaption{
  margin-top:14px;
  font-size:var(--fs-micro);
  line-height:1.5;
  color:var(--ink-3);
  letter-spacing:.02em;
}
.hshot figcaption b{
  display:block;
  font-family:var(--disp);
  font-weight:600;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:3px;
}
.hstrip-foot{
  /* A BAR ON A RULE, like .plate-bar. It spans all three columns, so as loose
     text it crossed rule two mid-sentence; as an opaque bar the rules pass
     behind it and it keeps its full measure. */
  background:var(--face);
  border-top:1px solid var(--line);
  padding-left:var(--inset);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  margin-top:0;
  padding-top:16px;
  padding-bottom:16px;
  font-size:var(--fs-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-3);
}
.circle-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--tone-ink);
}
.circle-link .circle{
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border:1px solid var(--line);
  border-radius:50%;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.circle-link .circle svg{width:14px;height:14px}
@media (pointer:coarse){.circle-link{min-height:44px}}
.circle-link:hover .circle{
  transform:translateX(4px);
  background:var(--tone-fill);
  border-color:var(--tone-fill);
  color:#fff;
}

/* --------------------------------------------------------------------------
   04  THE CAPABILITY MATRIX
   Five apps, seven rows. The bars are drawn by gpay.js when the table
   arrives; the word beside each one is what a screen reader gets.
   -------------------------------------------------------------------------- */
/* The gap above is the page's one block-to-block step - the same
   clamp(30px,4vw,60px) the stacked .split blocks use - so the table no
   longer sits tight under the chapter's standfirst. */
.tablewrap{
  margin-top:clamp(30px,4vw,60px);
  background:var(--face);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line);
}
.tablewrap table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  font-size:var(--fs-micro);
}
.tablewrap caption{
  /* The caption is for screen readers; the sighted reader has the lead-in
     paragraph above the table saying the same thing with room to say it. */
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.tablewrap th,
.tablewrap td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.tablewrap thead th{
  font-family:var(--disp);
  font-weight:600;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}
.tablewrap tbody th{
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
/* The column the study is about, marked once in the header and carried down
   the body by a tinted ground rather than by a heavier rule - a rule here
   would compete with the hairlines the whole page is built on. */
.tablewrap .is-focus{background:color-mix(in srgb,var(--g-blue) 9%,var(--face))}
.thbrand{display:inline-flex;align-items:center;gap:8px}
.thbrand img{width:18px;height:18px;object-fit:contain;flex:none}
.thbrand img.mark{width:16px;height:16px}

.cell b{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
  color:var(--ink-2);
}
.cell .bar{
  display:block;
  height:4px;
  border-radius:99px;
  background:var(--line);
  overflow:hidden;
}
.cell .bar i{
  display:block;
  height:100%;
  width:0;
  border-radius:99px;
  background:var(--ink-3);
  transition:width .9s var(--ease);
}
.cell[data-tone="full"] .bar i{background:var(--g-green)}
.cell[data-tone="part"] .bar i{background:var(--g-yellow)}
.cell[data-tone="none"] .bar i{background:var(--g-red)}
.cell[data-tone="full"] b{color:var(--g-green-ink)}
.cell[data-tone="part"] b{color:var(--g-yellow-ink)}
.cell[data-tone="none"] b{color:var(--g-red-ink)}
.band--void .cell[data-tone="full"] b,.band--deep .cell[data-tone="full"] b{color:var(--g-green-dk)}
.band--void .cell[data-tone="part"] b,.band--deep .cell[data-tone="part"] b{color:var(--g-yellow-dk)}
.band--void .cell[data-tone="none"] b,.band--deep .cell[data-tone="none"] b{color:var(--g-red-dk)}
html.dark .band--paper .cell[data-tone="full"] b,html.dark .band--wash .cell[data-tone="full"] b{color:var(--g-green-dk)}
html.dark .band--paper .cell[data-tone="part"] b,html.dark .band--wash .cell[data-tone="part"] b{color:var(--g-yellow-dk)}
html.dark .band--paper .cell[data-tone="none"] b,html.dark .band--wash .cell[data-tone="none"] b{color:var(--g-red-dk)}

.tablehint,.swipe-hint{
  background:var(--face);
  margin-top:0;
  padding:12px var(--inset) 14px;
  font-size:var(--fs-micro);
  color:var(--ink-3);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.swipe-hint{display:none}
@media (max-width:820px){ .swipe-hint{display:block} .tablehint{display:none} }

/* --------------------------------------------------------------------------
   05  SIGNALS - the research findings, and the what's-next list
   -------------------------------------------------------------------------- */
.signals{border-top:1px solid var(--line)}
.signal{
  /* Two halves of the wide column, divide on the middle rule. The cells carry
     the inset, the border runs flush - .row's contract exactly. */
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  align-items:baseline;
  padding:clamp(20px,2.4vw,32px) 0 clamp(22px,2.6vw,36px);
  border-bottom:1px solid var(--line);
}
.signal > *{padding-left:var(--inset);padding-right:20px}
.signal:last-child{border-bottom:0}
.signal b{
  display:block;
  margin-bottom:0;
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
  max-width:22ch;
}
.signal p{margin:0;color:var(--ink-2);font-size:var(--fs-body);line-height:1.62}

/* --------------------------------------------------------------------------
   06  THE ROUTES - the call the rest of the study is downstream of
   -------------------------------------------------------------------------- */
.routes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gut);
  border-top:1px solid var(--line);
  padding-top:clamp(24px,3vw,40px);
}
.route{
  padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--face);
}
/* THE ONE THAT WAS TAKEN IS THE ONLY ONE THAT IS FILLED. Same rule as the
   Marketplace card grid: exactly one filled object per group, and it is
   always the one the section is arguing for. */
.route--taken{
  background:var(--tone-fill);
  border-color:var(--tone-fill);
  --ink:#fff;
  /* .92 and .80, not .78 and .62 - measured on the fill, not guessed. */
  --ink-2:rgba(255,255,255,.92);
  --ink-3:rgba(255,255,255,.80);
  --line:rgba(255,255,255,.28);
  color:#fff;              /* --ink alone is never enough - colour inherits computed */
}
.route-top{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.route-top i{flex:1;height:1px;background:currentColor;opacity:.35}
.route h3{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(21px,2.2vw,30px);
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0 0 12px;
  color:var(--ink);
}
.route > p{color:var(--ink-2);margin:0 0 20px}
.route ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.route li{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:11px;
  align-items:start;
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ink-2);
}
.route li svg{width:16px;height:16px;margin-top:3px}
.route li[data-v="yes"] svg{color:var(--g-green)}
.route li[data-v="no"] svg{color:var(--g-red)}
.route--taken li[data-v="yes"] svg,
.route--taken li[data-v="no"] svg{color:#fff;opacity:.9}
.route-dots{display:none}
.route-foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin:22px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
}
.route-foot svg{width:17px;height:17px;flex:none}

/* The aside under a group - "also considered", "how a category is decided" */
.route-note{
  margin-top:clamp(26px,3vw,42px);
  padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line);
  /* NOT A GRID ANY MORE. As a 1fr/2fr pair inside a column that already spans
     two page columns, the label sat exactly on rule two and the paragraph ran
     straight over rule three - the one thing this page is not allowed to do.
     Stacked and inset, both clear every rule at every width. */
  padding-left:var(--inset);
}
.route-note .label{margin-bottom:10px}
/* Capped to one page column less the standoff, so it ends clear of the rule it
   would otherwise cross. Same number as .body in marketplace.css. */
.route-note p{margin:0;color:var(--ink-2);max-width:calc(50% - var(--inset))}
@media (max-width:820px){ .route-note p{max-width:none} }
.route-note b{color:var(--ink)}

/* The small bracketed label these sections share */
.label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.label-dot::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--tone);
  flex:none;
}

/* --------------------------------------------------------------------------
   07  THE STATS - the measured payment window
   -------------------------------------------------------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:0;
  border-top:1px solid var(--line);
}
.stats > div{
  padding:clamp(22px,2.6vw,34px) 20px clamp(24px,2.8vw,38px) var(--inset);
  border-right:1px solid var(--line);
}
.stats > div:last-child{border-right:0}
.stats dt{
  font-family:var(--disp);
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--tone-ink);
  display:flex;
  align-items:baseline;
  gap:2px;
}
.stats dt b{font-size:clamp(42px,5.4vw,78px);font-weight:600}
.stats dt em{font-style:normal;font-size:clamp(22px,2.4vw,34px)}
.stats dt span{font-size:clamp(15px,1.4vw,20px);margin-left:2px}
.stats dd{
  margin:14px 0 0;
  font-size:var(--fs-body);
  color:var(--ink);
  font-weight:600;
}
.stats dd i{
  display:block;
  font-style:normal;
  font-weight:400;
  font-size:var(--fs-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:6px;
}

/* --------------------------------------------------------------------------
   08  THE RECORDED PAYMENT
   -------------------------------------------------------------------------- */
.videofig{margin:clamp(30px,4vw,56px) 0 0}
.videofig .stage{
  border:1px solid var(--line);
  background:var(--face-4);
  overflow:hidden;
}
.videofig video{display:block;width:100%;height:auto}
.videofig figcaption{
  background:var(--face);
  padding:14px var(--inset);
  margin-top:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.videofig figcaption b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------------------
   09  THE FEATURE CARDS
   Deliberately .gcard and not .card: the Marketplace card is a text object
   with a hover fill, and this one is a screen recording with a caption under
   it. Sharing the class would mean every rule in both files had to keep
   agreeing about which of the two it meant.
   -------------------------------------------------------------------------- */
.gcards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gut);
  border-top:1px solid var(--line);
  padding-top:clamp(24px,3vw,40px);
}
/* THE PHONE SITS ON THE PAGE, NOT ON A PANEL.
   These cards used to be three stacked surfaces - a card face, a tinted plate
   inside it, and a fill behind the screen itself - so every phone arrived
   inside two boxes it did not need. The recording already reads as a device;
   framing it twice just makes the page look like a slide deck. Card face,
   plate and letterbox fill are all gone; the border and the padding went with
   them, because a border with no fill is the same box drawn in outline. */
.gcard{
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  /* The standoff, without the plate - see the note at the top of this block. */
  padding-inline:var(--inset);
}
.gcard .shotwrap{margin-bottom:18px}
.gcard-n{
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tone-ink);
  margin-bottom:8px;
}
.gcard-n em{font-style:normal;color:var(--ink-3)}
.gcard h3{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(19px,1.9vw,26px);
  line-height:1.22;
  letter-spacing:-.015em;
  margin:0 0 10px;
  color:var(--ink);
}
.gcard p{margin:0;color:var(--ink-2)}
.gcard-foot{
  margin-top:16px !important;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3) !important;
}

/* --------------------------------------------------------------------------
   10  THE THREE ROOTS
   -------------------------------------------------------------------------- */
.prows{border-top:1px solid var(--line)}
/* TWO HALVES OF THE WIDE COLUMN, so the divide lands on the middle rule -
   marketplace.css's .row contract, which is the only geometry in this system
   that is guaranteed not to put a hairline through a sentence. The border
   runs flush edge to edge and the CELLS carry the inset. */
.prow{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  align-items:baseline;
  padding:clamp(22px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line);
}
.prow > *{padding-left:var(--inset);padding-right:20px}
.prow-n{
  display:block;
  font-family:var(--disp);
  font-weight:600;
  font-size:var(--fs-micro);
  letter-spacing:.1em;
  color:var(--tone-ink);
  margin-bottom:8px;
}
.prow h4{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(18px,1.8vw,25px);
  line-height:1.24;
  letter-spacing:-.012em;
  margin:0 0 8px;
  color:var(--ink);
}
.prow p{margin:0;color:var(--ink-2)}
.prow-tag{
  display:block;
  margin-top:12px;
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tone-ink);
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   11  THE USER FLOWS
   Built in the page rather than exported, so they cannot drift from the
   screens they describe.
   -------------------------------------------------------------------------- */
.uflows{display:grid;gap:clamp(34px,4.4vw,64px)}
.uflow{margin:0;border-top:1px solid var(--line);padding:clamp(20px,2.4vw,30px) 0 0 var(--inset)}
.uflow-head{display:grid;gap:8px;margin-bottom:clamp(20px,2.4vw,30px)}
.uflow-head h4{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(20px,2vw,28px);
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0;
  color:var(--ink);
}
.uflow-head p{margin:0;color:var(--ink-2);max-width:calc(50% - var(--inset))}

.uf{list-style:none;margin:0;padding:0;display:grid;gap:0}
.uf-r{position:relative;display:grid;gap:10px;padding:0 0 26px}
/* THE SPINE. One line down the left of the whole flow, drawn by the row and
   not by a container, so the last row can stop it rather than having to mask
   an overhang. */
.uf-r::before{
  content:"";
  position:absolute;
  left:11px;top:26px;bottom:0;
  width:1px;
  background:var(--line);
}
.uf-r:last-child::before{display:none}
.uf-n{
  position:relative;
  display:block;
  padding:12px 16px 12px 34px;
  border:1px solid var(--line);
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--ink);
  background:var(--face);
}
.uf-n::before{
  content:"";
  position:absolute;
  left:11px;top:50%;
  transform:translate(-50%,-50%);
  width:9px;height:9px;
  border-radius:50%;
  background:var(--line-solid,var(--ink-3));
}
.uf-n em{
  display:block;
  font-style:normal;
  font-weight:400;
  font-size:var(--fs-micro);
  line-height:1.5;
  color:var(--ink-3);
  margin-top:4px;
}
/* The four kinds of node the flows distinguish, and each one is a fact about
   the flow rather than a decoration: where it starts, where it leaves, the
   step the whole feature rests on, and the optional branch. */
.uf-n--in::before,.uf-n--out::before{background:var(--tone)}
.uf-n--key{border-color:var(--tone);border-left-width:3px}
.uf-n--key::before{background:var(--tone)}
.uf-n--opt{border-style:dashed}
.uf-n--back{border-color:var(--tone);background:color-mix(in srgb,var(--tone) 10%,var(--face))}
.uf-n--back b{display:block;font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--tone-ink);margin-bottom:4px}

/* A fork shows the branches side by side and says what decides between them */
.uf-when{
  display:block;
  font-style:normal;
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-left:34px;
  margin-bottom:2px;
}
.uf-r--fork{grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px}
.uf-r--fork .uf-when{grid-column:1/-1}
@media (max-width:820px){
  .uf-r--fork{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   12  THE WIREFRAME SHEETS
   -------------------------------------------------------------------------- */
.wires{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gut);
}
.wires figure{margin:0}
.wires .stage{
  display:block;
  border:1px solid var(--line);
  background:var(--face-2);
  overflow:hidden;
}
/* NOT STRETCHED, AND FULL IN HEIGHT. The three sheets are 1009, 1029 and 997
   wide against the same 1600 tall, so a fixed box would letterbox two of them
   and crop the third. The image keeps its own ratio and the row aligns on the
   caption instead. */
.wires img{display:block;width:100%;height:auto}
.wires figcaption{
  background:var(--face);
  padding:12px var(--inset);
  margin-top:0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
}
.wires figcaption span{color:var(--ink-3);font-weight:400}
.wires a:hover figcaption span{color:var(--tone-ink)}

/* --------------------------------------------------------------------------
   13  THE SCREEN CARDS - all 23 of them
   -------------------------------------------------------------------------- */
/* THE RULE GOES BETWEEN FLOWS, NOT UNDER A FLOW'S OWN HEADING.
   It used to sit on .flow-head's bottom edge, which put a divider between a
   heading and the screens it introduces - so "Flow 02" read as the last thing
   inside Flow 01's group rather than the first thing in its own. A heading
   belongs to what comes after it. The line now opens each flow except the
   first, and the heading sits under it with its screens. */
.flow{margin-bottom:clamp(40px,5vw,76px)}
.flow:last-child{margin-bottom:0}
/* EVERY flow opens on the rule, including the first. Scoping it to .flow +
   .flow left flow one with nothing above it, so the section's own intro
   paragraph and the flow's heading paragraph - same size, same colour, same
   column - ran together as one block of copy. Caught on the screens fold. */
.flow{
  border-top:1px solid var(--line);
  padding-top:clamp(34px,4vw,60px);
  /* Air ABOVE the rule as well as below it - the same both-sides rule .hr now
     follows. Between two flows this collapses against the previous flow's
     margin-bottom, so it only actually adds space before the first one, which
     is exactly where the section intro was landing on the line. */
  margin-top:clamp(34px,4vw,60px);
}
.flow-head{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  align-items:end;
  margin-bottom:clamp(24px,3vw,40px);
}
.flow-head > div{grid-column:1;padding-inline:var(--inset)}
.flow-head > p{
  grid-column:2/4;
  padding-left:var(--inset);
  /* border-box, so the standoff is inside the cap and the copy ends clear of
     rule three rather than on it. Same expression as .body. */
  max-width:calc(50% - var(--inset));
}
.flow-head h3{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(22px,2.4vw,34px);
  line-height:1.18;
  letter-spacing:-.015em;
  margin:8px 0 0;
  color:var(--ink);
}
.flow-head p{margin:0;color:var(--ink-2)}

.screens{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gut);
}
.scard{
  display:grid;
  grid-template-rows:auto auto auto auto 1fr auto;
  padding-inline:var(--inset);
}
.scard-shot{margin-bottom:16px}
.scard-n{
  font-family:var(--disp);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--tone-ink);
  margin-bottom:7px;
}
.scard h3,.scard h4{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(17px,1.6vw,22px);
  line-height:1.24;
  letter-spacing:-.012em;
  margin:0 0 9px;
  color:var(--ink);
}
.scard p{margin:0;color:var(--ink-2);font-size:var(--fs-body)}
.scard-foot{
  margin-top:15px !important;
  padding-top:13px;
  border-top:1px solid var(--line);
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3) !important;
}

/* --------------------------------------------------------------------------
   14  THE PERSONA QUOTE
   -------------------------------------------------------------------------- */
.persona{
  padding-left:var(--inset);
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:clamp(24px,3vw,38px);
  padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line);
}
.persona img{
  width:52px;height:52px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
}
.persona cite{
  font-style:normal;
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.6;
}
.persona cite b{
  display:block;
  font-family:var(--disp);
  font-size:14px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--ink);
}

/* --------------------------------------------------------------------------
   15  THE INLINE LINK
   -------------------------------------------------------------------------- */
.inline-link{
  color:var(--tone-ink);
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}
.inline-link:hover{opacity:.75}

/* --------------------------------------------------------------------------
   16  NARROWING
   The grid is three columns on a desktop and one on a phone, and the step
   between them is two - never a squeezed three. Every rule here is a
   structural collapse; nothing is re-styled smaller.
   -------------------------------------------------------------------------- */
/* GPAY FOLDS EARLIER THAN THE SHARED SYSTEM. Its card grids go two-up at
   1080 - well above the 960 where .split folds - so between those two widths
   the page still had three hairlines over a two-column deck. The interior
   pair goes at this page's own breakpoint, overriding marketplace.css. */
@media (max-width:1080px){
  .rules::before{background-position:0 0, 100% 0;background-image:
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line))}
}

@media (max-width:1080px){
  .hstrip,.screens,.wires{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats > div:nth-child(2){border-right:0}
  .gcards{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* THE INSET STAYS AT ONE COLUMN TOO. Zeroing it here was the same mistake
     marketplace.css made at 960: the interior rules are what one column makes
     redundant, but the OUTER pair is painted at every width, and .wrap pads by
     exactly --gut - so a card flush to its column is a card flush to the left
     margin rule. 110 touches at 760, all of them this. */
  .uflow-head p,.flow-head p,.route-note p{max-width:none}
  .signal,.prow{grid-template-columns:1fr}
  .signal > *,.prow > *{padding-right:var(--inset)}
  .hstrip,.screens,.wires,.routes,.stats{grid-template-columns:1fr}
  .stats > div{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .stats > div:last-child{border-bottom:0}
  .flow-head{grid-template-columns:1fr}
  .flow-head > div,.flow-head > p{grid-column:1;max-width:none;padding-inline:var(--inset)}
  /* Stacked, the heading and its paragraph are no longer two columns sharing a
     baseline - they are one block, and align-items:end leaves them touching. */
  .flow-head > div + p{margin-top:clamp(10px,2.4vw,16px)}
  .prow{grid-template-columns:auto minmax(0,1fr)}
  .prow-tag{grid-column:2;padding-top:10px}
  .tablewrap{border-top:0}
}


/* --------------------------------------------------------------------------
   17  THE NARROW BAND, 960-1200
   The layout is still three columns here but every measure is tighter, and
   three things that fit at 1440 run past the middle rule at 1100. None of
   them is display type, so none of them gets the exemption.
   -------------------------------------------------------------------------- */
@media (max-width:1200px){
  /* The bracketed eyebrow is a flex row - ramp, then label - and at this width
     the label alone is wider than one column. Let it wrap onto a second line
     rather than run through the rule; it is micro-caps, so a second line costs
     14px and reads as deliberate. */
  .eyebrow{flex-wrap:wrap}
  /* ...and the label itself is still wider than one column once it wraps.
     GPAY's chapter names are longer than Marketplace's ("The constraint" vs
     "The install"), so the same tracking that fits there does not fit here.
     .09em buys back about 30px and the caps still read as a stamp. */
  .eyebrow .lab{letter-spacing:.09em}

  /* A fork's condition sits above the branches and spanned the whole row. */
  .uf-when{max-width:calc(50% - var(--inset))}

  /* The persona's attribution is a two-line cite beside a 52px avatar; the
     pair was measured against the full wide column. */
  .persona{max-width:calc(50% - var(--inset))}
}
/* ...but those two caps belong to the three-column band. Once the page is one
   column they halved a phone's measure: "However it / starts", and the
   persona's job title one word per line. */
@media (max-width:960px){
  .uf-when,.persona{max-width:none}
}