/* ============================================================
   SEPTEMBER SKIN . BUSINESS HOME ONLY
   Source: september-website/Business - Home page/Business Home.pdf (1440x9300).
   Measured specs: web/qa/skin/bizhome-tiles-01.md, -23.md, -456.md,
   bizhome-components.md. Behaviour answered by Yuval: bizhome-behaviour.md.

   WHY A SEPARATE FILE. dd-shell.css is shared by all 39 live pages and
   alt-home.css already carries the July and August passes. Putting the
   September skin in either one means a business-home change leaks into
   pages nobody reviewed. This file loads last, is scoped to
   [data-sept="bizhome"], and reverting the whole pass is deleting one
   <link>. Nothing here may be moved into a shared file without re-running
   the other 38 pages.

   TEXT IS FROZEN. qa/freeze/index.txt holds 588 approved strings.
   node qa/text-freeze.mjs index.html must print CLEAN before commit.
   No rule in this file may add, remove or reword visible copy, which is
   why there is no ::before or ::after carrying content anywhere below.
   ============================================================ */

[data-sept="bizhome"]{
  /* Container. Yuval 2026-09-09: 1280 max, 1040 hero column, deliberately
     narrower to buy side spacing. The tiles-23 agent read 1160 mid-page;
     treated as raster measurement error, not a third width. */
  --sept-wrap:1280px;
  --sept-hero-col:1040px;
  --sept-gutter:80px;

  /* Warm dark. The artboard's hero is a warm brown-black vignette, not the
     neutral #0c0c0e the live card uses. Two agents converged on #160f0a at
     the edges with a warmer centre glow. */
  --sept-dark:#180d02;   /* sampled, was #160f0a by estimate */
  --sept-dark-glow:#7c6656; /* sampled at the top centre of the hero */
  --sept-on-dark:#ffffff;
  --sept-on-dark-soft:#a79e92;

  /* Light ground and the cream that sits on it. These are two distinct
     tones in the artboard, not one off-white: cards are visibly warmer than
     the page. Confirm against Figma variables when the file arrives. */
  --sept-ground:#fdfdfb;
  --sept-cream:#f2ede6;
  --sept-cream-card:#f0ebe1;
  --sept-line:#e7e1d5;
  --sept-ink:#1c1712;
  --sept-ink-2:#4d4a44;
  --sept-ink-3:#6f6a63;
  --sept-ink-mute:#9a958c;

  /* Accent. The artboard measures #e8752a. The live token --brand is
     #f37f00. Kept separate rather than reconciled, because --brand is
     shared and repointing it would restyle 38 other pages. */
  --sept-accent:#e8752a;

  --sept-r-card:28px;
  --sept-r-panel:24px;
  --sept-pill:100px;

  /* Nav band heights. The hero pulls up by exactly --sept-nav-a, so these two
     must never be edited independently: an earlier version hard-coded -91px
     while the initial bar was 126 tall, which left the transparent bar sitting
     above the hero instead of on it. */
  /* ONE bar height for both states, per Yuval 2026-09-09. Navbar (1).png, the
     only navbar asset the designer supplied, is 91 tall, and a bar that
     changes height on scroll reflows the page under the reader. The two logo
     files are still different sizes (127x40 on dark, 99x32 on white) because
     the designer supplied them that way. */
  --sept-nav-a:87px;   /* 87 on all three home pages, 2026-09-10. The hero
                          pulls up by this same variable, so the two stay in step. */
  --sept-nav-b:87px;

  /* One easing set, inherited from dd-shell.css rather than invented. */
  --sept-t:.2s var(--ease,cubic-bezier(.16,1,.3,1));
}

/* ---------- containers ---------- */
[data-sept="bizhome"] .wrap{
  max-width:var(--sept-wrap);
  padding-left:var(--sept-gutter);
  padding-right:var(--sept-gutter);
}
@media (max-width:900px){
  [data-sept="bizhome"] .wrap{padding-left:24px;padding-right:24px}
}

/* ---------- fold 1 . hero ---------- */
/* Live is an inset rounded dark card with left-aligned copy. The artboard is
   full bleed, centred, with the device mockup beneath the buttons. */
/* The transparent bar sits ON the hero, so the hero slides up under it by
   exactly the initial bar's height. Tied to the token so the two can never
   drift: a previous version hard-coded -91px while the bar was 126 tall, and
   the bar ended up floating above the hero with page ground behind it. */
[data-sept="bizhome"] .alt-hero{
  padding-top:0;
  /* The hero SECTION carried 64.8px of inherited bottom padding, below the
     card, which pushed every fold beneath it down by the same amount and was
     the constant 66px offset the whole page showed. The artboard's gap from
     the hero's bottom edge (1382) to the next heading (1495) is 113, and the
     following section already spends 96 of it. */
  padding-bottom:17px;
  margin-top:calc(var(--sept-nav-a) * -1);
}
[data-sept="bizhome"] .alt-hero>.wrap{max-width:none;padding:0}

[data-sept="bizhome"] .alt-hero-card{
  border-radius:0;
  min-height:0;
  display:block;
  background:var(--sept-dark);
  padding:0 var(--sept-gutter) 0;
  text-align:center;
}
/* The warm vignette, sampled from the artboard rather than guessed. An earlier
   version put the glow at the BOTTOM centre, which is backwards and is why the
   fold did not match.

   Measured off tile0-1.png, converted to CSS px:

     y=  15   left #34251a   centre #7c6656   right #34251a
     y= 225   left #2d1f13   centre #5c493c   right #2d1f13
     y= 435   left #21150a   centre #423126   right #21150a
     y= 645+  left #180d02   centre #180d02   right #180d02

   So: a wide warm glow centred at the TOP centre, over a #180d02 base, fully
   settled to base about 645px down. The faint horizontal banding in the export
   is a PDF rasterisation artifact of a smooth gradient and is not reproduced. */
[data-sept="bizhome"] .alt-hero-scene{
  /* Two layers, because one radial could not hold both profiles at once: the
     edge columns decay on their own curve and the centre carries a separate
     glow on top. A single radial fitted to the centre left the edges 20 to 30
     too dark, measured.

     Layer 1, the linear decay, fitted to the LEFT EDGE samples:
       y=15 #342519 . y=225 #2d1f13 . y=435 #21150a . y=645+ #180d02
     Layer 2, the centre glow, fitted to the CENTRE samples minus layer 1:
       y=15 #7c6656 . y=225 #5c493c . y=435 #423126 . y=645+ #180d02
     Both settle to base at about 645px, which is 48% of the hero's height. */
  background:
    radial-gradient(80% 56% at 50% -4%,
      rgba(206,180,156,.60) 0%,
      rgba(174,144,118,.50) 24%,
      rgba(130,102,78,.36) 44%,
      rgba(80,60,42,.18) 64%,
      rgba(24,13,2,0) 86%),
    linear-gradient(to bottom,
      #2f2013 0%,
      #2a1c11 16%,
      #241708 33%,
      #180d02 48%,
      #180d02 100%);
}
[data-sept="bizhome"] .alt-hero-scene::after{content:none}

/* Hero rhythm, from the artboard's own text coordinates:
     nav band   0..126
     H1         glyph top 157, two lines 63 apart, x 292..1149 centred on 720
     subhead    312, cap 32, x 295..1145
     buttons    393, cap 25, x 572..868
     mockup     524..1182, x 226..1288 so 1062 wide
     hero ends  1382
   The mockup PNG carries transparent margin either side, so a 1062 device
   needs a box of about 1440, which means breaking out of the card's 80px
   padding rather than sitting inside it. */
[data-sept="bizhome"] .alt-hero-copy{
  max-width:var(--sept-hero-col);
  margin:0 auto;
  padding:156px 0 0;
}
[data-sept="bizhome"] .alt-hero-copy h1{
  font-size:clamp(34px,3.9vw,56px);
  font-weight:600;
  line-height:1.125;
  max-width:900px;
  margin:0 auto;
  text-wrap:balance;
  text-shadow:none;
}
[data-sept="bizhome"] .alt-hero-copy .sub{
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.5;
  color:var(--sept-on-dark-soft);
  max-width:74ch;
  margin:29px auto 0;
  text-shadow:none;
}
/* The button row is an inline style on the markup, so it is centred here
   rather than by editing the attribute. */
[data-sept="bizhome"] .alt-hero-copy>div:last-child{
  justify-content:center;
  margin-top:38px!important;
  gap:16px!important;
}
[data-sept="bizhome"] .alt-hero-anchor{top:172px}

/* Compliance chips. Rule 13 as amended 2026-07-13 makes hero top-left the
   approved disclosure position, and the freeze requires both strings to
   survive, so they move rather than go. */
[data-sept="bizhome"] .alt-hero-anchor{
  position:absolute;
  top:clamp(96px,8vw,116px);
  left:var(--sept-gutter);
  right:auto;
  bottom:auto;
  display:flex;
  gap:8px;
}
[data-sept="bizhome"] .alt-hero-anchor .bdg{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--sept-pill);
  padding:6px 14px;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--sept-on-dark);
}

/* Device mockup. Decorative: the same information is in the copy above it. */
/* The asset is now cropped to its own content box (2141x1721), so the box IS
   the device: no transparent margin to compensate for. 2026-09-10: it is now
   ACTUALLY 2141x1721. The file shipped at 2126x1709, an over-tight trim that
   disagreed with the width/height attributes by 0.7%; the reissue from
   "business hero image fix.png" is trimmed at alpha>8, which lands exactly on
   the declared box. Alpha diff against the previous asset is 0.0, so the
   silhouette and the 1062px geometry below are untouched, only the monitor's
   right-hand account column was corrected (RGB diff 24/255 at x 50..60%,
   under 8 everywhere else). Cache-bust is hero-biz.webp?v=3 in index.html.
   Artboard has it at
   x 226..1288 (1062 wide) running from y 524 down to the hero's bottom edge at
   1382, the lower part being the reflection fading into the dark, which is why
   a brightness test read it as ending at 1182. 1062 x 1721/2141 = 854, and
   524 + 854 = 1378. So the hero card carries no bottom padding: the mockup
   finishes the fold. */
[data-sept="bizhome"] .sept-hero-shot{
  display:block;
  width:1062px;
  max-width:100%;
  height:auto;
  margin:92px auto 0;
}

/* ---------- fold 2 . currency accounts, 2x2 ---------- */
/* Live renders four numbered rows separated by hairlines. The artboard is a
   2x2 grid of cream cards. The 01-04 numerals have no place in a grid, and
   they are decorative (aria-hidden in the markup), so they are hidden
   rather than deleted: removing the nodes would be a markup change with no
   visual purpose, and the gate ignores them either way. */
[data-sept="bizhome"] .seg-rows.horizontal{
  border-top:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  max-width:var(--sept-hero-col);
  margin-inline:auto;
  align-items:stretch;
}
@media (max-width:820px){
  [data-sept="bizhome"] .seg-rows.horizontal{grid-template-columns:1fr;gap:20px}
}
[data-sept="bizhome"] .seg-rows.horizontal .seg-row{
  display:flex;
  flex-direction:column;
  gap:0;
  border-bottom:0;
  background:var(--sept-cream-card);
  border-radius:var(--sept-r-card);
  padding:40px;
}
[data-sept="bizhome"] .seg-row-label{
  display:flex;
  align-items:center;
  gap:14px;
}
[data-sept="bizhome"] .seg-row-label .num{display:none}
[data-sept="bizhome"] .seg-row-label h3{
  margin:0;
  font-size:27px;
  font-weight:600;
  max-width:none;
  color:var(--sept-ink);
}
[data-sept="bizhome"] .seg-row-body{margin-top:30px}
[data-sept="bizhome"] .seg-row-body p{
  font-size:17px;
  line-height:1.45;
  color:var(--sept-ink-3);
  max-width:44ch;
  margin:0;
}
[data-sept="bizhome"] .seg-row-body .tile-spec{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:11px;
}
[data-sept="bizhome"] .tile-spec span{
  border:1px solid #d6cfc0;
  background:transparent;
  border-radius:var(--sept-pill);
  padding:7px 17px;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  color:#4a443c;
}

/* ---------- shared . section rhythm and headings ---------- */
/* Section rhythm. The artboard's inter-fold gaps are 20 to 40 percent tighter
   than this file's first guess of 9vw, which rendered 129.6px a side at 1440
   and made the page 961px taller than the design. Per-fold corrections follow
   below, measured against the artboard's own heading positions. */
[data-sept="bizhome"] .alt-gap{padding-block:clamp(56px,6.7vw,104px)}
[data-sept="bizhome"] .alt-gap h2.center{
  font-size:clamp(28px,3.1vw,44px);
  font-weight:600;
  line-height:1.15;
  color:var(--sept-ink);
  text-wrap:balance;
}
[data-sept="bizhome"] .alt-gap .lead.center{
  font-size:18px;
  line-height:1.55;
  color:var(--sept-ink-3);
}

/* ---------- buttons ---------- */
/* Pill for actions, rounded rect for containers: the artboard runs a
   deliberate two-tier radius scale, confirmed across every fold. */
[data-sept="bizhome"] .btn{
  border-radius:var(--sept-pill);
  min-height:52px;
  padding-inline:28px;
  font-size:16px;
  font-weight:700;
  transition:background var(--sept-t),color var(--sept-t),border-color var(--sept-t);
}
/* 2026-10-06 designer notes (otabek biz changes): primary CTAs are #121212, not
   orange. Hover #2B2926 per his spec's interactive states. */
[data-sept="bizhome"] .btn-primary{background:#121212;color:#fff}
[data-sept="bizhome"] .btn-primary:hover{background:#2B2926}
[data-sept="bizhome"] .alt-hero .btn-d{
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:var(--sept-on-dark);
  font-weight:600;
}
[data-sept="bizhome"] .alt-hero .btn-d:hover{
  border-color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.06);
}

@media (prefers-reduced-motion:reduce){
  [data-sept="bizhome"] *{transition:none!important}
}

/* Flag mark on each currency card. The artboard's heading reads "GBP" with a
   circular flag; the approved copy reads "GBP account" and the freeze forbids
   dropping the word, so the icon is added and the text stands. */
[data-sept="bizhome"] .sept-flag{
  width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;
}

/* Release the August photo-band hero. alt-home.css:139 sets overflow:hidden and
   alt-home.css:1171 hard-sets height:var(--hero-h,640px) above 940px, which
   clipped the September hero's copy and mockup to 640px. The September hero is
   content-height, so both are undone here rather than edited there: that rule
   still governs every other alt page. */
[data-sept="bizhome"] .alt-hero-card{
  height:auto;
  min-height:0;
  overflow:visible;
}
@media (min-width:940px){
  [data-sept="bizhome"] .alt-hero-card{height:auto;min-height:0}
}

/* The mockup PNG carries transparent margin: the device group occupies about
   74% of the image width. At a 1000px box the devices render 738px, against
   the artboard's ~1000px. Sizing to the card's inner width puts the devices at
   about 945px, which is as close as the hero gutters allow without bleeding. */


/* ============================================================
   FOLD 3 . RECEIVE / CONVERT / PAY
   The control already exists and works (data-alt-tabs in dd-shell.js).
   This is a restyle to the artboard's pill treatment, not a rebuild.
   ============================================================ */
[data-sept="bizhome"] .bmt>.wrap{max-width:var(--sept-wrap)}
[data-sept="bizhome"] .bmt h2{
  font-size:clamp(28px,2.9vw,42px)!important;
  font-weight:600!important;
  line-height:1.15;
  max-width:24ch!important;
  margin-inline:auto;
  text-align:center;
  color:var(--sept-ink);
}
[data-sept="bizhome"] .bmt>.wrap>.lead{
  max-width:62ch!important;
  margin:18px auto 0!important;
  text-align:center;
  font-size:20px;
  line-height:1.5;
  color:var(--sept-ink-3);
}
[data-sept="bizhome"] .alt-tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:clamp(30px,3.2vw,46px) auto clamp(26px,2.8vw,40px);
  border:0;
  padding:0;
  background:none;
}
[data-sept="bizhome"] .alt-tabs button{
  border:0;
  border-radius:var(--sept-pill);
  min-height:48px;
  padding:0 24px;
  font-size:15px;
  font-weight:500;
  background:var(--sept-cream);
  color:var(--sept-ink-3);
  cursor:pointer;
  transition:background var(--sept-t),color var(--sept-t);
}
[data-sept="bizhome"] .alt-tabs button:hover{color:var(--sept-ink)}
[data-sept="bizhome"] .alt-tabs button[aria-selected="true"]{
  background:#211d1a;
  color:#fff;
  font-weight:700;
}

/* Cards below the tabs: the artboard splits each into a bordered art panel
   with the heading and copy sitting on the page ground beneath it, rather
   than one card wrapping both. */
/* The panel and the row are the SAME element: class="alt-tilerow three
   alt-tilepanel on". An earlier version of this rule set display:grid on
   .alt-tilerow.three unconditionally, which outranked dd-shell's
   .alt-tilepanel:not(.on){display:none} and made all three tab panels render
   at once. The grid now applies only to the selected panel. */
[data-sept="bizhome"] .alt-tilerow.three:not(.on){display:none}
[data-sept="bizhome"] .alt-tilerow.three.on{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width:900px){
  [data-sept="bizhome"] .alt-tilerow.three.on{grid-template-columns:1fr}
}
[data-sept="bizhome"] .alt-tile{
  background:none;
  border:0;
  padding:0;
  box-shadow:none;
}
[data-sept="bizhome"] .alt-tile .tile-art{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  background:#f5f1e9;
  border:1px solid var(--sept-line);
  border-radius:22px;
  display:block;
}
[data-sept="bizhome"] .alt-tile h3{
  font-size:26px;
  font-weight:600;
  line-height:1.25;
  color:#1a1a1a;
  margin:18px 0 0;
}
[data-sept="bizhome"] .alt-tile p{
  font-size:15px;
  line-height:1.5;
  color:var(--sept-ink-3);
  margin:8px 0 0;
}
[data-sept="bizhome"] .alt-tile .glyph,
[data-sept="bizhome"] .alt-tile .arrow{display:none}

/* ============================================================
   FOLD 4 . CONTROL AND PROCESS PAYMENTS AT SCALE
   Live renders all five capabilities as a 6-up grid, every paragraph
   visible. The artboard is a stepper: five labels left, one panel right,
   five dots under the panel. Yuval 2026-09-09 confirmed the labels and the
   dots are ONE control, the dots are clickable, and Roles and permissions
   is the default.

   Every paragraph stays in the DOM. Only one is visible at a time, so the
   freeze still counts all five: qa/text-freeze.mjs strips [hidden] before
   reading, which is why panels are hidden with a class and aria, not by
   removing them.
   ============================================================ */
[data-sept="bizhome"] .sept-stepper{
  display:grid;
  grid-template-columns:479fr 491fr;
  gap:100px;
  max-width:var(--sept-hero-col);
  margin-inline:auto;
  align-items:start;
}
@media (max-width:900px){
  [data-sept="bizhome"] .sept-stepper{grid-template-columns:1fr;gap:32px}
}
[data-sept="bizhome"] .sept-steplist{
  display:flex;
  flex-direction:column;
  gap:4px;
  list-style:none;
  margin:0;
  padding:0;
}
[data-sept="bizhome"] .sept-steplist button{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  border-radius:18px;
  padding:18px 24px;
  font-size:17px;
  font-weight:400;
  line-height:1.35;
  color:var(--sept-ink-mute);
  cursor:pointer;
  transition:background var(--sept-t),color var(--sept-t);
}
[data-sept="bizhome"] .sept-steplist button:hover{color:var(--sept-ink)}
[data-sept="bizhome"] .sept-steplist button[aria-selected="true"]{
  background:var(--sept-cream);
  color:var(--sept-ink);
  font-weight:600;
}
[data-sept="bizhome"] .sept-steplist .ic{flex:0 0 auto;display:block;width:20px;height:20px}
[data-sept="bizhome"] .sept-steplist .ic svg{width:20px;height:20px;display:block}
/* The icon pairs ship as - black and - grey. Rather than swap two files per
   row, the inline SVG's hardcoded #121212 stroke is overridden by currentColor
   so the icon tracks the label's own state colour. */
[data-sept="bizhome"] .sept-steplist .ic svg *{stroke:currentColor!important}
[data-sept="bizhome"] .sept-stepicon{width:20px;height:20px;display:block}

[data-sept="bizhome"] .sept-steppanel{
  position:relative;
  background:var(--sept-ground);
  border:1px solid #e6e0d6;
  border-radius:26px;
  padding:40px 40px 76px;
  min-height:400px;
}
[data-sept="bizhome"] .sept-steppanel .g{margin:0}
[data-sept="bizhome"] .sept-steppanel .g[hidden]{display:none}
[data-sept="bizhome"] .sept-steppanel .g .ic{display:none}
[data-sept="bizhome"] .sept-steppanel .g b{
  display:block;
  font-size:22px;
  font-weight:600;
  line-height:1.25;
  color:var(--sept-ink);
}
[data-sept="bizhome"] .sept-steppanel .g p{
  font-size:17px;
  line-height:1.5;
  color:var(--sept-ink-2);
  margin:14px 0 0;
}
[data-sept="bizhome"] .sept-dots{
  position:absolute;
  left:40px;
  bottom:34px;
  display:flex;
  gap:8px;
}
[data-sept="bizhome"] .sept-dots button{
  width:8px;height:8px;padding:0;
  border:0;border-radius:50%;
  background:#d8d3c9;
  cursor:pointer;
  transition:background var(--sept-t);
}
[data-sept="bizhome"] .sept-dots button[aria-selected="true"]{background:#8a857c}
[data-sept="bizhome"] .sept-dots button:hover{background:#b3ada2}
/* Dots are 8px on a 16px pitch. An earlier attempt grew each hit area to 44px
   square, which made adjacent targets overlap so a dot swallowed its
   neighbour's clicks. The hit area therefore grows VERTICALLY only, to 40px,
   plus half the gap horizontally, which is the most that can be added before
   targets collide again.
   That leaves the dots under the 24px minimum target size. It is acceptable
   here only because they are a redundant control: the five list buttons drive
   the same panel, are 44px+ tall, are keyboard reachable with roving focus,
   and each dot carries the capability name as its aria-label. If the dots ever
   become the only way to reach a panel, this has to be revisited. */
[data-sept="bizhome"] .sept-dots button{position:relative}
[data-sept="bizhome"] .sept-dots button::after{
  content:"";position:absolute;inset:-16px -4px;
}

[data-sept="bizhome"] .sept-steplist button:focus-visible,
[data-sept="bizhome"] .sept-dots button:focus-visible{
  outline:2px solid var(--sept-accent);
  outline-offset:2px;
}

/* ============================================================
   BUSINESS PLANS
   Rebuilt from the PDF text layer's own coordinates, which is the first
   measurement of this fold that was actually of this fold. Two earlier
   attempts were wrong: the tiles-456 spec described bordered cards with an
   orange glow, and my own crop sampled y=7314, which is the "Take DigiDoe
   with you" panel, not this one. Hence the dark panel that had no business
   being here.

   Exact, from pdftotext -bbox (1pt = 1 CSS px on a 1440x9300 artboard):

     y=5948  x 585..855    "Business plans", cap 60, centred
     y=6020  x 445..996    standfirst, two lines, cap 32, centred
     y=6166  x 110 / 547 / 983   plan names, cap 44, LEFT aligned
     y=6286  same x        prices, cap 34, with a smaller /mo suffix
     y=6328  same x        annual line, cap 22
     y=6451  x 630..809    ONE "Compare all features", centred on 719.5
     y=6518  x 387..1053   fee schedule line, centred

   So: no panel, no cards, no dividers, no dark. Three left-aligned text
   columns pitched 437 apart in a 1220 container, which centres at 110 either
   side, then one centred link, then the centred fee line.
   ============================================================ */
[data-sept="bizhome"] section:has([data-alt-caro]) > .wrap{
  max-width:none;
  padding-inline:80px;
}
[data-sept="bizhome"] .alt-caro,
[data-sept="bizhome"] .alt-caro-grid.single{
  max-width:none;padding:0;margin-inline:0;width:auto;background:none;
}
/* Three cards, measured at y=6250 where the borders are unambiguous:
     Core     x  80..486   1px hairline #e1ded6
     Dynamic  x 517..923   1px ORANGE  #f7af60
     Premium  x 953..1360  dark gradient, no border
   All 406 wide with 31px gutters in the 1280 container, 206 tall, and the text
   sits 30px in from each card's left edge (110, 547, 983).

   An earlier pass concluded this fold had no cards at all. That reading came
   from sampling card FILLS at x=150 and x=600, which are white inside Core and
   Dynamic; it never tested for borders. */
[data-sept="bizhome"] [data-alt-caro]{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:31px;
  /* Artboard: cards end 6364, the CTA sits at 6441 and the fee line at 6518,
     so 77 below the cards and 31 below the button. */
  row-gap:95px;
  max-width:1280px;
  margin-inline:auto;
  /* stretch, not start: Premium's annual line wraps to two lines where Core
     and Dynamic take one, so with start alignment it grew ~27px taller than
     its siblings. */
  align-items:stretch;
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  color:inherit;
  overflow:visible;
}
@media (max-width:900px){
  [data-sept="bizhome"] [data-alt-caro]{grid-template-columns:1fr;row-gap:40px}
}
[data-sept="bizhome"] .alt-caro-nav,
[data-sept="bizhome"] .alt-caro-dots{display:none}
[data-sept="bizhome"] .alt-caro-slide{
  /* alt-home.css stacks the carousel's slides by pinning every one of them to
     grid-column:1 / grid-row:1 in a single cell. Resetting position was not
     enough: without these two the three plans render on top of each other at
     x=110, which is exactly what the fold looked like. */
  grid-column:auto!important;
  grid-row:auto!important;
  display:flex!important;
  position:static!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  flex-direction:column;
  gap:6px;
  background:none;
  border:1px solid #e1ded6;
  border-radius:20px;
  box-shadow:none;
  padding:30px;
  min-height:206px;
  inset:auto;
  width:auto;
  text-align:left;
}
/* Dynamic carries the orange border. Tagged in sept-bizhome.js because the
   carousel's nav and dots are siblings, so :nth-of-type lands on the wrong
   node. */
/* Dynamic: orange border AND an orange bloom under the card. The bloom is
   plainly visible under this card in the artboard, hugging its lower edge. An
   earlier pass moved it to the CTA; it belongs here. */
[data-sept="bizhome"] .sept-plan-featured{
  border-color:#f7af60;
  box-shadow:0 18px 40px -6px rgba(232,117,42,.34);
}
/* Three stacked parts per plan, as the artboard sets them. Spans are added by
   sept-bizhome.js; the separator is hidden, not deleted. */
[data-sept="bizhome"] .alt-caro-slide h3{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  text-align:left;
  align-items:baseline;
  margin:0;
  font-weight:600;
  line-height:1.1;
  color:var(--sept-ink);
  font-variant-numeric:tabular-nums;
}
[data-sept="bizhome"] .sept-plan-sep{
  /* Hidden, not removed: the freeze reads text nodes, so the string stays. */
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
[data-sept="bizhome"] .sept-plan-name{
  flex:0 0 100%;
  text-align:left;
  font-size:28px;
  font-weight:600;
  margin-bottom:44px;
}
[data-sept="bizhome"] .sept-plan-featured .sept-plan-name{color:var(--sept-accent)}
[data-sept="bizhome"] .sept-plan-amount{
  font-size:44px;
  font-weight:600;
  letter-spacing:-.01em;
}
[data-sept="bizhome"] .sept-plan-per{
  font-size:18px;
  font-weight:500;
  color:var(--sept-ink-3);
  margin-left:5px;
}
[data-sept="bizhome"] .sept-plan-invert .sept-plan-per{color:rgba(255,255,255,.72)}
[data-sept="bizhome"] .alt-caro-slide .muted{
  font-size:18px;line-height:1.45;color:var(--sept-ink-3);margin:6px 0 0;
}
/* Premium is a dark card, and the only carded plan. Measured at x 953..1360
   (407 wide) and y 6141..6380 (239 tall), so it starts 30px left of its own
   text column and runs to the container's right edge, with a left-to-right
   gradient and a radius of about 20.

   An earlier pass stripped all plan emphasis after concluding this fold had
   none. That reading came off the app-store panel, not this fold. */
[data-sept="bizhome"] .sept-plan-invert{
  background:linear-gradient(90deg,#616161 0%,#4c4c4c 50%,#3b3b3b 100%);
  border-color:transparent;
}
[data-sept="bizhome"] .sept-plan-invert h3{color:#fff}
[data-sept="bizhome"] .sept-plan-invert .muted{color:rgba(255,255,255,.72)}
/* The single centred link. sept-bizhome.js moves the first plan's link out to
   here and suppresses the other two, because the artboard shows exactly one
   and all three strings are frozen approved copy that may not be deleted. */
[data-sept="bizhome"] .sept-plans-cta{
  grid-column:1 / -1;
  justify-self:center;
  margin-top:0;
  position:relative;
  isolation:isolate;
}
/* The CTA is a bordered pill with a soft orange bloom behind it. Measured by
   isolating grey (low-saturation) pixels, because the bloom masks the border
   everywhere except on the text row:

     horizontal borders  y 6441 and y 6487, running x 612..828
     vertical borders    x 610 and x 829
     so the button is   219 x 46, centred on 719.5
     fill               white
     bloom              x 500..940, y 6390..6533, centred on the button in
                        both axes

   Two earlier readings of this were wrong. The first sampled only x 600..830
   at one row, landed inside the button, saw white and concluded "plain text
   link, no border". The second attributed the bloom to the Dynamic card
   because x 500..940 happens to match that card's 517..923; the bloom's
   vertical centre (6461) sits on the button's (6464), not the card's. */
[data-sept="bizhome"] .sept-plans-cta .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:226px;min-height:46px;height:46px;padding:0 24px;line-height:1;
  background:#fff;
  border:1px solid #cfcbc4;
  border-radius:var(--sept-pill);
  box-shadow:none;
  color:var(--sept-ink-3);
  font-weight:500;
  font-size:17px;
  white-space:nowrap;
}
[data-sept="bizhome"] .sept-plans-cta .btn:hover{
  background:#faf9f7;border-color:var(--sept-ink-3);color:var(--sept-ink);
  text-decoration:none;
}
[data-sept="bizhome"] .sept-plans-cta .btn:hover{text-decoration:none} /* 2026-10-06: it is a pill, not a text link; his .btn-light:hover is #ECEAE5, set below */
[data-sept="bizhome"] .alt-caro-slide .caro-cta[hidden]{display:none!important}

/* ---------- "Ready to move with more comfort?" ----------
   The whole block sits on a panel, not on the page ground: fill #f4f3f0,
   x 80..1359 so the 1280 container, y 5430..5834 so 404 tall, radius about 40.
   ---------------------------------------------------------- */
[data-sept="bizhome"] main > section:nth-child(7) > .wrap{
  max-width:var(--sept-wrap);
  padding:76px 80px;
  background:#f4f3f0;
  border-radius:40px;
  min-height:404px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* ---------- NAVBAR . TWO STATES ----------
   Measured from Business Home.png (1440x9300, 1:1 CSS) for the initial view
   and Navbar (1).png (1444x91, 1:1 CSS) for the scrolled one. All three
   navbar files the designer supplied are the same white bar, so the initial
   state exists only inside the artboard's own top band.

   The two states are not one bar recoloured:

                       INITIAL VIEW (over the hero)   AFTER FIRST FOLD
     ground            none, the hero gradient        #ffffff
     content centre y  63                             44
     bar height        ~126                           91
     logo              x 80..206, w 126, y 44..82     x 82..181, w 99, y 28..60
     sections          y 57..68, #e8e5e3 / #b6aba3    y 37..50, ink / #8a857d
     right cluster     x 1153..1359, GHOST outline,   Contact sales 1002..1104,
                       no orange fill in this state   Get started FILLED orange
                                                      1129..1264, 47 tall
     bottom rule       none                           #edeae4 hairline

   Both logo files came from the designer and are used directly, rather than
   faking the light one with a CSS filter as an earlier version did.

   z-index 140 is load-bearing: sticky makes this a stacking context, which
   scopes the mega-menu's own z-index:120 inside it. At 60 the whole header
   subtree painted under .alt-scrim (99), the scrim landed on the pointer's
   path from the trigger to the menu, and alt-home.js's 260ms close timer shut
   the menu. Anything set here must stay above 99. */
[data-sept="bizhome"] header.site{
  position:sticky;
  top:0;
  z-index:140;
  background:transparent;
  /* no 1px transparent border: it made this band 88 where the other two home
     pages are 87, and the three navs are one component. The solid state below
     draws its own hairline. */
  border-bottom:0;
  transition:background var(--sept-t),border-color var(--sept-t);
}
[data-sept="bizhome"] header.site .wrap.nav{
  display:grid;
  grid-template-columns:1fr auto auto 1fr;
  align-items:center;
  column-gap:40px;        /* 40 / 40, matched across the three home pages */
  max-width:none;
  padding-inline:82px;    /* was 80; the other two homes sit their logo at 82 */
  min-height:var(--sept-nav-a);
}
[data-sept="bizhome"] header.site.sept-solid .wrap.nav{padding-inline:82px}
[data-sept="bizhome"] header.site .brand{grid-column:1;justify-self:start}
[data-sept="bizhome"] header.site .alt-seg{grid-column:2}
/* dd-shell gives .nav-hub a 16px margin and a divider; both would make the
   second gap 56 where the first is 40. */
[data-sept="bizhome"] header.site .nav-hub{
  grid-column:3;margin-left:0;padding-left:0;border-left:0;
}
[data-sept="bizhome"] header.site .nav-cta{
  grid-column:4;justify-self:end;display:flex;align-items:center;gap:26px;
  margin-left:0!important;
}
[data-sept="bizhome"] header.site .burger{grid-column:4;justify-self:end}
@media (min-width:941px){[data-sept="bizhome"] header.site .burger{display:none}}

[data-sept="bizhome"] header.site .brand-logo{
  content:url("sept/logo-on-dark.svg");
  width:126px;height:auto;
  transition:width var(--sept-t);
}
[data-sept="bizhome"] header.site.sept-solid .brand-logo{
  content:url("sept/logo-on-white.svg");
  width:99px;
}

[data-sept="bizhome"] header.site .alt-seg{
  display:flex;align-items:center;gap:40px;
  background:none;border:0;padding:0;box-shadow:none;
}
/* SHARED NAV COMPONENT, 2026-09-10. See the matching note in sept-indhome.css.
   One typeface across the nav and the page, and the same one on all three
   home pages, so the three words measure the same everywhere. */
[data-sept="bizhome"] header.site .alt-seg button,
[data-sept="bizhome"] header.site .alt-seg .seg-link,
[data-sept="bizhome"] header.site .nav-hub,
[data-sept="bizhome"] header.site .nav-cta .txt,
[data-sept="bizhome"] header.site .nav-cta .btn{
  font-family:'Inter',system-ui,sans-serif!important;
}
[data-sept="bizhome"] header.site .alt-seg button,
[data-sept="bizhome"] header.site .alt-seg .seg-link,
[data-sept="bizhome"] header.site .nav-hub{
  min-width:0;padding:0;background:none;border:0;box-shadow:none;
  border-radius:0;font-size:16px;font-weight:400;min-height:44px;
  display:inline-flex;align-items:center;
}
[data-sept="bizhome"] header.site .alt-seg button{font-weight:600}
[data-sept="bizhome"] header.site .segcv{margin-left:6px}

/* State A, over the hero */
[data-sept="bizhome"] header.site .alt-seg > button{color:#e8e5e3}
[data-sept="bizhome"] header.site .seg-link,
[data-sept="bizhome"] header.site .nav-hub{color:#b6aba3}
[data-sept="bizhome"] header.site .seg-link:hover,
[data-sept="bizhome"] header.site .nav-hub:hover{color:#fff;background:none;box-shadow:none}
[data-sept="bizhome"] header.site .nav-cta .txt{color:#e8e5e3}
[data-sept="bizhome"] header.site .nav-cta .txt:hover{color:#fff}
[data-sept="bizhome"] header.site .nav-cta .btn{
  /* The artboard's ghost pill is y 44..82, so 39 tall. dd-shell's .btn carries
     vertical padding that pushed the rendered height to 47 regardless of
     min-height, so the padding is zeroed and min-height drives it. */
  min-height:39px;padding-block:0;line-height:1;padding-inline:22px;font-size:16px;font-weight:600;
  border-radius:19px;
  background:transparent;
  border:1px solid #9f9791;
  color:#f2ede8;
}
[data-sept="bizhome"] header.site .nav-cta .btn:hover{
  border-color:#e8e5e3;background:rgba(255,255,255,.07);color:#fff;
}

/* The first view carries Contact sales and Log in only. Get started appears
   with the solid bar. Both stay in the DOM, hidden with CSS, so every approved
   string is still on the page. */
[data-sept="bizhome"] header.site .nav-cta .btn-primary{display:none}
[data-sept="bizhome"] header.site.sept-solid .nav-cta .btn-primary{display:inline-flex}
[data-sept="bizhome"] header.site.sept-solid .nav-cta .btn-outline{display:none}

/* State B, after the first fold. This is Navbar (1).png. */
[data-sept="bizhome"] header.site.sept-solid{background:#ffffff;border-bottom-color:#edeae4}
[data-sept="bizhome"] header.site.sept-solid .alt-seg > button{color:var(--sept-ink)}
[data-sept="bizhome"] header.site.sept-solid .seg-link,
[data-sept="bizhome"] header.site.sept-solid .nav-hub{color:#8a857d}
[data-sept="bizhome"] header.site.sept-solid .seg-link:hover,
[data-sept="bizhome"] header.site.sept-solid .nav-hub:hover{color:var(--sept-ink)}
[data-sept="bizhome"] header.site.sept-solid .nav-cta .txt{color:#8a857d}
[data-sept="bizhome"] header.site.sept-solid .nav-cta .txt:hover{color:var(--sept-ink)}
[data-sept="bizhome"] header.site.sept-solid .nav-cta .btn-primary{
  background:#121212;border-color:#121212;color:#fff;
  min-height:47px;padding-block:0;line-height:1;font-weight:700;
  border-radius:var(--sept-pill);
}
[data-sept="bizhome"] header.site.sept-solid .nav-cta .btn-primary:hover{
  background:#2B2926;border-color:#2B2926;
}
[data-sept="bizhome"] header.site.sept-solid .nav-cta .btn-outline{
  background:transparent;border:1px solid #dad5cc;color:var(--sept-ink);
  min-height:47px;padding-block:0;line-height:1;border-radius:var(--sept-pill);
}
@media (max-width:940px){
  [data-sept="bizhome"] header.site .wrap.nav{
    grid-template-columns:1fr auto;padding-inline:24px;column-gap:0;min-height:72px;
  }
  [data-sept="bizhome"] header.site .alt-seg,
  [data-sept="bizhome"] header.site .nav-hub{display:none}
}

/* ---------- partner fold ----------
   "Introduce, advise, build, or scale." Rebuilt from measured geometry, not
   from the earlier guess of borderless centred cells.

   From the PDF text layer:
     y=7772  x 421..1019   heading, cap 60, centred
     y=7844  x 492..948    standfirst, two lines, centred
     y=7991  x 330 / 860   card titles, cap 32, LEFT aligned, pitch 530
     y=8111  x 330 / 860   route links, cap 25
     y=8479  x 625..815    "Visit the partners hub", centred on 720

   From a pixel scan of tile6, vertical lines persist at x=200, 710, 731 and
   1239 through every row of the fold. Those are card borders: two 510-wide
   cards with a 21px gutter in a 1040 container, which centres on 719.5.

   Text starts at x=330, which is 130 in from the card edge, because the icon
   sits INLINE to the left of the title and the body indents to the title, not
   to the icon. The icon is bare line art at its own size, with no filled
   circle behind it: the pale orange disc in the earlier build was invented.
   ---------------------------------------------------------- */
[data-sept="bizhome"] #partners-route{background:#fff}
[data-sept="bizhome"] #partners-route .wrap{max-width:1040px;padding-inline:0}
[data-sept="bizhome"] .alt-trio.four{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:21px;
}
@media (max-width:820px){
  [data-sept="bizhome"] .alt-trio.four{grid-template-columns:1fr}
}
[data-sept="bizhome"] .alt-trio.four>div{
  display:grid;
  grid-template-columns:48px 1fr;
  /* Three rows: icon and title, then the body which STRETCHES, then the route
     link. Cards in a row are the same height, so a stretched middle row puts
     every link on the same baseline, which is what the artboard does (both
     row-one links at y=8111, both row-two links at y=8351). */
  grid-template-rows:auto 1fr auto;
  column-gap:32px;
  row-gap:0;
  align-content:stretch;
  text-align:left;
  background:none;
  border:1px solid var(--sept-line);
  border-radius:20px;
  padding:26px 34px;
}
[data-sept="bizhome"] .sept-pico{
  grid-column:1;grid-row:1;
  width:48px;height:48px;
  background:none;
  border-radius:0;
  display:grid;place-items:center;
  margin:0;
}
[data-sept="bizhome"] .sept-pico img{width:40px;height:40px;display:block}
[data-sept="bizhome"] .alt-trio.four b{
  grid-column:2;grid-row:1;
  align-self:center;
  font-size:24px;font-weight:600;line-height:1.2;color:var(--sept-ink);
}
[data-sept="bizhome"] .alt-trio.four p{
  grid-column:2;grid-row:2;
  font-size:17px;line-height:1.45;color:var(--sept-ink-3);margin:10px 0 0;
}
/* The route link's holder is also a <p>, so the rule above put it in grid-row 2
   on top of the body copy: link text rendered over paragraph text in two of the
   four cards. It needs the higher specificity to claim row 3. */
[data-sept="bizhome"] .alt-trio.four p.sept-cardcta{
  grid-column:2;grid-row:3;
  margin:12px 0 0;
  align-self:end;
}
[data-sept="bizhome"] .alt-trio.four a{
  font-weight:600;
  font-size:19px;
  color:var(--sept-accent);
  text-decoration:none;
}
[data-sept="bizhome"] .alt-trio.four p a:hover{text-decoration:underline}
/* "Visit the partners hub" is a filled orange pill in the artboard, not the
   bare text link the live markup renders. */
[data-sept="bizhome"] #partners-route > .wrap > p:last-of-type,
[data-sept="bizhome"] .sept-hubcta{text-align:center;margin-top:30px}
[data-sept="bizhome"] .sept-hubcta a{
  display:inline-flex;align-items:center;
  min-height:52px;padding:0 30px;
  border-radius:var(--sept-pill);
  background:var(--sept-accent);
  color:#fff;font-weight:700;font-size:17px;
  text-decoration:none;
}
[data-sept="bizhome"] .sept-hubcta a:hover{background:#d0651d}

/* Footer band, sampled at #f4f3f0. */
  /* FOOTER: owned by assets/sept-footer.css since 2026-09-30 (site-wide designer footer, Figma 981:5639).
     The bizhome footer rules that lived here (2026-09-09, !important) were removed so that skin governs;
     pre-change copy at qa/skin/sept-bizhome.pre-2026-09-30.css. */

/* Bridge the hover gap. Restructuring the nav left 24px of header padding
   between the trigger's bottom edge and the mega-menu's top edge, so a pointer
   travelling from the button into the menu crossed unhovered space and the
   menu closed on the way down.

   Stretching the trigger to the bar height was tried first and made it worse:
   its 100% resolved against the grid row, which is shorter than the header, so
   the button got shorter and the gap grew from 24px to 44px.

   Bridged from the panel instead. The panel is pulled up over the gap and pads
   the space back, with background-clip keeping that padding transparent, so its
   HIT AREA now meets the button while its visible fill still starts at the
   header's bottom edge. This depends on no layout arithmetic. */
/* No panel bridge. The 24px gap between the trigger and the panel exists on
   the unmodified page too and the menu survives it, so the gap was never the
   defect: the wrapper was. Left alone rather than "fixed". */

/* ---------- section rhythm: the designer's own voids ----------
   Set by the WHITESPACE between folds, not by heading positions.

   Two earlier versions of this block tuned heading-to-heading distance
   instead. That let every heading land within 8px of the artboard's absolute y
   while the gaps between folds ranged from 90 to 366 against a design whose
   widest is 202: the credentials fold got its correct heading position from
   269px of padding-top, which is a 204px hole above it. Positions were right
   and the page looked wrong, because the void is what the eye reads.

   Designer boundary voids, measured off Business Home.png as the runs of rows
   containing no content:

     hero -> accounts        166      regulated -> ready       119
     accounts -> receive     167      ready -> plans           128
     receive -> control      191      plans -> notsure         141
     control -> onboarding   197      notsure -> take          119
     onboarding -> regulated 162      take -> introduce        148
                                      introduce -> footer      202

   Recompute with qa/_rhythm.mjs after ANY change to a fold's internal
   spacing, because changing one fold's height changes both voids around it. */
[data-sept="bizhome"] main > section:nth-child(1){padding-bottom:88px}
[data-sept="bizhome"] main > section:nth-child(2){padding-top:166px;padding-bottom:78px}
[data-sept="bizhome"] main > section:nth-child(3){padding-top:89px;padding-bottom:137px}
[data-sept="bizhome"] main > section:nth-child(4){padding-top:90px;padding-bottom:63px}
[data-sept="bizhome"] main > section:nth-child(5){padding-top:134px;padding-bottom:0}
[data-sept="bizhome"] main > section:nth-child(6){padding-top:161px;padding-bottom:76px}
[data-sept="bizhome"] main > section:nth-child(7){padding-top:43px;padding-bottom:28px}
[data-sept="bizhome"] main > section:nth-child(8){padding-top:100px;padding-bottom:29px}
[data-sept="bizhome"] main > section:nth-child(9){padding-top:112px;padding-bottom:76px}
[data-sept="bizhome"] main > section:nth-child(10){padding-top:43px;padding-bottom:75px}
[data-sept="bizhome"] main > section:nth-child(11){padding-top:74px;padding-bottom:106px}

/* ---------- "Regulated and independently certified" ----------
   Artboard is TWO columns, not the centred 3-up the live markup renders:

     left  x 160..~600   heading (cap 60, so ~48px), body (cap 28, ~22px),
                         then "See authorisation" whose text starts at x=184,
                         so a button beginning at 160 with 24px padding
     right x 920..1271   the three credential blocks, stacked vertically:
                         EMI/FRN 901043 (y 4840), ISO 27001 (y 5031),
                         ISO 22301 (y 5206)

   Container 160..1280, so 1120 wide, centred.

   The ISO badge images are left exactly as they are. They are the official
   Amtivo/British Assessment Bureau files and the ISO badge rules forbid
   altering, cropping or re-rounding the artwork, so the designer's own PNGs
   are not swapped in. Only the FCA mark is replaced, in sept-bizhome.js,
   because that slot was rendering a generic orange shield glyph and the
   designer supplied the real logo.
   ---------------------------------------------------------- */
[data-sept="bizhome"] #security > .wrap{
  max-width:1120px;
  padding-inline:clamp(24px,4vw,80px); /* 2026-10-06: was 0; under 1300 the grid filled the window and the heading touched the edge */
  box-sizing:border-box;
  display:grid;
  /* Designer columns, measured: left text 160..600 (440), right credentials
     775..1280 (505), so the gutter between them is 175. */
  grid-template-columns:minmax(280px,440px) minmax(320px,505px); /* 2026-10-06: fixed 440/505 overflowed the window left and right between 901 and ~1200 once the 1440 pin went; ≥1300 pins its own 440/520 */
  column-gap:clamp(48px,8vw,175px);
  /* row-gap:0 explicitly. A base .wrap rule was setting a 104px gap, which was
     the real cause of the heading, body and button being prised apart, not
     just the row stretching. Spacing is carried by the elements' own margins
     below, matching the designer's ~35 and ~50. */
  row-gap:0;
  justify-content:center;
  align-items:start;
  /* align-content:start is load-bearing. The credential strip spans all three
     rows and is ~600 tall, so without it the browser distributes that extra
     height across the three implicit rows and prises the heading, body and
     button apart. The designer stacks the left column tight and lets the right
     column simply be taller. */
}
/* Two children, no spanning: each column is as tall as its own content. */
[data-sept="bizhome"] .sept-sec-left{
  grid-column:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  /* Spacing carried by the flex gap rather than the children's own margins,
     which were being overridden to 16px from elsewhere. Designer: ~35 from
     heading to body, ~50 from body to button. The gap is 19 rather than 35
     because a 16px contribution from elsewhere in the cascade survives every
     attempt to zero it; 19 + 16 lands on the designer's 35. */
  gap:14px;
}
[data-sept="bizhome"] #security h2{
  text-align:left!important;
  /* 44px, not 48. The artboard sets "independently certified" as one 424px
     line inside a 440 column; at 48px in this typeface it wraps to a third
     line. */
  font-size:clamp(28px,2.8vw,40px)!important;
  font-weight:600!important;
  line-height:1.14;
  margin:0!important;
  max-width:none!important;
  margin:0!important;
}
[data-sept="bizhome"] #security > .wrap > .lead{
  text-align:left!important;
  font-size:22px!important;
  line-height:1.45;
  color:var(--sept-ink-3);
  max-width:44ch!important;
  margin:0!important;
}
[data-sept="bizhome"] #security .sec-btn{
  text-align:left;
  margin:31px 0 0;
}
/* Ghost, not filled. The one filled orange button in this design is Get
   started on the scrolled navbar. */
[data-sept="bizhome"] #security .sec-btn .btn{
  display:inline-flex;align-items:center;
  background:transparent;
  border:1px solid #cfcbc4;
  color:var(--sept-ink-2);
  min-height:46px;
  font-size:17px;
  font-weight:500;
  padding-inline:26px;
  border-radius:var(--sept-pill);
  font-weight:600;
}
[data-sept="bizhome"] #security .sec-btn .btn:hover{
  background:#f4f3f0;border-color:#c9c4bb;
}
[data-sept="bizhome"] #security .sec-strip{
  grid-column:2;
  display:flex;
  flex-direction:column;
  /* 40px between credential blocks. 78 was read off his screenshot as a
     block-to-block PITCH and applied as a GAP, which is what made this fold
     174px taller than the artboard and stopped it fitting one viewport with
     the nav. His pitch between credential titles is 191 then 175, so with
     ~130 blocks the gap is about 40. */
  gap:16px;
  margin:0;
}
[data-sept="bizhome"] #security .sec-strip > div{
  display:grid;
  /* Badge column is 95 wide in the artboard, with the text starting at x=920,
     so the gap is 50. The FCA mark is a wide lockup (~130x40) and the two ISO
     badges are portrait certification marks (~92x110). An earlier pass sized
     all three at 56 square, which shrank the FCA logo to a smudge. */
  /* Badge column is 125 wide, not 92: the FCA lockup is a wide horizontal mark
     and the ISO badges are narrow portrait ones, and the designer centres both
     in the same column so their centres line up (measured centres 900 and 901
     in his own screenshot). Text starts 38 after the column. */
  grid-template-columns:126px 1fr;
  column-gap:38px;
  /* Without this the title is centred in its cell rather than sitting on the
     body's left edge: it measured x=1084 against the body's x=990, and the
     resulting tall row read as a 76px gap under each title. */
  justify-items:start;
  align-items:start;
  background:none;border:0;padding:0;text-align:left;
}
/* The official badge files are 350x350 with the mark occupying only 73% of the
   width and 94% of the height, which is why sizing them at 92 rendered a
   square-looking badge where the designer shows a portrait one. The mark's own
   aspect is 0.770 against his 0.757, so it is the right artwork; it just needs
   scaling up to compensate for the file's transparent margins. 145px of image
   puts the visible mark at about 106 x 136, which is his 106 x 140.

   The badge is NOT cropped to its content box: the ISO badge rules forbid
   altering the artwork, so it is scaled and centred and allowed to overflow
   its 126px column by ~9px a side instead. */
[data-sept="bizhome"] #security .sec-strip .cert-inline{
  grid-column:1;grid-row:1 / span 2;
  width:106px;height:auto;display:block;margin:0;
  /* Centred in the column and vertically centred against the text block, which
     is what the designer does: his badge centres sit on the text block's
     centre, not on its top edge. */
  justify-self:center;
  align-self:center;
}
/* The FCA lockup is a wide horizontal mark, 125 against the ISO badges' 92.
   Sizing all three at 92 shrank it to a smudge. */
[data-sept="bizhome"] #security .sec-strip img[alt="Financial Conduct Authority"]{
  width:125px;
}
[data-sept="bizhome"] #security .sec-strip b{
  grid-column:2;grid-row:1;
  /* width:100% rather than relying on justify-self. The computed value read
     back as "stretch" while the box stayed at content width (102px against a
     356px cell), which left each title floating in the middle of its column. */
  display:block;
  width:100%;
  margin:0;
  padding:0;
  align-self:start;
  font-size:22px;font-weight:600;line-height:1.25;color:var(--sept-ink);
  text-align:left;
}
[data-sept="bizhome"] #security .sec-strip p{
  grid-column:2;grid-row:2;
  display:block;
  width:100%;
  padding:0;
  font-size:17px;line-height:1.45;color:var(--sept-ink-3);margin:8px 0 0;
  text-align:left;
}
@media (max-width:900px){
  [data-sept="bizhome"] #security > .wrap{grid-template-columns:1fr;row-gap:32px}
  [data-sept="bizhome"] #security .sec-strip{grid-column:1;grid-row:auto}
  [data-sept="bizhome"] #security .sec-btn{grid-row:auto}
}

/* "Not sure how to get started?" closes on the orange CTA, not a dark one. */
[data-sept="bizhome"] main > section:nth-child(9) .btn{
  background:#121212;
  border-color:#121212;
  color:#fff;
  font-weight:700;
}
[data-sept="bizhome"] main > section:nth-child(9) .btn:hover{
  background:#2B2926;border-color:#2B2926;
}

/* ---------- SHARED NAV SLOTS, 2026-09-10 ----------
   Centring the group is not enough to put the three words in the same place.
   Each page bolds a different item, and the bold item is 20 to 30px wider than
   its plain state, so the GROUP is a different width on each page and every
   label lands somewhere else. Measured at 1440 before this rule:

     Business     index x561   individual x561   partner x572
     Partner Hub  index x793   individual x793   partner x781

   Each item now occupies a fixed slot sized to its own widest state (bold, and
   with the dropdown caret where one exists), and the label sits at the slot's
   left edge. Bolding no longer moves anything, so the same three words sit on
   the same x on all three home pages, whichever one is current.

     Business 84   Individual 91   Partner Hub 87   gaps 40 / 40   group 342
   ---------------------------------------------------------------- */
[data-sept="bizhome"] header.site .alt-seg{gap:40px}
[data-sept="bizhome"] header.site .alt-seg > *:nth-child(1),
[data-sept="bizhome"] header.site .alt-seg > *:nth-child(2),
[data-sept="bizhome"] header.site .nav-hub{
  flex:none;justify-content:flex-start;white-space:nowrap;
}

/* ---------- SHARED NAV: PILLS AND STATES, 2026-09-10 ----------
   The right-hand pills measured differently on all three pages: "Log in" was
   92x39 with a 19px radius on the business home, 96x42 fully rounded on the
   individual home and 97x49 on the partner home, at three different weights.
   The partner artboard's are the reference: 47 tall for the filled pill, 49
   for the outline, 100px radius, 16px at weight 500.

   Item states: the two light navs share one pair, tertiary for the sections
   you are not on and ink for the one you are. The business home keeps its own
   lighter pair because its first-view nav sits on a dark photograph and the
   same greys would not carry there.
   ---------------------------------------------------------------- */
[data-sept="bizhome"] header.site .nav-cta .btn{
  height:47px;min-height:47px;border-radius:100px;
  font-size:16px;font-weight:500;line-height:1;
  display:inline-grid;place-items:center;padding:0 24px;
}
[data-sept="bizhome"] header.site .nav-cta .btn-outline,
[data-sept="bizhome"] header.site .nav-cta .btn-d{height:49px;min-height:49px;border-width:1px}

/* The promo bar is part of the same top-of-page component. It measured 48 here
   and 54 on the individual and partner homes, which put this page's nav items
   6px higher than theirs on screen even with all three bands at 87. */
/* ---------- SHARED NAV: CONSTANT METRICS, 2026-09-10 ----------
   Equal gaps and identical positions are the same problem. The active item was
   BOLD, which makes it 20 to 30px wider than its plain state, so the group was
   a different width on every page and each label landed somewhere else. Fixed
   slots fixed the positions but not the spacing: the slack sat after the short
   labels, so the gap beside the bold item read tighter than its neighbour.

   So the active item no longer changes the metrics at all. It is the same 400
   weight, thickened with a hairline text-shadow, which does not reflow, and it
   carries ink colour against the tertiary of the other two. The caret's space
   is reserved on both items that can host one, so showing it moves nothing.

   Result: ink gaps are 60 and 60 on all three home pages, and Business,
   Individual and Partner Hub sit on the same x whichever page you are on.
   ---------------------------------------------------------------- */
[data-sept="bizhome"] header.site .alt-seg > *,
[data-sept="bizhome"] header.site .nav-hub{
  font-weight:400!important;position:relative;
}
/* The caret goes. It is real ink, so the item that carries it is wider than
   the two that do not, and the gap beside it reads tighter no matter how the
   box is padded. Reserving space for it only moved the problem: with the
   reserve the caret-less pairs gained 20px instead. The partner home's active
   item is a plain link with no caret element at all, so there is no version of
   this where all three can carry one. Hidden on all three, which makes the ink
   gaps exactly 40 and 40 everywhere. Reversible in one line if the affordance
   is wanted back on all three, which needs markup on the partner home. */
[data-sept="bizhome"] header.site .segcv{display:none!important}
[data-sept="bizhome"] header.site .alt-seg > button,
[data-sept="bizhome"] header.site .nav-hub[aria-current]{
  text-shadow:0 0 .55px currentColor,0 0 .55px currentColor;
}
[data-sept="bizhome"] header.site .nav-cta .ccysel{display:none!important}   /* no currency chip on the home pages */


/* ==========================================================================
   FIXED CANVAS - 1440 x (height free)
   --------------------------------------------------------------------------
   The page is authored for a 1440px-wide window. Nothing reflows, rescales or
   re-wraps when the window changes size. Below 1440 the browser scrolls
   sideways; it does not shrink the layout.

   Every value below is the value this page ALREADY computed at a 1440 window,
   measured in a real browser (qa/canvas/baseline.mjs), not estimated. So at
   1440 this block is a no-op by construction: it only stops things moving at
   every OTHER width.

   Scoped to [data-sept="bizhome"] throughout. No other page is affected.
   Mobile (<940px) is deliberately untouched: a separate job.
   ========================================================================== */

/* --- 1. the canvas itself ------------------------------------------------ */
/* 2026-10-06 (Yuval + designer): the sideways scroll below 1440 goes. The body
   pin is removed and sections 1-7 below hold only from 1300 up, where the 1280
   content still fits the window; under 1300 the skin's own fluid rules return,
   and the mobile island gets the real viewport instead of a 1440 body. */
@media (min-width:1300px){

/* .wrap was max-width:1280 (shrinks below that). Pin it so it never shrinks. */
[data-sept="bizhome"] .wrap{width:var(--sept-wrap);max-width:none}
[data-sept="bizhome"] .wrap.nav{width:1280px;max-width:none}

/* --- 2. the type scale --------------------------------------------------- */
/* Six tokens drive nearly every font-size on the page. Pinning them here is
   what kills the bulk of the movement; the per-rule pins below are the ones
   that set their own size instead of inheriting from the scale. */
[data-sept="bizhome"]{
  --s--1:14.528px;
  --s-0:17.6px;
  --s-1:20.8px;
  --s-2:32.8px;
  --s-3:43.2px;
  --s-4:57.6px;
  --shell-w:1280px;
}

/* --- 3. shared chrome (dd-shell.css) ------------------------------------- */
[data-sept="bizhome"] section{padding:64.8px 0}

/* --- 4. shared page furniture (alt-home.css) ----------------------------- */
[data-sept="bizhome"] .alt-hero{padding-top:32px}
[data-sept="bizhome"] .alt-hero-copy{padding:51.2px}
[data-sept="bizhome"] .alt-hero-badges{top:28.8px;right:28.8px}
[data-sept="bizhome"] .alt-hero-anchor{top:25.6px;left:25.6px}
[data-sept="bizhome"] .alt-split{gap:56px}
[data-sept="bizhome"] .alt-band{padding:48px;gap:48px}
[data-sept="bizhome"] .alt-band .art{width:200px}
[data-sept="bizhome"] .alt-band .art.clay{width:320px}
[data-sept="bizhome"] .alt-band .art.appshot{width:330px;margin-bottom:-78px}
[data-sept="bizhome"] .alt-band.app .art.appshot{margin-bottom:-48px}
[data-sept="bizhome"] .alt-band .art.banner{width:380px}
[data-sept="bizhome"] .alt-caro{padding:48px}
[data-sept="bizhome"] .alt-caro-grid{gap:48px}
[data-sept="bizhome"] .alt-caro .alt-caro-nav [data-prev]{left:21.6px}
[data-sept="bizhome"] .alt-caro .alt-caro-nav [data-next]{right:21.6px}
[data-sept="bizhome"] .alt-caro-slide{padding-right:43.2px}
[data-sept="bizhome"] .alt-caro-grid.single .alt-caro-slide{padding-left:43.2px}
[data-sept="bizhome"] .alt-trio{gap:48px}
[data-sept="bizhome"] .alt-trio.four{gap:32px}
[data-sept="bizhome"] .dd-pipeline{gap:17.6px}
[data-sept="bizhome"] .seg-rows.horizontal{gap:31.68px}
[data-sept="bizhome"] .hairline-top>.wrap{padding-top:54.4px}

/* --- 5. this page's own fluid rules -------------------------------------- */
[data-sept="bizhome"] .alt-hero-copy h1{font-size:56px}
[data-sept="bizhome"] .alt-hero-copy .sub{font-size:16px;line-height:24px}
[data-sept="bizhome"] .alt-hero-anchor{top:115.2px}
[data-sept="bizhome"] .alt-gap{padding-block:96.48px}
[data-sept="bizhome"] .alt-gap h2.center{font-size:44px}
[data-sept="bizhome"] .bmt h2{font-size:41.76px!important}
[data-sept="bizhome"] .alt-tabs{margin:46px auto 40px}
[data-sept="bizhome"] #security h2{font-size:40px!important}

/* --- 6. media queries that toggle INSIDE the canvas band ----------------- */
/* These fire between 940 and 1440, which on a fixed canvas is a window the
   layout is not supposed to react to. Restore the 1440 value. */
@media (max-width:1100px){
  [data-sept="bizhome"] .alt-trio.four{grid-template-columns:repeat(4,1fr);max-width:1240px}
  [data-sept="bizhome"] .seg-rows.horizontal{grid-template-columns:repeat(4,1fr)}
  [data-sept="bizhome"] .seg-rows.horizontal.three{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1099px){
  [data-sept="bizhome"] .dd-pipeline.pipe-5{grid-template-columns:1fr auto 1fr auto 1fr}
}

/* --- 7. the three full-bleed exceptions ---------------------------------- */
/* Promo bar and footer already span the window correctly: nothing to do.
   The bottom banner does not: it sits inside .wrap at 1081px with 48px
   corners. Break it out so its background runs edge to edge.

   max() is load-bearing: on a window WIDER than the canvas the band follows
   the window; on a NARROWER one it holds the 1440 canvas instead of
   collapsing to the viewport. Plain 100vw would shrink it. */
[data-sept="bizhome"] .alt-band.app{
  width:100vw;
  margin-left:calc(50% - 50vw);
  border-radius:0;
  padding-left:calc(50vw - 640px + 48px);
  padding-right:calc(50vw - 640px + 48px);
}
} /* end of the >=1300 canvas band (2026-10-06) */

/* ============================================================
   ORACLE PASS . BUSINESS HOME . 2026-09-17
   Ground truth: otabek-html-approach/business home page/
     digidoe-business-home (1) 1.html  +  DigiDoe-Business-Home-spec 1.md
   Frame "Business Home", 1440 x 9300. Same method as the individual home
   (qa/oracle/README.md): his render is measured, ours is moved to it.
   Every number below is read off his DOM, not his spec.

   HERO. His is a full-bleed 1440 x 1382 dark block with the nav row inside it
   at y40, copy in a 900 column at y167, actions at y383, and a 1440 x 952
   dashboard image from y430 to the bottom edge. Ours was a 1280 card with a
   white gutter, a 3-line H1 in a 1040 column, and a different 2141 x 1721
   asset placed at 1062 wide. The header overlays the hero through its -87
   margin, so the header IS his nav row: 40px down, 47 tall, content at 80.
   ============================================================ */
@media (min-width:1300px){
  html[data-sept="bizhome"] main > section.alt-hero{padding:0!important;margin-top:-87px!important;min-height:0!important}
  html[data-sept="bizhome"] main > section.alt-hero > .wrap{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
  html[data-sept="bizhome"] .alt-hero-card{
    width:100%!important;max-width:1440px!important;margin:0 auto!important;
    height:1382px!important;min-height:1382px!important;border-radius:0!important;
    padding:167px 0 0!important;display:block!important;position:relative!important;overflow:hidden!important;
    background:#180D02!important;
  }
  html[data-sept="bizhome"] .alt-hero-copy{
    width:900px!important;max-width:900px!important;margin:0 auto!important;padding:0!important;
    text-align:center!important;position:relative;z-index:2;
  }
  html[data-sept="bizhome"] .alt-hero-copy h1{
    font-size:52px!important;line-height:normal!important;font-weight:500!important;letter-spacing:normal!important;
    color:#fff!important;margin:0!important;max-width:none!important;width:100%!important;
  }
  html[data-sept="bizhome"] .alt-hero-copy .sub,
  html[data-sept="bizhome"] .alt-hero-copy p.lead{
    font-size:16px!important;line-height:24px!important;margin:20px auto 0!important;max-width:none!important;width:100%!important;
  }
  html[data-sept="bizhome"] .alt-hero-copy > div:last-child{
    display:flex!important;justify-content:center!important;gap:20px!important;margin:40px 0 0!important;flex-wrap:nowrap!important;
  }
  html[data-sept="bizhome"] .alt-hero-copy .btn{
    padding:14px 24px!important;font-size:16px!important;line-height:normal!important;height:auto!important;min-height:0!important;
    border-width:1px!important;border-style:solid!important;border-radius:100px!important;white-space:nowrap;
  }
  html[data-sept="bizhome"] .alt-hero-copy .btn-primary{background:#FFFFFF!important;border-color:#FFFFFF!important;color:#453429!important;font-weight:700!important} /* 2026-10-06: his hero Get started is white on the gradient, text #453429 (spec 3.1) */
  html[data-sept="bizhome"] .alt-hero-copy .btn-primary:hover{background:#F4F3F0!important;border-color:#F4F3F0!important} /* his .btn-hero-white:hover */
  /* 2026-10-06 Otabek: "instead of stroke there should be a transparent colour under the button". His
     .btn-hero-ghost: no border, rgba(18,18,18,.16) at rest, .32 on hover, white 500 text. */
  html[data-sept="bizhome"] .alt-hero-copy .btn:not(.btn-primary){background:rgba(18,18,18,.16)!important;border-color:transparent!important;color:#fff!important;font-weight:500!important}
  html[data-sept="bizhome"] .alt-hero-copy .btn:not(.btn-primary):hover{background:rgba(18,18,18,.32)!important;border-color:transparent!important}
  /* 2026-10-06 Yuval: every fold-4 pane carries a small "Read more" at the bottom right of the card,
     secondary-button styling (his .btn-light: sand fill, #555049, 500) at small size. Centred on the
     dots line: dots are 10px tall at bottom 40, so a 36px pill sits at bottom 27. */
  html[data-sept="bizhome"] .sept-readmore{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:100px;background:#F4F3F0;border:1px solid #F4F3F0;color:#555049;font-size:14px;line-height:1;font-weight:500;letter-spacing:normal;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
  html[data-sept="bizhome"] .sept-readmore:hover{background:#ECEAE5;border-color:#ECEAE5;color:#555049;text-decoration:none}
  html[data-sept="bizhome"] .sept-steppanel .sept-readmore{position:absolute;right:40px;bottom:27px}
  html[data-sept="bizhome"] .alt-grid6 .g .sept-readmore{margin-top:16px} /* no-JS grid fallback */
  html[data-sept="bizhome"] .sept-readmore .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* "about roles and permissions" etc: read by screen readers and agents, never drawn; the visible label stays "Read more" */

  /* ---- 2026-10-06 Yuval: "the top nav bar transition in colours (after the first brown fold) should be smoother".
     The bar's background already eased; its ink, pills and logo snapped. Every surface now eases on the
     same 450ms curve, and the logo cross-fades (the on-white mark fades in over the on-dark one) instead of swapping. */
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site{transition:background-color .45s ease,box-shadow .45s ease,border-color .45s ease!important}
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site .alt-seg > button,
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site .alt-seg > a,
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site .nav-hub,
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site .nav-cta > a{transition:color .45s ease,background-color .45s ease,border-color .45s ease,opacity .45s ease!important}
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site > .wrap.nav > a.brand{position:relative}
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site > .wrap.nav > a.brand::before{content:"";position:absolute;inset:0;background:url("sept/logo-on-white.svg") left center / contain no-repeat;opacity:0;transition:opacity .45s ease;pointer-events:none}
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > a.brand::before{opacity:1}
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site .brand-logo{content:url("sept/logo-on-dark.svg")!important;transition:opacity .45s ease,width var(--sept-t)!important}
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site.sept-solid .brand-logo{opacity:0}

  /* ---- 2026-10-06 Yuval: help button white over the brown hero, dark once the fold ends (html.sept-overhero,
     toggled by the same observer as the bar). */
  html[data-sept="bizhome"] .ddbot-fab{transition:width 320ms cubic-bezier(.22,1,.36,1),transform 150ms ease,background-color .45s ease,color .45s ease,box-shadow .45s ease}
  html[data-sept="bizhome"].sept-overhero .ddbot-fab{background:#fff;color:#121212;box-shadow:0 8px 16px 0 rgba(0,0,0,.24)}
  html[data-sept="bizhome"].sept-overhero .ddbot-fab .ddbot-q,
  html[data-sept="bizhome"].sept-overhero .ddbot-fab .ddbot-x,
  html[data-sept="bizhome"].sept-overhero .ddbot-fab .ddbot-label{color:#121212}
  html[data-sept="bizhome"] .sept-hero-shot{
    position:absolute!important;left:0!important;top:430px!important;width:100%!important;height:952px!important; /* 2026-10-06: was 1440px; follows the band so 1300-1439 windows crop the sides instead of scrolling */
    max-width:none!important;margin:0!important;object-fit:cover!important;z-index:1;
  }

  /* Nav row = his hero nav on first view, his sticky nav once scrolled. Both
     are 1440 wide with 80px sides, content 80..1360, row 47 tall. First view
     sits 40 down (his hero has 40 of top padding); scrolled sits 20 down in an
     87 white bar. Left group: logo, then links 48 apart in the hero, 32 in the
     sticky bar, each link padded 10/20. Right group at 952: Contact sales as
     padded text, Get started, Log in, 16 apart. Ours had the row inset to 162
     on an 82px padding inside a 1280 wrap, links centred, and the two buttons
     wrapping onto two lines each. */
  html[data-sept="bizhome"] header.site{padding:0!important;height:87px!important;min-height:0!important}
  html[data-sept="bizhome"] header.site > .wrap.nav{
    display:flex!important;align-items:center!important;
    width:100%!important;max-width:1440px!important;margin:0 auto!important;
    padding:40px 80px 0!important;height:87px!important;column-gap:0!important;
  }
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav{padding:20px 80px!important}
  html[data-sept="bizhome"] header.site > .wrap.nav > a.brand{margin-right:48px!important;width:99px!important;height:31px!important}
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > a.brand{margin-right:32px!important}
  html[data-sept="bizhome"] header.site > .wrap.nav > a.brand img{width:99px!important;height:31px!important}
  html[data-sept="bizhome"] header.site > .wrap.nav > .alt-seg{gap:0!important}
  html[data-sept="bizhome"] header.site > .wrap.nav > .alt-seg > *,
  html[data-sept="bizhome"] header.site > .wrap.nav > a.nav-hub{
    padding:10px 20px!important;border-radius:100px!important;font-size:16px!important;font-weight:500!important;line-height:normal!important;
    height:auto!important;text-shadow:none!important;
  }
  html[data-sept="bizhome"] header.site > .wrap.nav > .nav-cta{margin-left:auto!important;column-gap:16px!important;gap:16px!important;height:47px!important}
  html[data-sept="bizhome"] header.site > .wrap.nav > .nav-cta > a.txt{
    padding:14px 20px!important;font-size:16px!important;font-weight:500!important;line-height:normal!important;white-space:nowrap!important;
  }
  html[data-sept="bizhome"] header.site > .wrap.nav > .nav-cta > a.btn{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    padding:14px 24px!important;font-size:16px!important;line-height:normal!important;height:auto!important;min-height:0!important;
    border:1px solid currentColor!important;border-radius:100px!important;white-space:nowrap!important;font-weight:500!important;gap:0!important;
  }
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .nav-cta > a.btn-primary{
    background:#121212!important;border-color:#121212!important;color:#fff!important;font-weight:700!important;
  }
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .nav-cta > a.btn-outline{border-color:#121212!important;color:#121212!important;background:transparent!important}
}

/* Hero surface and type, read off his DOM:
     section bg     radial-gradient(1010px 1046px at 720px -162px, #957E6C 0%,
                    #705C4D 24.76%, #4B392D 49.52%, #322318 74.76%, #25180D
                    87.38%, #180D02 100%) over #180D02. Ours drew its glow with
                    a photo layer; his is this gradient and nothing else.
     sub            20/30 white at opacity .5 (ours was a warm grey)
     buttons        47 tall exactly: padding 14/24 on a 19.36 line, border-box,
                    so the border does not add height
     logo           126 x 40 in the hero nav (the individual board's is 99 x 31)
     lane links     active 600, others 500 at opacity .5; Contact sales .5;
                    Get started / Log in outline rgba(255,255,255,.5) */
@media (min-width:1300px){
  html[data-sept="bizhome"] .alt-hero-card{
    background:radial-gradient(1010px 1046px at 720px -162px,#957E6C 0%,#705C4D 24.76%,#4B392D 49.52%,#322318 74.76%,#25180D 87.38%,#180D02 100%) #180D02!important;
  }
  html[data-sept="bizhome"] .alt-hero-card > .alt-hero-scene{display:none!important}
  html[data-sept="bizhome"] .alt-hero-copy .sub,
  html[data-sept="bizhome"] .alt-hero-copy p.lead{color:#fff!important;opacity:.5!important}
  html[data-sept="bizhome"] .alt-hero-copy .btn,
  html[data-sept="bizhome"] header.site > .wrap.nav > .nav-cta > a.btn{
    height:47px!important;padding:0 24px!important;box-sizing:border-box!important;line-height:normal!important;
  }
  html[data-sept="bizhome"] .alt-hero-copy .btn-primary{border:0!important}
  html[data-sept="bizhome"] header.site > .wrap.nav > a.brand{width:126px!important;height:40px!important;margin-right:48px!important}
  html[data-sept="bizhome"] header.site > .wrap.nav > a.brand img{width:126px!important;height:40px!important}
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > a.brand,
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > a.brand img{width:99px!important;height:31px!important}
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .alt-seg > *,
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > a.nav-hub,
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .nav-cta > a.txt{color:#fff!important;opacity:.5}
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .alt-seg > [aria-current],
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .alt-seg > button{opacity:1;font-weight:600!important}
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .nav-cta > a.btn{
    color:rgba(255,255,255,.5)!important;border-color:rgba(255,255,255,.5)!important;background:transparent!important;
  }
  html[data-sept="bizhome"] header.site > .wrap.nav > .nav-cta > a.txt{height:47px!important;display:inline-flex!important;align-items:center!important;padding:0 20px!important}
}

/* §2 ACCOUNTS, his: pad 120/80, head 700 wide at 370 (h2 38/normal 500,
   20, sub 20/30 #666), 80, grid 1040 at 200 of 2 x 510 cards 20 apart, card
   pad 30 gap 30 bg #F4F3F0 r24 (flag 40 + code 24px; body 16/1.35 #666,
   20, chips), 60, button 47. Ours: pad 166/78, h2 44px on 1120, cards 504
   wide pad 40 r28 on a warm #F0EBE1, button 52 in the old orange. */
@media (min-width:1300px){
  html[data-sept="bizhome"] main > section:nth-child(2){padding:120px 0 80px!important}
  html[data-sept="bizhome"] main > section:nth-child(2) > .wrap{padding:0!important}
  html[data-sept="bizhome"] main > section:nth-child(2) > .wrap > h2{
    font-size:44px!important;line-height:53px!important;font-weight:500!important;letter-spacing:normal!important;color:#121212!important;
    max-width:700px!important;width:700px!important;margin:0 auto 20px!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(2) > .wrap > p.lead{
    font-size:16px!important;line-height:24px!important;color:#5C5750!important;max-width:700px!important;width:700px!important;margin:0 auto 80px!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(2) .seg-rows{width:1040px!important;margin:0 auto!important;gap:20px!important;grid-template-columns:510px 510px!important}
  html[data-sept="bizhome"] main > section:nth-child(2) .seg-rows article.seg-row{
    width:510px!important;padding:30px!important;background:#F4F3F0!important;border-radius:24px!important;border:0!important;
    display:flex!important;flex-direction:column!important;gap:30px!important;height:auto!important;min-height:0!important;
  }
  html[data-sept="bizhome"] .seg-rows .seg-row-label{gap:16px!important;align-items:center!important}
  html[data-sept="bizhome"] .seg-rows .seg-row-label img.sept-flag{width:40px!important;height:40px!important}
  html[data-sept="bizhome"] .seg-rows .seg-row-label h3{font-size:24px!important;line-height:normal!important;font-weight:500!important;color:#121212!important;margin:0!important;letter-spacing:normal!important}
  html[data-sept="bizhome"] .seg-rows .seg-row-body{margin:0!important}
  html[data-sept="bizhome"] .seg-rows .seg-row-body > p.muted{font-size:16px!important;line-height:24px!important;color:#555049!important;margin:0!important;max-width:none!important}
  html[data-sept="bizhome"] .seg-rows .seg-row-body > .tile-spec{margin:20px 0 0!important;gap:8px!important}
  html[data-sept="bizhome"] .seg-rows .tile-spec span{
    padding:6px 12px!important;line-height:normal!important;font-size:12px!important;font-weight:500!important;
    border:1px solid #555049!important;color:#555049!important;border-radius:100px!important;display:inline-flex!important;letter-spacing:normal!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(2) p.seg-rows-cta{margin:60px 0 0!important}

  /* Buttons across the page: his single pill, 47 tall, pad 14/24, 16px. */
  html[data-sept="bizhome"] main .btn{
    height:47px!important;padding:0 24px!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    font-size:16px!important;line-height:normal!important;border-radius:100px!important;gap:0!important;white-space:nowrap;letter-spacing:normal!important;
  }
  html[data-sept="bizhome"] main .btn-primary{background:#121212!important;border:0!important;color:#fff!important;font-weight:700!important} /* 2026-10-06 designer note: black, not orange */
  html[data-sept="bizhome"] main .btn-ink,
  html[data-sept="bizhome"] main .btn-outline{background:transparent!important;border:1px solid #555049!important;color:#555049!important;font-weight:500!important}

  /* §3 RECEIVE / CONVERT / PAY, his: pad 80/120, head 700 at 370 (h2 92, 20,
     sub 90), 60, tabs 3 x 110 at 16 apart (active #221A14 white 700, rest
     #F4F3F0 #666 500), 50, three 360 cards 40 apart on 1160 at 140, top
     aligned: image 360 x 240 on #F9F8F6 r24, 30, title 24/normal, 10, body
     14/18.9 #888. Ours: pad 89/137, h2 41.76px 600 on 661, tabs 12 apart with
     a 74-wide Pay, tiles on a 1120 grid with a 16 gap. */
  html[data-sept="bizhome"] main > section:nth-child(3){padding:80px 0 120px!important}
  html[data-sept="bizhome"] main > section:nth-child(3) > .wrap{padding:0!important;max-width:1440px!important}
  html[data-sept="bizhome"] main > section:nth-child(3) > .wrap > h2{
    font-size:44px!important;line-height:53px!important;font-weight:500!important;letter-spacing:normal!important;color:#121212!important;
    max-width:700px!important;width:700px!important;margin:0 auto!important;text-align:center!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(3) > .wrap > p.lead{
    font-size:16px!important;line-height:24px!important;color:#5C5750!important;max-width:700px!important;width:700px!important;margin:20px auto 0!important;text-align:center!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(3) > .wrap > div{width:1160px!important;margin:60px auto 0!important}
  html[data-sept="bizhome"] main > section:nth-child(3) .alt-tabs{gap:16px!important;margin:0 0 50px!important;justify-content:center!important;width:auto!important}
  html[data-sept="bizhome"] main > section:nth-child(3) .alt-tabs button{
    width:110px!important;height:47px!important;padding:0!important;font-size:16px!important;line-height:normal!important;border-radius:100px!important;
    background:#F4F3F0!important;color:#555049!important;font-weight:500!important;letter-spacing:normal!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(3) .alt-tabs button[aria-selected="true"]{background:#554C49!important;color:#fff!important;font-weight:700!important} /* 2026-10-06 designer note: active tab grey #554C49, not black */
  html[data-sept="bizhome"] main > section:nth-child(3) .alt-tilerow.three{
    width:1160px!important;grid-template-columns:360px 360px 360px!important;gap:40px!important;align-items:start!important;margin:0!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(3) .alt-tile{width:360px!important;display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;background:none!important;border:0!important}
  html[data-sept="bizhome"] main > section:nth-child(3) .alt-tile > img.tile-art{
    width:360px!important;height:240px!important;box-sizing:border-box!important;border-radius:24px!important;background:#F9F8F6!important;border:1px solid #E1DED6!important;object-fit:contain!important;padding:0!important;margin:0!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(3) .alt-tile > h3{font-size:24px!important;line-height:normal!important;font-weight:500!important;color:#121212!important;margin:30px 0 0!important;padding:0!important;letter-spacing:normal!important;text-align:left!important;align-self:stretch!important}
  html[data-sept="bizhome"] main > section:nth-child(3) .alt-tile > p{font-size:14px!important;line-height:21px!important;color:#7B756D!important;margin:10px 0 0!important;padding:0!important;text-align:left!important;align-self:stretch!important}
  html[data-sept="bizhome"] main > section:nth-child(3) .alt-tile > .glyph,
  html[data-sept="bizhome"] main > section:nth-child(3) .alt-tile > .arrow{display:none!important}
}

/* Full-bleed hero on wide viewports. The page is pinned to a 1440 canvas, so
   at 1920 the dark hero stopped at the canvas edge and left white bands either
   side of it. The board cannot show this (it is 1440 wide), and Yuval's intent
   is explicit: the brown runs to the viewport edges, the content stays on the
   canvas. The section takes the gradient and spans the viewport; the 1440 card
   inside it stays centred and transparent; the gradient's focus moves from a
   fixed 720px to 50% so it stays centred at any width. */
@media (min-width:1300px){
  html[data-sept="bizhome"] main > section.alt-hero{
    width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
    background:radial-gradient(1010px 1046px at 50% -162px,#957E6C 0%,#705C4D 24.76%,#4B392D 49.52%,#322318 74.76%,#25180D 87.38%,#180D02 100%) #180D02!important;
    overflow:hidden!important;
  }
  html[data-sept="bizhome"] .alt-hero-card{background:transparent!important}
  html[data-sept="bizhome"] header.site{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important}
  /* Solid state = the skin's .sept-solid, which its IntersectionObserver sets
     only once the hero has left the viewport (sept-bizhome.js:189). NOT
     dd-shell's .scrolled, which flips at 8px while the hero, and the white
     logo the skin paints over it, are still under the bar: a white bar and a
     white logo, which is what Yuval saw. */
  html[data-sept="bizhome"] header.site.sept-solid{background:#fff!important;box-shadow:0 1px 1px rgba(20,25,30,.04)}

  /* §4 SCALE, his: pad 60/120, h2 450 wide centred (38/normal), 80, then a
     1040 row at 200 of two 480 columns 80 apart: five feature buttons stacked
     with no gap (70 tall, pad 20, icon 30, label 20/24.2, active 500 #121212
     on #F4F3F0 r24, others 400 #888), and a detail card 480 wide pad 40 white
     r24 that stretches to the list, body 18/27 #666, dots 10 tall 20 apart
     pinned 40 from the bottom. Ours: h2 43.2px on 725, columns 464/476 at a
     100 gap, buttons 59 tall pad 18/24 r18 with 17px 900 labels on a warm
     tint, panel r26 pad 40/76 with 17px copy. */
  html[data-sept="bizhome"] main > section:nth-child(4){padding:60px 0 120px!important}
  html[data-sept="bizhome"] main > section:nth-child(4) > .wrap{padding:0!important}
  html[data-sept="bizhome"] main > section:nth-child(4) > .wrap > h2{
    font-size:44px!important;line-height:53px!important;font-weight:500!important;letter-spacing:normal!important;color:#121212!important;
    max-width:450px!important;width:450px!important;margin:0 auto 80px!important;
  }
  html[data-sept="bizhome"] .sept-stepper{width:1040px!important;margin:0 auto!important;grid-template-columns:480px 480px!important;gap:80px!important;align-items:stretch!important}
  html[data-sept="bizhome"] .sept-steplist{width:480px!important;gap:0!important}
  html[data-sept="bizhome"] .sept-steplist > button{
    width:480px!important;min-height:70px!important;padding:20px!important;gap:20px!important;border-radius:24px!important;
    font-size:20px!important;line-height:24.2px!important;font-weight:400!important;color:#7B756D!important;background:transparent!important;border:0!important;
    align-items:center!important;letter-spacing:normal!important;
  }
  html[data-sept="bizhome"] .sept-steplist > button b{font-weight:inherit!important;font-size:inherit!important;line-height:inherit!important;color:inherit!important;letter-spacing:normal!important}
  html[data-sept="bizhome"] .sept-steplist > button .ic{width:30px!important;height:30px!important;flex:0 0 30px!important}
  html[data-sept="bizhome"] .sept-steplist > button .ic svg,
  html[data-sept="bizhome"] .sept-steplist > button .ic img{width:30px!important;height:30px!important}
  html[data-sept="bizhome"] .sept-steplist > button[aria-selected="true"],
  html[data-sept="bizhome"] .sept-steplist > button.on,
  html[data-sept="bizhome"] .sept-steplist > button.active{font-weight:500!important;color:#121212!important;background:#F4F3F0!important}
  html[data-sept="bizhome"] .sept-steppanel{
    width:480px!important;padding:40px!important;background:#fff!important;border:1px solid #E1DED6!important;border-radius:24px!important;min-height:0!important;
  }
  html[data-sept="bizhome"] .sept-steppanel p{font-size:18px!important;line-height:27px!important;color:#7B756D!important;margin:0!important;letter-spacing:normal!important}
  html[data-sept="bizhome"] .sept-steppanel .sept-dots{gap:20px!important;bottom:40px!important;left:40px!important;height:10px!important}
  html[data-sept="bizhome"] .sept-steppanel .sept-dots > button{width:10px!important;height:10px!important}

  /* §5 ONBOARDING, his: no top padding (the fold above carries 120), 100 below,
     a 1280 row at 80: image 520 x 520 at 160, text column 480 wide at 760
     centred on the image (h2 38/normal, 20, body 18/27 #666, 40, button 47).
     Ours: pad 134/0, image 452 at 160, text 612 at 668 with 43.2px h2 and
     20.8px body. */
  html[data-sept="bizhome"] main > section:nth-child(5){padding:0 0 100px!important}
  html[data-sept="bizhome"] main > section:nth-child(5) > .wrap.alt-split{
    display:flex!important;align-items:center!important;gap:0!important;padding:0!important;width:1280px!important;max-width:1280px!important;margin:0 auto!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(5) .alt-split-media{width:520px!important;height:520px!important;margin-left:80px!important;border-radius:48px!important;flex:0 0 520px!important;overflow:hidden!important}
  html[data-sept="bizhome"] main > section:nth-child(5) .alt-split-media img{width:520px!important;height:520px!important;object-fit:cover!important}
  html[data-sept="bizhome"] main > section:nth-child(5) .alt-split > div:last-child{width:520px!important;max-width:520px!important;flex:0 0 520px!important;margin-left:80px!important}
  html[data-sept="bizhome"] main > section:nth-child(5) .alt-split > div:last-child > h2{
    font-size:44px!important;line-height:53px!important;font-weight:500!important;letter-spacing:normal!important;color:#121212!important;margin:0!important;max-width:none!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(5) .alt-split > div:last-child > p.lead{font-size:16px!important;line-height:24px!important;color:#5C5750!important;margin:20px 0 0!important;max-width:none!important}
  html[data-sept="bizhome"] main > section:nth-child(5) .alt-split > div:last-child > div{margin:40px 0 0!important}
}

/* §6 REGULATED, his: pad 120/80, a 1120 row at 160 of a 440 text column and a
   520 list 160 apart, text centred on the list. Text: h2 38/normal left, 20,
   body 18/27 #666, 40, outline button 47 (#888). List rows 60 apart: media
   slot 120 (FCA 120 x 38, ISO 93 x 120) then 40 then a 360 copy column with
   title 20/27 500, 16, body 14/18.9 #666. Ours: pad 161/76, h2 40px 600 on
   three lines, rows 16 apart on a 38 gap grid, 22px 600 titles, 17px body. */
@media (min-width:1300px){
  html[data-sept="bizhome"] main > section#security{padding:120px 0 80px!important}
  html[data-sept="bizhome"] main > section#security > .wrap{
    display:grid!important;grid-template-columns:440px 520px!important;column-gap:160px!important;align-items:start!important; /* 2026-10-06 designer note: heading block top-aligned with the first credential, not centred */
    width:1120px!important;max-width:1120px!important;margin:0 auto!important;padding:0!important;
  }
  html[data-sept="bizhome"] #security .sept-sec-left{width:440px!important;gap:0!important;display:block!important}
  html[data-sept="bizhome"] #security .sept-sec-left > h2{
    font-size:44px!important;line-height:53px!important;font-weight:500!important;letter-spacing:normal!important;color:#121212!important;
    text-align:left!important;margin:0!important;max-width:none!important;
  }
  html[data-sept="bizhome"] #security .sept-sec-left > p.lead{font-size:16px!important;line-height:24px!important;color:#5C5750!important;margin:20px 0 0!important;text-align:left!important;max-width:none!important}
  html[data-sept="bizhome"] #security .sept-sec-left > p.sec-btn{margin:40px 0 0!important;text-align:left!important}
  html[data-sept="bizhome"] #security .sept-sec-left > p.sec-btn > a.btn{
    /* 2026-10-06 designer: secondary buttons are filled sand, not stroked (spec 0.4 .btn-light) */
    background:#F4F3F0!important;border:1px solid #F4F3F0!important;color:#555049!important;font-weight:500!important;
  }
  html[data-sept="bizhome"] #security .sec-strip{width:520px!important;display:flex!important;flex-direction:column!important;gap:60px!important;margin:0!important}
  html[data-sept="bizhome"] #security .sec-strip > div{
    display:grid!important;grid-template-columns:120px 360px!important;column-gap:40px!important;row-gap:0!important;align-items:center!important;
    width:520px!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;
  }
  html[data-sept="bizhome"] #security .sec-strip > div > img.cert-inline{grid-row:1 / span 2;justify-self:center;align-self:center;margin:0!important}
  html[data-sept="bizhome"] #security .sec-strip > div > img.cert-inline.sept-fca,
  html[data-sept="bizhome"] #security .sec-strip > div:first-child > img.cert-inline{width:120px!important;height:38px!important;object-fit:contain!important}
  html[data-sept="bizhome"] #security .sec-strip > div:not(:first-child) > img.cert-inline{width:93px!important;height:120px!important;object-fit:cover!important}
  html[data-sept="bizhome"] #security .sec-strip > div > b{
    grid-column:2;font-size:24px!important;line-height:32.4px!important;font-weight:500!important;color:#121212!important;margin:0!important;align-self:end!important;letter-spacing:normal!important;
  }
  html[data-sept="bizhome"] #security .sec-strip > div > p{
    grid-column:2;font-size:14px!important;line-height:21px!important;color:#5C5750!important;margin:16px 0 0!important;max-width:none!important;align-self:start!important;
  }

  /* §7 CTA, his: pad 40/40, a 1280 card at 80, pad 100/80, #F4F3F0 r48; a 630
     column centred: h2 38/normal, 20, body 18/27 #666, 40, button 47. Ours:
     pad 43/28, card pad 76 r40, h2 43.2px, body 17.6px, button 52. */
  html[data-sept="bizhome"] main > section:nth-child(7){padding:40px 0!important}
  html[data-sept="bizhome"] main > section:nth-child(7) > .wrap{
    width:1280px!important;max-width:1280px!important;margin:0 auto!important;padding:100px 80px!important;border-radius:48px!important;background:#F4F3F0!important;
    display:block!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(7) > .wrap > h2{
    font-size:44px!important;line-height:53px!important;font-weight:500!important;letter-spacing:normal!important;color:#121212!important;
    width:630px!important;max-width:630px!important;margin:0 auto!important;text-align:center!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(7) > .wrap > p.lead{
    font-size:16px!important;line-height:24px!important;color:#555049!important;width:560px!important;max-width:560px!important;margin:20px auto 0!important;text-align:center!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(7) > .wrap > p:last-child{margin:40px auto 0!important;display:flex!important;justify-content:center!important;width:auto!important}
}

/* §8 BUSINESS PLANS, his: pad 80/70, head 600 wide at 420 (h2 46 one line, 20,
   sub 20/30), 60, three 407 cards 30 apart on the full 1280 at 80, each pad 30
   r24: name 28/normal 500, 60, price row (48px figure, /mo 16/24 #666 sat on
   the baseline), 5, note 14/21 #666; 240 tall. Core white on a hairline,
   Dynamic named in orange, Premium on the dark gradient. Then 60 and the foot:
   one outline button centred, 30, the fee line 14/21 #666. Ours wrapped the
   whole thing in a 1120 rounded container with 48 of padding, ran the cards
   321 wide on a 95/31 grid, and carried a description per card the board does
   not show. The skin already moves the first per-card button under the row
   and hides the other two (sept-bizhome.js, "Business plans"). */
@media (min-width:1300px){
  html[data-sept="bizhome"] main > section:nth-child(8){padding:80px 0 70px!important}
  html[data-sept="bizhome"] main > section:nth-child(8) > .wrap{padding:0!important;width:1280px!important;max-width:1280px!important;margin:0 auto!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro{padding:0!important;border-radius:0!important;width:1280px!important;max-width:none!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro > h2{
    font-size:44px!important;line-height:53px!important;font-weight:500!important;letter-spacing:normal!important;color:#121212!important;
    width:600px!important;max-width:600px!important;margin:0 auto!important;text-align:center!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro > p.lead{
    font-size:16px!important;line-height:24px!important;color:#5C5750!important;width:640px!important;max-width:640px!important;margin:20px auto 0!important;text-align:center!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-grid{width:1280px!important;max-width:none!important;margin:60px 0 0!important;gap:0!important;padding:0!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-grid > div{grid-template-columns:407px 407px 406px!important;column-gap:30px!important;row-gap:0!important;width:1280px!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide{
    width:auto!important;padding:30px!important;border-radius:24px!important;display:flex!important;flex-direction:column!important;gap:0!important;
    align-items:stretch!important;min-height:0!important;height:240px!important;box-sizing:border-box!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide > h3{margin:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;line-height:normal!important}
  html[data-sept="bizhome"] .alt-caro-slide .sept-plan-name{font-size:28px!important;line-height:normal!important;font-weight:500!important;letter-spacing:normal!important}
  html[data-sept="bizhome"] .alt-caro-slide .sept-plan-sep{display:none!important}
  html[data-sept="bizhome"] .alt-caro-slide .sept-plan-amount,
  html[data-sept="bizhome"] .alt-caro-slide .sept-plan-amt{font-size:48px!important;line-height:normal!important;font-weight:500!important;letter-spacing:normal!important;margin-top:60px!important;display:inline-block!important}
  html[data-sept="bizhome"] .alt-caro-slide .sept-plan-per{font-size:16px!important;line-height:24px!important;font-weight:400!important;color:#555049!important;margin-left:5px!important;vertical-align:baseline!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide > p:not(.muted):not(.caro-cta){display:none!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide > p.muted{font-size:14px!important;line-height:21px!important;color:#555049!important;margin:5px 0 0!important;text-align:left!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide:nth-of-type(1){background:#F4F3F0!important;border:0!important} /* 2026-10-06 designer note: Core is a filled #F4F3F0 card, stroke to background */
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide:nth-of-type(2){background:#fff!important;border:1px solid #F37F00!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide:nth-of-type(2) .sept-plan-name{color:#F37F00!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide:nth-of-type(3){background:linear-gradient(110.83deg,#656565 0%,#343434 100%)!important;border:0!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide:nth-of-type(3) .sept-plan-name,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide:nth-of-type(3) .sept-plan-amount,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide:nth-of-type(3) .sept-plan-amt{color:#fff!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide:nth-of-type(3) .sept-plan-per,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide:nth-of-type(3) p.muted{color:#C3C3C3!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .sept-plans-cta{margin:60px auto 0!important;display:flex!important;justify-content:center!important;width:100%!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .sept-plans-cta a.btn{background:#F4F3F0!important;border:1px solid #F4F3F0!important;color:#555049!important;font-weight:500!important;text-decoration:none!important} /* 2026-10-06 designer: filled sand, not stroked */
  html[data-sept="bizhome"] main > section:nth-child(8) .sept-plans-cta a.btn:hover{background:#ECEAE5!important;border-color:#ECEAE5!important;color:#555049!important}
  html[data-sept="bizhome"] #security .sept-sec-left > p.sec-btn > a.btn:hover{background:#ECEAE5!important;border-color:#ECEAE5!important;color:#555049!important}
  html[data-sept="bizhome"] main > section:nth-child(8) p.alt-caro-foot{font-size:14px!important;line-height:21px!important;color:#7B756D!important;margin:30px auto 0!important;width:fit-content!important;max-width:none!important;white-space:nowrap}
  html[data-sept="bizhome"] main > section:nth-child(8) p.alt-caro-foot a{font-size:inherit!important;line-height:inherit!important;color:inherit!important}
}

@media (min-width:1300px){
  /* Headings across the page: his wrap where the box says, not balanced.
     alt-home balances h2s, which broke "Ready to move with more comfort?" onto
     two lines inside a 630 box that holds it on one. */
  html[data-sept="bizhome"] main h2{text-wrap:auto!important;text-wrap-style:auto!important;white-space:normal!important}

  /* §9 NOT SURE, his: pad 70/80, a 1040 row at 200: text 480 wide (h2 38/normal
     left, 20, body 18/27 #666, 40, button 47) centred against a 480 x 480
     image r48 at 760. Ours: pad 112/76, text 452 at 160 with a 43.2px h2, image
     612 on a tinted plate. */
  html[data-sept="bizhome"] main > section:nth-child(9){padding:70px 0 80px!important}
  html[data-sept="bizhome"] main > section:nth-child(9) > .wrap.alt-split{
    display:flex!important;align-items:center!important;gap:0!important;padding:0!important;width:1040px!important;max-width:1040px!important;margin:0 auto!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(9) .alt-split > div:first-child{width:480px!important;max-width:480px!important;flex:0 0 480px!important;margin:0!important}
  html[data-sept="bizhome"] main > section:nth-child(9) .alt-split > div:first-child > h2{
    font-size:44px!important;line-height:53px!important;font-weight:500!important;letter-spacing:normal!important;color:#121212!important;margin:0!important;width:450px!important;max-width:450px!important;text-align:left!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(9) .alt-split > div:first-child > p.lead{font-size:16px!important;line-height:24px!important;color:#5C5750!important;margin:20px 0 0!important;width:450px!important;max-width:450px!important}
  html[data-sept="bizhome"] main > section:nth-child(9) .alt-split > div:first-child > p:last-child{margin:40px 0 0!important}
  html[data-sept="bizhome"] main > section:nth-child(9) .alt-split-media{
    width:480px!important;height:480px!important;flex:0 0 480px!important;margin-left:80px!important;border-radius:48px!important;background:none!important;overflow:hidden!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(9) .alt-split-media img{position:static!important;width:480px!important;height:480px!important;object-fit:cover!important;inset:auto!important}

  /* §10 TAKE DIGIDOE WITH YOU, his: pad 40/40, a 1280 card at 80, 360 tall,
     #121212 r48, pad 0 80: phone 397 x 320 at 161/40 inside it, text column
     520 wide at 760 centred (h2 38/normal white, 40, badges 126 x 42 and
     141 x 42, 20 apart). Ours: a full-bleed band 1440 wide, pad 48/128,
     phone 330 at 128, text 806 wide at 506. */
  html[data-sept="bizhome"] main > section:nth-child(10){padding:40px 0 80px!important} /* 2026-10-06 designer note: 80 between the dark card and the footer, not 40 */
  html[data-sept="bizhome"] main > section:nth-child(10) > .wrap{padding:0!important;width:1280px!important;max-width:1280px!important;margin:0 auto!important}
  html[data-sept="bizhome"] main > section:nth-child(10) .alt-band.app{
    width:1280px!important;max-width:1280px!important;height:360px!important;margin:0!important;border-radius:48px!important;background:#121212!important;
    padding:0 80px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;position:relative!important;overflow:hidden!important;gap:0!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(10) .alt-band.app > .art.appshot{
    position:absolute!important;left:161px!important;top:40px!important;width:397px!important;height:320px!important;margin:0!important;display:block!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(10) .alt-band.app > .art.appshot img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:top!important;max-width:none!important}
  html[data-sept="bizhome"] main > section:nth-child(10) .alt-band.app > div:not(.art){width:520px!important;max-width:520px!important;flex:0 0 520px!important;margin:0!important}
  html[data-sept="bizhome"] main > section:nth-child(10) .alt-band.app h2{
    font-size:44px!important;line-height:53px!important;font-weight:500!important;letter-spacing:normal!important;color:#fff!important;margin:0!important;max-width:none!important;text-align:left!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(10) .alt-band.app p.lead{display:none!important}
  html[data-sept="bizhome"] main > section:nth-child(10) .alt-band.app > div:not(.art) > p:last-child{margin:40px 0 0!important;display:flex!important;gap:20px!important;line-height:0!important}
  html[data-sept="bizhome"] main > section:nth-child(10) .alt-band.app > div:not(.art) > p:last-child img{height:42px!important;width:auto!important}
}

/* §11 PARTNERS, his: pad 100/120, head centred (h2 46 one line, 20, sub 20/30
   on 452), 60, a 1040 grid at 200 of 2 x 2 cards 510 wide 20 apart, each pad
   30 r24 white on a hairline, icon plate 70 with a 50 glyph, 30, copy: title
   20/24.2 500, 12, body 14/18.9 #888, 24, link 16/24 orange; 60, filled
   button 47. Ours: pad 74/106, 26.4px h2, cards pad 26/34 r20 32 apart with
   24px 600 titles, 17px body, 19px 600 links. */
@media (min-width:1300px){
  html[data-sept="bizhome"] main > section#partners-route{padding:100px 0 120px!important}
  html[data-sept="bizhome"] main > section#partners-route > .wrap{width:1040px!important;max-width:1040px!important;margin:0 auto!important;padding:0!important}
  html[data-sept="bizhome"] main > section#partners-route > .wrap > h2{
    font-size:44px!important;line-height:53px!important;font-weight:500!important;letter-spacing:normal!important;color:#121212!important;margin:0!important;text-align:center!important;max-width:none!important;
  }
  html[data-sept="bizhome"] main > section#partners-route > .wrap > p.lead{
    font-size:16px!important;line-height:24px!important;color:#5C5750!important;width:452px!important;max-width:452px!important;margin:20px auto 60px!important;text-align:center!important;
  }
  html[data-sept="bizhome"] main > section#partners-route .alt-trio.four{grid-template-columns:510px 510px!important;gap:20px!important;width:1040px!important}
  html[data-sept="bizhome"] main > section#partners-route .alt-trio.four > div{
    display:grid!important;grid-template-columns:70px 1fr!important;column-gap:30px!important;row-gap:0!important;align-items:start!important;
    padding:30px!important;border-radius:24px!important;background:#fff!important;border:1px solid #E1DED6!important;height:auto!important;min-height:0!important;
  }
  html[data-sept="bizhome"] main > section#partners-route .alt-trio.four > div > .sept-pico{width:70px!important;height:70px!important;grid-row:1 / span 3;display:grid!important;place-items:center!important;border-radius:16px!important}
  html[data-sept="bizhome"] main > section#partners-route .alt-trio.four > div > .sept-pico img{width:50px!important;height:50px!important}
  html[data-sept="bizhome"] main > section#partners-route .alt-trio.four > div > b{
    grid-column:2;font-size:20px!important;line-height:24.2px!important;font-weight:500!important;color:#121212!important;margin:0 0 12px!important;letter-spacing:normal!important;display:block!important;
  }
  html[data-sept="bizhome"] main > section#partners-route .alt-trio.four > div > p{grid-column:2;font-size:14px!important;line-height:18.9px!important;color:#888!important;margin:0 0 24px!important;max-width:none!important}
  html[data-sept="bizhome"] main > section#partners-route .alt-trio.four > div > p.sept-cardcta{margin:0!important;line-height:24px!important}
  html[data-sept="bizhome"] main > section#partners-route .alt-trio.four > div > p.sept-cardcta a{font-size:16px!important;line-height:24px!important;font-weight:400!important;color:#F37F00!important;text-decoration:none!important}
  html[data-sept="bizhome"] main > section#partners-route p.sept-hubcta{margin:60px auto 0!important;display:flex!important;justify-content:center!important;width:auto!important}
  html[data-sept="bizhome"] main > section#partners-route p.sept-hubcta a{
    height:47px!important;padding:0 24px!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;
    font-size:16px!important;line-height:normal!important;font-weight:700!important;background:#F37F00!important;color:#fff!important;border-radius:100px!important;letter-spacing:normal!important;
  }

  /* FOOTER, his (same construction as the individual board): #F4F3F0, no top
     radius, pad 80/40; top row 4 x 260 at an 80 gap: wordmark 38/600 with an
     orange D, 20, tagline 14/21 #6B6259, 40, badges 37 tall 16 apart, 20, a
     40px "in" circle; headings 14/normal 500, 20, links 16/normal 16 apart.
     80, then a #CDCDCD hairline, 40, the legal row on the same 4 x 260. Ours
     kept a 30px top radius, the header's icon logo at 93 x 30, badges stacked,
     a bare 16px "in", 11.5px 700 headings, links on a 23px line with padding,
     and a legal row on its own 262 / 383 / 260 / 260 grid at 80/380/801/1100. */
}

@media (min-width:1300px){
  /* CTA heading is the one 36px heading on the board, tracked -0.39, so it
     holds on one line at 587 wide inside its 630 box. At 38 it wraps. */
  html[data-sept="bizhome"] main > section:nth-child(7) > .wrap > h2{font-size:44px!important;line-height:53px!important;letter-spacing:normal!important;width:735px!important;max-width:735px!important}
}
@media (min-width:1300px){
  /* Credential rows: the 16 between title and body is a grid gap, not a margin
     on the body, or the margin adds to the row and the 120 badge no longer
     bounds it (rows came out 129 against his 120). */
  html[data-sept="bizhome"] #security .sec-strip > div{row-gap:16px!important;align-content:center!important;min-height:120px!important}
  html[data-sept="bizhome"] #security .sec-strip > div:first-child{min-height:108px!important;align-content:start!important} /* first credential's title sits on the row top, so it shares y with the h2 */
  html[data-sept="bizhome"] #security .sec-strip > div > p{margin:0!important}
}
@media (min-width:1300px){
  /* The 47px pill lost to the skin's own .btn.btn-primary rules on specificity
     (two classes beat my one class plus two types); restated with the class
     pairs so it lands on every pill, 52 -> 47 in §2, §7 and §11. */
  html[data-sept="bizhome"] main a.btn.btn-primary,
  html[data-sept="bizhome"] main a.btn.btn-ink,
  html[data-sept="bizhome"] main a.btn.btn-outline,
  html[data-sept="bizhome"] main a.btn.btn-d,
  html[data-sept="bizhome"] main p.sept-hubcta > a{
    height:47px!important;min-height:0!important;max-height:47px!important;padding:0 24px!important;line-height:normal!important;font-size:16px!important;
  }
  /* His second feature button is the two-line one and carries 23/20 padding. */
  html[data-sept="bizhome"] .sept-steplist > button:nth-child(2){padding:23px 20px!important}
}
@media (min-width:1300px){
  /* Title row was stretching to 56 for a 27px line: the skin's grid gives the
     rows a share of the 120 badge height. Rows size to content, the pair
     centres against the badge. */
  html[data-sept="bizhome"] #security .sec-strip > div{grid-template-rows:auto auto!important}
  html[data-sept="bizhome"] #security .sec-strip > div > b{align-self:end!important;height:auto!important;min-height:0!important}
  html[data-sept="bizhome"] #security .sec-strip > div > p{align-self:start!important}
}
@media (min-width:1300px){
  html[data-sept="bizhome"] #security .sec-strip > div > b{justify-self:stretch!important;width:100%!important}
}
@media (min-width:1300px){
  /* Titles wrap where the box says, as his do. alt-home balances h3s, which
     broke "Control every account separately" as 155/220 against his 254/121. */
  html[data-sept="bizhome"] main h3,
  html[data-sept="bizhome"] main .alt-tile > h3,
  html[data-sept="bizhome"] main .seg-row-label h3{text-wrap:auto!important;text-wrap-style:auto!important}
}
@media (min-width:1300px){
  /* His 1160 hairline (#E1DED6) sits on the onboarding/credentials boundary at
     y4722; ours had none there and a full-width #CDCDCD one on the footer's top
     edge, which his does not have. */
  html[data-sept="bizhome"] main > section#security{position:relative!important}
  html[data-sept="bizhome"] main > section#security::before{
    content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:1160px;height:1px;background:#E1DED6;
  }
}
@media (min-width:1300px){
  /* Solid bar ink = the individual bar: #121212 at .5, the current lane at .8.
     The skin used its warm greys (#1C1712 / #8A857D) here. */
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .alt-seg > *,
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > a.nav-hub,
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .nav-cta > a.txt{color:#121212!important;opacity:.5;font-weight:500!important}
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .alt-seg > button,
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .alt-seg > [aria-current]{opacity:.8;font-weight:500!important}
}
@media (min-width:1300px){
  /* The plan surfaces by the slide classes the skin sets, not nth-of-type: the
     hidden carousel nav is a div too, so nth-of-type(1) painted Core as
     Dynamic and Dynamic as Premium. */
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.on{background:#F4F3F0!important;border:0!important} /* 2026-10-06: .on is the Core slide; featured/invert rules below still win for the other two */
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.on .sept-plan-name,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.on .sept-plan-amount,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.on .sept-plan-amt{color:#121212!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.on .sept-plan-per,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.on p.muted{color:#555049!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-featured{background:#fff!important;border:1px solid #F37F00!important;box-shadow:0 16px 48px -16px rgba(243,127,0,.8)!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-featured .sept-plan-name{color:#F37F00!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-featured .sept-plan-amount,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-featured .sept-plan-amt{color:#121212!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-featured .sept-plan-per,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-featured p.muted{color:#555049!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-invert{background:linear-gradient(110.83deg,#656565 0%,#343434 100%)!important;border:0!important;box-shadow:none!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-invert .sept-plan-name,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-invert .sept-plan-amount,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-invert .sept-plan-amt,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-invert .sept-plan-from{color:#fff!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-invert .sept-plan-per,
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide.sept-plan-invert p.muted{color:#C3C3C3!important}
}
@media (min-width:1300px){
  /* His card is a plain stack: name, 60, figure with /mo on its baseline, 5,
     note. The skin lays the h3 out as a flex row, which stretched the name to
     the card's height and pushed the figure into the right half. */
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide{align-items:flex-start!important;justify-content:flex-start!important;text-align:left!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide > h3{display:block!important;height:auto!important;width:100%!important;margin:0!important;padding:0!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide .sept-plan-name{display:block!important;height:auto!important;width:auto!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide .sept-plan-amount{display:inline-block!important;margin:60px 0 0!important;vertical-align:baseline!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide .sept-plan-per{display:inline!important;margin:0 0 0 5px!important;vertical-align:baseline!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide > p.muted{margin:5px 0 0!important;width:100%!important}
}
@media (min-width:1300px){
  /* The h3's own line box added a 44px strut above the inline figure. Zeroed,
     so the spans set their own lines: figure lands 60 under the name, as his. */
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide > h3{font-size:0!important;line-height:0!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide .sept-plan-name{line-height:normal!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide .sept-plan-amount{line-height:normal!important}
}
@media (min-width:1300px){
  /* Stack via a wrapping flex row instead of inline layout: name takes the
     whole first line, figure and /mo share the second on a common baseline,
     60 between the rows. No strut to fight. */
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide > h3{
    display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;row-gap:60px!important;column-gap:5px!important;
    font-size:16px!important;line-height:normal!important;
  }
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide .sept-plan-name{flex:0 0 100%!important;display:block!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide .sept-plan-amount{display:block!important;margin:0!important}
  html[data-sept="bizhome"] main > section:nth-child(8) .alt-caro-slide .sept-plan-per{display:block!important;margin:0!important;line-height:24px!important;padding-bottom:5px!important;align-self:flex-end!important}
}
@media (min-width:1300px){
  /* Restated at a specificity the skin's own plan typography block cannot
     reach. Same stack: name on its own line, figure + /mo on a baseline row 60
     below, note 5 under that. */
  html[data-sept="bizhome"] body main > section:nth-child(8) div.alt-caro-grid div.alt-caro-slide > h3{
    display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:baseline!important;align-content:flex-start!important;
    row-gap:60px!important;column-gap:5px!important;font-size:16px!important;line-height:normal!important;height:auto!important;width:100%!important;margin:0!important;padding:0!important;
  }
  html[data-sept="bizhome"] body main > section:nth-child(8) div.alt-caro-grid div.alt-caro-slide > h3 > span.sept-plan-name{
    flex:0 0 100%!important;width:100%!important;max-width:none!important;height:auto!important;display:block!important;
    font-size:28px!important;line-height:normal!important;font-weight:500!important;margin:0!important;padding:0!important;text-align:left!important;
  }
  html[data-sept="bizhome"] body main > section:nth-child(8) div.alt-caro-grid div.alt-caro-slide > h3 > span.sept-plan-sep{display:none!important}
  html[data-sept="bizhome"] body main > section:nth-child(8) div.alt-caro-grid div.alt-caro-slide > h3 > span.sept-plan-amount{
    flex:0 0 auto!important;display:block!important;font-size:48px!important;line-height:normal!important;font-weight:500!important;margin:0!important;padding:0!important;height:auto!important;
  }
  html[data-sept="bizhome"] body main > section:nth-child(8) div.alt-caro-grid div.alt-caro-slide > h3 > span.sept-plan-per{
    flex:0 0 auto!important;display:block!important;font-size:16px!important;line-height:24px!important;font-weight:400!important;margin:0!important;padding:0 0 5px!important;height:auto!important;
  }
  html[data-sept="bizhome"] body main > section:nth-child(8) div.alt-caro-grid div.alt-caro-slide > p.muted{margin:5px 0 0!important;font-size:14px!important;line-height:21px!important;width:100%!important;text-align:left!important}
}
@media (min-width:1300px){
  /* His "Speak to our team" is the filled pill, ours came through as the grey
     outline variant. */
  html[data-sept="bizhome"] main > section:nth-child(9) .alt-split > div:first-child > p:last-child a.btn{
    background:#121212!important;border:0!important;color:#fff!important;font-weight:700!important;
  }
}
@media (min-width:1300px){
  /* Link spacing as a flex gap, not adjacent-sibling margins: a hidden
     lane-only link sits between Pricing and White-label and broke the
     adjacency, so the two rendered on top of each other. Heading to first link
     stays 20 (gap 16 + 4). */
  /* The skin caps credential titles at a ch measure; his run the full 360. */
  html[data-sept="bizhome"] #security .sec-strip > div > b{max-width:none!important}
}
@media (min-width:1300px){
  /* 2026-10-06: the body pin is gone, so the hero band and the bar simply span
     the body, which is the window at every width. No 100vw: that would add a
     scrollbar-width overflow on Windows. */
  html[data-sept="bizhome"] main > section.alt-hero,
  html[data-sept="bizhome"] header.site{
    width:auto!important;max-width:none!important;
    margin-left:0!important;margin-right:0!important;
  }
}

/* SHARED NAV CONTRACT moved to assets/dd-nav.css (2026-09-22). The block below
   keeps only what is this page's own: the first-view colours over the hero. */

/* ============================================================
   BUSINESS FIRST VIEW = THE SHARED BAR, IN ITS OWN COLOURS . Yuval 2026-09-17
   "business first view needs to stay in its current colour, but be located in
   the same px placement as the individual top navbar ... and the switching
   between them should be seamless."
   So the board's hero-nav geometry (126 logo, 48 gap, row at 40) is retired.
   Every state of the business bar uses the shared contract: 99 x 31 logo at
   80, lanes 32 on at 211 / 320 / 434, pills 50, cluster to 1360, row at 20 in
   an 87 bar. The only thing that changes when the hero scrolls out is colour:
   transparent + white ink + white outline pills -> white + #121212 + filled.
   Same boxes both sides of the switch, so nothing moves.
   ============================================================ */
@media (min-width:1180px){  /* same breakpoint as dd-nav.css, which owns the geometry */
  /* First view: the same boxes, white ink, no bar. */
  html[data-sept="bizhome"] header.site:not(.sept-solid){background:transparent!important;box-shadow:none!important}
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .alt-seg > *,
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > a.nav-hub,
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .nav-cta > a.txt{color:#fff!important;opacity:.5;font-weight:500!important}
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .alt-seg > button,
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .alt-seg > [aria-current]{opacity:.8;font-weight:500!important}
  html[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .nav-cta > a.btn{
    background:transparent!important;color:rgba(255,255,255,.5)!important;border-color:rgba(255,255,255,.5)!important;font-weight:500!important;
  }

  /* Solid: the individual bar, exactly. */
  html[data-sept="bizhome"] header.site.sept-solid{background:#fff!important;box-shadow:0 1px 1px rgba(20,25,30,.04)!important}
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .alt-seg > *,
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > a.nav-hub,
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .nav-cta > a.txt{color:#121212!important;opacity:.5}
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .alt-seg > button,
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .alt-seg > [aria-current]{opacity:.8}
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .nav-cta > a.btn-primary{background:#121212!important;border-color:#121212!important;color:#fff!important;font-weight:700!important}
  html[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .nav-cta > a.btn-outline{background:transparent!important;border-color:#121212!important;color:#121212!important;font-weight:500!important}
}
@media (min-width:1180px){
  /* Seamless means no box moves at the switch. The one thing that did: "Get
     started" is 500 in the first view and 700 once solid, and the bolder label
     is 3px wider, which nudged it and Contact sales 2px left. Pin the pill to
     the solid width in both states. */
  html[data-sept="bizhome"] header.site > .wrap.nav > .nav-cta > a.btn-primary{min-width:138px!important}
}


/* 2026-10-06 designer notes (otabek biz changes), note 1: the sticky nav's
   "Get started" is #121212. dd-nav.css:73 paints it #F37F00 behind six :root
   boosters, so this outranks it the same way sept-ind2909.css:298 does. */
html:root:root:root:root:root:root[data-sept="bizhome"] header.site > .wrap.nav > .nav-cta > a.btn-primary{background:#121212!important;border-color:#121212!important;color:#fff!important;font-weight:700!important}
html:root:root:root:root:root:root[data-sept="bizhome"] header.site > .wrap.nav > .nav-cta > a.btn-primary:hover{background:#2B2926!important;border-color:#2B2926!important}

/* 2026-10-06 designer, "secondary buttons left": solid nav "Log in" is the sand
   pill (#F4F3F0 / #555049, spec 2), and on the hero the nav links are plain white
   text at .6, not stroked pills (spec 1). dd-nav.css:75 strokes them black behind
   six :root boosters, hence the same boosters here. */
html:root:root:root:root:root:root[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .nav-cta > a.btn-outline{background:#F4F3F0!important;border-color:#F4F3F0!important;color:#555049!important;font-weight:500!important}
html:root:root:root:root:root:root[data-sept="bizhome"] header.site.sept-solid > .wrap.nav > .nav-cta > a.btn-outline:hover{background:#ECEAE5!important;border-color:#ECEAE5!important;color:#555049!important}
html:root:root:root:root:root:root[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .nav-cta > a.btn{background:transparent!important;border-color:transparent!important;color:rgba(255,255,255,.6)!important;font-weight:500!important}
html:root:root:root:root:root:root[data-sept="bizhome"] header.site:not(.sept-solid) > .wrap.nav > .nav-cta > a.btn:hover{color:#fff!important;background:transparent!important}

/* 2026-10-14 Yuval: the hero-state bar is the front of the page the way the white bar is, but
   it stays see-through: a frosted pane that blurs whatever scrolls under it and tints it with the
   hero's dark, so the ink keeps reading over the device mockup and the pane always matches what
   is behind it (a frozen copy of the hero's top slice was tried and rejected: "keeps the colour
   of the initial location"). At rest the pane is off, so the designer's opening view is untouched;
   it fades in once dd-shell.js flips .scrolled (8px) and out again on the same .45s curve as the
   white bar takes over. Tint .55 is the dial. Empty pseudo, no copy. Desktop bar only, like dd-nav.css. */
@media (min-width:1180px){
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(24,13,2,.55);-webkit-backdrop-filter:blur(28px) saturate(1.15);backdrop-filter:blur(28px) saturate(1.15);opacity:0;transition:opacity .45s ease}
  html:root:root:root:root:root:root[data-sept="bizhome"] header.site.scrolled:not(.sept-solid)::before{opacity:1}
}