/* ============================================================ SEPTEMBER SKIN . PARTNER HUB HOME ONLY Artboard: september-website/Partners - Home page/Partners Home NEW.pdf 1444 x 10544 pts, 1pt == 1 CSS px. The 1:1 raster the PDF does not ship with was rendered at 72dpi to qa/skin/partners-new.png (1444x10544, exact). Spec dump qa/skin/pdfspec-partners.txt (qa/skin-pdfspec.py) Void map qa/skin/artboard-partners.json (qa/skin-artboard.py) Asset ledger qa/skin/partners-asset-ledger.json Protocol .claude/skills/dd-skin/SKILL.md WHICH ARTBOARD, and why not the other one. The designer folder ships two partner homes. "Partners Home 28.08.2026 comments.pdf" merges EMD agents and licensed EMIs into one "EMI & EMD AGENTS" card and reads "Three ways to partner with DigiDoe." NEW splits them back into four, matches the live H1 word for word, carries the footer's "Cookie settings" link built on 07-09, and fixes four typos the 28.08 file still has (allowign, exeprience, monitze, end-to end). NEW is the later file. Operator confirmed 2026-09-10. TEXT IS FROZEN. qa/freeze/partners.txt holds 306 approved strings. node qa/text-freeze.mjs partners.html must print CLEAN before commit. A string hidden by CSS counts as removed, which is why two artboard decisions are NOT applied here and are logged at the bottom of this file. HOW THIS PAGE DIFFERS FROM THE OTHER TWO SEPTEMBER SKINS: ribbon the artboard has one AND SO DOES THE LIVE PAGE. I reported the opposite earlier and was wrong: the bar is injected by dd-shell.js from DD_PROMOS (id referral-management-2026-09, audience ptr), so it never appears in partners.html source, which is all I diffed. It is in the freeze baseline at line 1. Nothing was decided and nothing is shifted by 54px; these are the artboard's own y values throughout. nav WHITE, on white, above an inset black hero card. Not the business home's transparent-over-dark, not a two-state swap. hero inset black card, 1280x640, left aligned, eyebrow above H1. grounds strict alternation off the artboard's own fill rects: white . white . f4f3f0 . white . f4f3f0 . white . f4f3f0 . white . white . white card fills The cards in folds 2, 4, 6-FX, 7, 8 and 9 are WHITE with a 1px #e1ded6 hairline, NOT cream fills. The PDF states only an #e1ded6 rect for each, which is the border; the raster reads #ffffff two pixels inside every one of them. Filling them cream turned six folds into tan blocks and was the loudest thing wrong with the first pass. Only fold 6's currency cards (#f4f3f0) and fold 10's closing panel (#f4f3f0) are real fills. Folds 3 and 5 are white on a soft shadow, no border. hairline one only, 1160px of #e1ded6 at y8049, and it is the boundary between #onboarding-service and #trust, not a decoration. ============================================================ */ [data-sept="ptr"]{ --sept-wrap:1280px; --sept-gutter:80px; --sept-ink:#121212; /* headings, card titles */ --sept-body:#666666; /* leads, currency card bodies, credential bodies */ --sept-mute:#888888; /* card bodies, footnotes, tertiary */ --sept-num:#cdcdcd; /* the big step numerals in folds 7 and 8 */ --sept-accent:#f37f00; /* sampled off this artboard's nav CTA and links */ --sept-cream:#e1ded6; /* the 1px card hairline, and the fold-8 rule */ --sept-panel:#f4f3f0; /* alternating ground, fold 6 cards, closing panel */ --sept-rail:#b2b2b2; /* the inactive half of the fold 4 progress rail */ --sept-dark:#000000; /* hero card */ --sept-pill:100px; --sept-t:.2s var(--ease,cubic-bezier(.16,1,.3,1)); } /* ---------- containers ---------- .wrap is 1280 with 80px of inner padding, so its content box is 1120 at x162. Folds 6, 7, 8 and 10 draw containers at the full 1280 (x82..1362); those cannot centre inside 1120 and would simply start at 162. SKILL.md hard rule 5. Each one zeroes the padding and sets its own width. */ [data-sept="ptr"] .wrap{ max-width:var(--sept-wrap); padding-left:var(--sept-gutter); padding-right:var(--sept-gutter); } @media (max-width:900px){ [data-sept="ptr"] .wrap{padding-left:24px;padding-right:24px} } /* ---------- type scale ---------- Straight off the spec's TYPE SCALE block: 52/63, 38/46, 20/30, 16/24, 14/21, 12/18. !important throughout because nine of the ten sections carry inline style="font-size:var(--s-3)" and max-width:26ch in the markup, and an inline declaration beats any plain rule here. SKILL.md step 2. */ [data-sept="ptr"] h1, [data-sept="ptr"] h2, [data-sept="ptr"] h3{text-wrap:wrap!important} /* dd-shell sets balance, which re-divides every heading into even lines and is never the designer's break */ [data-sept="ptr"] main h1{ font-size:52px!important;line-height:63px!important; font-weight:300;color:#ffffff;letter-spacing:-.01em;margin:0; } [data-sept="ptr"] main > section h2{ font-size:38px!important;line-height:46px!important; font-weight:300!important;color:var(--sept-ink)!important; max-width:none!important;letter-spacing:-.01em;margin:0 auto; } [data-sept="ptr"] main > section p.lead{ font-size:20px!important;line-height:30px!important; color:var(--sept-body)!important;font-weight:400; max-width:none!important; } /* ---------- section rhythm ---------- Padding is not split evenly down the middle of each void. The artboard's own ground-colour rects state where one fold ends and the next begins, so the split point is that y and the two paddings are measured from it. Voids, in order: 127 267 266 270 248 269 266 267 141 162. Colour switches at 1935 2935 3908 4872 5839 6939, and at the 8049 hairline. 2026-09-14: the VOIDS were right, the SPLIT was not. His proportions board annotates the top of every band at 120 and holds it on 8 of 8 - it is the constant, and the bottom padding is where variable copy length is absorbed (references/proportions.md, Rule 4). Ours ran 127-129 on top and paid for it out of the bottom. Every void below keeps its exact total, so the page does not move; only the split point inside it does. The one real change in height is the first void, 127 -> 120, because it has no band above to give the 7 to. Sections 9 and 10 are deliberately untouched: the 141 void there straddles the 8049 hairline, and his board gives that last CTA band a 179 top rather than 120. Do not normalise it without asking him. */ [data-sept="ptr"] main > section{padding-top:0;padding-bottom:0;position:relative} [data-sept="ptr"] main > section:nth-child(2){padding:120px 0 147px;background:#ffffff} [data-sept="ptr"] main > section:nth-child(3){padding:120px 0 146px;background:var(--sept-panel)} [data-sept="ptr"] main > section:nth-child(4){padding:120px 0 150px;background:#ffffff} [data-sept="ptr"] main > section:nth-child(5){padding:120px 0 128px;background:var(--sept-panel)} [data-sept="ptr"] main > section:nth-child(6){padding:120px 0 149px;background:#ffffff} [data-sept="ptr"] main > section:nth-child(7){padding:120px 0 146px;background:var(--sept-panel)} [data-sept="ptr"] main > section:nth-child(8){padding:120px 0 147px;background:#ffffff} [data-sept="ptr"] main > section:nth-child(9){padding:120px 0 70px;background:#ffffff} [data-sept="ptr"] main > section:nth-child(10){padding:71px 0 80px;background:#ffffff} /* The single hairline. It is section 8's own bottom edge, drawn as its ::after so the rule and the fold boundary can never drift apart. 1160 wide at x142, which is 20px outside the 1120 content box on each side. */ [data-sept="ptr"] main > section:nth-child(8)::after{ content:"";position:absolute;left:50%;transform:translateX(-50%); bottom:0;width:1160px;height:1px;background:var(--sept-cream); } /* ---------- NAVBAR ---------- White band, 87px (artboard 54..141, less the ribbon). The first-view nav is the one inside the artboard's own top band; Navbar.pdf is the scrolled state and is not the authority here. Nav markup is never restructured from this file: alt-home.js wires the mega-menu off .alt-seg's parent. */ [data-sept="ptr"] header.site{ position:sticky;top:0;z-index:140;background:#ffffff;border-bottom:0; } /* the nav runs edge to edge of the 1280, logo at x82 and the right-hand group ending at 1362, so this wrap loses its 80px of inner padding too. TWO OPERATOR OVERRIDES OF THE ARTBOARD (Yuval, 2026-09-10), both recorded here and in the anchors' _note because neither is a measurement: O1 The artboard left-aligns Business / Individual / Partner Hub at x233, x342 and x456. "My designer forgot to centralize the top nav bar items." They are centred on the page instead, matching the business and individual homes. O2 The artboard draws a currency plate at x1281..1363. "Get rid of the GBP currencies pill from the top nav bar." Hidden, on this page only. The other 38 pages keep it, because .ccysel is shared. O3 "Contact sales" is removed from this nav. "The partners hub homepage doesn't need 'contact sales', it already has 'become a partner' which is the CTA for this page. And the log in option in case its a returning partner." This one REMOVES APPROVED COPY, which is a REWRITE-class change, not a skin one. It is applied because the operator asked for it directly, the freeze is re-baselined for it, and the reason is logged in qa/freeze/CHANGELOG.md. Contact sales stays in the mega-menu, the footer, and on the other 38 pages. O4 Business / Individual / Partner Hub are spaced EQUALLY, 40px between each, with no divider. "So the top nav bar looks the same across the 3 home pages." The artboard's own spacing is uneven (109 then 114 between the three label origins) and the shared component draws the first two as a segmented control with its own track. The centring is a four-track grid, 1fr auto auto 1fr. Both outer tracks floor at their own min-content (99 for the logo, 409 for the CTA group) and then split the remaining width evenly, which lands the middle pair on 722 exactly. white-space:nowrap on the CTA group is not optional: an equal column centring grid sizes its outer tracks to min-content, and without it the wrapped CTA collapses to its narrowest form at a perfectly correct x, which the alignment gate would pass. SKILL.md hard rule 7. */ [data-sept="ptr"] header.site .wrap.nav{ display:grid;grid-template-columns:1fr auto auto 1fr; min-height:87px;align-items:center;gap:0; /* FULL BLEED with 82px of padding, NOT a 1280 box. The other two home pages run their nav edge to edge; capping this one at 1280 put the logo at x320 and ended the CTA group at 1600 on a 1920 screen, while theirs sat at x82 and 1838. At the artboard's own 1444 the two are identical, which is why every gate passed it and only a screenshot at a real window width showed it. Operator, 2026-09-10: the three home navs must match. */ max-width:none!important; padding-left:82px;padding-right:82px; } [data-sept="ptr"] header.site .brand{margin-left:0;grid-column:1;justify-self:start} [data-sept="ptr"] header.site .alt-seg{grid-column:2} [data-sept="ptr"] header.site .nav-hub{grid-column:3} [data-sept="ptr"] header.site .nav-cta{ grid-column:4;justify-self:end;white-space:nowrap; } [data-sept="ptr"] header.site .nav-cta .ccysel{display:none!important} [data-sept="ptr"] header.site .nav-cta .txt{display:none!important} /* O3 */ /* The artboard sets the whole page in one family. This was corrected under the page scope only, because changing dd-shell's nav font touched 39 pages and that was not a skin decision to take alone. Yuval took it on 2026-09-14: Inter is now the single family site-wide, so the root no longer disagrees. */ [data-sept="ptr"] header.site .alt-seg a, [data-sept="ptr"] header.site .nav-hub, [data-sept="ptr"] header.site .nav-cta .txt, [data-sept="ptr"] header.site .nav-cta .btn{ font-family:'Inter',system-ui,sans-serif!important; } [data-sept="ptr"] header.site .alt-seg a, [data-sept="ptr"] header.site .nav-hub, [data-sept="ptr"] header.site .nav-cta .txt{ font-size:16px;color:var(--sept-ink); min-height:44px;display:inline-flex;align-items:center; } /* This artboard's nav carries NO segmented track. The only filled shapes in its 54..141 band are the orange CTA, the Log in outline and the currency plate; Business / Individual / Partner Hub are bare 16px ink at x233, x342 and x456. So the segment loses its rail, its pill and its padding, and the three x positions are set by margin rather than by the shared gap. */ [data-sept="ptr"] header.site .alt-seg{ background:none!important;border:0!important;box-shadow:none!important; padding:0!important;gap:40px!important;margin-left:0; } [data-sept="ptr"] header.site .alt-seg::before, [data-sept="ptr"] header.site .alt-seg::after{display:none!important} [data-sept="ptr"] header.site .alt-seg a{ background:none!important;box-shadow:none!important;padding:0!important; border:0!important; } [data-sept="ptr"] header.site .alt-seg a::after, [data-sept="ptr"] header.site .alt-seg a::before{display:none!important} /* O4: 40 between Business and Individual is the segment's own gap, so 40 here as well makes all three evenly spaced and the group reads as one row of links rather than a control plus a link. The divider is dd-shell.css:3470, `.nav-hub{border-left:1px solid var(--line)}` with 1rem of padding inside it. Both go: the border IS the segregating line, and leaving the padding would make the visible gap 56 where its neighbour is 40, which is the uneven spacing the ruling is about. */ [data-sept="ptr"] header.site .nav-hub{ margin-left:40px;padding-left:0;border-left:0; } /* "Become a partner" is the filled orange pill in the first view on this page, 187x47. "Log in" is an outlined ink pill, 97x49. The currency trigger keeps its grey plate, 82x45, unlike the individual home where it lost the pill. */ [data-sept="ptr"] header.site .nav-cta .btn-primary{ background:#121212;color:#ffffff;border:0; min-width:0;height:47px;border-radius:var(--sept-pill); font-size:16px;font-weight:700;display:inline-grid;place-items:center; } [data-sept="ptr"] header.site .nav-cta .btn-outline{ background:#F4F3F0;color:#555049;border:0; height:47px;border-radius:var(--sept-pill); font-size:16px;font-weight:500;display:inline-grid;place-items:center; } /* ---------- promo ribbon ---------- Artboard y0..54: a #121212 band, an orange 67x30 pill at x173.5, 16px white italic body, and the orange link at x1121.5. The shared component is already the right shape; only its scale is off, at 14.4px against the artboard's 16. */ /* ---------- shared button roles ---------- Every pill on the page is 47 or 49 tall with a 100px radius. Widths are content driven; the anchors gate the ones the designer sized. */ [data-sept="ptr"] main .btn{ height:47px;border-radius:var(--sept-pill); font-size:16px;font-weight:500;padding:0 24px; display:inline-grid;place-items:center;line-height:1; } [data-sept="ptr"] main .btn-primary{background:var(--sept-accent);color:#ffffff;border:0} [data-sept="ptr"] main .btn-d{background:transparent;color:#ffffff;border:1px solid #ffffff;height:49px} [data-sept="ptr"] main .btn-ink{background:transparent;color:var(--sept-mute);border:1px solid var(--sept-mute);height:49px} /* ============================================================ FOLD 1 . HERO artboard y 141..781, 640 tall An inset black card 1280x640 at x82, with the photograph inside it. The copy column is left aligned at x162, which is the card's own 80px padding. ============================================================ */ [data-sept="ptr"] .alt-hero{padding:0;background:#ffffff} /* the hero card is drawn at the FULL 1280 (x82..1362), which is the wrap's outer width, not its 1120 content box. Zero the padding or the card starts at 162 and the whole fold is 80px in. SKILL.md hard rule 5. */ [data-sept="ptr"] .alt-hero .wrap{padding-left:0;padding-right:0} [data-sept="ptr"] .alt-hero-card{ height:640px;min-height:640px;border-radius:28px;overflow:hidden; background:var(--sept-dark);position:relative;padding:0; } /* HERO PHOTOGRAPH, operator ruling 2026-09-10. NEW.pdf's hero is the group-around-a-table shot, and that is the file the designer shipped loose as "Hero Image.png". The operator wants the 28.08 artboard's hero instead: the laptop and phone on a travertine desk, with the DigiDoe platform on both screens. It is a product shot rather than a stock group shot, and it is the only place on this page the product is visible. That photograph is NOT in the shipped asset folder. It exists only inside "Partners Home 28.08.2026 comments.pdf" as embedded image xref 78, and was pulled out at its own 2000x1126 rather than cropped from the flattened page, so nothing is resampled twice. Placement is the 28.08 artboard's own: the photo is drawn at x-111..1371, y64..899, which against a card at x82,y141 is 1482x835 offset -193,-77. It deliberately bleeds past the card on every side and is clipped by it. */ [data-sept="ptr"] .alt-hero-scene{ position:absolute;inset:0; background-image:url("sept/partners/hero-desk.webp")!important; background-repeat:no-repeat; background-size:1482px 835px; background-position:-193px -77px; opacity:1; } @media (max-width:1320px){ [data-sept="ptr"] .alt-hero-scene{ background-size:cover;background-position:65% 50%; } } [data-sept="ptr"] .alt-hero-copy{ position:relative;z-index:2;height:100%; padding:81px 80px 0;display:block; } [data-sept="ptr"] .alt-hero-copy .eyebrow{ font-size:14px;line-height:21px;letter-spacing:.34em;text-transform:uppercase; color:#ffffff;margin:0 0 37px;font-weight:400; } /* the designer's break is "Four ways to / partner with / DigiDoe." Our webface sets narrower than his at the same size, so the cap is trimmed until ours breaks in the same two places rather than copied from his line widths. */ [data-sept="ptr"] .alt-hero-copy h1{margin:0;max-width:420px!important} [data-sept="ptr"] .alt-hero-copy .sub{ font-size:20px!important;line-height:30px!important;color:#ffffff!important; max-width:436px!important;margin:24px 0 0;font-weight:400; } [data-sept="ptr"] .alt-hero-copy > div:last-child{ margin-top:50px!important;gap:19px!important; } [data-sept="ptr"] .alt-hero .btn-primary{min-width:233px} [data-sept="ptr"] .alt-hero .btn-d{min-width:203px} /* The FCA / FRN chips keep the approved hero position, top-left glass pills (CLAUDE.md compliance-display rule, Yuval 2026-07-13). The artboard does not draw them; it also does not draw a compliance disclosure anywhere above the fold, and that placement is a ruling, not a measurement. */ [data-sept="ptr"] .alt-hero-anchor{z-index:3} /* ============================================================ FOLD 2 . #types cards 546x318, 2x2, gap 28, cream ============================================================ */ /* Lead offsets are measured from the H2's BOTTOM, not from its first line. Every fold on this artboard uses 33px except #types and #capabilities, which use 23. Component rows then sit 78px below the lead, except #types at 57 and #trust at 77. Reading these off the first baseline instead of the box is what put an earlier pass 130px out on one fold. */ /* :not(.alt-hero) matters. The hero sub also carries .lead, and this rule is one specificity step above the hero's own, so without the guard it centred the hero paragraph and moved it off x162. */ [data-sept="ptr"] main > section:not(.alt-hero) p.lead{margin:33px auto 0!important;text-align:center} [data-sept="ptr"] #types p.lead, [data-sept="ptr"] #capabilities p.lead{margin:23px auto 0!important} /* ---------- line ends ---------- dd-shell's text-wrap:balance is off (above), so a heading now breaks where its box runs out. Our webface sets about 14% narrower than the artboard's at the same size, so copying his line widths gives a different break. These caps used to be fitted to his line COUNT, and that is not enough. Two lines is two lines whether the H2 reads "Choose the partnership that / fits your model." or "Choose the partnership that fits / your model." Both passed the height gate. A red/cyan overlay of the fold against the artboard showed 14 of 17 headings and leads breaking one word late. Each cap below now sits BETWEEN the measured width of his own first line in our face and the width of that line plus its next word, so our break lands exactly where his does. Solved by qa/skin-linebreak.mjs against qa/firstlines-partners.json, which holds his first lines verbatim out of the PDF. Re-run it after any type change: node qa/skin-linebreak.mjs http://localhost:5173/partners.html \ qa/firstlines-partners.json */ [data-sept="ptr"] #types > .wrap > h2{max-width:509px!important} [data-sept="ptr"] #types > .wrap > p.lead{max-width:524px!important} [data-sept="ptr"] #emi-emd > .wrap > h2{max-width:699px!important} [data-sept="ptr"] #emi-emd > .wrap > p.lead{max-width:752px!important} [data-sept="ptr"] #agent-onboarding > .wrap > h2{max-width:443px!important} [data-sept="ptr"] #agent-onboarding > .wrap > p.lead{max-width:618px!important} [data-sept="ptr"] #delivery > .wrap > h2{max-width:532px!important} [data-sept="ptr"] #delivery > .wrap > p.lead{max-width:637px!important} [data-sept="ptr"] #capabilities > .wrap > h2{max-width:445px!important} [data-sept="ptr"] #capabilities > .wrap > p.lead{max-width:625px!important} [data-sept="ptr"] #introducers > .wrap > h2{max-width:600px!important} [data-sept="ptr"] #introducers > .wrap > p.lead{max-width:684px!important} [data-sept="ptr"] #onboarding-service > .wrap > h2{max-width:465px!important} [data-sept="ptr"] #onboarding-service > .wrap > p.lead{max-width:650px!important} [data-sept="ptr"] #trust > .wrap > h2{max-width:381px!important} [data-sept="ptr"] #trust > .wrap > p.lead{max-width:534px!important} [data-sept="ptr"] main > section:nth-child(10) h2{max-width:620px!important} [data-sept="ptr"] main > section:nth-child(10) p.lead{max-width:659px!important} /* Card bodies break a word late for the same reason and need the same treatment, one cap per card. His text is narrower than his own card here, so these caps deliberately leave the right of each card empty, exactly as the artboard does. Solved by the same tool; all 41 report ok. */ [data-sept="ptr"] #types .alt-trio.four > div:nth-child(1) p:nth-of-type(1){max-width:451px!important} [data-sept="ptr"] #types .alt-trio.four > div:nth-child(2) p:nth-of-type(1){max-width:510px!important} [data-sept="ptr"] #types .alt-trio.four > div:nth-child(3) p:nth-of-type(1){max-width:494px!important} [data-sept="ptr"] #types .alt-trio.four > div:nth-child(4) p:nth-of-type(1){max-width:435px!important} [data-sept="ptr"] #emi-emd #path-emd .seg-row-body p{max-width:374px!important} [data-sept="ptr"] #emi-emd #path-emi .seg-row-body p{max-width:425px!important} [data-sept="ptr"] #delivery .alt-tile:nth-child(1) p:nth-of-type(1){max-width:421px!important} [data-sept="ptr"] #delivery .alt-tile:nth-child(2) p:nth-of-type(1){max-width:425px!important} [data-sept="ptr"] #capabilities .alt-tile:nth-child(1) p{max-width:217px!important} [data-sept="ptr"] #capabilities .alt-tile:nth-child(2) p{max-width:208px!important} [data-sept="ptr"] #capabilities .alt-tile:nth-child(3) p{max-width:207px!important} [data-sept="ptr"] #capabilities .alt-tile:nth-child(4) p{max-width:235px!important} [data-sept="ptr"] #introducers .pl-stage:nth-child(1) p{max-width:232px!important} [data-sept="ptr"] #introducers .pl-stage:nth-child(2) p{max-width:250px!important} [data-sept="ptr"] #introducers .pl-stage:nth-child(3) p{max-width:220px!important} [data-sept="ptr"] #introducers .pl-stage:nth-child(4) p{max-width:248px!important} [data-sept="ptr"] #onboarding-service .pl-stage:nth-child(1) p{max-width:202px!important} [data-sept="ptr"] #onboarding-service .pl-stage:nth-child(2) p{max-width:220px!important} [data-sept="ptr"] #onboarding-service .pl-stage:nth-child(3) p{max-width:205px!important} [data-sept="ptr"] #onboarding-service .pl-stage:nth-child(4) p{max-width:202px!important} [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(1) p:nth-of-type(1){max-width:259px!important} [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(2) p:nth-of-type(1){max-width:272px!important} [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(3) p:nth-of-type(1){max-width:260px!important} [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(4) p:nth-of-type(1){max-width:314px!important} /* footnotes, the referral band, and the card headings that wrap */ [data-sept="ptr"] #introducers .pl-stage:nth-child(1) h3{max-width:207px!important} [data-sept="ptr"] #introducers .pl-stage:nth-child(3) h3{max-width:238px!important} [data-sept="ptr"] #introducers .pl-stage:nth-child(4) h3{max-width:184px!important} [data-sept="ptr"] #onboarding-service .pl-stage:nth-child(1) h3{max-width:197px!important} [data-sept="ptr"] #types .alt-trio.four > div:nth-child(4) b{max-width:378px!important} [data-sept="ptr"] #types h2{max-width:none!important;margin:0 auto 0!important} [data-sept="ptr"] #types .alt-trio.four{ grid-template-columns:repeat(2,1fr)!important; gap:28px!important;max-width:1120px!important;margin:57px auto 0; text-align:left; } [data-sept="ptr"] #types .alt-trio.four > div{ background:#ffffff;border:1px solid var(--sept-cream);border-radius:20px; padding:33px 31px;min-height:318px;display:flex;flex-direction:column; } /* 31, not 38. The artboard's gaps here are ink to ink, and a 24px glyph's ink starts about 6px below its own line box, so an ink gap copied straight into a margin puts the heading 6px low and everything under it with it. */ [data-sept="ptr"] #types .alt-trio.four > div::before{ content:"";display:block;width:36px;height:36px;margin-bottom:31px; background:var(--sept-icon,none) center/contain no-repeat; } [data-sept="ptr"] #types .alt-trio b{ font-size:24px!important;line-height:30px;font-weight:400; color:var(--sept-ink);margin:0 0 15px; } [data-sept="ptr"] #types .alt-trio p{ font-size:16px!important;line-height:22px!important; color:var(--sept-mute)!important;max-width:none!important;margin:0;text-align:left; } [data-sept="ptr"] #types .alt-trio p:last-child{margin-top:auto!important;padding-top:17px} [data-sept="ptr"] #types .alt-trio a{ color:var(--sept-accent);text-decoration:none;font-size:16px;font-weight:400; } /* ============================================================ FOLD 3 . #emi-emd two raised white panels 480x351 at x202 / x762 ============================================================ */ [data-sept="ptr"] #emi-emd .seg-rows.horizontal{ grid-template-columns:repeat(2,1fr)!important; gap:80px!important;max-width:1040px!important;margin:78px auto 0; border-top:0; } [data-sept="ptr"] #emi-emd .seg-row{ background:#ffffff;border:0;border-radius:20px; box-shadow:0 28px 56px -28px rgba(0,0,0,.22); padding:30px;min-height:351px;position:relative; } /* 36x36 glyph at the panel's own 30px padding, y2349 on a card top of 2317. Placed by slug from sept-ptrhome.js, never by position. */ [data-sept="ptr"] #emi-emd .seg-row::before{ content:"";display:block;width:36px;height:36px;margin:2px 0 31px; background:var(--sept-icon,none) left center/contain no-repeat; } [data-sept="ptr"] #emi-emd .seg-row-label{display:block} /* The artboard drops the 01 / 02 numerals. Hiding them would delete two approved strings, so they stay. In the flow above the heading they cost 26px and pushed every line in both panels down by that much against the artboard, which a fold-total height check cannot see because the panel is a fixed 351. They are lifted out of the flow to the panel's top right instead, which is exactly where the same artboard puts the numerals on folds 7 and 8, so the copy stays and the rhythm comes back. Decision D2 at the foot of this file. */ [data-sept="ptr"] #emi-emd .seg-row-label .num{ position:absolute;top:30px;right:30px;margin:0; font-size:24px!important;line-height:24px;color:var(--sept-num); opacity:1;font-weight:400; } [data-sept="ptr"] #emi-emd .seg-row-label h3{ font-size:24px!important;line-height:30px;font-weight:400; color:var(--sept-ink);margin:0;max-width:none; } [data-sept="ptr"] #emi-emd .seg-row-body{margin-top:23px} [data-sept="ptr"] #emi-emd .seg-row-body p{ font-size:16px!important;line-height:24px!important; color:var(--sept-mute)!important;max-width:none!important; } /* the 80px above this CTA is the grid's own row gap. Adding a margin as well double-counted it and made the fold 132px too tall. */ [data-sept="ptr"] #emi-emd .seg-rows-cta{ grid-column:1 / -1;margin:0;text-align:center; } [data-sept="ptr"] #emi-emd .seg-rows-cta .btn{min-width:202px} /* ============================================================ FOLD 4 . #agent-onboarding Rail: 1px #b2b2b2 from x332 to x1096 with an orange run to x521, five nodes at 191px centres. Then one cream detail card, 962x174 at x241. ============================================================ */ /* Five columns of 191, so the column centres land on the artboard's node spacing, and the rail is drawn between the OUTER TWO CENTRES, which is why it insets 10% on each side rather than spanning the container. */ [data-sept="ptr"] #agent-onboarding .dd-pipeline{ grid-template-columns:repeat(5,1fr)!important; gap:0!important;max-width:955px!important;margin:67px auto 0; position:relative;padding-top:30px; } [data-sept="ptr"] #agent-onboarding .dd-pipeline::before{ content:"";position:absolute;left:10%;right:10%;top:0;height:1px; background:linear-gradient(to right, var(--sept-accent) 0 25%, var(--sept-rail) 25% 100%); } [data-sept="ptr"] #agent-onboarding .pl-stage{ background:none;border:0;box-shadow:none;padding:0;text-align:center; } /* the artboard's detail card under the rail, 962x174 at x241, is also white with the same 1px hairline, not a cream plate */ [data-sept="ptr"] #agent-onboarding .dd-pipeline::after{content:none} [data-sept="ptr"] #agent-onboarding .pl-head{display:none} [data-sept="ptr"] #agent-onboarding .pl-stage h3{ font-size:12px!important;line-height:15px!important;font-weight:400; color:var(--sept-mute);margin:23px 0 0;max-width:14ch;margin-inline:auto; } [data-sept="ptr"] #agent-onboarding .pl-stage p{ font-size:14px!important;line-height:21px!important; color:var(--sept-mute)!important;max-width:none!important;margin:14px 0 0; } [data-sept="ptr"] #agent-onboarding .alt-foot{ font-size:14px!important;line-height:21px!important; color:var(--sept-mute)!important;text-align:center; max-width:700px!important;margin:64px auto 0!important; } /* ============================================================ FOLD 5 . #delivery two raised white panels 480x412, orange text link ============================================================ */ [data-sept="ptr"] #delivery .alt-tilerow.two{ grid-template-columns:repeat(2,1fr)!important; gap:80px!important;max-width:1040px!important;margin:78px auto 0; } [data-sept="ptr"] #delivery .alt-tile{ background:#ffffff;border:0;border-radius:20px; box-shadow:0 28px 56px -28px rgba(0,0,0,.22); padding:30px;min-height:412px;justify-content:flex-start; } [data-sept="ptr"] #delivery .alt-tile::before{ content:"";display:block;width:36px;height:36px;margin:7px 0 51px; background:var(--sept-icon,none) left center/contain no-repeat; } [data-sept="ptr"] #delivery .alt-tile h3{ font-size:24px!important;line-height:30px;font-weight:400; color:var(--sept-ink);margin:0 0 22px; } [data-sept="ptr"] #delivery .alt-tile p{ font-size:16px!important;line-height:24px!important;color:var(--sept-mute)!important; } [data-sept="ptr"] #delivery .caro-cta{margin-top:auto!important;padding-top:24px} [data-sept="ptr"] #delivery .caro-cta a{ color:var(--sept-accent);text-decoration:none;font-size:16px;font-weight:400; } /* ============================================================ FOLD 6 . #capabilities Four 305x212 panel cards across the FULL 1280, so the wrap's padding is zeroed here. Flag 40x40 at padding 30, currency code 24px 16px to its right. ============================================================ */ [data-sept="ptr"] #capabilities .wrap{padding-left:0;padding-right:0} [data-sept="ptr"] #capabilities .alt-tilerow.four{ grid-template-columns:repeat(4,1fr)!important; gap:20px!important;width:1280px;max-width:100%;margin:78px auto 0; } /* .alt-tile.no-art resolves to display:grid, whose auto rows added 77px of track that no margin explains. Forced to a column flex so the only vertical numbers are the ones written here. */ /* 28 at the foot and 26 under the code, not 30 and 29: the artboard's card is 212 with a four-line body, and 30/29 makes it 217 before rounding. */ [data-sept="ptr"] #capabilities .alt-tile{ background:var(--sept-panel);border:0;border-radius:20px; padding:30px 30px 28px;min-height:212px; display:flex;flex-direction:column;justify-content:flex-start;gap:0; } [data-sept="ptr"] #capabilities .alt-tile h3{ font-size:24px!important;line-height:40px;font-weight:400;color:var(--sept-ink); margin:0 0 26px;padding-left:56px;position:relative;min-height:40px; } [data-sept="ptr"] #capabilities .alt-tile h3::before{ content:"";position:absolute;left:0;top:0;width:40px;height:40px; border-radius:50%;overflow:hidden; background:var(--sept-icon,none) center/cover no-repeat; } [data-sept="ptr"] #capabilities .alt-tile p{ font-size:16px!important;line-height:22px!important;color:var(--sept-body)!important; margin-top:0!important; /* .alt-tile p carries 6.4px, which put the card at 218 */ } /* The FX line is a cream plate 535x91 centred, not a full-width footnote. */ /* p.lead is the first

in this wrap, so the FX plate is nth-of-type(2) and the availability footnote nth-of-type(3). :first-of-type matched nothing. */ [data-sept="ptr"] #capabilities .alt-foot:nth-of-type(2){ background:#ffffff;border-radius:16px; width:535px;max-width:calc(100% - 160px);margin:59px auto 0!important; border:1px solid var(--sept-cream); min-height:91px;display:flex;align-items:center;justify-content:center; gap:8px;padding:0 30px;font-size:20px!important;line-height:26px!important; color:var(--sept-ink)!important;text-align:center; } [data-sept="ptr"] #capabilities .alt-foot:nth-of-type(2) strong{ font-size:24px;font-weight:400; } [data-sept="ptr"] #capabilities .alt-foot:nth-of-type(3){ font-size:16px!important;line-height:24px!important; color:var(--sept-mute)!important;max-width:853px!important; margin:41px auto 0!important;text-align:center; } /* ============================================================ FOLDS 7 + 8 . the two step rows four 305-wide cream cards, full 1280 Fold 7 cards are 257 tall, fold 8's are 316. Orange glyph left, big #cdcdcd numeral right, 20px title, 14/21 body. ============================================================ */ [data-sept="ptr"] #introducers .wrap, [data-sept="ptr"] #onboarding-service .wrap{padding-left:0;padding-right:0} [data-sept="ptr"] #introducers .wrap > div:not(.dd-pipeline){padding-left:80px;padding-right:80px} [data-sept="ptr"] #introducers .dd-pipeline.pipe-4, [data-sept="ptr"] #onboarding-service .dd-pipeline.pipe-4{ grid-template-columns:repeat(4,1fr)!important; gap:20px!important;width:1280px;max-width:100%;margin:78px auto 0; } [data-sept="ptr"] #introducers .pl-stage, [data-sept="ptr"] #onboarding-service .pl-stage{ background:#ffffff;border:1px solid var(--sept-cream);box-shadow:none; border-radius:20px;padding:30px; } [data-sept="ptr"] #introducers .pl-stage{min-height:257px} [data-sept="ptr"] #onboarding-service .pl-stage{min-height:316px} /* These gaps are set from the artboard's INK, and ink is shorter than the line box it sits in: a 2-line 20/27 title measures 42.3 of ink, not 54. Using the ink gaps unchanged made every card 11px tall. Both are reduced by the half-leading they were double-counting. */ [data-sept="ptr"] #introducers .pl-head, [data-sept="ptr"] #onboarding-service .pl-head{ align-items:flex-start;margin-bottom:30px; } [data-sept="ptr"] #introducers .pl-glyph, [data-sept="ptr"] #onboarding-service .pl-glyph{ width:36px;height:36px;border-radius:0;background:var(--sept-icon,none) center/contain no-repeat; color:transparent; } [data-sept="ptr"] #introducers .pl-glyph svg, [data-sept="ptr"] #onboarding-service .pl-glyph svg{display:none} [data-sept="ptr"] #introducers .pl-num, [data-sept="ptr"] #onboarding-service .pl-num{ font-size:24px!important;line-height:24px;font-weight:400; color:var(--sept-num);opacity:1; } [data-sept="ptr"] #introducers .pl-stage h3, [data-sept="ptr"] #onboarding-service .pl-stage h3{ font-size:20px!important;line-height:27px!important;font-weight:400; color:var(--sept-ink);margin:0 0 14px; } [data-sept="ptr"] #introducers .pl-stage p, [data-sept="ptr"] #onboarding-service .pl-stage p{ font-size:14px!important;line-height:21px!important; color:var(--sept-mute)!important;max-width:none!important; } /* fold 7's closing block. The artboard draws NO cream plate here, only centred text on the ground, so the shipped .alt-band.cream loses its surface. */ [data-sept="ptr"] #introducers .alt-band.cream{ background:none!important;border:0;padding:0;display:block; margin:83px auto 0!important;text-align:center; } [data-sept="ptr"] #introducers .alt-band h3{ font-size:24px!important;line-height:30px!important;font-weight:400; color:var(--sept-ink);margin:0 0 25px!important; } [data-sept="ptr"] #introducers .alt-band p.muted{ font-size:16px!important;line-height:24px!important; color:var(--sept-ink)!important;max-width:767px!important;margin-inline:auto; } [data-sept="ptr"] #introducers .alt-band p:last-child{margin-top:58px!important} [data-sept="ptr"] #introducers .alt-band .btn{min-width:344px} [data-sept="ptr"] #onboarding-service .alt-foot{ font-size:16px!important;line-height:24px!important; color:var(--sept-mute)!important;text-align:center; max-width:568px!important;margin:65px auto 0!important; } [data-sept="ptr"] #onboarding-service .seg-rows-cta{margin:63px 0 0!important;text-align:center} [data-sept="ptr"] #onboarding-service .seg-rows-cta .btn{min-width:403px} /* ============================================================ FOLD 9 . #trust 2x2 cream cards 551 wide, badge column then copy at x362, which is 201 in from the card's own left edge. Artboard order is FCA . Safeguarding / ISO 27001 . ISO 22301. The markup order is FCA . 27001 . 22301 . Safeguarding, so this reorders visually rather than moving the nodes and disturbing the freeze. ============================================================ */ [data-sept="ptr"] #trust .alt-trio.four.sec-strip{ grid-template-columns:repeat(2,1fr)!important; gap:18px!important;max-width:1122px!important;margin:77px auto 0;text-align:left; } /* 50 at the top, not 40. The artboard's card starts at y8461 and its title's line box at about 8511. Reading the 40 off the badge column instead put every line in all four cards 10px high. */ [data-sept="ptr"] #trust .alt-trio.four > div{ background:#ffffff;border:1px solid var(--sept-cream);border-radius:20px; padding:50px 40px 40px;min-height:242px; display:grid;grid-template-columns:161px 1fr; align-items:start;align-content:start;column-gap:0; } [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(1){order:1} [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(4){order:2} [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(2){order:3} [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(3){order:4} [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(2), [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(3){min-height:222px} /* Safeguarding is the one card with no badge and the shortest copy, and the artboard drops its title to y8533 against the FCA card's 8513, so the two read as optically balanced rather than top-flush. */ [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(4){padding-top:70px} /* .sec-strip b carries min-height:2.8em, which at 20px is 56 and made the single word "Safeguarding" as tall as two lines, then drove the whole first row 15px over. It also carries text-wrap:balance and a centring margin, both wrong for a left-aligned card. All four are reset here, not in the shared file, which 38 other pages read. */ [data-sept="ptr"] #trust .alt-trio.four b{ grid-column:2;font-size:20px!important;line-height:27px!important;font-weight:400; color:var(--sept-ink);margin:0 0 23px!important; min-height:0!important;max-width:none!important;text-wrap:wrap!important; } [data-sept="ptr"] #trust .alt-trio.four p{ grid-column:2;font-size:14px!important;line-height:19px!important; color:var(--sept-body)!important;max-width:none!important;margin:0;text-align:left; } [data-sept="ptr"] #trust .alt-trio.four p.cert-cta{margin-top:21px!important} [data-sept="ptr"] #trust .alt-trio.four p.cert-cta a{ color:var(--sept-accent);text-decoration:none;font-size:16px; } /* ISO artwork is never cropped or recoloured (web/docs/iso-badge-rules.md). The supplied 350x350 file carries 254x330 of ink, so 127px of the WHOLE file lands the ink at the artboard's 127x127 box with no crop. */ /* The ISO badge sits at y8768.5 in a card whose top is 8721, so 47.5 down, not flush with the copy. Its own 50px padding-top is already 50, so the badge is pulled back up by 3. */ [data-sept="ptr"] #trust .cert-inline{ grid-column:1;grid-row:1 / span 3;align-self:start; width:127px;height:127px;margin:-3px 0 0; } /* the FCA mark is a 480x152 wordmark, not a square badge. Forcing it into the ISO badges' 127x127 box distorted it AND made its card 15px too tall, because a 127px image is taller than the card's own copy. Artboard: 120x38. */ /* The FCA wordmark sits much lower in its card than the ISO badges do in theirs: y8563 against a card top of 8461, so 102 down, which is 52 below the card's own padding. */ [data-sept="ptr"] #trust .cert-inline.cert-fca{ width:120px;height:38px;align-self:start;margin-top:52px; } /* the FCA and Safeguarding cards have no , so their copy needs the same 201px indent to line up with the two badge cards */ [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(1) b, [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(1) p, [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(4) b, [data-sept="ptr"] #trust .alt-trio.four > div:nth-child(4) p{grid-column:2} [data-sept="ptr"] #trust .alt-foot{ font-size:16px!important;line-height:24px!important; color:var(--sept-mute)!important;text-align:center; max-width:666px!important;margin:81px auto 0!important; } /* ============================================================ FOLD 10 . closing panel 1280x561 of #f4f3f0 at x82, 36px heading ============================================================ */ [data-sept="ptr"] main > section:nth-child(10) .wrap{ padding:0!important;max-width:1280px!important; background:var(--sept-panel);border-radius:28px; padding-top:99px!important;padding-bottom:99px!important; text-align:center; } [data-sept="ptr"] main > section:nth-child(10) h2{ font-size:36px!important;line-height:44px!important; max-width:none!important; } [data-sept="ptr"] main > section:nth-child(10) p.lead{ margin:33px auto 0!important;text-align:center; } /* the artboard's second closing paragraph, 30px under the first */ [data-sept="ptr"] main > section:nth-child(10) p.lead-2{ margin:30px auto 0!important;max-width:610px!important; } [data-sept="ptr"] main > section:nth-child(10) > .wrap > div{ margin-top:58px!important;gap:19px!important; } [data-sept="ptr"] main > section:nth-child(10) .btn-primary{min-width:205px} [data-sept="ptr"] main > section:nth-child(10) .btn-ink{min-width:230px} /* ---------- motion ---------- One orchestrated entrance, expo out, and nothing that bounces. The shared .reveal / .stagger machinery already does this; only the distance changes so cards this large do not travel further than their own corner radius. */ @media (prefers-reduced-motion:no-preference){ [data-sept="ptr"] .reveal{transition:opacity .5s var(--ease,cubic-bezier(.16,1,.3,1)), transform .5s var(--ease,cubic-bezier(.16,1,.3,1))} } /* The four-up step rows entered unevenly, and it looked like a layout defect rather than motion: cards 2 and 4 sat about 5px lower than 1 and 3 and were still half faded once the row had settled. alt-home.css gives .pl-stage a scroll-driven entrance, then names ranges for :nth-of-type(1), (3) and (5) ONLY. That is correct for the five-column pipeline it was written for, where 2 and 4 are the arrow separators. This page uses the component with four real cards, so 2 and 4 fall through to the default range and animate on a completely different schedule. Every position gets an explicit range here, 6% apart. */ @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){ [data-sept="ptr"] .dd-pipeline .pl-stage:nth-of-type(1){animation-range:entry 0% entry 40%!important} [data-sept="ptr"] .dd-pipeline .pl-stage:nth-of-type(2){animation-range:entry 6% entry 46%!important} [data-sept="ptr"] .dd-pipeline .pl-stage:nth-of-type(3){animation-range:entry 12% entry 52%!important} [data-sept="ptr"] .dd-pipeline .pl-stage:nth-of-type(4){animation-range:entry 18% entry 58%!important} [data-sept="ptr"] .dd-pipeline .pl-stage:nth-of-type(5){animation-range:entry 24% entry 64%!important} }} /* ---------- responsive ---------- Below 1280 the four full-bleed rows give their width back to the wrap and the 2x2 grids collapse in the usual order. Nothing here is measured from the artboard, which is a single 1444 frame. */ @media (max-width:1320px){ [data-sept="ptr"] #capabilities .alt-tilerow.four, [data-sept="ptr"] #introducers .dd-pipeline.pipe-4, [data-sept="ptr"] #onboarding-service .dd-pipeline.pipe-4{width:auto} [data-sept="ptr"] #capabilities .wrap, [data-sept="ptr"] #introducers .wrap, [data-sept="ptr"] #onboarding-service .wrap{padding-left:40px;padding-right:40px} [data-sept="ptr"] #capabilities .wrap > h2, [data-sept="ptr"] #capabilities .wrap > p, [data-sept="ptr"] #introducers .wrap > h2, [data-sept="ptr"] #introducers .wrap > p, [data-sept="ptr"] #onboarding-service .wrap > h2, [data-sept="ptr"] #onboarding-service .wrap > p{padding-left:0;padding-right:0} } @media (max-width:1100px){ [data-sept="ptr"] #capabilities .alt-tilerow.four, [data-sept="ptr"] #introducers .dd-pipeline.pipe-4, [data-sept="ptr"] #onboarding-service .dd-pipeline.pipe-4{ grid-template-columns:repeat(2,1fr)!important; } [data-sept="ptr"] #agent-onboarding .dd-pipeline{ grid-template-columns:1fr!important;max-width:520px!important;padding-top:0; } [data-sept="ptr"] #agent-onboarding .dd-pipeline::before{display:none} } @media (max-width:900px){ [data-sept="ptr"] main h1{font-size:38px!important;line-height:46px!important} [data-sept="ptr"] main > section h2{font-size:28px!important;line-height:36px!important} [data-sept="ptr"] main > section p.lead{font-size:17px!important;line-height:26px!important} [data-sept="ptr"] .alt-hero-card{height:auto;min-height:0} [data-sept="ptr"] .alt-hero-copy{padding:48px 24px 56px} [data-sept="ptr"] main > section{padding-top:64px!important;padding-bottom:64px!important} [data-sept="ptr"] #types .alt-trio.four, [data-sept="ptr"] #emi-emd .seg-rows.horizontal, [data-sept="ptr"] #delivery .alt-tilerow.two, [data-sept="ptr"] #trust .alt-trio.four.sec-strip{grid-template-columns:1fr!important;gap:20px!important} [data-sept="ptr"] #trust .alt-trio.four > div{grid-template-columns:1fr;min-height:0} [data-sept="ptr"] #trust .cert-inline{grid-row:auto;margin-bottom:16px} } /* ============================================================ DECISIONS THE ARTBOARD MAKES THAT THIS FILE DOES NOT APPLY Each one deletes approved copy, which the freeze gate treats as a removal. They are the operator's calls, not measurements, and are surfaced with their numbers rather than applied. D1 WITHDRAWN, and it was my error, not the artboard's. I reported the promo ribbon as new copy the live page did not carry. It carries it: dd-shell.js injects it from DD_PROMOS for the ptr lane, so it is absent from the page source I diffed and present in the rendered page and in the freeze. No decision was ever needed. It is styled to the artboard below rather than left out. D2 Fold 3's "01" / "02" numerals. The artboard's panels have no numbers. Kept, restyled to 12px tertiary. D3 Fold 4 is drawn as a STEPPER: a five-node rail plus ONE 962x174 detail card showing step 2 only. Building that hides four stage bodies, about 310 words, and the freeze reads hidden as deleted. Built here as the rail plus all five bodies visible. D4 Fold 3's two chips, "Agent of DigiDoe" and "Licensed EMI using DigiDoe infrastructure", 12px #888888. New strings, not on the live page. Out. D5 Artboard error, not a decision: fold 9's FCA card carries the link "Discuss white label" under FCA-authorised EMI, copied from fold 5. The live page's "Verify DigiDoe on the FCA Register" is kept. ============================================================ */ /* ---------- 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="ptr"] header.site .alt-seg{gap:40px} [data-sept="ptr"] header.site .alt-seg > *:nth-child(1), [data-sept="ptr"] header.site .alt-seg > *:nth-child(2), [data-sept="ptr"] 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="ptr"] 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="ptr"] header.site .nav-cta .btn-outline, [data-sept="ptr"] header.site .nav-cta .btn-d{height:49px;min-height:49px;border-width:1px} [data-sept="ptr"] header.site .alt-seg .seg-link, [data-sept="ptr"] header.site .nav-hub{color:#767676} [data-sept="ptr"] header.site .alt-seg > button, [data-sept="ptr"] header.site .alt-seg > .seg-link[aria-current], [data-sept="ptr"] header.site .nav-hub[aria-current]{color:#121212;font-weight:600} /* ---------- 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="ptr"] header.site .alt-seg > *, [data-sept="ptr"] 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="ptr"] header.site .segcv{display:none!important} [data-sept="ptr"] header.site .alt-seg > button, [data-sept="ptr"] header.site .nav-hub[aria-current]{ text-shadow:0 0 .55px currentColor,0 0 .55px currentColor; } [data-sept="ptr"] header.site .nav-cta .ccysel{display:none!important} /* no currency chip on the home pages */ /* Partners was the only one of the three homes that never hid the desktop nav below the breakpoint, so "Partner Hub" and the segmented control stayed in the bar and pushed the burger 141px off-screen at 390. bizhome and indhome have carried this exact rule since 2026-09-10; ptr only ever hid the seg's ::before/::after decorations. Breakpoint matched to its siblings (940, where dd-shell swaps in the burger), not ptr's own 900. */ @media (max-width:940px){ [data-sept="ptr"] header.site .alt-seg, [data-sept="ptr"] header.site .nav-hub{display:none} } /* SHARED NAV CONTRACT moved to assets/dd-nav.css (2026-09-22): one bar on every page, not only the three homes. Only O3 stays here. */ @media (min-width:1180px){ /* O3 stands: the partner home carries no text link in the cluster. The shared contract above styles it; this keeps it off the page. */ html[data-sept="ptr"] header.site > .wrap.nav > .nav-cta > a.txt{display:none!important} }