/* ==========================================================================
   The Label Board — public website
   Dark navy ground, gold accent, serif headlines over an Inter interface face.
   Photography where a photograph earns its place, and a designed panel where
   the photograph has not arrived yet.
   ========================================================================== */

:root{
  --bg:#06101d;--bg-2:#081524;--panel:#0d1725;--panel-2:#111c2b;
  --line:#223149;--line-soft:rgba(255,255,255,.07);
  --text:#f6f1e7;--dim:#c0c9d4;--faint:#9ba7b8;
  --gold:#e0aa3f;--gold-2:#f0bf57;--on-gold:#171207;
  --green:#3ab77f;--red:#e47c81;--amber:#d9a441;--blue:#6aa8dd;--purple:#9d86d8;
  --shadow:0 30px 60px -30px rgba(0,0,0,.85);
  --shadow-soft:0 16px 34px -22px rgba(0,0,0,.7);
  --r:10px;--r-sm:7px;--r-btn:6px;--r-lg:14px;
  --max:1680px;
  --sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  /* Fraunces, with Georgia behind it rather than a bare `serif`: if the
     web font never arrives, the page should fall back to a face with
     roughly the same width and x-height, or every heading reflows and the
     layout moves under the reader. */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  /* Fraunces is wider and warmer than Georgia at the same size, so the
     tight tracking that suited Georgia now closes the counters up. These
     two are the only places the swap needed a number changed. */
  --serif-track:0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* the specific property, not the background shorthand, so only the colour
     animates and an image is never dragged into the transition */
  transition:background-color .35s ease,color .25s ease;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0;line-height:1.1;letter-spacing:var(--serif-track)}
p{margin:0}
a{text-decoration:none;color:var(--gold)}
a:hover{color:var(--gold-2)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:color-mix(in srgb,var(--gold) 30%,transparent)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

.wrap{width:min(var(--max),calc(100% - 96px));margin:0 auto}
/* ---------- a short page must not leave the footer in mid air ----------
   trial.html, thanks.html and 404.html are shorter than a desktop window,
   so the footer ended where the content did and the rest of the screen was
   empty below it. It reads as though the page failed to finish loading.

   The drawer is position:fixed and the skip link is absolute, so neither is
   a flex child and making the body a column touches nothing else.

   svh rather than vh: on a phone vh is the tallest the viewport ever gets,
   so with the address bar showing, 100vh is already taller than the screen
   and every page would gain a scrollbar it does not need. */
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
main{flex:1 0 auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--on-gold);
  padding:10px 16px;border-radius:0 0 6px 0;z-index:200;font-weight:600}
.skip:focus{left:0}

/* ---------- type helpers ---------- */
.eyebrow{display:block;color:var(--gold-2);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;margin-bottom:11px}
.eyebrow.dim{color:var(--faint)}
/* 17px at 1.7 is a lot of air on a phone, where a lede is usually three or
   four lines directly under a heading. It scales now instead of being one
   size everywhere. */
.lede{color:var(--dim);font-size:clamp(15.5px,1.2vw,17px);line-height:1.6;max-width:62ch}
.small{font-size:13px;color:var(--faint);line-height:1.6}
.num{font-variant-numeric:tabular-nums}
.hl{color:var(--gold-2)}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------- the type scale ----------
   Retuned on 18 Sep. Measured before: on a 390px phone h1 was 38px, h2 was
   28px, and the pricing page ran to 6134px, which is seven and a third screens
   of scrolling. A 28px section heading on a 390px screen is the main offender,
   because every section has one and it sets the spacing around itself too.

   The headings came down and the body did not. 16px body text is correct and
   is not what made the pages long; oversized headings were, along with the
   space they demand either side of them. */
h1{font-size:clamp(32px,4.6vw,56px)}
h2{font-size:clamp(22px,2.7vw,34px);line-height:1.1}
h3{font-size:clamp(18px,1.7vw,21px)}
h4{font-size:16px}
h1 em,h2 em{font-style:normal;color:var(--gold-2)}

/* Padding is top AND bottom, so every number here is paid twice at every seam
   between two sections. 46px on a phone was 92px of empty ground between one
   idea and the next, six or seven times down a page. */
section{padding:clamp(32px,4.4vw,58px) 0;position:relative;border-bottom:1px solid var(--line-soft)}
section.tight{padding:clamp(24px,3.2vw,42px) 0}
section:last-of-type{border-bottom:0}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}
.sec-head{margin-bottom:clamp(16px,2.2vw,26px);max-width:64ch}
.sec-head.center{margin-left:auto;margin-right:auto}
.sec-head h2+.lede,.sec-head h3+.lede{margin-top:14px}
/* the reference's split heading: title left, supporting line right */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:clamp(22px,2.8vw,34px)}
.head h2{max-width:18ch}
.head p{max-width:56ch;color:var(--faint);line-height:1.7;font-size:15px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14px;font-weight:600;padding:13px 20px;border-radius:var(--r-btn);
  border:1px solid #56657a;background:transparent;color:var(--text);cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .16s ease;
  text-align:center;line-height:1.2}
.btn:hover{transform:translateY(-1px);border-color:var(--gold);color:var(--gold-2)}
.btn:active{transform:none}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn-gold:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--on-gold)}
.btn-line{border-color:#56657a}
.btn-quiet{border-color:transparent;color:var(--dim);padding:13px 8px}
.btn-quiet:hover{border-color:transparent;color:var(--gold-2)}
.btn-sm{padding:10px 15px;font-size:13px}
.btn-wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.btn-row.center{justify-content:center}


/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
/* Three columns: wordmark in the left corner, tabs on the centre of the page,
   actions right. The middle column is auto and the outer two are equal, so the
   tabs sit on the centre of the page rather than the centre of whatever is
   left over after the wordmark.

   Each item names its column. Without that, hiding the tabs below 1000px takes
   them out of the grid altogether and the actions get placed into the middle
   column, which parks them next to the wordmark instead of the right edge. */
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:12px;flex:none;color:var(--text);grid-column:1;justify-self:start}
.brand:hover{color:var(--text)}
.brand svg{width:38px;height:38px;flex:none;border-radius:8px}
.brand-name{display:block;font-weight:700;font-size:14px;letter-spacing:.06em}
.brand-sub{display:block;font-size:9.5px;color:var(--faint);letter-spacing:.16em;
  text-transform:uppercase;margin-top:2px}
.hdr-nav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;grid-column:2;justify-self:center}
.hdr-nav>a{display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--dim);padding:9px 13px;border-radius:6px;
  background:none;border:0;cursor:pointer;transition:.16s;font-family:inherit}
.hdr-nav>a:hover{color:var(--text);background:var(--panel)}
.hdr-nav>a.on{color:var(--text)}
/* the current page marker is positioned, not part of the flow: as a block it
   changed the height of that one item and pushed the row about */
.hdr-nav>a{position:relative}
.hdr-nav>a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;
  height:2px;border-radius:2px;background:var(--gold)}
.hdr-act{display:flex;align-items:center;gap:9px;flex:none;grid-column:3;justify-self:end}
.hdr-act .login{font-size:14px;font-weight:500;color:var(--dim);padding:9px 8px}
.hdr-act .login:hover{color:var(--text)}
.burger{display:none;width:38px;height:38px;border-radius:6px;border:1px solid var(--line);
  background:transparent;color:var(--text);cursor:pointer;position:relative;padding:0}
.burger span{position:absolute;left:50%;width:17px;margin-left:-8.5px;height:1.6px;
  background:currentColor;border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.burger span:nth-child(1){top:12.4px}
.burger span:nth-child(2){top:18.2px}
.burger span:nth-child(3){top:24px}
body.menu-open .burger span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

.drawer{position:fixed;inset:74px 0 0;background:var(--bg);z-index:80;padding:20px 24px 40px;
  display:none;flex-direction:column;overflow-y:auto}
body.menu-open{overflow:hidden}
body.menu-open .drawer{display:flex}
.drawer a{font-size:16px;color:var(--text);padding:14px 4px;border-bottom:1px solid var(--line-soft)}
.drawer a.on{color:var(--gold-2)}
.drawer .dgrp{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  padding:20px 4px 6px;font-weight:700}
.drawer .btn{margin-top:20px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:0}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 100%),
    radial-gradient(1100px 620px at 78% 42%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 68%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.02fr;
  gap:34px;align-items:center;min-height:min(600px,84vh);padding:clamp(34px,4vw,56px) 0}
.hero h1{margin-bottom:20px}
.hero .lede{font-size:17.5px;max-width:34em}
.points{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.point{display:flex;gap:10px;align-items:flex-start}
.point .ico{width:24px;height:24px;flex:none;border:1px solid var(--gold);color:var(--gold);
  border-radius:50%;display:grid;place-items:center}
.point .ico svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.point b{font-size:12.5px;font-weight:600;display:block}
.point span{display:block;color:var(--faint);font-size:11px;margin-top:3px}

/* ---------- the product, shown as real screenshots of the app ---------- */
.device{position:relative}

/* ---------- trade tiles ---------- */
/* Flex rather than grid, so a last row that is not full is centred instead of
   pushed against the left. The container is capped at four tiles wide, and the
   tiles grow to fill a line but never past 272, which is what the photographs
   were cut for. */
.trade-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  max-width:1124px;margin-left:auto;margin-right:auto}
.tt{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;display:flex;flex-direction:column;color:var(--text);
  transition:border-color .2s ease,transform .2s ease}
.tt:hover{border-color:var(--gold);transform:translateY(-2px)}
.tt-pic{height:118px;position:relative;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--panel-2),var(--bg-2));border-bottom:1px solid var(--line);
  background-size:cover;background-position:center}
.tt-pic svg{width:30px;height:30px;fill:none;stroke:var(--gold);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.tt-body{padding:12px 13px 14px}
/* beats the global h3 clamp and the .trade-h the panels used to need */
.tt .trade-h{font-family:var(--serif);font-size:14.5px;font-weight:500;margin-bottom:9px}
.tt ul{list-style:none;margin:0;padding:0}
.tt li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.5;
  color:var(--faint);margin-top:5px}
.tt li::before{content:"";position:absolute;left:0;top:7px;width:4px;height:4px;
  border-radius:50%;background:var(--gold);opacity:.75}
.trade-cta{margin-top:22px}

/* ---------- panels, cards, lists ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  transition:border-color .2s ease,transform .2s ease}
.card:hover{border-color:color-mix(in srgb,var(--gold) 40%,var(--line));transform:translateY(-2px)}
.card h3{font-size:20px;margin-bottom:8px}
.card p{color:var(--faint);font-size:14px;line-height:1.65}
.card .ico{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;margin-bottom:13px;
  background:color-mix(in srgb,var(--gold) 13%,transparent);color:var(--gold)}
.card .ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.card a.more{display:inline-block;margin-top:12px;font-size:13px;font-weight:600}
.card ul{list-style:none;margin:12px 0 0;padding:0}
.card ul li{position:relative;padding-left:17px;font-size:14px;color:var(--faint);margin-top:7px}
.card ul li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--gold);opacity:.8}
.mini{display:grid;gap:8px;margin-top:14px}
.mini div{border:1px solid var(--line);background:var(--panel-2);border-radius:var(--r-sm);
  padding:10px 12px;font-size:13px;color:var(--dim)}

.panel{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:16px}

.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,46px);align-items:center}
.row2+.row2{margin-top:clamp(32px,4vw,58px)}
.row2.flip .row2-text{order:2}
.row2-text h2,.row2-text h3{margin-bottom:15px}
.row2-text p{color:var(--dim);font-size:16px;line-height:1.7}
.row2-text p+p{margin-top:13px}
.checks{list-style:none;margin:20px 0 0;padding:0}
.checks li{position:relative;padding-left:28px;margin-top:10px;font-size:15px;color:var(--dim);line-height:1.6}
.checks li strong{color:var(--text);font-weight:600}
.checks li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);
  background:color-mix(in srgb,var(--gold) 14%,transparent)}
.checks li::after{content:"";position:absolute;left:4.8px;top:10.5px;width:6px;height:3px;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg)}

.steps{counter-reset:step;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.step{background:var(--panel);padding:16px 18px 16px 62px;position:relative}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:16px;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold)}
.step h4{font-family:var(--serif);font-size:17px;margin-bottom:4px}
.step p{color:var(--faint);font-size:14px;line-height:1.55}

.callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:18px 20px}
.callout-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.callout-row h4{font-family:var(--serif);font-size:18px;margin-bottom:6px}
.callout-row>div{flex:1;min-width:min(100%,340px)}
.callout-row .btn{flex:none}
.callout p{color:var(--dim);font-size:15px;line-height:1.65}
.callout p+p{margin-top:11px}
.callout strong{color:var(--text)}
.banner{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 13%,var(--panel)),var(--panel));
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:var(--r);
  padding:20px 22px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.banner .bt{flex:1;min-width:240px}
.banner h4{font-family:var(--serif);font-size:19px;margin-bottom:5px}
.banner p{color:var(--dim);font-size:14px}

.founder{border-left:3px solid var(--gold);padding-left:18px;margin-top:22px}
.founder b{display:block;font-size:15px}
.founder span{display:block;color:var(--faint);font-size:12px;margin-top:3px}

/* a photograph slot that looks deliberate while it is empty */
.pic-panel{border:1px solid var(--line);border-radius:var(--r);min-height:340px;
  background:linear-gradient(150deg,var(--panel-2),var(--bg-2));background-size:cover;
  background-position:center;display:grid;place-items:center}
.pic-panel svg{width:56px;height:56px;fill:none;stroke:var(--gold);stroke-width:1.1;opacity:.5}
.pic-panel.shot svg{display:none}

/* the detail a tile opens, in place rather than on another page */
/* the panel heading answers to the section heading above it, so it is smaller
   than the h2 it would have been on a page of its own */
.trade-h{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px}

/* The founder's own page, so his face is in the hero rather than a stock
   workroom. Beside the headline on a desktop, above it on a phone, and
   capped there so a portrait does not take a whole screen before the first
   word. The story underneath keeps its full reading measure: Kayode asked
   once for this page to be a full length read rather than a narrow column
   with something alongside it, and a portrait beside the text would be
   exactly the thing he asked to take out. */
/* The portrait sits to the LEFT of the story rather than above it, so the
   reader meets the person and the first sentence at the same moment.

   It is sticky, because the story is long and a portrait that scrolls away
   in the first screen may as well not be there. Sticky rather than fixed:
   it stops at the end of its own column instead of following you into the
   footer.

   The grid is capped at 300px + 820px because 820 is the reading measure
   the story was already set at, and widening the text to make room for a
   picture would be paying for the picture with the thing the page is for. */
/* Two items only: the picture column and the text column. The signature
   used to be a third, which in a two column grid means it wraps onto a new
   row under the picture and the sticky picture then scrolls over it. It is
   inside .story-pic now, so the name cannot be separated from the face it
   belongs to and nothing can pass over it.

   The text column takes what is left of 1240px rather than being capped at
   820, because 820 inside a 1680px wrap left a band of empty ground down
   both sides and the page read as pinched. The type goes up a point to pay
   for the longer line. */
/* .story.story-2col, not .story-2col: the plain .story rule is declared
   LATER in this file and caps the block at 820px, so a single class name
   loses on source order and the two column grid was being squeezed into
   820 — 300 for the picture and 456 for the text, which is the narrow
   centre strip with empty ground either side. */
/* The block fills 1560 of the 1680 wrap. The extra width goes to the
   PHOTOGRAPH, not to the line: past about 105 characters the eye starts
   losing its place coming back to the left, so growing the text column to
   fill a wide screen would trade readability for the appearance of using
   the space. A 520px portrait uses it and stays readable. */
.story.story-2col{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(28px,4vw,76px);align-items:start;max-width:1500px;margin:0 auto}
/* Sticky, not fixed: it stops at the end of its own column instead of
   following the reader into the footer. top clears the sticky header. */
.story-pic{position:sticky;top:104px;align-self:start}
.story-pic img{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--shadow-soft)}
/* As a caption it needs no rule above it: the picture is the divider. */
.story-pic .sig{margin-top:16px;padding-top:0;border-top:0}
.story-text p{font-size:15px;line-height:1.5}
@media(max-width:900px){
  .story.story-2col{grid-template-columns:minmax(0,1fr);max-width:820px}
  .story-pic{position:static;max-width:260px}
  .story-text{margin-top:6px}
  .story-text p{font-size:13px;line-height:1.5}
}

/* One line held out of the paragraph above it, large, for rhythm in a long
   read. It repeats text that is already there, which is what a pull quote
   is, so it carries aria-hidden and a screen reader hears it once. */
.pull{margin:34px 0;padding:0 0 0 22px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:clamp(21px,2.5vw,29px);line-height:1.28;
  color:var(--text);letter-spacing:var(--serif-track)}
@media(max-width:760px){.pull{margin:26px 0;padding-left:16px}}

/* the long read on the story page: one column at a reading measure, centred,
   with its aside underneath rather than beside it */
.story{max-width:820px;margin:0 auto}
.story-text p{max-width:none}
/* the heading has no bottom margin of its own, so the first paragraph sits on
   top of it without this */
.story-text h2{margin-bottom:18px}
.story-aside{margin-top:34px}

/* ---------- proof strip ---------- */
.strip{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-2)}
.strip-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft)}
.strip-cell{background:var(--bg-2);padding:18px 16px;text-align:center}
.strip-cell .v{font-family:var(--serif);font-size:26px;color:var(--gold-2)}
.strip-cell .k{font-size:12px;color:var(--faint);margin-top:4px;line-height:1.45}

/* ---------- pricing ---------- */
/* the currency picker, beside the billing period */
.ccy-slot{display:inline-flex}
.ccy{font-size:13px;font-weight:600;color:var(--text);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-btn);padding:9px 11px;cursor:pointer}
.ccy:hover{border-color:var(--gold)}
.plan-switch{display:inline-flex;align-items:center;gap:3px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-btn);padding:3px}
.plan-switch button{border:0;background:transparent;color:var(--faint);font-size:13.5px;font-weight:600;
  padding:9px 18px;border-radius:4px;cursor:pointer;transition:.2s;font-family:inherit}
.plan-switch button.on{background:var(--gold);color:var(--on-gold)}
.save-note{font-size:12.5px;color:var(--green);margin-left:12px;font-weight:600}
/* start, not stretch. Equal heights meant Bespoke, with five bullets to
   Pro's eight, carrying three bullets of empty card. */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 17px;
  display:flex;flex-direction:column;position:relative}
.plan.feat{border-color:color-mix(in srgb,var(--gold) 50%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 14%,transparent)}
.plan-tag{position:absolute;top:-11px;left:20px;background:var(--gold);color:var(--on-gold);
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;
  border-radius:20px}
.plan h3{font-size:22px}
.plan .who{color:var(--faint);font-size:13px;margin-top:5px;min-height:38px;line-height:1.45}
.price{display:flex;align-items:baseline;gap:4px;margin:12px 0 3px}
.price .cur{font-size:19px;color:var(--dim)}
.price .amt{font-family:var(--serif);font-size:38px;font-variant-numeric:tabular-nums}
.price .per{font-size:13px;color:var(--faint)}
.price-note{font-size:12.5px;color:var(--faint);min-height:19px}
.plan .btn{margin:12px 0 0}
.plan-feats{list-style:none;margin:14px 0 0;padding:13px 0 0;border-top:1px solid var(--line)}
.plan-feats li{position:relative;padding-left:21px;margin-top:7px;font-size:13.5px;line-height:1.4;color:var(--dim)}
.plan-feats li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:4px;
  border-left:1.7px solid var(--gold);border-bottom:1.7px solid var(--gold);transform:rotate(-45deg)}
.plan-feats li.hd{padding-left:0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-top:15px;font-weight:700}
.plan-feats li.hd::before{display:none}
/* What a plan does not include, so the gap is visible rather than something
   you only find out later. Quieter than the ticks on purpose: it should read
   as what you would gain by moving up, not as a list of complaints. */
.plan-feats li.no{color:var(--faint);opacity:.85}
.plan-feats li.no::before{border:0;left:1px;top:6px;width:9px;height:9px;transform:none;
  background:
    linear-gradient(to bottom right,transparent 44%,currentColor 44%,currentColor 56%,transparent 56%),
    linear-gradient(to bottom left,transparent 44%,currentColor 44%,currentColor 56%,transparent 56%);
  opacity:.75}
/* the first one starts a new group, so it needs a little air above it */
.plan-feats li:not(.no)+li.no{margin-top:15px;padding-top:13px;border-top:1px dashed var(--line)}
/* that first one carries the divider padding, so its mark has to come down
   with the text rather than float in the gap above it */
.plan-feats li:not(.no)+li.no::before{top:19px}

.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{text-align:left;padding:13px 17px;border-bottom:1px solid var(--line);font-size:14px}
thead th{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  background:var(--panel-2);font-weight:700;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.c,th.c{text-align:center}
td{color:var(--faint)}
td:first-child{color:var(--text)}
td .yes{color:var(--green);font-weight:600}
td .no{color:var(--faint)}
tbody tr.grp td{background:var(--panel-2);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.tw-hint{display:none;font-size:12.5px;color:var(--faint);margin-top:10px}
.disclose{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.disclose>summary{list-style:none;cursor:pointer;padding:15px 19px;display:flex;align-items:center;
  gap:10px;font-size:14px;font-weight:600;transition:.18s}
.disclose>summary::-webkit-details-marker{display:none}
.disclose>summary:hover{color:var(--gold-2)}
.disclose>summary::after{content:"";width:8px;height:8px;border-right:1.7px solid var(--gold);
  border-bottom:1.7px solid var(--gold);transform:rotate(45deg);margin-left:auto;margin-top:-3px;
  transition:transform .22s ease}
.disclose[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.disclose[open]>summary{border-bottom:1px solid var(--line)}
.disclose>summary .cnt{font-weight:400;color:var(--faint)}
.disclose .tw{border:0;border-radius:0}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 16px;
  text-align:center}
.tier .nm{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700}
.tier .rt{font-family:var(--serif);font-size:34px;color:var(--gold-2);margin:9px 0 4px}
.tier .cd{font-size:13px;color:var(--dim)}
.tier.now{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer;padding:10px 44px 10px 0;position:relative;
  font-family:var(--serif);font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:17px;width:9px;height:9px;
  border-right:1.7px solid var(--gold);border-bottom:1.7px solid var(--gold);
  transform:rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:21px}
.faq .ans{padding:0 40px 13px 0;color:var(--faint);font-size:14.5px;line-height:1.55}
.faq .ans p+p{margin-top:9px}

/* ---------- tabs ---------- */
/* the way back from a deep link, above the tabs it landed you in */
.backlink{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--faint);margin-bottom:16px}
.backlink::before{content:"";width:7px;height:7px;border-left:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
.backlink:hover{color:var(--gold-2)}
.backlink:hover::before{transform:rotate(45deg) translate(-2px,2px)}

/* The product title sits under the list of areas now, not above it: it is
   the name of what you just opened rather than a hero. It needs air off the
   tabs, and less underneath, because the pane follows it. */
[data-feat-title]{margin-top:30px;margin-bottom:6px}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tab{font-size:13px;font-weight:600;padding:9px 15px;border-radius:var(--r-btn);
  border:1px solid var(--line);background:transparent;color:var(--faint);cursor:pointer;
  transition:.18s;font-family:inherit}
.tab:hover{color:var(--text);border-color:var(--gold)}
.tab.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
html.js-on .pane{display:none}
html.js-on .pane.on{display:block;animation:rise .28s ease both}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------- forms ---------- */
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,28px)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
/* .lbl is for a group of radios, which is labelled by a span rather than a
   <label>, because a label has to point at one control and a group is not one */
.field label,.field .lbl{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
.field label .req{color:var(--gold)}
.field input,.field select,.field textarea{background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 13px;font-size:15px;outline:none;width:100%;
  font-family:inherit;color:var(--text);transition:border-color .18s ease}
.field textarea{resize:vertical;min-height:100px;line-height:1.55}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field .hint{font-size:12.5px;color:var(--faint)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.form-foot{margin-top:20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.form-foot .small{flex:1;min-width:220px}
.field label.check,.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--dim);
  text-transform:none;letter-spacing:normal;line-height:1.5;font-weight:400}
.check input{width:17px;height:17px;margin-top:2px;accent-color:var(--gold);flex:none}

/* ---------- CTA and footer ---------- */
.cta{background:var(--bg-2)}
.cta h2{margin-bottom:14px}
.ftr{padding:clamp(28px,3.2vw,40px) 0 22px;background:#050b13;border-top:1px solid var(--line)}
/* Four children, not five: the Your trade column came out on 20 Sep. A
   grid that still declares five leaves a dead column on the right and the
   footer reads as though something failed to load. */
.ftr-top{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:22px;
  padding-bottom:22px;border-bottom:1px solid var(--line-soft)}
/* the contact column: the same list, but the last line is an address rather
   than a link, so it needs a little air above it */
.ftr-talk .small{margin-top:10px;color:var(--faint);font-size:12.5px;line-height:1.5}
.ftr-about p{color:var(--faint);font-size:13px;margin-top:11px;max-width:34ch;line-height:1.55}
.ftr h5{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  margin:0 0 10px;font-weight:700}
.ftr ul{list-style:none;margin:0;padding:0}
/* The row was 26px of which 17 was clickable: the li kept the body line
   height and the anchor sat on it with no padding of its own, so the extra
   was dead space AND not a tap target. Same fix as the phone: leading off
   the li, real padding on the anchor. Shorter row, bigger target. */
.ftr ul li{margin-bottom:2px;line-height:1.3}
.ftr ul a{color:var(--faint);font-size:13px;line-height:1.3;display:inline-block;padding:4px 0}
.ftr ul a:hover{color:var(--gold-2)}
.ftr-bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding-top:16px}
.ftr-bot .small{margin:0}
.ftr-bot nav{display:flex;gap:18px;flex-wrap:wrap}
.ftr-bot nav a{font-size:12.5px;color:var(--faint)}
.ftr-bot nav a:hover{color:var(--gold-2)}

/* ---------- inner page hero ---------- */
.phero{padding:clamp(34px,4vw,58px) 0 clamp(24px,3vw,36px);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;top:-240px;left:50%;transform:translateX(-50%);
  width:900px;height:560px;pointer-events:none;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--gold) 10%,transparent) 0%,transparent 68%)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(27px,3.5vw,42px);margin-bottom:12px}
.phero .lede{font-size:17px}

/* ---------- misc ---------- */
.note{font-size:13px;color:var(--faint);margin-top:14px}
.badge-soft{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;padding:5px 11px;border-radius:20px;
  background:color-mix(in srgb,var(--gold) 13%,transparent);color:var(--gold-2);
  border:1px solid color-mix(in srgb,var(--gold) 28%,transparent)}
.badge-soft.green{background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green);
  border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.split-list{columns:2;column-gap:34px}
.split-list li{break-inside:avoid}
.anchor{scroll-margin-top:92px}
.for-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px 8px;margin-top:20px;
  font-size:12px;color:var(--faint)}
.for-row span{border:1px solid var(--line);border-radius:20px;padding:4px 11px;color:var(--dim);white-space:nowrap}
.reveal{opacity:1}
html.js-on .reveal{opacity:0;transform:translateY(14px)}
html.js-on .reveal.in{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}

/* ---------- long form pages ---------- */
/* a long read sits in the middle of a wide screen rather than hugging the left */
.prose{max-width:74ch;margin:0 auto}
.prose h2{font-size:clamp(22px,2.6vw,28px);margin-top:44px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;margin-top:28px}
.prose p{color:var(--dim);margin-top:13px;line-height:1.75}
.prose ul,.prose ol{color:var(--dim);margin:13px 0 0;padding-left:22px;line-height:1.75}
.prose li{margin-top:8px}
.prose strong{color:var(--text)}
.prose .updated{font-size:12px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:24px 0 8px}
.toc h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:11px;font-weight:700}
.toc ul{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.toc li{margin-top:7px;break-inside:avoid}
.toc a{font-size:14px}

/* ---------- responsive ---------- */
/* seven across needs 1484px of content, so below a 1580px window the strip
   goes to four and three. minmax lets a tile give up width instead of pushing
   the page sideways, which is what a fixed 200px did between 938 and 681. */

@media (max-width:1000px){
  .hdr-nav{display:none}
  .hdr-act .login{display:none}
  .burger{display:block}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:34px;min-height:0}
  .row2{grid-template-columns:minmax(0,1fr)}
  .row2.flip .row2-text{order:0}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:minmax(0,1fr);max-width:460px;margin:0 auto}
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-about{grid-column:1 / -1}
  .head{display:block}
  .head p{margin-top:14px}
}
/* The one sentence that sits under every trial button on the site. It is
   held in SITE.trial.reassurance and repeated verbatim rather than
   paraphrased, because a card IS required and three wordings of that is
   three chances for one of them to soften into a promise we do not keep. */

@media (max-width:680px){
  .wrap{width:calc(100% - 32px)}
  /* On a phone the tabs are gone and the burger is back beside the buttons, so
     the row is wordmark, empty middle, burger. The gold button comes off here:
     at 360px it has to share 328px with the wordmark and the burger and ends
     up wrapping onto two lines. Every hero carries the same button, and so
     does the drawer the burger opens, so nothing is actually lost. */
  .hdr-in{height:66px;gap:10px;grid-template-columns:auto minmax(0,1fr) auto}
  .drawer{inset:66px 0 0}
  .brand svg{width:32px;height:32px}
  .brand{gap:10px}
  .brand-name{font-size:12.5px;letter-spacing:.05em}
  .brand-sub{font-size:8.5px;letter-spacing:.13em}
  .hdr-act .btn{display:none}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .g-2up{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .g-2up .card{padding:14px 13px}
  .g-2up .card h3{font-size:15px;margin-bottom:5px;line-height:1.25}
  .g-2up .card p{font-size:12.8px;line-height:1.45}
  .g-2up .card .ico{width:26px;height:26px;border-radius:7px;margin-bottom:8px}
  .g-2up .card .ico svg{width:14px;height:14px}
  .g-2up .card a.more{font-size:12px;margin-top:9px}
  .strip-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .split-list{columns:1}
  .ftr-top{grid-template-columns:minmax(0,1fr);gap:26px}
  .price .amt{font-size:32px}
  .btn-row .btn{width:100%}
  .points{gap:16px}
  .point{width:calc(50% - 8px)}
  th,td{padding:12px 13px;font-size:13.5px}
  table{min-width:540px}
  .tw-hint{display:block}
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -16px 16px;padding:0 16px 2px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none}
  .toc ul{columns:1}
  .for-row{font-size:11.5px;gap:6px}
  .for-row span{padding:3px 9px}
  .pic-panel{min-height:190px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html.js-on .reveal{opacity:1;transform:none}
}
@media print{
  .hdr,.drawer,.cta,.btn-row{display:none}
  body{background:#fff;color:#000}
}

/* ---------- photographs, once they arrive ---------- */
.tt-pic img,.pic-panel img{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;filter:brightness(.97) saturate(.9) contrast(1.03)}
.pic-panel{position:relative;overflow:hidden}
.pic-panel.has-photo{background-image:linear-gradient(rgba(6,16,29,.3),rgba(6,16,29,.42)),var(--photo)}
.pic-panel.has-photo svg{display:none}
/* cover, not a fixed 62% by 100%: that second value stretched the picture to
   the height of the band whatever shape it was. The gradient is what keeps the
   headline readable, so it can do the darkening on its own and the photograph
   can be left close to how it was made. */
.hero-bg.has-photo{
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 30%,color-mix(in srgb,var(--bg) 86%,transparent) 50%,color-mix(in srgb,var(--bg) 52%,transparent) 100%),
    var(--photo) right center/cover no-repeat,var(--bg);
  filter:saturate(.88)}
@media (max-width:1000px){
  .hero-bg.has-photo{background:linear-gradient(color-mix(in srgb,var(--bg) 84%,transparent),color-mix(in srgb,var(--bg) 93%,transparent)),var(--photo) center/cover,var(--bg)}
}

/* the hero composite, which carries its own dark ground */
.device .shot{display:block;width:100%;height:auto;border-radius:var(--r);
  box-shadow:var(--shadow)}

/* ---------- shorter on a phone ----------
   Four rows of trade tiles is half a screen of scrolling for one idea, so on a
   phone they become one row you swipe. Same for anything else that stacks into
   a column of near empty boxes. */
/* Below 900 the eight tiles become one row you swipe rather than a grid.
   Stacking them two up measured 1247px on a 390 phone, which is longer than
   the panels this replaced, so the swipe row that was already here stays and
   the tile only grows enough to hold its three lines. */
@media (max-width:900px){
  .trade-tiles{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -16px;
    padding:0 16px 4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .trade-tiles::-webkit-scrollbar{display:none}
  .tt{flex:0 0 196px;scroll-snap-align:start}
  .tt:hover{transform:none}
  .tt-pic{height:92px}
  .tt-body{padding:10px 11px 12px}
  .tt .trade-h{font-size:13px;margin-bottom:7px}
  .tt li{font-size:11.5px;margin-top:4px;padding-left:12px}
  .tt li::before{top:6px;width:3.5px;height:3.5px}
}

@media (max-width:680px){
  /* four small numbers fit across a phone perfectly well */
  .strip-in{grid-template-columns:repeat(4,minmax(0,1fr))}
  .strip-cell{padding:14px 6px}
  .strip-cell .v{font-size:19px}
  .strip-cell .k{font-size:10px;line-height:1.35}
  /* a decorative picture beside body copy is the first thing to go */
  .row2 .pic-panel{display:none}
}

/* ---------- a long legal page, folded ---------- */
.disclose.legal{margin-top:8px;background:transparent;border-color:var(--line-soft)}
.disclose.legal>summary{font-family:var(--serif);font-size:17px;font-weight:500;padding:14px 18px}
.disclose.legal[open]{background:var(--panel)}
.legal-body{padding:4px 18px 18px}
.legal-body p:first-child{margin-top:8px}

/* the footer repeats on every page, so every pixel in it is paid for twelve
   times. On a phone it loses its blurb and the three lists sit side by side. */
@media (max-width:680px){
  .ftr{padding:28px 0 20px}
  .ftr-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;padding-bottom:16px}
  .ftr-about{grid-column:1 / -1}
  .ftr-about p{display:none}
  .ftr h5{margin-bottom:9px;font-size:10px}
  .ftr ul li{margin-bottom:6px}
  .ftr ul a{font-size:12.5px}
  /* the contact block reads across rather than down on a phone */
  .ftr-talk{grid-column:1 / -1;border-top:1px solid var(--line-soft);padding-top:14px}
  .ftr-talk ul{display:flex;flex-wrap:wrap;gap:5px 18px}
  .ftr-talk ul li{margin-bottom:0}
  .ftr-talk .small{margin-top:8px}
  .ftr-talk .small br{display:none}
  .ftr-bot{padding-top:14px;gap:8px}
  .ftr-bot nav{gap:14px}
  /* the final call to action does not need to be a full screen either */
  .cta{padding:34px 0}
  .cta .lede{font-size:15.5px}
}

/* ---------- pictures are never asked to stretch past their own pixels ----------
   The trade tiles are photographs 1000px wide and the product shots are
   captures of the running app at 1180. Both have a ceiling before they soften,
   so nothing below draws them larger than they really are.

   Nothing here may set a height on a tile picture. This block sits after the
   phone and tablet breakpoints and carries the same specificity, so a height
   written here silently wins over both of them, and the phone ends up with a
   164px picture in a 134px wide swipe tile. That is exactly what happened. */

.tt-pic{position:relative}
/* a navy wash over every tile, so a bright studio and a dark workshop sit together */
.tt-pic::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 30%,transparent))}
.tt-pic svg{position:relative;z-index:0}


/* ---------- line length ----------
   The container got wider so the page uses the screen, but a paragraph that
   runs the full half of a 1680px layout is about ninety characters a line and
   nobody reads that comfortably. Text keeps its own measure. */
.row2-text p,.row2-text .checks,.callout p{max-width:62ch}
.card p,.card ul{max-width:56ch}
.step p{max-width:74ch}


/* ==========================================================================
   ONE THEME, TWO GROUNDS
   The page is dark by default. A section can stand on the light ground by
   taking the class, which swaps the tokens for everything inside it. Nothing
   else in the stylesheet needs to know: every component already reads these.

   The rhythm is deliberate. Dark carries the hero, the product screens, the
   closing call and the footer. Light carries the parts people actually read.
   ========================================================================== */
.on-light{
  --bg:#f7f4ef;--bg-2:#efe9e0;--panel:#ffffff;--panel-2:#f4f0ea;
  --line:rgba(12,22,36,.15);--line-soft:rgba(12,22,36,.10);
  --text:#0d1726;--dim:#3a4657;--faint:#6a7587;
  --gold:#a9761f;--gold-2:#7a5514;--on-gold:#ffffff;
  --green:#1c7a52;--red:#a63b3f;--amber:#8a5f14;--blue:#1b5f86;--purple:#5b45a0;
  --shadow:0 24px 46px -28px rgba(12,22,36,.28);
  --shadow-soft:0 12px 28px -20px rgba(12,22,36,.2);
  background:var(--bg);
  color:var(--text);
  border-bottom-color:var(--line-soft);
}
/* the gold button keeps its warmth on the light ground rather than going brown */
.on-light .btn-gold{background:#d99b2c;border-color:#d99b2c;color:#17120a}
.on-light .btn-gold:hover{background:#c98a1f;border-color:#c98a1f;color:#17120a}
.on-light .btn{border-color:rgba(12,22,36,.28);color:var(--text)}
.on-light .btn:hover{border-color:var(--gold);color:var(--gold-2)}
/* a photograph on the light ground is not fighting white text any more */
.on-light .tt-pic img,.on-light .pic-panel img{filter:none}
.on-light .tt-pic::after{background:linear-gradient(180deg,transparent,rgba(12,22,36,.10))}
.on-light .tt-pic{background:linear-gradient(150deg,#e8e1d6,#f2ece3)}
.on-light .step::before{background:rgba(169,118,31,.15);color:var(--gold-2)}
.on-light .checks li::before{border-color:rgba(169,118,31,.5);background:rgba(169,118,31,.14)}
.on-light .checks li::after{border-left-color:var(--gold);border-bottom-color:var(--gold)}
/* where a light section meets a dark one, the seam is a hairline of neither */
.on-light + section,section + .on-light{border-top:0}

/* ---------- real screenshots of the software ----------
   These are captures of the running app with the demo account in it, so what
   the site shows and what the demo shows are the same thing. */
.shot{display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow)}
.shot-phone{position:absolute;right:-38px;bottom:-34px;width:158px;height:auto;
  border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);z-index:3}
@media (max-width:1000px){.shot-phone{width:128px;right:-10px;bottom:-20px}}
@media (max-width:680px){.shot-phone{display:none}}

/* ---------- the one thing that moves in the hero ----------
   Four live bars sitting exactly on top of the four in the screenshot, so
   Team workload fills once as the page arrives and then stops. The hero is a
   flat PNG, so anything that moves has to be drawn over it.

   Bars, not the Active Orders number: a bar is a rectangle and rgb(201,162,75)
   is rgb(201,162,75), so the match is exact. Matching a typeface, its weight
   and its colour well enough to fool the eye is where this kind of thing
   usually looks cheap.

   Every figure below was measured out of dash.png's pixels, not eyeballed:
   the track runs x1043..1188 at 1700px wide, which is 61.353% to 69.882%, and
   each bar is 12px tall on a 1063px image, with the tops nudged up 2px after
   comparing the drawn boxes against the image's own. Percentages, so it holds at every
   width. The colours are sampled from the image itself.

   The span is the track and covers the screenshot's own bar; the ::after is
   the gold growing over it. Without that cover there is nothing to reveal,
   because the bar underneath is already full. */
.wl{position:absolute;inset:0;pointer-events:none}
.wl span{position:absolute;left:61.353%;width:8.529%;height:1.129%;
  background:rgb(29,32,41);border-radius:999px;overflow:hidden}
.wl span:nth-child(1){top:86.830%}
.wl span:nth-child(2){top:90.593%}
.wl span:nth-child(3){top:94.356%}
.wl span:nth-child(4){top:98.213%;height:1.035%}
.wl span::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);
  background:rgb(201,162,75);border-radius:999px;
  transform:scaleX(0);transform-origin:left center;
  animation:wlfill .85s cubic-bezier(.22,.7,.3,1) forwards}
.wl span:nth-child(2)::after{animation-delay:.09s}
.wl span:nth-child(3)::after{animation-delay:.18s}
.wl span:nth-child(4)::after{animation-delay:.27s}
@keyframes wlfill{to{transform:scaleX(1)}}
/* Somebody who has asked for less movement gets the screenshot as it is: the
   bars simply stand at their real lengths. */
@media (prefers-reduced-motion:reduce){
  .wl span::after{animation:none;transform:scaleX(1)}
}
/* Under 680px the hero image is small enough that a 5px bar filling is noise
   rather than life, and the phone overlay is already hidden at this width. */
@media (max-width:680px){.wl{display:none}}

/* ---------- the story page ----------
   A long read carried by one voice, so it is set at one size the whole way
   down. An avatar, an oversized opening paragraph and a lifted pull quote were
   all tried here and all taken out again: three type treatments in one column
   read as a page that could not decide, which is the opposite of what a story
   about doing one thing properly should look like. What is left is the
   paragraphs, and a signature so you know who was talking. */
/* A long read wants air between paragraphs. 14px was set when this
   page was five short ones. */
.story-text p+p{margin-top:15px}

.sig{margin-top:32px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-family:var(--serif);font-size:19px;color:var(--text)}
.sig span{display:block;margin-top:6px;font-family:var(--sans);font-size:11px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* a decorative photograph beside body copy is hidden on a phone, and that is
   right for every other one on the site. This one is the section, not a
   garnish, so it stays. */
@media (max-width:680px){
  .row2 .pic-panel.keep{display:grid;min-height:196px}
}

/* ---------- the contact form, centred ----------
   It used to sit in the right half of a row with a paragraph of explanation
   beside it. Nobody reads the paragraph: they came to type. One centred column
   at the same measure as the story page, so the site has one reading width. */
.form-wide{max-width:820px;margin:0 auto}

/* how they would like to be answered, asked rather than assumed. This replaced
   a callout that told everyone to use WhatsApp if it was urgent, which is not
   a thing we get to decide for them. */
.pick{display:flex;flex-wrap:wrap;gap:9px}
.pick label{display:flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel-2);border-radius:999px;
  padding:9px 16px;font-size:14px;color:var(--dim);
  letter-spacing:0;text-transform:none;font-weight:400;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.pick input{width:15px;height:15px;margin:0;flex:none;accent-color:var(--gold)}
.pick label:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
/* the radio dot already shows the state, so a browser without :has() loses the
   highlight and nothing else */
.pick label:has(input:checked){border-color:var(--gold);color:var(--text);
  background-color:color-mix(in srgb,var(--gold) 10%,var(--panel-2))}


/* ---------- a section heading whose supporting line runs wide ----------
   .sec-head holds itself to 64ch, which is right for a heading and its lede
   sitting in a column of text. Under a centred heading, on a full width band,
   that same 64ch stacks a long sentence into a cramped little block with a
   lot of empty page either side of it.

   .wide lifts the cap off the container and .lede-wide sets its own, longer
   measure. Still centred, so whatever falls onto a second line is centred
   under the first rather than hanging off to the left. */
.sec-head.wide{max-width:none}
.lede-wide{max-width:88ch;margin-left:auto;margin-right:auto}
@media (max-width:680px){
  /* on a phone there is no room to run wide and a centred ragged block is
     harder to read than a left aligned one, so it goes back to normal */
  .lede-wide{max-width:none;text-align:left}
}

/* ---------- the waiting list and the countdown ----------
   One row under the hero's two buttons: the thing that does something, and
   the clock that says why you might want to do it now. Below rather than
   beside, because three equal buttons in a hero is three things competing and
   none of them winning. */
.opens-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}

/* Four segments, in the same shape as the numbers everywhere else on this
   site: a panel, a serif figure in gold, a small uppercase label under it. */
.clock{display:flex;gap:7px}
.clock[hidden]{display:none}
.seg{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:8px 4px 7px;min-width:52px;text-align:center}
.seg b{display:block;font-family:var(--serif);font-weight:600;font-size:21px;
  line-height:1;color:var(--gold-2);
  /* the seconds change every second, and in a proportional face the whole row
     re-flows as the digits change width, which reads as a twitch */
  font-variant-numeric:tabular-nums}
.seg span{display:block;margin-top:5px;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:var(--faint)}

/* the sentence the clock replaces, which stays for anything reading the page
   aloud. Not display:none, which would take it out of the accessibility tree
   along with everything else. */
.opens{font-size:13.5px;color:var(--faint);margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:680px){
  /* the button goes full width like every other button on a phone, and the
     clock sits under it on its own line rather than being squeezed alongside */
  .opens-row .btn{width:100%}
  .clock{width:100%}
  .seg{flex:1;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  /* the numbers still count: this is information, not decoration, and nothing
     here animates. Left as a note so nobody adds a flip or a fade later. */
  .seg b{transition:none}
}


/* ---------- air in the hero ----------
   Kayode's numbers, off the spacing tool, at 1280 and at 390.

   The shape of it is the part worth keeping: the buttons, the waiting list
   and the clock are ONE group, and all the air goes above them. I had it
   backwards twice, putting space between the buttons and the waiting list to
   separate them, which is what made it read as three crowded things instead
   of two calm ones.

   The phone wants MORE than the laptop, not less, which is why this is not a
   clamp. A clamp only scales up with the viewport. On a phone the hero is a
   tall single column and the headline needs more room under it, not less. */
.hero .eyebrow{margin-bottom:clamp(16px,2vw,24px)}
.hero .btn-row{margin-top:104px}
.hero .opens-row{margin-top:8px}
@media (min-width:900px){
  .hero .btn-row{margin-top:90px}
}

/* ---------- the plan feature lists, folded on a phone ----------
   Above 680px nothing here applies: all three cards sit side by side, the
   lists are short enough to read at a glance, and the button is not shown.

   Below it, the cards stack and the lists become four screens of thumb, so
   each one shows four and the rest waits behind the button.

   `is-collapsed` and `over` are both put on by JavaScript. Nothing is hidden
   until the button that reveals it exists, so a visitor with no script gets
   the whole list rather than a shortened one with no way to open it. */
.plan-more{display:none}
@media (max-width:680px){
  .plan-feats.is-collapsed li.over{display:none}
  .plan-more{display:block;width:100%;margin-top:14px;padding:11px 12px;
    background:transparent;border:1px solid var(--line);border-radius:var(--r-btn);
    color:var(--gold-2);font:inherit;font-size:13px;font-weight:600;
    cursor:pointer;transition:border-color .16s ease,color .16s ease}
  .plan-more:hover{border-color:var(--gold);color:var(--gold)}
}

/* ---------- the hero: text higher, screenshot smaller ----------
   Two things were wrong with the balance.

   The grid was 1fr 1.02fr, so the screenshot column was WIDER than the words.
   The product picture was winning an argument with the headline, on the one
   screen where the headline has to win.

   And both columns were vertically centred, which floated the text block down
   into the middle of a 600px hero. The words now start at the top and the
   screenshot stays centred against them, so the headline is the first thing at
   eye level rather than the thing under the fold of the picture. */
/* SCOPED TO THE TWO COLUMN WIDTHS. Written unscoped first, and because this
   file is cascade-ordered it beat the single column rule at line 531, so on a
   phone the hero stayed a 1.15/0.85 grid: the headline was squeezed into a
   third of a 390px screen, one word per line, with the screenshot shrunk into
   the gap beside it. A later rule wins, including on the screens you were not
   thinking about. */
@media (min-width:981px){
  .hero-grid{grid-template-columns:1.15fr 0.85fr;
    /* The hero was pinned to min-height:600px while its content only needs
       532 at 1280, so the bottom 121px was photograph with nothing on it. It
       showed as a dead band under the clock. Height comes from the content
       now, and the padding below it is the only space left down there.
       Measured at three widths: 601px everywhere before, 488 / 532 / 541
       after, with nothing moved except the floor coming out. */
    min-height:0}
  /* Both columns start at the top of the hero rather than floating in the
     middle of it: the headline is the first thing at eye level, and the
     screenshot sits alongside it instead of below its fold. */
  .hero-grid>div:first-child{align-self:start}
  .hero .device{align-self:start}

  /* THE BUTTONS MUST NOT COME UP WITH THE HEADLINE.
     Top-aligning the column lifted everything inside it by 68px, measured,
     and Kayode asked for the headline to move and the buttons to stay. So
     they get the 68px back: 90 + 68. The 90 is the gap he picked himself off
     the spacing tool, and it is still the gap he picked, applied from a
     headline that now starts higher up. */
  .hero .btn-row{margin-top:158px}
}
/* a ceiling as well as a share of the grid, so it stops growing on a wide
   screen where 0.85fr of 1680px is still enormous */
.hero .device{max-width:760px;margin-left:auto}
@media (max-width:980px){
  /* stacked, so the share of a row means nothing and the cap is what matters.
     Nothing above applies here, so the phone keeps the 104px it was given. */
  .hero-grid>div:first-child{align-self:auto}
  .hero .device{max-width:none;margin-left:0;align-self:auto}
}

/* ---------- the product tab row ----------
   Ten tabs left aligned wrapped into two ragged rows with a long gap at the
   end of the second, which read as a control panel rather than a choice. The
   same ten are in the header's Products menu now, so this row is a second way
   in rather than the only one, and it can afford to be quieter: centred, so
   whatever falls onto a second line is centred under the first, and tighter,
   so ten of them do not sprawl. */
.features-tabs{justify-content:center;gap:5px;margin-bottom:16px}
.features-tabs .tab{font-size:12.5px;padding:8px 13px}
@media (max-width:680px){
  /* on a phone this is already a single swipeable row, so centring it would
     just move the first tab off the left edge where the thumb starts */
  .features-tabs{justify-content:flex-start}
}

/* ---------- the phone, one more pass on type ----------
   Kayode, 2026-09-18: "strip down all pages and tabs sizes for mobile view
   especially font sizes."

   What was actually wrong, measured at 390 rather than guessed. The product
   page lede was 17px and 163px tall, seven lines of it, while the body text
   under it was 13.5. A pane paragraph was 16px, so the supporting sentence was
   LARGER than the page's own body. A card heading was 20px sitting on top of
   14px card text, which is a magazine proportion on a screen 390 wide. The
   phone was reading a laptop's type scale with nothing taken off it.

   This block has to be last in the file. The retuned scale further up sets
   h1, h2, .lede and the rest unscoped, so a phone block placed before it loses
   on source order at equal specificity and silently does nothing. That has
   already happened twice on this stylesheet.

   Where a rule below looks over-specific it is not decoration: .card h3 has to
   name the card, because a bare h3 loses to it, and .features-tabs .tab has to
   name the strip for the same reason. */
@media (max-width:680px){
  h1{font-size:29px;line-height:1.14}
  h2{font-size:20px}
  h3{font-size:17px}
  h4{font-size:14.5px}
  .phero h1{font-size:24px;margin-bottom:9px}
  .phero .lede{font-size:14.5px}
  .lede{font-size:14.5px;line-height:1.58}
  .eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:9px}
  .sec-head{margin-bottom:14px}

  .row2-text p,.pane p{font-size:14px;line-height:1.62}
  .checks li{font-size:13.5px;padding-left:23px;margin-top:8px;line-height:1.55}
  .checks li::before{width:14px;height:14px;top:4.5px}
  .checks li::after{left:4.2px;top:8.5px}

  .card{padding:15px}
  .card h3{font-size:16px;margin-bottom:6px}
  .card p{font-size:13px;line-height:1.58}
  .card ul li{font-size:13px}
  .card a.more{font-size:12.5px}

  .plan h3{font-size:18px}
  .faq .ans{font-size:13.5px;line-height:1.62}

  .tab,.features-tabs .tab{font-size:12px;padding:7px 11px}
  .btn{font-size:12.5px}

  /* the rest of the headings that are set by name rather than by level, each
     of which beats a bare h3 or h4 and so has to be named again here */
  .faq summary{font-size:15px;padding:13px 38px 13px 0}
  .faq summary::after{top:19px}
  .faq details[open] summary::after{top:23px}
  .disclose.legal>summary{font-size:15px;padding:12px 15px}
  .callout-row h4{font-size:15px}
  .banner h4{font-size:15.5px}
  .step h4{font-size:14.5px}
  .prose h3{font-size:15.5px;margin-top:22px}
  .sig{font-size:16.5px;margin-top:26px;padding-top:16px}
  .cta .lede,.hero .lede{font-size:14.5px}

  /* the two long reads and the story, which run on the page default and so
     were the only body text on the site still at 16 on a phone */
  .prose p,.prose li{font-size:14px;line-height:1.7}
  .prose h2{font-size:18px;margin-top:32px}
  .tier .rt{font-size:28px}
  /* the contact cards put the phone number and the address in a bare span,
     which was inheriting the page default and reading larger than the body */
  .more{font-size:13.5px}
}

/* ---------- what studios say ----------
   Kayode, 19 September: "we cant wait ... reviews wont get anywhere to fall so
   it hangs in the cloud." He is right. The first studios open accounts in
   October and the first thing one of them says about us would have had nowhere
   to go, so the destination is built before the thing that fills it exists.

   There are none yet, and the section is hidden rather than showing an empty
   box or an apology. hidden is a real attribute, so it works with no script;
   the rule below only guards against a later display rule outranking the
   browser's own. sync_reviews.js is what takes the attribute off. */
[hidden]{display:none !important}

/* auto-fit and a centred track list rather than three fixed columns. The
   first month there will be one review, then two. Three fixed columns would
   put a single card in the left third with a hole beside it. */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,360px));
  gap:14px;justify-content:center;max-width:1124px;margin-left:auto;margin-right:auto}
.rev{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column}
.rev .stars{display:flex;gap:3px;margin-bottom:12px}
.rev .stars svg{width:14px;height:14px;fill:var(--gold);stroke:none}
.rev .stars svg.off{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.45}
.rev blockquote{margin:0;font-family:var(--serif);font-size:16px;line-height:1.6;
  color:var(--text)}
.rev .who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:16px}
/* initials rather than a photograph: a studio owner should not have to send us
   one before we can quote them, and a stock face would be a lie */
.rev .ini{width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:grid;
  place-items:center;font-size:12px;font-weight:700;letter-spacing:.04em;
  background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold-2)}
.rev .who b{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.rev .who span{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.rev-more{margin-top:20px}

/* same swipe row as the trade tiles, for the same measured reason */
@media (max-width:900px){
  .reviews{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;margin:0 -16px;
    padding:0 16px 4px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .reviews::-webkit-scrollbar{display:none}
  .rev{flex:0 0 268px;scroll-snap-align:start;padding:16px}
}
@media (max-width:680px){
  .rev blockquote{font-size:14.5px;line-height:1.55}
  .rev .who b{font-size:13px}
  .rev .who span{font-size:11.5px}
}

/* ---------- the hero screenshot after the crop ----------
   The app's left navigation was cut off every capture on 19 September, so a
   developer reading this site does not get a list of what the product has.
   That changed the shape of the picture from 1700x1063 to 1328x1063, and a
   squarer picture at the same width is a taller one: the hero went from 541 to
   635 at 1680 and 672 at 1920, which is the opposite of what Kayode asked for
   when he said the screenshot might be taking over the whole space.

   So above the phone breakpoint the picture is capped by height rather than
   width. It stops growing once it is as tall as the words beside it, and the
   hero goes back to being sized by its own text at every width. The buttons
   and the clock never moved through any of this; they are measured at 446 and
   498 at 1280, the same pixels as before the crop. */
@media (min-width:981px){
  .hero .device .shot{max-height:440px;width:auto;max-width:100%;margin-left:auto}
}


/* ---------- the phone: less of it, not bigger ----------
   Kayode, 20 September: "you table looks like increase rather than a
   decrease that i asked for." He is right and the pass before this one is
   gone. He asked on 18 September to strip the phone down, especially the
   type, and the right answer to "no long scrolling" is to take out the
   SPACE between things, not to grow the things.

   Nothing here changes a font size or removes a word. Every value is
   vertical rhythm, and each one is paid once per section per page.

   This block has to stay last in the file, for the same reason the type
   block above it does: everything it touches is set unscoped further up at
   equal specificity, so a phone rule placed earlier loses on source order
   and silently does nothing. */
@media (max-width:680px){
  /* 32px top and bottom on every section was the clamp floor, so a page of
     five sections spent 320px on gaps alone */
  section{padding:22px 0}
  .phero{padding:26px 0 17px}
  .sec-head{margin-bottom:11px}
  .cta{padding:26px 0}

  .card{padding:13px}
  .g-2up .card{padding:12px 11px}
  .checks li{margin-top:6px}

  /* three plan cards stacked is the longest thing on the longest page */
  .plans{gap:12px}
  .plan{padding:17px 15px}
  .price{margin:12px 0 3px}
  .plan-feats{padding-top:11px}
  .plan-feats li{margin-top:7px}
  .plan-feats li:not(.no)+li.no{margin-top:12px;padding-top:10px}

  /* thirty six rows, so every pixel here is paid thirty six times */
  th,td{padding:9px 11px}

  .faq summary{padding:11px 36px 11px 0}
  .faq summary::after{top:16px}
  .faq details[open] summary::after{top:20px}

  .ftr{padding:22px 0 16px}
  .ftr-top{padding-bottom:12px}
  .ftr-bot{padding-top:11px}

  /* the footer declared three list columns and has had two since Your trade
     came out, so the right third was an empty hole */
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- the phone, second reduction ----------
   Kayode, 20 September: "we still need to reduce the sizes, make the table
   work on screen without collapsing so theirs not scrolling to the side of
   long scroll down the page."

   Two things, and they pull against each other. A four column table that
   fits 375 has to WRAP, and wrapping makes rows taller. The only way to get
   both less sideways and less downwards is to take the type down, which is
   what he has now asked for twice.

   THE TABLE. table-layout:fixed with the three plan columns pinned narrow,
   so the feature name takes whatever is left instead of every column
   negotiating. The Yes and Not-included words become a tick and a dash,
   which is what actually lets the plan columns be 52px: "Not included" is
   twelve characters holding open a column that needs to show one bit of
   information. The words are still in the HTML and still read out; only
   their rendering changes. */
@media (max-width:680px){
  h1{font-size:26px;line-height:1.16}
  h2{font-size:18px}
  h3{font-size:15.5px}
  h4{font-size:13.5px}
  .phero h1{font-size:22px}
  .phero .lede,.lede,.cta .lede,.hero .lede{font-size:13.5px;line-height:1.55}
  .eyebrow{font-size:9.5px}

  .row2-text p,.pane p{font-size:13px;line-height:1.58}
  .checks li{font-size:12.5px;margin-top:5px}
  .card h3{font-size:14.5px}
  .card p,.card ul li{font-size:12.5px;line-height:1.55}
  .story-text p{font-size:12px;line-height:1.5}
  .prose p,.prose li{font-size:13px}
  .sig{font-size:15px}

  .plan h3{font-size:16.5px}
  .plan-feats li{font-size:12.5px}
  .faq summary{font-size:13.5px}
  .faq .ans{font-size:12.5px;line-height:1.58}
  .tab,.features-tabs .tab{font-size:11.5px;padding:6px 10px}
  .btn{font-size:12px}

  /* ---- the comparison table, on screen rather than off the side ---- */
  .tw{overflow-x:visible}
  .tw table{table-layout:fixed;min-width:0;width:100%}
  th,td{padding:5px 8px;font-size:11px;line-height:1.3}
  td:first-child,th:first-child{width:auto;word-break:normal;overflow-wrap:anywhere}
  /* 56, not 52: "By agreement" is the widest thing a plan column has to
     hold, and at 52 the word "agreement" overflowed its cell by six pixels
     and pushed the table back into a sideways scroll. overflow-wrap is the
     belt to that braces, so nothing added later can do it again. */
  /* 10.5px in the plan columns, not 11. The only long value they hold is
     "By agreement". Measured rather than guessed twice over: at 10.5px the
     word "agreement" renders at 54px, so the column needs 60 to hold it
     with its padding. At 56 it broke as "agreemen / t". break-word then
     only ever breaks a word that genuinely cannot fit. */
  th.c,td.c{width:60px;padding-left:2px;padding-right:2px;
    font-size:10.5px;overflow-wrap:break-word}
  thead th,tbody tr.grp td{font-size:9.5px;letter-spacing:.08em;padding-top:6px;padding-bottom:6px}
  /* one bit of information should not need twelve characters of column */
  .tw td .yes,.tw td .no{font-size:0;line-height:0}
  .tw td .yes::before{content:"\2713";font-size:13px;line-height:1;font-weight:700}
  .tw td .no::before{content:"\2013";font-size:13px;line-height:1}
  /* nothing scrolls sideways any more, so the instruction to swipe is a lie */
  .tw-hint{display:none}
}

@media (max-width:680px){
}

/* The pricing cards on a phone. The cards are stacked here, so every pixel
   reserved to keep three columns level is a pixel of scrolling and nothing
   else. Kayode: "i am trying to strip down the scrolling on phone version". */
@media (max-width:680px){
  .plans{gap:11px}
  .plan{padding:15px 14px}
  .plan h3{font-size:16.5px}
  /* nothing to line up with once they are stacked */
  .plan .who{min-height:0;font-size:12px;line-height:1.4;margin-top:4px}
  .price-note{min-height:0;font-size:11.5px}
  .price{margin:9px 0 2px}
  .plan .btn{margin:10px 0 0}
  .plan-feats{margin-top:11px;padding-top:10px}
  .plan-feats li{margin-top:5px;font-size:12.5px;line-height:1.38;padding-left:19px}
  .plan-feats li.hd{margin-top:0;font-size:9.5px}
}

/* ---------- the footer, on a phone ----------
   461px on every page, which is more than half a screen of links under
   every single one. Kayode asked for it after the pricing cards.

   The bulk of it is two six-link columns side by side, and the reason they
   are tall is not the links, it is that several of the LABELS wrap at 166px
   and a wrapped link was inheriting the body line height. So the leading
   comes down and the gaps come in. Nothing is removed: what is in the
   footer is a navigation decision rather than a spacing one. */
@media (max-width:680px){
  .ftr{padding:18px 0 14px}
  .ftr-top{gap:12px 10px;padding-bottom:10px}
  .ftr h5{margin-bottom:6px}
  .ftr ul li{margin-bottom:3px}
  /* Each row was 26px of which only 16 was clickable: the li kept the body
     line height and the anchor sat on that line box. So the 10px was dead
     space AND not a tap target, which is the worst of both. The leading
     comes off the li and goes back on the anchor as real padding, so the
     row gets shorter and the thing you aim at gets bigger. */
  .ftr ul li{line-height:1.3}
  .ftr ul a{line-height:1.3;display:inline-block;padding:3px 0}
  .ftr-talk{padding-top:10px}
  .ftr-talk ul{gap:4px 16px}
  .ftr-talk .small{margin-top:6px}
  .ftr-bot{padding-top:9px;gap:6px}
}

/* ---------- the FAQ on a phone ----------
   Kayode: "the spacing between the questions need to strip down too". The
   rows are a list of one-line questions, so the padding was doing all the
   work and the caret has to follow it up the row or it floats. */
@media (max-width:680px){
  .faq summary{padding:9px 32px 9px 0;font-size:13px}
  .faq summary::after{top:14px;right:6px}
  .faq details[open] summary::after{top:18px}
  .faq .ans{padding:0 26px 10px 0;font-size:12.5px;line-height:1.5}
}

/* ---------- the FAQ category titles ----------
   Scoped to the FAQ page rather than to h2 everywhere. These four are
   category LABELS over a list of rows, not section headlines carrying an
   argument, so they were running at the same clamp as "One fee for the shop,
   not for each person" and reading louder than the questions under them.

   Placed on the section that contains a .faq, so it cannot reach an h2 on
   any other page. */
.tight:has(.faq) .sec-head h2{font-size:clamp(18px,1.8vw,23px)}
.tight:has(.faq) .sec-head{margin-bottom:clamp(10px,1.2vw,14px)}

/* :has() is recent enough to be worth a fallback rather than a shrug. Every
   .faq sits inside .tight on this page and nowhere else does, so naming the
   page body would be the other way; this is the narrower one. */
@supports not selector(:has(*)){
  .faq-page .sec-head h2{font-size:clamp(18px,1.8vw,23px)}
}

@media (max-width:680px){
  .tight:has(.faq) .sec-head h2{font-size:16px}
  .tight:has(.faq) .sec-head{margin-bottom:9px}
}

/* ---------- iOS zooms a form field under 16px ----------
   Safari on iPhone treats an input whose font is smaller than 16px as too
   small to read, and ZOOMS THE PAGE IN when it gets focus. It does not zoom
   back out afterwards, so the rest of the form is filled in on a page that
   is now wider than the screen and scrolling sideways.

   Every field on this site was 15px. That is one pixel of design costing
   the whole form on the device most people will use, and it is invisible on
   a desktop browser, which is where all of this gets built.

   16px on the phone and 15 everywhere else: the desktop has no such rule
   and the smaller size is the one that was wanted. audit_web.js checks this
   because nobody will ever see it go wrong in the place it is written. */
@media (max-width:680px){
  .field input,.field select,.field textarea{font-size:16px}
}

/* ---------- the comparison table keeps its column headings ----------
   Forty rows on a phone. By row twenty the Basic / Pro / Bespoke heading
   has scrolled away and three columns of ticks mean nothing: you can see
   that something is included without being able to say in WHICH plan.

   The page header is sticky at 66px on a phone, so the row parks under it
   rather than behind it. Sticky goes on the CELLS and not on the thead:
   a thead is not a positionable box in most engines and the rule is
   silently ignored there, which looks exactly like it working until you
   scroll.

   z-index keeps the heading over the ticks as they pass beneath it, and
   stays well under the page header at 90 so it can never cover the menu. */
@media (max-width:680px){
  .tw thead th{position:sticky;top:66px;z-index:5;
    background:var(--panel);
    box-shadow:inset 0 -1px 0 var(--line)}
}