/* =====================================================   content.css: styles for the generated content pages
   (answers, blog, solutions, industries, platforms, compare, press).

   ui.css owns the chrome and the bespoke landing pages. This file only
   defines classes ui.css does NOT: it never redefines .btn, .faq, .steps,
   .spec, .flow, .rail or .bar, so Kareem's versions always win. Check before
   naming anything new: .rail cost an afternoon because ui.css already had one.

   Everything here is expressed in ui.css's tokens (carbon / slate / rule /
   field / surface / stamp) so the two stylesheets stay in one visual system.
   ============================================================ */

.skip{position:absolute;left:-9999px;top:0;background:var(--carbon);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:0}

.wrap{max-width:var(--col-wide);margin:0 auto;padding:0 24px}
.wrap.prose,.prose{max-width:var(--col)}
.section{padding:clamp(2.5rem,1.5rem + 4vw,4.5rem) 0}
.section-sm{padding:clamp(1.75rem,1rem + 3vw,3rem) 0}

/* ---------- Page hero ---------- */
/* Eighty pages opened with the same carbon slab, so What we build, Industries,
   Learn and Platforms were indistinguishable above the fold and each spent a
   screen saying nothing. The top is light and short now; the dark moment is
   the closing CTA, once per page. What makes a top different is its content:
   a hub lists what is inside it, a page beneath one carries its trail. */
.page-hero{
  background:var(--surface);color:var(--text);
  padding:clamp(1.6rem,1rem + 2.4vw,2.6rem) 0 clamp(1.4rem,.9rem + 2vw,2.2rem);
  border-bottom:1px solid var(--rule);
}
.page-hero h1{color:var(--carbon);max-width:22ch;margin:0 0 .4em;font-size:clamp(1.9rem,1.35rem + 2.6vw,2.8rem);line-height:1.1;letter-spacing:-.02em}
.page-hero p{color:var(--text-2);font-size:1.04rem;max-width:62ch;margin:0}
.page-hero .meta{color:var(--text-2)}
.page-hero .meta .tag{background:var(--field);color:var(--text-2);border:1px solid var(--rule)}

/* what is inside a hub, or what sits beside a page within one */
.hub-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;margin-top:20px}
.hub-row-k{font-family:var(--mono);font-size:max(.68rem,12px);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.hub-row ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.hub-row a{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--field);
  color:var(--carbon);text-decoration:none;font-size:.9rem}
.hub-row a:hover{border-color:var(--carbon);background:var(--surface)}
@media (max-width:760px){
  .hub-row{gap:6px 8px;margin-top:16px}
  .hub-row a{font-size:max(.85rem,13px);min-height:44px}
}

/* ---------- Section headings ---------- */
.sec-head{max-width:640px;margin-bottom:2.5rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--text-2);font-size:1.05rem;margin-bottom:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
  font-size: max(.72rem, 12px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);
}
.eyebrow::before{content:"";width:24px;height:3px;background:var(--stamp)}
/* .page-hero belongs in this list. It was missing, so the eyebrow on every
   content page fell through to --text-2 on carbon: 2.96:1, an AA failure on
   the first thing the page says. */
.on-dark .eyebrow,.dark .eyebrow{color:rgba(255,255,255,.7)}
/* the page hero is light now, so its eyebrow reads as muted text, not white */
.page-hero .eyebrow{color:var(--text-2)}

/* ---------- Dark bands ---------- */
.dark{background:var(--carbon);color:#fff}
.dark h2,.dark h3{color:#fff}
.dark p,.dark .sec-head p{color:rgba(255,255,255,.8)}
.card-dark{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);padding:28px 26px}
.card-dark h3{margin:0 0 .4em}
.card-dark p{color:rgba(255,255,255,.76);margin-bottom:0;font-size:.97rem}

/* ---------- Grids and cards ---------- */
.grid{display:grid;gap:20px}
/* A grid track is minmax(auto,1fr) and the auto floor is the item's
   min-content, which on a 320px phone let a card demand 333px inside a
   280px container and push /press/ sideways. The items have no reason
   to refuse to shrink: the widest of them wants 150px. */
.grid > *{min-width:0}
/* An email address or a URL is one unbreakable token, and
   support@theautomationdepartment.com is 279px wide: on a 320px phone it
   hung 6px past the edge of /press/. break-word only breaks a word that
   genuinely does not fit, so ordinary prose is untouched. */
p,li,dd,dt,td,th,figcaption,blockquote,summary,address{overflow-wrap:break-word}
/* break-word breaks a line but does not reduce what the element claims
   it needs, so a 279px address still forced a 320px phone sideways.
   anywhere counts the break when the width is worked out, and it is
   scoped to the two things that produce unbreakable tokens. */
a[href^="mailto:"],a[href^="http"]{overflow-wrap:anywhere}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}
/* A topic that was sharing one half of a split with two others now sits at
   full width below it. Its long lists become two columns; short ones do not. */
.stack{margin-top:clamp(2rem,1.4rem + 2vw,3rem)}
.stack>p,.stack>ul:not(.checks-2)>li{max-width:68ch}
.stack>h2:first-child{margin-top:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--rule);border-top:2px solid var(--rule);padding:28px 26px;display:block;color:inherit;text-decoration:none;transition:.15s}
a.card:hover{border-color:var(--carbon);border-top-color:var(--carbon)}
.card h2,.card h3{margin:0 0 .45em;font-size:1.1rem}
.card p{color:var(--text-2);font-size:.96rem;margin-bottom:0}
.card ul{color:var(--text-2);font-size:.93rem;margin:14px 0 0;padding-left:1.05em}
.card-num{display:block;margin-bottom:12px;font-size: max(.72rem, 12px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.card-ico{width:44px;height:44px;margin-bottom:18px;border:2px solid var(--carbon);display:flex;align-items:center;justify-content:center;color:var(--carbon)}
.card-ico svg{width:22px;height:22px}

/* ---------- Prose ---------- */
/* On a 1,500-word page the only thing separating one topic from the next was
   white space. A hairline gives the eye a place to stop and makes the page
   scannable without touching a word of it. */
.prose>h2{border-top:1px solid var(--rule);padding-top:1.1em;margin-top:2.1em;font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem);scroll-margin-top:96px}
.prose>h3{margin-top:1.7em;font-size:1.18rem;scroll-margin-top:96px}
/* a comfortable measure: past about 70 characters the eye loses the line */
.prose>p,.prose>ul,.prose>ol{font-size:var(--step);line-height:1.7;color:var(--text-2);max-width:68ch}
.prose>p:first-of-type{font-size:1.12rem;color:var(--text)}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--stamp);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--carbon)}
.prose li{margin-bottom:.5em}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.6em 0}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--field);padding:2px 6px}
.prose blockquote{margin:1.8em 0;padding:4px 0 4px 24px;border-left:4px solid var(--stamp);font-size:1.08rem;color:var(--text)}
.prose blockquote p:last-child{margin-bottom:0}

/* ---------- Summary devices ---------- */
.answer-box,.inshort{background:var(--surface);border:1px solid var(--rule);border-left:5px solid var(--stamp);padding:24px 26px;margin:0 0 34px}
.answer-box p,.inshort p{font-size:1.06rem;line-height:1.65;color:var(--text);margin:0}
.answer-box p+p,.inshort p+p{margin-top:.85em}
.answer-label,.inshort-h,.glance-h{display:block;margin-bottom:12px;font-size: max(.7rem, 12px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}

.answer-box + h2,.toc + h2,.callout + h2{border-top:0;padding-top:0}
.toc{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--carbon);padding:22px 26px;margin:0 0 38px}
/* Four links do not need 237px of numbered list. Above phone width the
   contents read as one row of chips, the same object as a hub row. */
@media (min-width:700px){
  .toc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 18px}
  .toc b{margin:0;flex:none}
  .toc ol{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
  .toc li{margin:0}
  .toc a{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;
    border:1px solid var(--rule);border-radius:var(--radius);background:var(--field);color:var(--carbon)}
  .toc a:hover{border-color:var(--carbon);background:var(--surface);text-decoration:none}
}
.toc b{display:block;margin-bottom:12px;font-size: max(.7rem, 12px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.toc ol{margin:0;padding-left:1.15em;font-size:.97rem}
.toc li{margin-bottom:7px}
.toc a{color:var(--text-2);text-decoration:none}
.toc a:hover{color:var(--carbon);text-decoration:underline}

.glance{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--carbon);padding:24px 26px 22px;margin:0 0 40px}
.glance ol{list-style:none;counter-reset:g;margin:0;padding:0;display:grid;gap:1px;background:var(--rule)}
.glance li{counter-increment:g;background:var(--surface)}
.glance a{display:grid;grid-template-columns:2rem 1fr;gap:14px;align-items:baseline;padding:11px 4px;color:var(--carbon);text-decoration:none}
.glance a:hover{background:var(--field)}
/* Twenty-four links is a fine index on a laptop and 2,060px on a phone --
   two and a half screens of contents before the article starts, on a page
   that already carries the seven-section rail above it. It scrolls inside
   itself instead, the same as that rail and the glossary's index. */
@media (max-width:760px){
  .glance ol{max-height:264px;overflow-y:auto;overscroll-behavior:contain}
}
.glance a::before{content:counter(g,decimal-leading-zero);font-family:var(--mono);font-size:.78rem;color:var(--text-2);font-weight:600}
.glance .g-name{font-size:.98rem;font-weight:500}
.glance a:hover .g-name{text-decoration:underline}
/* .g-price is gone: prices live only on /pricing/ now, so the index is two
   columns and points there instead of restating seventy numbers. */
/* This note sits under the boxed index on 12 pages. It was inheriting the
   prose paragraph, so it rendered at 18px with 1.7 leading across 698px and
   read like a footnote in a word processor. It is a caption, so it is set
   like one: smaller, tighter, grey, on a hairline, with the link carrying
   the stamp red rather than a browser underline. */
.prose p.glance-note, .glance-note {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
  max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--text-2);
}
.prose p.glance-note a, .glance-note a {
  color: var(--carbon); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--stamp); text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.prose p.glance-note a:hover, .glance-note a:hover { color: var(--stamp); }
.prose p.glance-note strong, .glance-note strong { color: var(--carbon); font-weight: 650; }
@media (max-width:560px){.glance a{grid-template-columns:1.7rem 1fr;row-gap:2px}}

.callout{border:1px solid var(--rule);border-left:4px solid var(--slate);background:var(--surface);padding:20px 24px;margin:1.9em 0}
.callout.warn{border-left-color:var(--stamp);background:#FDF4F3}
.callout.note{border-left-color:var(--carbon);background:var(--field)}
.callout b{display:block;margin-bottom:6px;color:var(--text);font-weight:600}
.callout p{margin-bottom:0;font-size:.99rem}
.callout p+p{margin-top:.7em}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;margin:1.8em 0;border:1px solid var(--rule);position:relative}
/* A table that does scroll says so, instead of ending mid-word. */
@media (max-width:640px){
  .table-wrap{background:
    linear-gradient(to right,var(--surface) 30%,rgba(255,255,255,0)) left / 40px 100% no-repeat local,
    linear-gradient(to left,var(--surface) 30%,rgba(255,255,255,0)) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.14),rgba(0,0,0,0)) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.14),rgba(0,0,0,0)) right / 14px 100% no-repeat scroll}
}
/* No 520px floor on a 335px screen: it put 40% of every table off the right
   edge with nothing to say so, and on the payback calculator it hid the entire
   value column, so a phone showed thirteen labels and not one number. Wide
   tables still scroll above 640px, where there is room for them to. */
.prose table{border-collapse:collapse;width:100%;font-size:.94rem}
@media (min-width:640px){.prose table{min-width:520px}}

/* A table on a phone, stacked. menu.js copies each column heading onto the
   cells below it, and each row becomes a card: the cell gets the full width
   and wraps once instead of five times in a 116px column. The header row
   goes, because every cell now carries its own label. */
@media (max-width:760px){
  table.is-stacked{display:block;font-size:max(.94rem,15px)}
  table.is-stacked thead{display:none}
  table.is-stacked tbody{display:block}
  table.is-stacked tr{display:block;padding:2px 14px 8px;border-top:1px solid var(--rule)}
  table.is-stacked tr:first-child{border-top:0}
  table.is-stacked td{display:block;padding:8px 0 0;border:0;width:auto}
  table.is-stacked td::before{
    content:attr(data-th);display:block;margin-bottom:2px;
    font-family:var(--mono);font-size:max(.6rem,12px);font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
  }
  table.is-stacked td:empty{display:none}
  /* The first cell names the row, so it reads as the card's heading. */
  table.is-stacked td:first-child{font-weight:650;color:var(--carbon);padding-top:10px}
}
.prose th,.prose td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--rule)}
.prose th{background:var(--carbon);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.prose td{color:var(--text-2)}
.prose td strong{color:var(--text)}
.prose tbody tr:last-child td{border-bottom:0}

/* ---------- Lists with ticks ---------- */
.checks{list-style:none;padding:0;margin:24px 0 0}
/* six or more items, and room to do it: two columns instead of a long wall.
   The class is added by the build, which is the only place that can count. */
@media (min-width:900px){
  /* Two columns where there is room for two: the 24em minimum means a narrow
     container, a card or half a split, falls back to one on its own. */
  .checks-2{columns:24em 2;column-gap:44px}
  .checks-2 li{break-inside:avoid;-webkit-column-break-inside:avoid}
}
/* and a single column of checks still keeps a readable line */
.checks li{max-width:68ch}
/* plain lists in a full-width container run the width of the page otherwise */
.wrap>ul:not([class])>li,.wrap>ol:not([class])>li,
.stack>ul:not([class])>li,.stack>ol:not([class])>li,
.related li,.card ul>li,.card-dark ul>li{max-width:68ch}
.checks li{position:relative;padding-left:30px;margin-bottom:14px;color:var(--text-2);font-size:.99rem}
.checks li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border:2px solid var(--carbon)}
.checks li::after{content:"";position:absolute;left:4px;top:10px;width:7px;height:3.6px;border-left:2px solid var(--carbon);border-bottom:2px solid var(--carbon);transform:rotate(-45deg)}
.on-dark .checks li,.dark .checks li{color:rgba(255,255,255,.82)}
.on-dark .checks li::before,.dark .checks li::before{border-color:rgba(255,255,255,.65)}
.on-dark .checks li::after,.dark .checks li::after{border-color:#fff}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.tag-chip{padding:7px 15px;border:1px solid var(--rule);color:var(--text-2);background:var(--surface);font-size:.88rem}
.dark .tag-chip,.on-dark .tag-chip{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85);background:transparent}

/* ---------- Plans ---------- */
.plan{border:1px solid var(--rule);background:var(--surface);padding:30px 26px;display:flex;flex-direction:column}
.plan.featured{border:2px solid var(--carbon);border-top:5px solid var(--stamp)}
.plan h3{font-size:1.25rem;margin:0 0 .3em}
.plan .plan-sub{color:var(--text-2);font-size:.93rem;margin-bottom:18px}
.plan ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.plan ul li{position:relative;padding-left:24px;margin-bottom:11px;color:var(--text-2);font-size:.94rem}
.plan ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--carbon)}
.plan-tag{align-self:flex-start;margin-bottom:16px;padding:5px 11px;background:var(--carbon);color:#fff;font-size: max(.7rem, 12px);font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.card-dark .plan-tag{background:rgba(255,255,255,.18)}

/* ---------- Listings ---------- */
.post-list{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.post{display:block;background:var(--surface);padding:24px 26px;color:inherit;text-decoration:none}
.post:hover{background:var(--field)}
.post h2,.post h3{margin:0 0 .35em;font-size:1.12rem}
.post p{margin-bottom:10px;color:var(--text-2);font-size:.97rem}
.q-list{display:grid;gap:14px}
.q-item{display:block;border:1px solid var(--rule);border-left:3px solid var(--rule);background:var(--surface);padding:22px 26px;color:inherit;text-decoration:none}
.q-item:hover{border-left-color:var(--stamp)}
.q-item h3{margin:0 0 .4em;font-size:1.06rem}
.q-item p{margin-bottom:0;color:var(--text-2);font-size:.95rem}
.press-item{display:block;border:1px solid var(--rule);background:var(--surface);padding:24px 26px;color:inherit;text-decoration:none}
.press-item:hover{border-color:var(--carbon)}
.press-item h3{margin:0 0 .35em;font-size:1.12rem}
.press-item p{color:var(--text-2);font-size:.96rem;margin-bottom:0}
.boiler{background:var(--field);border:1px solid var(--rule);border-left:4px solid var(--carbon);padding:24px 26px}
.boiler p{color:var(--text);margin-bottom:1em}
.boiler p:last-child{margin-bottom:0}

/* ---------- Meta line ---------- */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.85rem;color:var(--text-2);margin-bottom:18px}
.meta .sep{opacity:.5}
.meta .tag{padding:4px 10px;background:var(--carbon);color:#fff;font-size: max(.7rem, 12px);font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* ---------- Related ---------- */
.related{border-top:2px solid var(--carbon);margin-top:56px;padding-top:28px}
.related b{display:block;margin-bottom:16px;font-size: max(.7rem, 12px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.related a{color:var(--carbon);text-decoration:none}
.related a:hover{color:var(--stamp);text-decoration:underline}

/* ---------- CTA band ---------- */
/* The closing band. It used to be a centred black slab, which read as the
   page giving up rather than as an invitation. Now it is a light panel split
   in two: what you get on the left, the next three real openings on the right,
   so the last thing on the page is a time you can take. */
.cta-band{
  background:var(--surface);color:var(--text);
  border:1px solid var(--rule);border-top:4px solid var(--stamp);
  padding:clamp(1.75rem,1.2rem + 2vw,2.75rem);
  display:grid;gap:24px;align-items:center;text-align:left;
}
.cta-band h2{color:var(--carbon);margin:0 0 .35em;font-size:clamp(1.5rem,1.15rem + 1.4vw,2.05rem);line-height:1.12}
.cta-band p{color:var(--text-2);max-width:46ch;margin:0}
/* Five pages close on a dark ground -- home, about, work, pricing, services.
   They get the same card and the same two columns, inverted, so the shape of
   the last thing on the page is the same everywhere and only the weight
   changes. The red top rule stays: it is what marks the band as the close. */
.ground-dark .cta-band{background:#1B1E24;color:#fff;border-color:#333A44;border-top-color:var(--stamp)}
.ground-dark .cta-band h2{color:#fff}
.ground-dark .cta-band p{color:rgba(255,255,255,.74)}
.ground-dark .cta-band [data-book]{background:#23272E;border-color:#333A44}
.ground-dark .cta-who{color:rgba(255,255,255,.74)}
.ground-dark .cta-who img{border-color:#1B1E24;box-shadow:0 0 0 1px #3A424D}
@media (min-width:940px){
  /* No wrapper exists around the heading and the paragraph, and there are 76
     of these bands, so the two columns are placed rather than nested: the copy
     stacks down the left, the booking panel spans both rows on the right. */
  /* The booking panel spans every row, so without min-content rows the copy
     rows stretched to its height and left a hole between the heading and the
     paragraph. Rows hug their text; the whole stack centres instead. */
  .cta-band{grid-template-columns:1fr minmax(330px,.8fr);gap:10px 44px;padding:clamp(2rem,1.4rem + 2vw,3rem);
    grid-template-rows:auto auto 1fr;grid-auto-rows:min-content;align-content:start}
  /* the copy sits at the top of its row: centred, it drifted apart when the
     booking panel made the rows taller than the text */
  .cta-band > *{grid-column:1;min-width:0;align-self:start}
  .cta-band > [data-book],.cta-band > .btn-row{grid-column:2;grid-row:1 / -1;align-self:center}
  .cta-band > .btn-row{justify-content:flex-start}
}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.center{justify-content:center}

/* ---------- Forms ---------- */
.form-panel{background:var(--surface);border:1px solid var(--rule);padding:32px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}.form-panel{padding:22px 18px}}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.87rem;font-weight:600;color:var(--text)}
.field label .req{color:var(--stamp)}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;padding:13px 15px;border:1px solid var(--rule);border-radius:0;background:#fff;color:var(--text);width:100%}
.field textarea{resize:vertical;min-height:132px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--carbon);box-shadow:0 0 0 3px rgba(22,24,28,.12)}
.field small{color:var(--text-2);font-size:.83rem}
.form-note{font-size:.85rem;color:var(--text-2);margin:16px 0 0}
.alert{padding:15px 18px;margin-bottom:24px;font-size:.95rem;border-left:4px solid}
.alert-ok{background:var(--field);border-left-color:var(--carbon);color:var(--text)}
.alert-err{background:#FDF4F3;border-left-color:var(--stamp);color:#8A2119}
.contact-info{display:flex;flex-direction:column;gap:24px}
.ci-item{display:flex;gap:15px;align-items:flex-start}
.ci-ico{width:40px;height:40px;flex-shrink:0;border:2px solid var(--carbon);display:flex;align-items:center;justify-content:center;color:var(--carbon)}
.ci-ico svg{width:18px;height:18px}
.ci-item b{display:block;margin-bottom:4px;font-size: max(.72rem, 12px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.ci-item a,.ci-item span{color:var(--text);font-size:1rem}

/* ---------- 404 ---------- */
.err{min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:72px 24px}
.err .code{font-family:var(--mono);font-size:.85rem;letter-spacing:.18em;color:var(--stamp);margin-bottom:16px}

/* ---------- Print ---------- */
@media print{
  .masthead,.foot,.cta-band,.skip,.related,.toc{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .page-hero{background:#fff!important;color:#000!important;border-bottom:2pt solid #000;padding:0 0 12pt}
  .page-hero h1,.page-hero p{color:#000!important}
  .wrap,.prose{max-width:100%;padding:0}
  .callout,.answer-box,.glance,.toc{border:1pt solid #999;background:#fff!important;page-break-inside:avoid}
  .table-wrap{overflow:visible}
  .prose th{background:#000!important;color:#fff!important}
  h2,h3{page-break-after:avoid}
}

/* ---------- footer legal links ----------
   New class, introduced with the privacy/terms links in build.py's footer.
   Kept here rather than ui.css so it does not collide with chrome edits.
   Vertical padding is deliberate: it clears the 24x24px tap-target minimum. */
.foot .nav-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.foot .nav-legal a { padding: 4px 0; }

/* ---------- contact form result banner ----------
   Rendered by ui.js from ?status= after send.php's 303. Colours are the
   existing tokens; the error state borrows --stamp, which is the only
   alert colour the brand has. */
.form-status {
  margin: 1.6rem 0 0; padding: 14px 16px;
  border: 1px solid var(--rule); border-left-width: 4px;
  background: var(--surface); font-size: 0.95rem; line-height: 1.55;
}
.form-status:focus { outline: 2px solid var(--carbon); outline-offset: 2px; }
.form-status.is-ok  { border-left-color: var(--carbon); }
.form-status.is-err { border-left-color: var(--stamp); }

/* ---------- tap targets on standalone links ----------
   WCAG 2.5.8's inline exception covers a link sitting inside a sentence. It
   does not cover a link that IS the whole content of a list item, table cell
   or paragraph - those are standalone targets and need 24px. These were
   16-20px. inline-block so the padding actually grows the hit box rather than
   just painting outside the line box. Links in running text are untouched,
   and .glance sets its own padding, so it is deliberately not in this list. */
.related li > a:only-child,
.toc li > a:only-child,
.spec dd > a:only-child,
.table-wrap td > a:only-child,
.card p > a:only-child { display: inline-block; padding: 4px 0; }

/* =====================================================   Bringing these 67 pages onto the same system as the seven
   bespoke ones. They were written before --radius stopped being 0
   and before the phone pass, so they shipped square-cornered,
   on a tighter vertical rhythm, with labels down at 11.2px.
   No markup changes: one file, every content page.
   ============================================================ */

/* Corners. ui.css rounds everything it owns; these are its counterparts. */
.card,.card-dark,.answer-box,.inshort,.toc,.callout,.table-wrap,
.related,.cta-band,.skip,.card-ico,.glance{border-radius:var(--radius)}
.meta .tag,.tag-chip{border-radius: var(--radius-sm)}          /* as .tier-badge and .chip */
.checks li::before{border-radius: var(--radius-sm)}

/* Rhythm. .section sat tighter than .band, so moving from a landing page to
   an answer page felt like two different sites. Same gap token now. */
.section{padding:var(--gap) 0}
.section-sm{padding:calc(var(--gap) * .55) 0}
.wrap{padding:0 20px}                             /* .band uses 20px, not 24 */
.page-hero{padding:calc(var(--gap) * .66) 0 calc(var(--gap) * .5)}

/* Headings had less air above them than the same headings on the main pages. */
.prose>h2{margin-top:2.4em}
.prose>h3{margin-top:2em}

@media (max-width:760px){
  /* Same 12px floor and 44px targets as ui.css sets for the main pages. */
  .meta,.meta .tag,.answer-label,.inshort-h,.glance-h,.toc b,.related b,
  .card-num,.eyebrow,.tag-chip,.ci-item b,.glance a::before{font-size:max(.75rem,12px)}
  .toc a,.related a,.card{min-height:44px}
  .toc li>a,.related li>a,.spec dd>a:only-child,.table-wrap td>a:only-child,.card p>a:only-child{display:inline-flex;align-items:center;min-height:44px}
  .toc li,.related li{margin-bottom:0}
  /* Tables already scroll inside .table-wrap; keep that, just make it obvious. */
  .table-wrap{-webkit-overflow-scrolling:touch}
}

/* ---------- the index marks where you are ---------- */
.glance a{position:relative;transition:background 140ms ease,color 140ms ease}
.glance a.is-here{background:var(--field);color:var(--carbon)}
.glance a.is-here .g-name{font-weight:600}
.glance a.is-here::before{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:3px;background:var(--stamp);border-radius: var(--radius-sm)}
@media (prefers-reduced-motion:reduce){.glance a{transition:none}}

/* ---------- homepage content hubs ----------
   The six content hubs used to be reachable only through the footer, which
   left /platforms/ with zero non-footer inbound links and /answers/ and /blog/
   pointing only at each other. Google discounts footer links heavily, so the
   whole content estate was effectively orphaned from the homepage. */
.hubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin-top: 2.2rem; text-align: left; }
.hub { display: block; background: var(--surface); padding: 22px 24px;
  text-decoration: none; color: var(--text); }
.hub:hover { background: var(--field); }
.hub b { display: block; font-size: 1.05rem; margin-bottom: 8px; }
.hub span { display: block; font-size: .92rem; line-height: 1.55; color: var(--text-2); }
.lede-sm { max-width: 56ch; margin: .9rem auto 0; color: var(--text-2); }
/* Seven cards in a three-track grid leave two empty cells, and the grid's own
   --rule background shows through them as a grey block. The last card fills
   the row instead. Works at two tracks as well. */
.hubs .hub:last-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .hubs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hubs { grid-template-columns: 1fr; } }

/* ---------- calculators ----------
   Two in-browser tools. Nothing is transmitted, so there is no form styling to
   inherit from the contact page; these are inputs that compute, not submit. */
.calc { border: 1px solid var(--rule); border-top: 3px solid var(--carbon);
  background: var(--surface); padding: 26px 28px 30px; margin: 2.4rem 0; }
.calc-h { font-size: max(.74rem, 12px); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-2); margin: 0 0 16px; }
.calc-h + * { margin-top: 0; }
.calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 26px;
  margin-bottom: 30px; }
.calc-field label { display: block; font-size: .95rem; font-weight: 600;
  margin-bottom: 7px; color: var(--text); }
.calc-field input, .calc-field select {
  width: 100%; padding: 11px 12px; font: inherit; font-size: .97rem;
  border: 1px solid var(--carbon); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.calc-field select { cursor: pointer; }
.calc-hint { display: block; margin-top: 6px; font-size: .84rem; line-height: 1.5;
  color: var(--text-2); }

.calc-out { border-top: 1px solid var(--rule); padding-top: 26px; }
.calc-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
.calc-stat { background: var(--surface); padding: 18px 16px; text-align: center; }
.calc-stat b { display: block; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; }
.calc-stat span { display: block; margin-top: 7px; font-size: .8rem; color: var(--text-2);
  line-height: 1.4; }
.calc-stat-lead { background: var(--carbon); }
.calc-stat-lead b { color: #fff; }
.calc-stat-lead span { color: rgba(255,255,255,.75); }
.calc-verdict { margin: 22px 0 0; padding: 16px 18px; border-left: 4px solid var(--stamp);
  background: var(--field); font-size: .98rem; line-height: 1.6; }

/* which-automation question blocks */
.q-block { margin-bottom: 26px; }
.opt-row { display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); }
.opt { display: flex; align-items: flex-start; gap: 11px; background: var(--surface);
  padding: 13px 15px; cursor: pointer; font-size: .96rem; line-height: 1.5; }
.opt:hover { background: var(--field); }
.opt input { margin: 3px 0 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--carbon); }
.opt input:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }

.verdict-card { border: 1px solid var(--carbon); border-left: 4px solid var(--stamp);
  background: var(--field); padding: 24px 26px; }
.verdict-price { display: block; font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.05; }
.verdict-card b { display: block; margin-top: 4px; font-size: 1.1rem; }
.verdict-card p { margin: 14px 0 0; font-size: .98rem; line-height: 1.62; }
.verdict-next { color: var(--text-2); font-size: .93rem !important; }

@media (max-width: 720px) {
  .calc { padding: 22px 18px 26px; }
  .calc-grid { grid-template-columns: 1fr; gap: 18px; }
  .calc-results { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) { .calc-results { grid-template-columns: 1fr; } }

/* On /tools/ the q-item cards sit inside .prose, where `.prose a` (0,1,1)
   outranks `.q-item` (0,1,0) and painted the whole card stamp red and
   underlined - heading, body and all. These also carry h2, which the original
   rules did not cover, so the titles rendered at full prose-heading size. */
.prose .q-item{color:inherit;text-decoration:none}
.prose .q-item:hover{color:inherit}
.q-item h2,.q-item h3{margin:0 0 .4em;font-size:1.06rem;font-weight:650;letter-spacing:-.01em}
.q-item:hover h2,.q-item:hover h3{color:var(--stamp)}

/* ---------- the tools pages, brought onto the house standards ----------
   Written before the radius change and the phone pass, same as the rest of
   the content estate was. Corners, a 12px floor on the small labels, and
   finger-sized targets on the quiz options. */

.calc,.calc-out,.opt-row,.calc-results,.calc-stat,
.calc-field input,.calc-field select{border-radius:var(--radius)}
.calc-results,.opt-row{overflow:hidden}   /* clip the 1px-gap children */
.opt:first-child{border-radius:var(--radius) var(--radius) 0 0}
.opt:last-child{border-radius:0 0 var(--radius) var(--radius)}

@media (max-width:760px){
  /* Safari zooms the page when a field under 16px takes focus, and leaves
     the visitor zoomed in on a layout they have to pinch back out of. The
     contact form already sets 16px; these were 15.52. */
  .calc-field input,.calc-field select,.calc input,.calc select,.calc textarea{font-size:max(.97rem,16px)}
  .calc-h{font-size:max(.75rem,12.5px);line-height:1.35}
  .calc-hint{font-size:max(.8rem,14px)}
  .calc-hint a{display:inline-block;padding:6px 0}
  .calc-stat span{font-size:max(.75rem,12px)}
  /* A radio you have to hit dead-on is the whole reason people abandon a
     quiz on a phone. The label is the target, so give it the height. */
  .opt{min-height:44px;align-items:center;padding-top:12px;padding-bottom:12px}
  .opt input{width:20px;height:20px;margin-top:0}
  .calc-field input,.calc-field select{min-height:44px}
  .calc-grid{grid-template-columns:1fr}
}

/* Audit, 21 September 2026: plan tags rendered at 11px on a phone. */
@media (max-width: 760px) { .plan-tag { font-size: max(.7rem, 12px); } }

/* ---------- Next-available booking row (.nx-*) ----------
   Rendered by assets/js/slots.js into any [data-book] block, from the real
   GoHighLevel calendar. Every such block must already contain a working
   [data-book-fallback] button: that is what shows if the fetch fails, the
   calendar is empty, or JS never runs, so the worst case is the behaviour
   this replaced. `bk-` was the retired namespace, hence `nx-`. */
.nx-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:18px}
/* The label sits on its own line above the times rather than beside them.
   Inline, it ate 148px of the row, so whether "Other times" fitted depended
   on the day label inside the chips: TOMORROW fits, THU, SEP 24 does not,
   and the row silently grew a second 44px line on a Thursday. A 17px caption
   costs less than that line and the height stops moving. */
.nx-lead{font-family:var(--mono);font-size: max(.7rem, 12px);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);width:100%;margin:0 0 2px}
.nx-slot{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid var(--slate);border-radius:var(--radius);padding:8px 13px;min-height:44px;background:var(--surface);color:var(--carbon)}
/* The day, once, ahead of the times it belongs to. */
.nx-day{font-family:var(--mono);font-size:max(.68rem,12px);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);align-self:center;white-space:nowrap;margin-right:-2px}
/* "10:00 AM" must never break across two lines inside its box */
.nx-slot i{font-style:normal;font-weight:600;font-size:.98rem;white-space:nowrap}
.nx-slot:hover{border-color:var(--carbon);background:var(--field)}
/* "Other times" sat as bare red text at the end of a row of bordered chips and
   read as a broken link. It is the same object as a slot: a way into the
   calendar, so it carries the same box, one step quieter. */
.nx-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;
  border:1px dashed var(--rule);border-radius:var(--radius);background:transparent;
  font-size:.9rem;color:var(--stamp);text-decoration:none}
.nx-more::after{content:"";width:6px;height:6px;flex:none;border:solid currentColor;
  border-width:1.5px 1.5px 0 0;transform:rotate(45deg);margin-top:1px}
.nx-more:hover{border-color:var(--carbon);border-style:solid;color:var(--carbon);background:var(--field)}
.nx-lead{display:inline-flex;align-items:center;gap:7px}
/* The dot says these times were read from the calendar a second ago rather
   than typed into the page. A slow breath, not a blink: anything faster than
   three flashes a second is a seizure risk, and this is one cycle every two
   seconds. It holds still entirely for a reader who has asked for less
   motion, and it is decoration, so it never reaches a screen reader. */
.nx-live{width:7px;height:7px;flex:none;border-radius:50%;background:#1F7A4D;
  box-shadow:0 0 0 0 rgba(31,122,77,.55);animation:nxPulse 2s ease-out infinite}
@keyframes nxPulse{
  0%{box-shadow:0 0 0 0 rgba(31,122,77,.5)}
  70%{box-shadow:0 0 0 7px rgba(31,122,77,0)}
  100%{box-shadow:0 0 0 0 rgba(31,122,77,0)}
}
@media (prefers-reduced-motion:reduce){.nx-live{animation:none}}
/* Only ever rendered when the calendar says something worth saying. */
.nx-soon{margin:11px 0 0;font-size:.95rem;font-weight:600;color:var(--carbon)}
.cta-band .nx-soon{font-size:.92rem;margin-top:10px}
.nx-note{font-family:var(--mono);font-size: max(.68rem, 12px);color:var(--text-2);margin:12px 0 0;line-height:1.5}
/* on the carbon CTA band */
/* The booking side of the band: its own panel, so the openings read as a
   small scheduler rather than as links under a paragraph. */
.cta-band [data-book]{
  background:var(--field);border:1px solid var(--rule);
  padding:20px 20px 18px;min-width:0;
}
.cta-band .nx-row{margin-top:0;gap:8px}
.cta-band .nx-lead{width:100%;margin:0 0 4px}
.cta-band .nx-slot{flex:0 1 auto;background:#fff;border-color:var(--rule);padding:9px 13px}
.cta-band .nx-slot:hover{border-color:var(--carbon);background:var(--surface)}
}
.cta-band .nx-more{padding:9px 12px}
.cta-band .nx-note{margin-top:12px}
.cta-band .btn-row{margin:0}
.cta-band .btn-row.center{justify-content:flex-start}
@media (max-width:520px){
  .nx-row{gap:8px}
  .nx-lead{width:100%;margin-bottom:-4px}
  /* A chip used to hold a day and a time stacked, so a 30% basis kept the
     three even, and stretching "9:00 AM" to 132px pushed the row onto a
     third line. They hold a time now and the day is said once above them,
     so equal columns fit and read straighter than content widths did. */
  .nx-slot{flex:1 1 0;min-width:72px;padding-inline:4px}
  .nx-day{width:100%;margin:2px 0 0;align-self:start}
  .nx-more{width:100%;justify-content:center}
}

/* ---------- Industry one-pagers ----------
   These were ~900 words in one column: a dark hero with a run-on sentence, a
   list box, then seven numbered sections of three paragraphs each. Nothing to
   look at and nothing to skim. The split below keeps every word, because the
   depth is what these pages rank on, but puts a scannable contrast table above
   it and sets the detail in two columns so the page reads as blocks. */

/* the contrast table: what it costs you now, what we automate */
.vs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin:0 0 2.4rem}
@media (max-width:720px){.vs{grid-template-columns:1fr}}
.vs-h{padding:14px 18px;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size: max(.68rem, 12px);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.vs-h.now{color:var(--text-2);background:var(--field)}
.vs-h.aut{color:var(--stamp);background:var(--field);border-left:1px solid var(--rule)}
@media (max-width:720px){.vs-h.aut{border-left:0}}
.vs-c{border-bottom:1px solid var(--rule);padding:13px 18px;font-size:.92rem;line-height:1.5}
.vs-c:nth-child(odd){color:var(--text-2)}
.vs-c:nth-child(even){border-left:1px solid var(--rule)}
@media (max-width:720px){
  /* One column interleaves the pairs, so a column header at the top helps
     nobody. Each cell says which side it is on instead. */
  .vs-h{display:none}
  .vs-c{padding-top:10px}
  .vs-c{font-size:max(.95rem,15.5px)}
  .vs-c::before{display:block;font-family:var(--mono);font-size:max(.6rem,12px);letter-spacing:.1em;
    text-transform:uppercase;margin-bottom:5px}
  .vs-c:nth-child(odd)::before{content:"Now";color:var(--slate)}
  .vs-c:nth-child(even){border-left:3px solid var(--stamp);background:var(--field)}
  .vs-c:nth-child(even)::before{content:"Automated";color:var(--stamp)}
  /* Now, Automated, Now, Automated, seven times each: fourteen label rows,
     224px, a sixth of the block, all of it saying what the red rule and the
     fill already say. The first pair sets the pattern and the rest go. The
     comparison pages are different -- their labels name the two things being
     compared, so those stay on every row. */
  .vs-c:not([data-side])::before{display:none}
  .vs-c:not([data-side]):nth-child(3)::before,
  .vs-c:not([data-side]):nth-child(4)::before{display:block}
  /* A pair is one thought, so it reads as one block: no rule down the middle
     of it, and the rule that is left falls between pairs. */
  .vs-c:nth-child(odd){border-bottom:0;padding-bottom:4px}
  .vs-c:nth-child(even){padding-top:6px}
  /* The comparison pages reuse this grid for Zapier against n8n, so the
     stacked labels have to name the actual sides, not "Now" and
     "Automated". Each cell carries its own. */
  .vs-c[data-side]::before{content:attr(data-side)}
}
.vs-c b{font-weight:600;color:var(--text);display:block;margin-bottom:2px}

/* The folded phone version of the list, built by menu.js. Both versions sit
   in the DOM and the width decides which one is drawn, so the table comes
   back when the phone is turned. */
.vs-p{display:none}
@media (max-width:760px){
  .vs.is-folded > .vs-c,.vs.is-folded > .vs-h{display:none}
  .vs.is-folded > .vs-p{display:block;border-bottom:1px solid var(--rule)}
  .vs.is-folded > .vs-p:last-child{border-bottom:0}
  .vs-p > summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center;
    min-height:56px;padding:10px 16px 10px 15px;border-left:3px solid var(--stamp);
    font-weight:650;font-size:max(1rem,16px);line-height:1.3;color:var(--carbon)}
  .vs-p > summary::-webkit-details-marker{display:none}
  .vs-p > summary::after{content:"";width:8px;height:8px;flex:none;margin-left:auto;
    border:solid var(--text-2);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
    margin-top:-4px;transition:transform 140ms linear}
  .vs-p[open] > summary{background:var(--field)}
  .vs-p[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
  .vs-p > summary:focus-visible{outline:2px solid var(--carbon);outline-offset:-2px}
  .vs-p-b{padding:0 16px 14px 19px;background:var(--field)}
  .vs-p-now,.vs-p-aut{margin:0;font-size:max(.95rem,15px);line-height:1.55}
  .vs-p-aut{color:var(--text);margin-top:8px}
  .vs-p-now{color:var(--text-2)}
  .vs-p-now::before{content:"Now \2014 ";font-family:var(--mono);font-size:max(.6rem,12px);
    letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
  /* On a comparison the two sides are equals, so each gets its own name
     rather than one being the problem and the other the answer. */
  .vs-p-side{color:var(--text);margin-top:10px}
  .vs-p-side:first-child{margin-top:0}
  .vs-p-side::before{content:attr(data-side);display:block;margin-bottom:2px;
    font-family:var(--mono);font-size:max(.6rem,12px);font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;color:var(--stamp)}
  .vs-p-side + .vs-p-side::before{color:var(--slate)}
}
@media (prefers-reduced-motion:reduce){.vs-p > summary::after{transition:none}}
.vs-c:last-child,.vs-c:nth-last-child(2){border-bottom:0}

/* the detail, two up */
.wfx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 28px;margin:0 0 2.2rem;align-items:start}
@media (max-width:1080px){.wfx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.wfx{grid-template-columns:minmax(0,1fr);gap:20px}}
.wfd{border-top:2px solid var(--carbon);padding-top:12px;align-self:start}
.wfd > summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:baseline;
  min-height:44px;font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.wfd > summary::-webkit-details-marker{display:none}
.wfd > summary .n{font-family:var(--mono);font-size: max(.72rem, 12px);font-weight:400;color:var(--stamp);flex:none}
.wfd > summary b{font-weight:700;flex:1}
/* the affordance: a chevron that turns, so a closed row does not read as a dead heading */
.wfd > summary::after{content:"";width:7px;height:7px;flex:none;align-self:center;
  border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}
.wfd[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.wfd > summary:hover{color:var(--stamp)}
.wfd > summary:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
.wfd-b{padding-top:6px}
/* An open item used to expand inside its own narrow column, leaving the one
   beside it empty and the text in a strip. Open, it takes the full row and
   sets its body in two columns, so it reads as a panel. */
@media (min-width:701px){
  .wfx .wfd[open]{grid-column:1 / -1;background:var(--field);border:1px solid var(--rule);
    border-top:2px solid var(--carbon);padding:14px 20px 18px}
  .wfx .wfd[open] .wfd-b{columns:26em 2;column-gap:40px;padding-top:10px}
  .wfx .wfd[open] .wfd-b > *{break-inside:avoid}
}
.wfx p{font-size:.93rem;line-height:1.6;margin:0 0 .7em;color:var(--text-2)}
.wfx p:last-child{margin-bottom:0}
.wfx strong{color:var(--text)}

/* the sector strip: which tools this one usually touches */
.tools-strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;margin:0 0 2.2rem;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.tools-strip .lab{font-family:var(--mono);font-size: max(.66rem, 12px);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-right:4px}
.tools-strip span:not(.lab){font-family:var(--mono);font-size:.76rem;border:1px solid var(--rule);border-radius: var(--radius-pill);padding:5px 11px;color:var(--text)}

/* ---------- Workflow rail (.wrail) ----------
   First attempt at this was a vertical node graph: 430px wide and 695px tall,
   sitting in the middle of a 1600px page with 585px of dead space either side.
   It made the page longer and used none of the width, which is the opposite of
   the job. This runs the same workflow left to right across the full column in
   about a sixth of the height. Reference is Sequence's numbered rail. */
.wrail{margin:0 0 2.2rem;padding:22px 0 4px}
.wrail-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:0 18px;position:relative}
.wrail-steps::before{content:"";position:absolute;left:12px;right:12px;top:11px;height:2px;
  background:var(--rule)}
.wrail-steps > li{position:relative;padding-top:34px}
.wrail-steps > li::before{content:"";position:absolute;top:4px;left:0;width:16px;height:16px;
  border-radius:50%;background:var(--surface);border:2px solid var(--slate)}
.wrail-steps > li:first-child::before{background:var(--carbon);border-color:var(--carbon)}
.wrail-steps > li.wrail-dec::before{background:var(--stamp);border-color:var(--stamp)}
.wrail-steps > li.wrail-watch::before{background:#1E7A45;border-color:#1E7A45}
.wrail-steps .rn{display:block;font-family:var(--mono);font-size:max(.6rem,12px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:4px}
.wrail-steps b{display:block;font-size:.92rem;line-height:1.3;letter-spacing:-.01em;margin-bottom:4px}
.wrail-steps i{display:block;font-style:normal;font-size:.8rem;color:var(--text-2);line-height:1.45}
.wrail-steps i.y,.wrail-steps i.n{padding-left:13px;position:relative;margin-top:3px}
.wrail-steps i.y::before,.wrail-steps i.n::before{position:absolute;left:0;top:0;
  font-family:var(--mono);font-size: max(.7rem, 12px)}
.wrail-steps i.y::before{content:"\2713";color:#1E7A45}
.wrail-steps i.n::before{content:"\2717";color:var(--stamp)}
.wrail-cap{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 4px}
.wrail-cap b{font-size:.95rem}
.wrail-cap span{font-family:var(--mono);font-size:max(.62rem,12px);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2)}
@media (max-width:1080px){
  .wrail-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
  .wrail-steps::before{display:none}
}
@media (max-width:560px){.wrail-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Learn hub (.lf / .lgrid) ----------
   The Learn menu covers six indexes and roughly fifty pages, and there was no
   page that showed them together. Chips filter by type, the box searches title
   and description. Both are enhancement: with no script every card is visible
   and this is an ordinary index. */
.lf{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;margin:0 0 10px}
.lf-chips{display:flex;flex-wrap:wrap;gap:8px}
.lf-chip{font:inherit;font-size:.85rem;cursor:pointer;background:var(--surface);
  border:1px solid var(--rule);border-radius: var(--radius-pill);padding:8px 14px;min-height:44px;
  display:inline-flex;align-items:center;gap:7px;color:var(--text)}
.lf-chip i{font-style:normal;font-family:var(--mono);font-size: max(.66rem, 12px);color:var(--text-2)}
.lf-chip:hover{border-color:var(--slate)}
.lf-chip.is-on{background:var(--carbon);border-color:var(--carbon);color:#fff}
.lf-chip.is-on i{color:#A7B0BA}
.lf-search input{font:inherit;font-size:.9rem;padding:11px 14px;min-height:44px;min-width:min(100%,260px);
  border:1px solid var(--slate);border-radius:var(--radius);background:var(--surface);color:var(--text)}
.lf-search input:focus-visible{outline:2px solid var(--carbon);outline-offset:2px}
.lf-count{font-family:var(--mono);font-size: max(.68rem, 12px);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);margin:0 0 18px;min-height:1em}
.lf-none{margin:28px 0 0;color:var(--text-2)}
.lgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1240px){.lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:920px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.lgrid{grid-template-columns:minmax(0,1fr)}}
.lcard{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--text);
  border:1px solid var(--rule);border-left:3px solid var(--rule);border-radius:var(--radius);
  padding:15px 16px;background:var(--surface)}
.lcard:hover{border-color:var(--slate);border-left-color:var(--stamp);background:var(--field)}
/* The category kicker was .6rem, which is 9.6px on a laptop -- smaller than
   the phone override that was supposed to be the floor. One size now. */
.lcard-k{font-family:var(--mono);font-size:max(.72rem,12px);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp)}
.lcard b{font-size:.98rem;line-height:1.35;letter-spacing:-.01em}
.lcard i{font-style:normal;font-size:.84rem;color:var(--text-2);line-height:1.5}
/* A screen-reader-only label has to stay 1px wherever it is dropped: a
   component rule on a plain element selector outweighs this class, and one
   of them stretched a hidden label to the column width, which widened the
   document past the viewport on a phone. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =====================================================   The rail: what this page contains, pinned beside the column.

   It is a grid column, not a floating box. The first version was
   positioned against the middle of the viewport, which is fine until a
   page puts content in that margin, and the industries pages do: it
   landed on top of their tables. Here the prose column keeps its exact
   width and centre, and the rail occupies a track beside it that only
   exists above 1400px, where there is room for 232 + 48 either side.
   Browsers without :has() simply never show it.
   ============================================================ */
/* The contents is a block by default and becomes the sticky rail only where
   there is margin for it. Eighteen pages widen the prose column with an
   inline style; turning those into the three-column grid would squeeze them
   from 1240 back to 720, so the rail is scoped away from them and they keep
   the block at every width. */
.tocr{
  display:block;margin:0 0 28px;padding:14px 16px 4px;
  background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--carbon);
}
.tocr b{display:block;margin-bottom:6px;font-family:var(--mono);font-size:max(.68rem,12px);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.tocr ol{list-style:none;margin:0;padding:0;counter-reset:tc;
  max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.tocr li{margin:0;border-bottom:1px solid var(--rule)}
.tocr li:last-child{border-bottom:0}
.tocr a{display:flex;gap:11px;align-items:baseline;min-height:44px;padding:8px 0;
  color:var(--text);text-decoration:none;line-height:1.35;font-size:max(.95rem,15px)}
.tocr a::before{counter-increment:tc;content:counter(tc,decimal-leading-zero);
  font-family:var(--mono);font-size:.76rem;font-weight:600;color:var(--text-2);flex:none}
.tocr a:focus-visible{outline:2px solid var(--carbon);outline-offset:-2px}
/* One contents per page: the block the author placed mid-article gives way. */
.wrap.prose:has(> .tocr) .toc{display:none}

@media (min-width:1400px){
  /* Only the standard-width column has margin to put a rail in. Every rule
     here is scoped to it, so the wide pages keep the block above untouched
     rather than being handed half of each. */
  .wrap.prose:not([style]):has(> .tocr){
    display:grid;max-width:none;justify-content:center;
    grid-template-columns:232px minmax(0,var(--col)) 232px;
    column-gap:48px;
  }
  .wrap.prose:not([style]):has(> .tocr) > *{grid-column:2}
  .wrap.prose:not([style]) > .tocr{
    grid-column:1;grid-row:1 / -1;align-self:start;
    position:sticky;top:104px;
    margin:0;padding:0 0 0 18px;background:none;border:0;border-left:2px solid var(--rule);
    max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
    font-size:.9rem;
  }
  .wrap.prose:not([style]) > .tocr b{margin-bottom:12px}
  .wrap.prose:not([style]) > .tocr ol{max-height:none;overflow:visible}
  .wrap.prose:not([style]) > .tocr li{margin:0 0 2px;border-bottom:0}
  .wrap.prose:not([style]) > .tocr a{
    display:block;min-height:0;margin-left:-20px;padding:5px 0 5px 18px;
    border-left:2px solid transparent;font-size:.9rem;
    color:var(--text-2);text-decoration:none;line-height:1.35;
    transition:color 120ms linear,border-color 120ms linear;
  }
  .wrap.prose:not([style]) > .tocr a::before{content:none}
  .wrap.prose:not([style]) > .tocr a:hover{color:var(--carbon)}
  .wrap.prose:not([style]) > .tocr a[aria-current="true"]{color:var(--carbon);font-weight:600;border-left-color:var(--stamp)}
  .wrap.prose:not([style]) > .tocr a:focus-visible{outline:2px solid var(--carbon);outline-offset:2px}
  .wrap.prose:not([style]):has(> .tocr) h2[id]{scroll-margin-top:104px}
}

@media (prefers-reduced-motion:reduce){.tocr a{transition:none}}
/* ---------- At a glance, horizontally (.gbar) ----------
   The service pages opened with a 170px label column and a value column: five
   short facts stacked down the page, using a third of a 1260px container and
   340px of height. Across the top instead, which is how a spec summary is
   normally read. `.spec` itself is ui.css's and stays untouched. */
.gbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);margin:18px 0 26px}
.gbar > div{padding:14px 16px;border-right:1px solid var(--rule)}
.gbar > div:last-child{border-right:0}
.gbar span{display:block;font-family:var(--mono);font-size: max(.62rem, 12px);letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:5px}
.gbar b{display:block;font-size:.92rem;line-height:1.4;letter-spacing:-.01em}
.gbar > div:first-child b{color:var(--stamp)}
@media (max-width:1080px){
  .gbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gbar > div:nth-child(3n){border-right:0}
  .gbar > div:nth-child(-n+3){border-bottom:1px solid var(--rule)}
}
@media (max-width:640px){
  .gbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gbar > div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .gbar > div:nth-child(2n){border-right:0}
  .gbar > div:last-child{border-bottom:0}
}

/* Who picks up, in the closing band. */
.cta-who{display:flex;align-items:center;gap:12px;margin:18px 0 0;font-size:.95rem;color:var(--text-2)}
.cta-who img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--rule)}
.cta-who img + img{margin-left:-14px}
.cta-who span{min-width:0}
/* ---------- Which of these is you (.cp) ----------
   A service page answers a different question from an industry page. An
   industry page has to prove we know your week, so it shows a workflow. A
   service page has to answer "is this the right thing for MY problem, and what
   is the catch" -- so it asks the visitor to find their own situation, and then
   tells them what changes about the build, the price and the risk.

   Radio inputs rather than a scripted tablist: the browser gives arrow-key
   navigation, roving focus and a checked state for nothing, there is no JS to
   fail, and the CSP is untouched. Checked names are unique per page. */
.cp{margin:0 0 2.6rem}
.cp-h{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 14px}
.cp-h b{font-size:1.05rem;letter-spacing:-.01em}
.cp-h span{font-family:var(--mono);font-size: max(.64rem, 12px);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2)}
.cp-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cp-pick input{position:absolute;opacity:0;width:1px;height:1px}
.cp-pick label{display:block;cursor:pointer;border:1px solid var(--rule);
  border-top:3px solid var(--rule);border-radius:var(--radius);padding:13px 15px;
  background:var(--surface);min-height:44px}
.cp-pick label span{display:block;font-family:var(--mono);font-size: max(.6rem, 12px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:4px}
.cp-pick label b{display:block;font-size:.95rem;line-height:1.3;letter-spacing:-.01em}
.cp-pick label i{display:block;font-style:normal;font-size:.81rem;color:var(--text-2);
  line-height:1.45;margin-top:3px}
.cp-pick label:hover{border-color:var(--slate)}
.cp-pick input:checked + label{border-color:var(--carbon);border-top-color:var(--stamp);
  background:var(--field)}
.cp-pick input:checked + label span{color:var(--stamp)}
.cp-pick input:focus-visible + label{outline:2px solid var(--carbon);outline-offset:3px}
/* the answer panel: three columns of consequence for the case you picked */
.cp-out{margin-top:12px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);overflow:hidden}
.cp-p{display:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.cp-p > div{padding:15px 17px;border-right:1px solid var(--rule)}
.cp-p > div:last-child{border-right:0}
.cp-p dt{font-family:var(--mono);font-size: max(.6rem, 12px);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);margin:0 0 5px}
.cp-p dd{margin:0;font-size:.9rem;line-height:1.55}
.cp-p .risk dt{color:var(--stamp)}
.cp-pick:has(input:nth-of-type(1):checked) ~ .cp-out .cp-p:nth-child(1),
.cp-pick:has(input:nth-of-type(2):checked) ~ .cp-out .cp-p:nth-child(2),
.cp-pick:has(input:nth-of-type(3):checked) ~ .cp-out .cp-p:nth-child(3){display:grid}
/* :has() is everywhere we care about, but if it is missing every panel would be
   hidden and the content would vanish, so default the first one visible. */
.cp-out .cp-p:nth-child(1){display:grid}
.cp-pick:has(input:nth-of-type(2):checked) ~ .cp-out .cp-p:nth-child(1),
.cp-pick:has(input:nth-of-type(3):checked) ~ .cp-out .cp-p:nth-child(1){display:none}
@media (max-width:860px){
  .cp-pick{grid-template-columns:minmax(0,1fr)}
  .cp-p{grid-template-columns:minmax(0,1fr)}
  .cp-p > div{border-right:0;border-bottom:1px solid var(--rule)}
  .cp-p > div:last-child{border-bottom:0}
}

/* The brand marks were drawn for the dark hero; on a light card they need the
   page's own ink. */
.card .tool-ic{fill:var(--slate)}
.card .ic{stroke:var(--slate)}

/* The glossary reuses the filter grid, but its cards must keep an h3 and a
   bare p: pages.py builds the DefinedTermSet by reading exactly that shape out
   of the fragment. So the card styles have to reach those two tags rather than
   the .lcard b / .lcard i the learn grid uses. */
.lcard h3{font-size:.98rem;line-height:1.35;letter-spacing:-.01em;margin:0 0 6px}
/* The learn and blog grids are links, the glossary's are not. Their titles
   became headings too, so they now meet this rule -- but their cards space
   themselves with the flex gap, and the glossary's longer definitions want
   the extra 6px. Scoping by the tag keeps both as they were drawn. */
a.lcard h3{margin:0}
.lcard p{margin:0;font-size:.92rem;line-height:1.55;color:var(--text-2);max-width:none}
.lcard a{color:var(--stamp);text-decoration:underline;text-underline-offset:2px}

/* The glossary's jump index. Thirty-eight terms over fifteen phone screens
   with no way in but scrolling; naming every term costs about a third of a
   screen and saves the rest. Built in build.py from the page's own h3 ids. */
.gloss-jump{margin:0 0 26px;padding:16px 18px 14px;background:var(--surface);
  border:1px solid var(--rule);border-top:3px solid var(--carbon)}
.gloss-jump-h{display:block;margin-bottom:10px;font-family:var(--mono);font-size:max(.7rem,12px);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.gloss-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gloss-jump li{margin:0}
.gloss-jump a{display:inline-flex;align-items:center;min-height:36px;padding:5px 11px;
  border:1px solid var(--rule);border-radius:var(--radius-pill);background:var(--field);
  font-size:.86rem;color:var(--text);text-decoration:none;line-height:1.2}
.gloss-jump a:hover{border-color:var(--carbon);background:var(--surface)}
.gloss-jump a:focus-visible{outline:2px solid var(--carbon);outline-offset:2px}
/* learn.js hides an entry when the filter has hidden the card it points at,
   so the index never offers a jump that goes nowhere. */
.gloss-jump li[hidden]{display:none}
/* The header is sticky, so a term landed under it without this. */
.lcard h3[id]{scroll-margin-top:96px}
@media (max-width:760px){
  .gloss-jump{margin-bottom:22px;padding:14px 15px 12px}
  .gloss-jump a{min-height:44px;font-size:max(.86rem,14px)}
  .lcard h3[id]{scroll-margin-top:76px}
  /* Thirty-eight chips at thumb size is 830px, a whole phone screen, which
     is the opposite of the point. The list scrolls inside itself instead:
     every term still reachable, about a quarter of a screen spent. */
  .gloss-jump ul{max-height:196px;overflow-y:auto;overscroll-behavior:contain;
    padding-right:2px;-webkit-overflow-scrolling:touch}
}

/* learn.js hides a filtered-out card with the hidden attribute, but .lcard
   sets display:flex, which beats the browser's [hidden] rule. The filter on
   /learn/ has therefore never filtered anything: chips set the state, the
   cards all stayed on screen. One rule, three pages. */
.lcard[hidden]{display:none}

/* ---------- the two calculators ----------
   They ran in the 720px prose column, so each input was 163px wide, every
   hint wrapped to three lines, and the four result tiles were squeezed under
   the fold. The page is wider now; the inputs go three across, and the
   answer stays on screen while the working is read. */
@media (min-width:1000px){
  .calc-grid{grid-template-columns:repeat(3,1fr)}
  .calc-out .calc-results,.calc-out .verdict-card{position:sticky;top:104px;z-index:1}
}
@media (max-width:420px){
  /* The headline number was last in the stack: the one figure a visitor came
     for, under four scrolls of working. */
  .calc-stat-lead{order:-1}
  .calc-results{display:flex;flex-direction:column}
}

/* The step diagram and the accordion were built for the 1240px pages, and
   their breakpoints read the viewport rather than the container. Inside the
   720px article column that put six steps in 105px each. Fewer columns, so
   the same components stay readable where the text is. */
/* Only in the narrow column. The pages built to carry these components widen
   this same wrapper with an inline max-width (1240px on the industries and
   comparison pages, 1080px on the calculators), and the rail is meant to run
   in one horizontal line there. A plain .prose rule broke that: six steps
   became three across on a 1440px screen. A container query cannot do this,
   because when the contents rail is on the wrapper spans the full width and
   the 720px column is one of its grid tracks. */
.wrap.prose:not([style]) .wrail-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
.wrap.prose:not([style]) .wrail-steps::before{display:none}
.wrap.prose:not([style]) .wfx{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){
  .wrap.prose:not([style]) .wrail-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrap.prose:not([style]) .wfx{grid-template-columns:1fr}
}
/* A jump to a numbered question landed under the sticky masthead. */
.prose ol li[id]{scroll-margin-top:104px}

/* ---------- phone legibility ----------
   Measured at 375: a set of labels and definitions had fallen to 9.6 to
   14.7px, below the point where they are comfortable to read at arm's
   length. The max() floor is the pattern this file already uses. */
@media (max-width:760px){
  .lcard p{font-size:max(.92rem,15.5px)}
  .lcard h3{font-size:max(.98rem,16px)}
  .lcard a{padding:4px 0}
  .spec dt,.gbar span{font-size:max(.62rem,12px)}
  .nx-note{font-size:max(.68rem,12px)}
  .nx-lead{font-size:max(.7rem,12px)}
  .lf-count{font-size:max(.68rem,12px)}
}

/* The booking slots are injected by slots.js after the page paints, and
   pushed everything under them down by 190px when they arrived: 0.083 of
   layout shift on 86 pages. Hold the space until they land. */
[data-book]:not([data-book-ready]){min-height:190px}
@media (min-width:700px){[data-book]:not([data-book-ready]){min-height:120px}}

/* The booking strip is injected into dark bands as well as light ones, and
   only the light case had been given colours: muted text measured 2.96:1 on
   carbon and the "other times" link 2.73:1, in the one red that is not
   allowed on dark. */
.ground-dark .nx-lead,.band-dark .nx-lead,.dark .nx-lead,
.ground-dark .nx-note,.band-dark .nx-note,.dark .nx-note{color:rgba(255,255,255,.72)}
.ground-dark .nx-more,.band-dark .nx-more,.dark .nx-more{color:var(--stamp-on-dark)}
.ground-dark .nx-slot,.band-dark .nx-slot,.dark .nx-slot{background:transparent;color:#fff;border-color:#7A848F}
.ground-dark .nx-day,.band-dark .nx-day,.dark .nx-day{color:#C3CAD2}
.ground-dark .nx-slot:hover,.band-dark .nx-slot:hover,.dark .nx-slot:hover{background:#252A31;border-color:#fff}

/* The seven Learn hubs, on a phone: a swipe row rather than 1,363px of
   single column. This lives here rather than in ui.css because .hubs is
   defined in this file and this file loads second. */
@media (max-width: 760px) {
  .hubs {
    display: flex; flex-wrap: nowrap; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 1.8rem -16px 0; padding: 2px 16px 10px;
    background:
      linear-gradient(to right, var(--field) 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat local,
      linear-gradient(to left, var(--field) 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.13), rgba(0,0,0,0)) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.13), rgba(0,0,0,0)) right / 12px 100% no-repeat scroll;
    border: 0;
  }
  .hubs::-webkit-scrollbar { display: none; }
  .hubs .hub, .hubs .hub:last-child {
    flex: 0 0 78%; scroll-snap-align: start; grid-column: auto;
    border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px;
  }
  .hub span { font-size: max(.92rem, 14.5px); }
}

@media (max-width: 760px) {
  /* Safari zooms on any field under 16px and does not zoom back; the
     contact form and the calculators are already at 16. */
  .lf-search input, .lf-search { font-size: max(.92rem, 16px); }
  /* The booking row was inside two lots of padding: 48px of chrome each
     side of a 375px screen left it 250px wide and 289px tall. */
  .cta-band { padding-left: 18px; padding-right: 18px; }
  .cta-band [data-book] { margin-left: -10px; margin-right: -10px; padding-left: 12px; padding-right: 12px; }
  /* The times share one row in equal columns rather than sitting at their
     own widths: 88, 97, 97 and a 112px "Other times" across two rows meant
     no edge lined up with any other. */
  .cta-band .nx-slot { flex: 1 1 0; min-width: 72px; padding-inline: 4px; }
  .cta-band .nx-day { width: 100%; margin: 2px 0 0; align-self: start; }
  /* "Other times" is a way out of the three on offer, not a fourth time, so
     it stops standing in the row dressed as one. */
  .cta-band .nx-more { width: 100%; justify-content: center; }
}

@media (max-width: 760px) {
  /* Component rules on element selectors outweigh a bare dt, and these
     kickers name the block under them: 9.6px is not a label a phone can
     read at arm's length. */
  .cp-p dt, .cp-pick label span { font-size: max(.6rem, 12px); }
}

@media (max-width: 760px) {
  /* The last of the sub-11px labels: the spec strip's own field names and
     the note that runs under the answer panel. */
  .gbar span, .spec span, .callout span, .cp-note, .cp-p .cp-note,
  .answer-label, .card-num { font-size: max(.62rem, 12px); }
}

/* A callout inside a three-up accordion column is 381px wide, and the
   component's own 24px of padding and 4px rule left 29 characters a line,
   about four words. In a narrow container it reads as a note rather than a
   panel: same meaning, less furniture. */
.wfd-b .callout, .wfx .callout, .vs-c .callout, .card .callout {
  padding: 13px 15px; border-left-width: 3px; margin: 1.2em 0;
}
.wfd-b .callout p, .wfx .callout p { font-size: .95rem; line-height: 1.55; }

/* ============================================================
   The run: the build doing its job, once, as you reach it.

   Fayez's note on the What we build pages was that every one of them
   is inert, and it measured: not one diagram, table or image in any
   content section of /services/workflow-automation/, against 1,158
   words. These pages sell sequences, so each one now shows its own
   sequence running, with the clock beside it. Every step and every
   figure comes from that page's own copy.

   run.js drives it and is emitted by build.py wherever [data-run]
   appears. Without the script the steps are simply a numbered list,
   which is what they are anyway.
   ============================================================ */
.run{display:grid;gap:22px}
@media (min-width:900px){.run{grid-template-columns:minmax(0,1fr) 236px;align-items:start}}
.run-k{display:flex;align-items:center;gap:10px;margin:0 0 6px;max-width:none;
  font-family:var(--mono);font-size:max(.7rem,12px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2)}
.run-k i{width:7px;height:7px;border-radius:50%;background:#2E9E5B;flex:none}
.run-h{font-size:clamp(1.2rem, 1rem + 0.8vw, 1.5rem);margin:0 0 18px;letter-spacing:-.02em}
.run-steps{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden}
.run-step{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;
  background:var(--surface);padding:13px 16px;transition:background 180ms linear}
.run-step .n{font-family:var(--mono);font-size:max(.72rem,12px);color:var(--text-2)}
.run-step .t{font-size:max(.97rem,15.5px);line-height:1.45}
.run-step .s{font-family:var(--mono);font-size:max(.66rem,12px);letter-spacing:.1em;
  text-transform:uppercase;color:var(--rule);white-space:nowrap}
.run-step.is-on{background:var(--field)}
.run-step.is-on .s{color:var(--stamp)}
.run-step.is-on .s::after{content:"running"}
.run-step.is-done .s{color:#2E7D4F}
.run-step.is-done .s::after{content:"done"}
.run-side{border-left:2px solid var(--carbon);padding-left:18px}
.run-clock{display:block;font-size:clamp(2rem, 1.4rem + 2vw, 2.8rem);letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums}
/* Words, not a figure: sized to stay on one line in the side column. */
.run-clock[data-run-total*=" "]{font-size:clamp(1.55rem, 1.2rem + 1.1vw, 2rem);
  letter-spacing:-.02em;white-space:nowrap}
.run-clock + span{display:block;font-family:var(--mono);font-size:max(.68rem,12px);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-top:8px}
.run-btn{appearance:none;font:inherit;cursor:pointer;margin-top:20px;
  background:var(--carbon);color:#fff;border:1px solid var(--carbon);
  border-radius:var(--radius);padding:11px 18px;font-size:.92rem;min-height:44px}
.run-btn[disabled]{opacity:.55;cursor:default}
.run-btn:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
.run-foot{margin:16px 0 0;max-width:68ch;font-family:var(--mono);
  font-size:max(.68rem,12px);letter-spacing:.04em;color:var(--text-2);line-height:1.6}
/* On carbon, where three of the six pages put it. */
.on-dark .run-steps,.dark .run-steps{border-color:#2C313A;background:#2C313A}
.on-dark .run-step,.dark .run-step{background:#1D2026;color:#fff}
.on-dark .run-step.is-on,.dark .run-step.is-on{background:#262A31}
.on-dark .run-step .n,.dark .run-step .n,
.on-dark .run-k,.dark .run-k,
.on-dark .run-clock + span,.dark .run-clock + span,
.on-dark .run-foot,.dark .run-foot{color:#A7B0BA}
.on-dark .run-step .s,.dark .run-step .s{color:#3C434E}
.on-dark .run-step.is-on .s,.dark .run-step.is-on .s{color:var(--stamp-on-dark)}
.on-dark .run-step.is-done .s,.dark .run-step.is-done .s{color:#6FCF97}
.on-dark .run-side,.dark .run-side{border-left-color:var(--stamp)}
.on-dark .run-btn,.dark .run-btn{background:var(--field);color:var(--carbon);border-color:var(--field)}
@media (max-width:560px){
  .run-step{grid-template-columns:28px minmax(0,1fr);row-gap:4px}
  .run-step .s{grid-column:2;text-align:left}
  .run-side{border-left:0;border-top:2px solid var(--carbon);padding:16px 0 0}
  .on-dark .run-side,.dark .run-side{border-top-color:var(--stamp)}
}

/* ============================================================
   The 12px type floor lives at each source rule, not here.

   It used to be one blanket list in this file. That list could only
   set a single value, so it lowered as well as raised: .kicker is
   11.52px in one context and 13.12px in another, and a flat 12px
   fixed the first while shrinking the second. Five labels were being
   quietly clamped down by the thing meant to protect them.

   Every rule that sets type under 12px now floors itself with
   max(<its own size>, 12px), in the file where it lives. A max()
   cannot lower anything, so this class of mistake is gone rather
   than fixed. Website 2 used the same form on the phone rules during
   the mobile audit; this extends it to the rest.
   ============================================================ */

/* Balancing is a desktop nicety rather than a legibility floor: on a
   narrow column it can leave a line short where wrapping would not. */
@media (min-width: 761px) {
  h1, h2, .sv-d1, .sv-d2, .hm-h1 { text-wrap: balance; }
}