Notes

• Go-further rows. “All countries & currencies” and “All industries” now default to #252525 at the ordinary row weight on the plain white card, with the 20px #1695CA arrow at the card’s right padding edge, exactly where the overview row’s arrow sits. Pressed (:active): text #1695CA, no background change, arrow unchanged. The overview row keeps its Round 7 treatment.
• Ordinary rows. Default #252525; pressed text #1695CA, nothing else changes: no fill, no arrow nudge. Mouse hover on the board mirrors the pressed state so it can be checked on a laptop; phones have no hover. Use the “Show pressed state” toggle above the phone to freeze one ordinary row and one go-further row in the pressed state.
• Business tab. Checked: no row is blue by default. Partner with us and Agency Partner Programme render as ordinary rows; “All industries” is now dark like the rest. There is no “Book a call” row in the mobile tree (it is not in the Business shortlist).
• Spread the love plaque. Not present on the mobile menu in any round; the plaque exists only on the desktop Personal board. Nothing to remove here, and it will not be added for launch.
• Personal tab order, mobile only. Overview, Why you’re transferring, Property guides, Saudi Arabia expat guide, Tools & help, then Send money from last. Property guides was not named in the brief, so it stays in its slot after Why; every one of the 47 links is still present. Desktop and medium keep their existing column order; only the mobile walker output is reordered (or the mobile menu location gets its own ordering in WordPress, which is the simplest way to hold two orders).
• Everything else is B-r7: tint pair badges, 20px arrows, 20/4 title spacing, pill buttons on mobile, Company information heading, new header, tab preselection, 44px targets, reduced motion.

Notes

• Pair badges. Same pill as the New tag: #EDF7FB tint, no border, 4px radius, text #1695CA. Codes in the system monospace (SF Mono / Menlo / Consolas) at 11px 700 uppercase, 0.06em, with a 14px stroked arrow between them. The New / Proposed tags drop their outline and take the same tint fill so the two pills match, as in the desktop comp.
• Arrows. Inside the badges the arrow is a 14px SVG with a 1.8px stroke. The go-further rows and the overview row use a 20px SVG arrow with a 2px stroke, the long “→” from the comp rather than a chevron, so it is unmistakably an arrow at phone size.
• Go-further rows. “All countries & currencies” and “All industries” carry the same 20px #1695CA arrow as the Personal Transfers row, pinned to the card’s 14px right padding edge; label stays #1695CA 700 at the left. No tint on these rows. The overview row’s chevron becomes the same arrow so all three “go further” affordances are one glyph at one position.
• Everything else is B-r6: 20/4 title spacing, pill buttons on mobile, Company information heading, new header, tab preselection, 47 links, 44px targets, reduced motion.

Notes

• Spacing. 20px from a card’s bottom edge to the next title, 4px from the title to its own card. The 5:1 ratio makes each title belong to the card beneath it. Title style unchanged from Round 5 (Lato 700 12px uppercase, 0.08em, #5D7A92).
• Pill buttons, mobile only. 999px radius (fully round). 8–10px was tried against the 6px cards and read as a slightly different version of the same shape; fully round reads as a deliberately different object, a control rather than a card, which is the point of the sticky bar. Colours, key glyph, ↗ and equal widths kept: LOG IN white with a 1px #E4E4E4 border and #0D1B2A text, SIGN UP ↗ navy #16243D. 48px tall, 10px apart, 16px side padding, safe-area below. Desktop keeps the square full-height cells from the Figma comp; the radius is scoped to the mobile sheet only.
• Company tab. Heading reinstated outside the card, reading “Company information”, same style and spacing as every other group title. Rows still start at About us.
• Everything else is B-r5: new header, uppercase tab labels, tab preselection, no accordions, single-item groups folded in, 47 links, 44px targets, reduced motion.

Notes

• Title style: uppercase. Lato 700 12px, 0.08em tracking, #5D7A92, sitting outside the card. Against the 16px #252525 rows it differs in case, size, weight and colour at once, so it reads as a label and never as a row. Sentence-case 15px 700 #0D1B2A was tried and looks like a bold first row, which is the confusion the accordion headings had. The uppercase style is also the header nav label style, so the sheet uses one label voice.
• Spacing. 16px from a card’s bottom edge to the next title; 6px from the title baseline box to its card. 4px felt cramped against the card border and 8px let the title float between cards. The comparison below shows all three at true size.
• Cards. White, 1px #E4E4E4 border, 6px radius, rows separated by a 1px #F7F7F7 hairline. Rows are 16px #252525, 48px tall, tags right-aligned. Overview row keeps the #EDF7FB tint and blue chevron, now on the same 6px radius as the cards.
• Single-item groups. Overview and Saudi Arabia expat guide render as one-row cards with no title, in position, with the same 16px rhythm above and below.
• Company tab. Recommendation: no group heading. It is one group under one tab, and any heading either repeats COMPANY or invents a label (“Company information”) that adds a fourth word for the same thing. The list starts with the About us row, and the pane’s top padding is the same 12px on all three tabs (the Round 3/4 overview row carried an extra 8px margin that the Company card did not).
• Everything else is B-r3/4: new header, tab preselection, navy Sign Up and white Log in cells, no accordions, one scroll per tab, 47 links, 44px targets, reduced motion. The filled-navy tab alt is dropped; the stakeholder’s read that it fought the buttons for dominance is right.

Title-to-card gap

Notes

• Closed state. 68px white bar, 1px #E4E4E4 bottom border, no shadow. Logo 176px left, 44px hamburger right in #0D1B2A. Replaces Dante’s 77px bar with the 0 3px 5px shadow.
• Sheet top bar. Same bar with the close glyph in the hamburger’s slot, so the two states line up and the logo does not move when the menu opens.
• Segmented control. PERSONAL · BUSINESS · COMPANY in Lato 700 13px uppercase, 0.06em, matching the desktop nav labels. Selected #16243D, unselected #5D7A92 (replaces Round 3’s #666). The alt phone fills the selected segment navy with white text, mirroring the desktop Sign Up cell.
• Bottom bar. Two equal square-cornered cells, 52px tall: LOG IN white with a 1px #E4E4E4 border, key glyph, #0D1B2A; SIGN UP ↗ in #16243D with white text. Hover #F7F9FB / #0D364A, as on desktop. Safe-area padding below.
• Company. The third tab and its panel are labelled Company; the seven links under it are unchanged (About us, Our team, Reviews, Payment partners, Security & regulation, Press, Contact us). The mobile walker takes the label from the menu item, so renaming the WordPress menu item covers both desktop and mobile.
• Everything else is B-r3: tab preselection from the page, no accordions, single-item groups folded in, 47 links, right-aligned tags, 44px targets, reduced motion.

Notes

• Overview row. Tint #EDF7FB with a #D6E9F3 hairline, title #252525 700, subline #445667, chevron #1695CA (not turquoise). Same 8px radius as the group cards so it reads as the first card, not a banner.
• Segmented control. Selected tab is #0D364A at Lato 700 to match the navy Sign Up; unselected tabs drop to #666 at 400. The alt phone fills the selected segment navy with white text, so the control and the Sign Up button share one colour. The main phone is the recommendation: the white segment keeps the iOS-style control the stakeholder rated, and one navy block on screen is enough.
• No accordions. Every group is open; the pane is one scroll. Personal is 22 rows, Business 20, About 7. Single-item groups (Overview, Living in the Gulf) render their link as a plain row at their position with no heading; headings only appear on groups with two or more links. Nothing on the sheet animates height, so no scrollbar transition.
• Tags. New / Proposed sit right-aligned in the row, after the label, so the label column stays ragged-left and scannable. Pair badges stay left of the corridor label.
• Walker mapping. A second-level li.menu-item-has-children with one child collapses to that child (walker: count($children) === 1 emits the child as a top-level row and drops the heading). Buttons: #0D364A Sign Up, white Log in with a 1.5px #0D364A border; hover #195C7D / #F0F4F7.

B1 or B2

B1 opens the first group ("Why you’re transferring" / "Manage currency risk") so the tab is never an empty list of headings; Personal shows 6 links plus 4 collapsed rows in one screen. B2 shows five collapsed rows and nothing else, calmer but every visit is two taps. B1 is the default recommendation; B2 fits if "too many options" extends to link rows.

Implementation notes (WordPress)

• Tab preselection. The live Business page body class is only page-id-6399 page-parent, so there is no section marker to read. Use the walker: wp_nav_menu already adds current-menu-ancestor / current-menu-item to the top-level li in #mobile-menu. The tab script reads which of the three top-level items carries either class and selects that tab; no match (home, blog) falls back to Personal. About pages get Personal too, per the brief.
• Alternative if menu classes are unreliable on CPT pages: a body_class filter that walks get_post_ancestors() to the top-level page and emits section-personal / section-business; the script prefers the body class when present.
• Markup. The three top-level li from the mobile walker become the three tab panels; second-level li.menu-item-has-children become the accordion cards, their a swapped for a button[aria-expanded] with the child count injected by the walker. Log in / Sign Up leave the mobile menu location and are rendered by sf_mobile_menu() in dante-child/functions.php as the fixed bottom bar, with padding-bottom: env(safe-area-inset-bottom).
• State. One group open per tab; switching tabs keeps each tab’s open group. Nothing persisted.
• Motion. Segmented indicator slides 200ms, sheet fades 220ms, chevrons rotate 200ms; all zero under prefers-reduced-motion. Arrow keys move between tabs, Escape closes.