/* Golden Properties: the site's own stylesheet (tokens, base, shell, forms,
 * buttons and the rules every page shares).
 *
 * THE IDENTITY IS GOLDEN'S OWN (redesign, 12 October 2026). Until then these
 * tokens were deliberately neutral, because no brand asset existed. The navy
 * and the gold below are the two colours of Golden's live website, the logo in
 * the header is its own file, unmodified, and the two typefaces are the ones
 * its pages name. Sources, dates and hashes are in the brand inventory of
 * 12 October 2026. Milan authorised their use in the private candidate;
 * permission to publish with them is a release question, not settled here.
 *
 * Gold is an accent, never a text colour on a light surface: #CAB54C is
 * 2.05:1 on white. Small gold-coloured text uses --gold-700 (6.32:1).
 *
 * The two typefaces are served from this site (assets/fonts, SIL Open Font
 * License 1.1, licence texts beside them). No page asks another host for a
 * font. Each has a fallback face matched to it in size, so text moves as
 * little as possible when the real face arrives.
 *
 * Lanes do not edit this file. Each page type has its own stylesheet, in which
 * every selector starts with that page's class (.pt-guide, .pt-listing, ...).
 */

@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* What a reader sees for the instant before a face arrives, and for good if it
 * never does: a local face scaled to the real one's width and height. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia");
  size-adjust: 84%;
  ascent-override: 110%;
  descent-override: 34%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Open Sans Fallback";
  src: local("Arial");
  size-adjust: 105.4%;
  ascent-override: 101.4%;
  descent-override: 27.8%;
  line-gap-override: 0%;
}

:root {
  /* ---- Golden's two colours, and the steps drawn from them. --------------- */
  --navy-900: #142b4d;       /* Footer, review banner, the confidential band. White 14.17:1, gold 6.90:1. */
  --navy-700: #1f3f6e;       /* Golden's navy. 10.53:1 on white. */
  --navy-100: #e9eef5;       /* A quiet panel. Navy text 9.03:1. */
  --gold-700: #6f5f12;       /* Gold as small text on a light surface. 6.32:1 on white. */
  --gold-600: #9a8526;       /* A mark that must be seen on white. 3.65:1. */
  --gold-500: #cab54c;       /* Golden's gold. Rules and markers; text only on navy (5.13:1). */
  --gold-100: #f6f1da;       /* A summary box. Navy text 9.28:1. */

  /* The names every existing rule uses, set to the colours above. */
  --brand: #1f3f6e;          /* --navy-700 */
  --brand-strong: #142b4d;   /* --navy-900 */
  --brand-on: #ffffff;       /* Text on --brand. 10.53:1. */
  --accent: #6f5f12;         /* --gold-700. Must reach 4.5:1 on white, and does. */
  /* ------------------------------------------------------------------------ */

  --ink: #1b2430;
  --ink-soft: #55606b;
  --surface: #ffffff;
  --paper: #f7f5ef;
  --canvas: #f7f5ef;
  --canvas-deep: #eceae3;
  --line: #e2e0d9;
  --line-strong: #c9c6bc;
  /* Borders that identify a form control need 3:1 against the field (WCAG
     1.4.11). --line-strong is 1.71:1 on white, fine for a divider, not for this. */
  --field-border: #857f73;
  --flag: #8a4b3c;
  --flag-soft: #f7ece8;

  /* Headings. Georgia stays in the stack as the widest face it can fall to. */
  --serif: "Cormorant", "Cormorant Fallback", Georgia, "Times New Roman", "Nimbus Roman", serif;
  /* Text, the interface, and every figure: a price, an area, a date. */
  --sans: "Open Sans", "Open Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Cormorant's lower case is small for its size, so a heading set in it is
     this much larger than the step it is given, to hold the same presence on
     the page as the face it replaced. */
  --serif-scale: 1.14;
  /* Card V2-B: for a code that is read back character by character. Faces whose
   * zero carries a slash or a dot come first; the generic face is the last resort. */
  --mono: Consolas, Menlo, "SF Mono", "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", ui-monospace, monospace;

  --measure: 68ch;
  --page: 1120px;
  --gutter: 16px;
  --radius: 4px;

  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: 2.25rem;

  /* Space, shape and motion (redesign). */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  /* A table or a drawing inside a reading column may be this wide. */
  --breakout: 54rem;
  --shadow-1: 0 1px 2px rgb(20 43 77 / 0.06), 0 2px 8px rgb(20 43 77 / 0.06);
  /* Used only where the reader has not asked for less motion. */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  /* What a card or a button that leads somewhere does under the pointer or the
   * keyboard (feedback item 3, 12 October 2026): a navy-tinted glow, and a
   * small lift where the reader has not asked for less motion. One set of
   * values, so every card and every button answers the same way. */
  --glow: 0 0 0 1px rgb(31 63 110 / 0.14), 0 10px 26px -8px rgb(20 43 77 / 0.34);
  --glow-on-navy: 0 0 0 1px rgb(255 255 255 / 0.5), 0 10px 26px -8px rgb(202 181 76 / 0.55);
  --lift: translateY(-2px) scale(1.01);
  --lift-btn: translateY(-1px);
  --press: scale(0.985);
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --step-3: 2rem; --step-4: 3rem; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 var(--step-0)/1.65 var(--sans);
  /* Nothing may scroll sideways at 360px. */
  overflow-x: hidden;
  /* Redesign B08. A word too long for its line breaks rather than run out of
   * its box (a 160px page: 200% zoom on a 320px screen). It changes no layout
   * where the word fits. */
  overflow-wrap: break-word;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 700; font-variant-numeric: lining-nums; line-height: 1.15; letter-spacing: 0; margin: 0; color: var(--brand-strong); }
h1 { font-size: calc(var(--step-4) * var(--serif-scale)); }
h2 { font-size: calc(var(--step-3) * var(--serif-scale)); }
h3 { font-size: calc(var(--step-2) * var(--serif-scale)); }
p, li { max-width: var(--measure); }
p { margin: 0 0 1em; }

a { color: var(--brand); text-underline-offset: 0.18em; }
/* Card V1C (audit G-18). At 320px a telephone number split over two lines, and
 * the box of that split link covered the email link beside it on the paused
 * review pages. A number is kept whole; an email address may still break
 * rather than run off a narrow screen. */
a[href^="tel:"] { white-space: nowrap; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 50;
  background: var(--brand); color: var(--brand-on); padding: 12px 18px; font-weight: 600;
}
.skip-link:focus { top: 12px; }
/* Card V1D (audit G-07). On a review page the link opens over the dark review
 * banner, where the --brand ring alone is about 1.2:1. A white band inside the
 * dark ring shows against the banner and against the white header alike. */
.skip-link:focus-visible { box-shadow: 0 0 0 2px #ffffff; }

/* ---- Review banner ------------------------------------------------------- */
/* This build is private and pre-agreement. Say so on every page, at the top,
 * so a screenshot of any route carries its own context. */
.review-banner {
  background: var(--brand-strong);
  color: var(--brand-on);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 10px 0;
}
.review-banner p { margin: 0; max-width: none; }
.review-banner strong { font-weight: 600; }

/* ---- Header -------------------------------------------------------------- */
/* Redesign. A gold rule across the top of every page, and Golden's own logo. */
.site-header { background: var(--surface); border-top: 3px solid var(--gold-500); border-bottom: 1px solid var(--line); }
/* Card V1D. At 200% text on a 320px phone the wordmark and the navigation no
 * longer fit side by side, and "Properties" ran past the edge of the screen,
 * where the body's overflow-x cut it off. The row now wraps: the navigation
 * moves under the wordmark instead. Nothing is hidden or shrunk further, and
 * the height is only a minimum, so larger text makes the header taller.
 * Card V1F: once larger text fills that minimum, the wordmark touched the top
 * edge of the header, and its focus ring (2px, 2px outside the link) lay over
 * the dark review banner at 1.18:1, or off the top of a buyer page. 8px of
 * padding holds the ring and a white gap as wide again, so every ring in the
 * header is drawn on the header's own white and stands apart from the banner.
 * At the default text size the minimum height still decides, so nothing moves. */
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; min-height: 68px; padding-block: 8px; }
.wordmark {
  font-family: var(--serif); font-size: var(--step-1); font-weight: 700;
  color: var(--brand); text-decoration: none;
}
/* The logo is Golden's file as it is: 640 by 180, never cropped, never
 * redrawn, on white. Its height is set and its width follows. */
.wordmark-logo { height: 52px; width: auto; }
.wordmark span { display: block; font-family: var(--sans); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.site-nav ul { display: flex; gap: 0 22px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { color: var(--brand-strong); text-decoration: none; font-size: 0.9375rem; font-weight: 600; padding: 10px 0; display: inline-block; }
/* The section a page belongs to is marked in gold; the words stay navy. */
.site-nav a:hover, .site-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold-600); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }

/* On a 360px handset the wordmark otherwise wraps to two lines and pushes the
 * navigation out of alignment. */
@media (max-width: 430px) {
  .site-header .wrap { min-height: 60px; column-gap: 12px; }
  .wordmark { font-size: 1rem; }
  .wordmark span { font-size: 0.625rem; }
  .wordmark-logo { height: 44px; }
  .site-nav ul { column-gap: 12px; }
  .site-nav a { font-size: 0.8125rem; padding-block: 8px; }
}
/* Enlarged text or page zoom on a phone: the five links wrap to three rows, so
 * each row is only as tall as a target has to be (24px, SC 2.5.8). */
@media (max-width: 17em) {
  .wordmark-logo { height: 2.75rem; max-width: 100%; }
  .site-nav a { padding-block: 3px; }
}

/* ---- Breadcrumb ---------------------------------------------------------- */
.section-breadcrumb { background: var(--surface); border-bottom: 1px solid var(--line); }
/* Card V1D (audit G-12). The separator used to open each crumb, so a wrapped
 * trail started a line with a stray "/", and screen readers could read it out.
 * The trail now runs as one line of text, and each crumb ends in a "›" with an
 * empty alternative text, so it is not read out. Nothing may break a line just
 * before a closing quotation mark such as "›", so it stays on the line of the
 * word before it, and a line ends with a separator rather than starting with
 * one. A long crumb, such as a guide's title, wraps like any sentence. */
.section-breadcrumb ol { list-style: none; margin: 0; padding: 8px 0; font-size: 0.8125rem; color: var(--ink-soft); }
.section-breadcrumb li { display: inline; }
/* The page itself moves to the next line whole rather than split a reference
 * such as GP-INV-001 at its hyphens; a long title still wraps, evenly. */
.section-breadcrumb li[aria-current="page"] { display: inline-block; max-width: 100%; text-wrap: balance; }
/* Card V2-A (V2-06). The same rule for a reference ("Reference RL600",
 * "GP-INV-003"), the phone example and a line count: each moves to the next
 * line whole instead of splitting, and wraps inside itself only when it is
 * longer than the whole line, so larger text never pushes it off the page. */
.keep-together { display: inline-block; max-width: 100%; }
.section-breadcrumb li:not(:last-child)::after { content: "\203A" / ""; margin: 0 0.2em 0 0.5em; }
/* A crumb is a standalone target: the padding takes it past 24px (SC 2.5.8). */
.section-breadcrumb a { padding-block: 4px; }

/* ---- Hero ---------------------------------------------------------------- */
.section-hero { background: var(--surface); padding: 28px 0 32px; }
.hero-eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
/* Card V1C (audit G-13). A fixed 36px title ran to five lines on a 320px phone
 * and pushed the price off the first screen, and at 200% text a long word ran
 * off the page. The size now follows the width within readable limits and, in
 * rem, still grows with the reader's own text size; a word too long for the
 * line breaks instead of overflowing. Nothing clips, truncates or fixes its
 * height. */
.hero-title { margin-bottom: 12px; font-size: clamp(2rem, 1.37rem + 2.96vw, 3.42rem); }
h1, h2, h3 { overflow-wrap: break-word; }
/* Cards V2-A (V2-04) and V2-B. At 200% text on a 320px phone a long word in a
 * heading or a card title is wider than the whole line and breaks inside
 * itself. Milan's decision (2 October): such a break is allowed, with a hyphen
 * where the browser has a dictionary for the page language.
 *
 * V2-A gave every heading `hyphens: auto` outright, and with a dictionary that
 * also hyphenates at the normal text size: in Chrome with its own dictionary,
 * 34 headings on 27 pages at 320px ("on a commer- / cial property") against 2
 * before, which no headless screenshot can show, and which V1F had taken off
 * the teasers for that reason. A heading now hyphenates only when the screen
 * is narrower than 17 times the reader's own text size: enlarged text or page
 * zoom on a phone, never a phone at its normal size (320px is 20 times 16px).
 * A word wider than its line still breaks at any size, by the rule above. No
 * wording changes. */
@media (max-width: 17em) { h1, h2, h3 { hyphens: auto; } }
/* Card V1D (audit G-21, D-10): a heading's last line was often one word. Balanced
 * lines keep the heading's line count and share the words out evenly. */
h1, h2, h3 { text-wrap: balance; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--ink-soft); }
/* Redesign. A price is a figure, and figures are set in the sans with lining,
 * evenly spaced digits. The widths card V2-B measured below were taken in
 * Georgia, which is wider than any face a price can now be drawn in, so they
 * still leave every figure room. */
.hero-price { font-family: var(--sans); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; font-size: var(--step-3); color: var(--brand); margin: 0 0 4px; }
.hero-price-note { font-size: 0.8125rem; color: var(--ink-soft); margin: 0 0 20px; }
/* Card V1C: a listing's price, what kind of figure it is, and where it came
 * from, as one block above the actions. Since card V1F the teasers use it too. */
.hero-price-block { margin: 4px 0 20px; max-width: var(--measure); }
.hero-price-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.hero-price-block .hero-price { line-height: 1.25; overflow-wrap: break-word; }
/* Card V2-A (V2-01). At 200% text on a 320px phone a listing's price, 56px on a
 * 288px line, broke inside the figure ("R94,500,0 / 00") on 46 pages. It takes
 * the teaser's rule below: never larger than 14vw, which is no limit at the
 * default size and holds every figure on one line where it applies. The
 * break above stays only as a guard against a figure longer than any held. */
.hero-price-block .hero-price { font-size: min(var(--step-3), 14vw); }
.hero-price-period { font-family: var(--sans); font-size: var(--step-0); color: var(--ink-soft); white-space: nowrap; }
.hero-price-block .hero-price-note { font-size: 0.875rem; margin: 0; }
/* Card V1F (audit G-19, G-20). A teaser's VAT basis is on the price's own line,
 * so the two are read together. It moves under the price as one piece when the
 * line is full, and a long basis ("VAT treatment to be confirmed") wraps inside
 * itself rather than running off a narrow screen.
 * An amount such as R25,000,000 cannot wrap. At 200% text on a 320px phone it was
 * 337px on a 288px line, and the page cut it off. It is now never wider than
 * 14% of the screen per character size, which is no limit at all at the default
 * text size (14vw is 45px at 320px; the price is 28px) and still leaves it at
 * 160% of that size where the limit applies. */
.inv-price .hero-price { font-size: min(var(--step-3), 14vw); }
/* Card V2-B (V2-09). The 14vw limit above held every price at 160% of its size
 * at 320px with 200% text whatever its length, and it follows the screen, not
 * the price's own line. With real page zoom on a phone the gutters do not
 * shrink with the screen (a 360px phone at 200% lays out at 180px), and 15 of
 * the 28 eleven-character prices split inside the figure again.
 *
 * The price is now sized from its own line. It is as large as the reader's
 * text size asks, up to the size at which its longest word fills the line.
 * data-chars on the block is that word's length (price-size.mjs), and each
 * length's width below is the widest a figure of that length can be in
 * Georgia, the widest face in the stack, plus 2%. At 320px with 200% text that
 * is 200% up to eight characters, 182% at ten and 164% at eleven, where the
 * full 56px would need 344px of a 288px line. It is never smaller than the
 * body text. The 14vw rule stays for a browser without container units, and
 * the break on .hero-price stays as the guard against a figure longer than
 * any held. */
.hero-price-block { container-type: inline-size; }
@supports (font-size: 1cqi) {
  .hero-price-block .hero-price { font-size: max(1rem, min(var(--step-3), calc(100cqi / var(--price-ems, 7.8)))); }
}
.hero-price-block[data-chars="7"] { --price-ems: 4.12; }
.hero-price-block[data-chars="8"] { --price-ems: 4.75; }
.hero-price-block[data-chars="9"] { --price-ems: 5.24; }
.hero-price-block[data-chars="10"] { --price-ems: 5.65; }
.hero-price-block[data-chars="11"] { --price-ems: 6.28; }
.hero-price-block[data-chars="12"] { --price-ems: 6.9; }
.hero-price-block[data-chars="13"] { --price-ems: 7.57; }
.hero-price-block[data-chars="14"] { --price-ems: 7.8; }
.hero-price-vat { display: inline-block; font-family: var(--sans); font-size: var(--step-0); line-height: 1.4; color: var(--ink); }
/* One short notice under the actions. The full notices follow the hero, in
 * .section-terms, where the notice's link leads. */
.hero-notice {
  margin: 20px 0 0; padding: 10px 14px; max-width: var(--measure);
  background: var(--flag-soft); border-left: 4px solid var(--flag); font-size: 0.9375rem;
}
.hero-notice p { margin: 0; max-width: none; }
.hero-notice-paused { border: 1px solid var(--flag); border-left-width: 4px; }
.section-terms { padding-bottom: 8px; }
.section-terms .prose { margin-bottom: 24px; }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.badge {
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line-strong); padding: 4px 10px; border-radius: 999px; color: var(--ink-soft);
}

/* ---- Buttons ------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Card V2-A (V2-08): a two-line label left "pack" alone on its second line at
 * 375px; balanced lines share the words out. */
.btn { text-wrap: balance; }
.btn {
  /* SC 2.5.8: every target clears 24px, and these clear 44px. */
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 12px 24px;
  font: 600 var(--step-0)/1.2 var(--sans);
  border-radius: var(--radius); border: 1px solid var(--brand);
  background: var(--brand); color: var(--brand-on); text-decoration: none; cursor: pointer;
}
/* Redesign B08 (HUBS P8, P9). A button is never wider than the box it is in:
 * at 200% zoom on a 320px screen the page is 160px wide, and a long label
 * ("Request the confidential investment pack") ran past the screen. On a page
 * that narrow the side padding is halved and the label may break inside a
 * word: the label is a flex item, as wide as its longest word unless that
 * word may break. */
.btn { min-width: 0; max-width: 100%; }
@media (max-width: 15em) {
  .btn { padding-inline: 12px; overflow-wrap: anywhere; }
}
.btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-secondary { background: var(--surface); color: var(--brand); }
.btn-secondary:hover { background: var(--canvas-deep); }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--canvas-deep); border-color: var(--line-strong);
  color: var(--ink-soft); cursor: not-allowed;
}
/* Feedback item 3. Every button answers the same way, on white, on paper and
 * on navy, in a hero and in the bar at the foot of a phone: the glow of a card
 * that is a link, a lift of one pixel, and a slight press while it is held
 * down. A panel on navy sets --btn-glow to the lighter glow. Only the shadow
 * and a transform change, so nothing beside the button moves. A button that
 * cannot be used does none of it. */
.btn:hover, .btn:focus-visible { box-shadow: var(--btn-glow, var(--glow)); }
.btn:active { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn:focus-visible { transform: var(--lift-btn); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: var(--lift-btn); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: var(--press); }
}
.btn[aria-disabled="true"], .btn:disabled { box-shadow: none; transform: none; }
/* Card V1D (audit G-21). On a phone the two hero buttons wrapped to two rows of
 * different widths. Each now fills its row: stacked, they are the same width
 * and line up; side by side, they share the row. Neither is squeezed to match
 * the other, so a long label wraps inside its own button rather than shrink. */
@media (max-width: 559px) {
  .section-hero .actions > .btn { flex: 1 1 auto; }
}

/* ---- Placeholder blocks -------------------------------------------------- */
/* Each names the asset it stands in for and its aspect ratio, so the set of
 * placeholders doubles as the shot list for André's photographer. */
.ph {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 6px; text-align: center; padding: 20px;
  background: repeating-linear-gradient(135deg, var(--canvas-deep) 0 12px, var(--canvas) 12px 24px);
  border: 1px dashed var(--line-strong); color: var(--ink-soft);
  font-size: 0.8125rem; overflow-wrap: break-word;
}
.ph strong { display: block; font-size: 0.875rem; color: var(--ink); font-weight: 600; }
.ph-hero { aspect-ratio: 3 / 2; }
.ph-thumb { aspect-ratio: 4 / 3; }
.ph-guide { aspect-ratio: 16 / 9; }
.guide-hero { margin-top: 0; margin-bottom: 24px; }
.guide-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* Card V1G (audit G-17). Each illustration's focal point, as a class: the site's
 * policy refuses inline style, so style="object-position: …" was dropped with a
 * console error on every guide. One rule per value in FOCAL_CLASSES (media.mjs);
 * a record naming any other value fails the build. */
.guide-hero img.focal-65-50 { object-position: 65% 50%; }
.guide-hero figcaption { font-size: 0.875rem; color: var(--ink-soft); margin-top: 8px; }
.guide-answer { font-size: var(--step-1, 1.125rem); }
.guide-byline, .guide-disclaimer { font-size: 0.875rem; color: var(--ink-soft); }
.source-list { font-size: 0.9375rem; padding-left: 1.25rem; }
.source-list li { margin-bottom: 8px; }

/* Card V1E-A (audit G-06). A plain 1fr column is never narrower than its tile's
 * smallest size, and a tile with an aspect ratio works that out from its text
 * wrapped to one word a line, made tall, then turned back into a width by the
 * ratio. The tiles ran 32-43px past the content edge from 560px, and 244px at
 * 320px with 200% text. The columns now share the width whatever the tiles
 * hold, and each tile fills its column. The ratio is only the tile's shape: a
 * tile whose text needs more room grows taller, and nothing is cut off. */
.gallery-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery-grid > * { width: 100%; min-width: 0; }

/* ---- Sections ------------------------------------------------------------ */
section[class^="section-"] { padding: 32px 0; }
.section-facts, .section-pack, .section-guides { background: var(--surface); }
.section-enquiry { background: var(--canvas-deep); }
section > .wrap > h2 { margin-bottom: 8px; }
.section-lede { color: var(--ink-soft); margin-bottom: 20px; }

/* ---- Fact grid ----------------------------------------------------------- */
.facts { display: grid; gap: 0; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 560px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts div { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.facts dt { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.facts dd { margin: 2px 0 0; font-size: var(--step-1); overflow-wrap: anywhere; }
/* Card V1B: a listing's short key facts. Two to a row from 320px and at most
   four; each column is at least 8rem, so larger text gives fewer columns. A set
   with a sentence in it uses .spec-list rows instead (listing.mjs). */
.facts.facts-compact {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(8rem, (100% - 72px) / 4)), 1fr));
  column-gap: 24px;
}

/* ---- Claim marking ------------------------------------------------------- */
/* Every fact here comes from the seller's public advertisement. Nothing has
 * been verified against a document, so nothing is presented as established. */
.claim-note {
  background: var(--flag-soft); border-left: 4px solid var(--flag);
  padding: 14px 16px; margin: 0 0 24px; font-size: 0.9375rem;
}
.claim-note p:last-child { margin-bottom: 0; }
/* These notes sit directly under the page title, so they are h2 in the outline
   and keep the smaller size they had as h3. */
.claim-note h2, .expired-notice h2 { font-size: calc(var(--step-2) * var(--serif-scale)); margin-bottom: 0.4em; }
.flag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.flag-list li { border-left: 3px solid var(--flag); padding: 8px 14px; background: var(--surface); }
.flag-code { font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--flag); display: block; }

.expired-notice {
  background: var(--flag-soft); border: 1px solid var(--flag);
  padding: 16px; margin: 0 0 20px;
}
.expired-notice p:last-child { margin-bottom: 0; }

/* ---- Detail lists -------------------------------------------------------- */
/* Card V1B. With large text on a phone "Specification," is wider than the
   column; the heading wraps inside it rather than push the page sideways. */
.section-facts h2, .section-detail h2, .detail-groups h3 { overflow-wrap: break-word; }
/* The groups sit side by side only when each has 22rem. */
.detail-groups { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.detail-groups h3 { font-size: calc(var(--step-1) * var(--serif-scale) * 1.1); margin-bottom: 8px; }
/* Free text such as "Extras" reads as a paragraph across the whole row. */
.spec-extras { grid-column: 1 / -1; }

/* Label and value rows (the specification, and key facts that are sentences).
   Each pair is its own row: the label keeps a 10rem column and the value takes
   the rest, and when the row cannot fit both (under about 23rem, as on phones
   or with larger text) the value moves below its label. Nothing is squeezed to
   a letter per line, and no text is shrunk to make it fit. */
.spec-list { margin: 0; max-width: 52rem; }
.spec-list > div {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 2px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.spec-list dt { flex: 0 0 10rem; min-width: 0; max-width: 100%; color: var(--ink-soft); overflow-wrap: break-word; }
.spec-list dd { flex: 1 1 12rem; min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
/* A long value is a paragraph under its label. */
.spec-list .spec-long dt, .spec-list .spec-long dd { flex-basis: 100%; }
.spec-list .spec-long dd { font-weight: 400; max-width: var(--measure); }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { padding-left: 26px; position: relative; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 10px; height: 10px; border: 2px solid var(--gold-600); border-radius: 2px;
}
/* Card V2-B (V2-17). On the privacy page the lists are statements, not things
 * to tick off, and an empty box beside "Ticking the marketing box…" read as a
 * consent box left unticked. There the marker is a plain dot. */
.article-body > .wrap:not(.guide-read) .checklist li::before {
  left: 3px; top: 0.7em; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--accent);
}

/* ---- Description --------------------------------------------------------- */
.description { max-width: var(--measure); }
/* Card V2-A (V2-03). At 200% text on a 320px phone a long word, a path or a
 * code was wider than the whole line in the advertisement's text, the notes,
 * the review flags and the guides' source lists, and ran out of its column;
 * on six pages it pushed the page sideways. Such a word now breaks where the
 * line ends. At the default size every word fits, so nothing moves. */
.description, .claim-note, .flag-list li, .checklist li { overflow-wrap: break-word; }
/* Both lists are grids of one column, and a grid column is never narrower than
 * its longest word unless told it may be: the break above could not take
 * effect, and the list pushed the page 4px to 58px wide. */
.flag-list, .checklist { grid-template-columns: minmax(0, 1fr); }
.description p { margin-bottom: 0.9em; }
.description p:first-of-type { font-size: var(--step-1); }

/* The rest of the advertisement. The page used to cut the seller's copy at
   twelve lines with nothing to say so; this discloses the remainder and its
   exact length instead. Native <details>, so it needs no script and works
   under a script-src 'self' policy. */
.description-more { max-width: var(--measure); margin-top: 8px; }
.description-more > summary {
  cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 0.9375rem;
  border: 1px solid var(--line-strong); background: var(--surface-soft, #f6f6f3);
  /* Card V1D: the same open and closed marker as the FAQ (see "FAQ" below). */
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.description-more > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.description-more[open] > summary { margin-bottom: 14px; }
.description-more .description p:first-of-type { font-size: inherit; }

/* Internal review panels. Marked so a reviewer can see at a glance which parts
   of a private route are our working notes rather than buyer copy, and so a
   published page can drop them wholesale. */
.section-internal { border-left: 4px solid var(--ink-soft, #6b6b66); }
/* Card V2-A (V2-16): a note that is a box of its own, not a section with a
 * .wrap inside, sat against its rule. */
div.section-internal { padding: 10px 14px; }
.internal-marker {
  display: inline-block; margin: 0 0 6px; padding: 3px 9px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--ink-soft, #6b6b66); color: var(--ink-soft, #6b6b66);
}

/* The advertised title, kept visible under a heading rewritten into hectares. */
.hero-advertised-as {
  font-size: 0.8125rem; color: var(--ink-soft); margin: -6px 0 16px;
  max-width: var(--measure);
}

/* ---- Enquiry form -------------------------------------------------------- */
/* Card V1F. The phone column was 1fr, which is never narrower than its widest
 * word: at 200% text on a 320px phone the heading's "confidential" made the
 * column, and the whole form in it, 342px wide on a 288px line. The column now
 * takes the width it is given. */
.enquiry-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .enquiry-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; } }

.form-card { background: var(--surface); padding: 20px; border: 1px solid var(--line); }
/* Redesign B08: on a 160px page the form keeps more of the line for its words. */
@media (max-width: 15em) { .form-card { padding: 12px; } }
@media (min-width: 560px) { .form-card { padding: 28px; } }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field .hint { display: block; font-size: 0.875rem; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 var(--step-0)/1.4 var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--radius);
}
.field textarea { min-height: 120px; resize: vertical; }
/* Card V2-A (V2-02). A native select keeps its chosen option on one line and
 * cuts it off: "Not listed, or prefer no" on every form at 320px, and every
 * listing question at 200% text. Drawn by the page instead of the system, the
 * box grows to show the whole option on as many lines as it needs; the list it
 * opens is still the browser's own, by mouse, touch or keyboard. Its arrow is
 * two gradients in the text colour (no image, so nothing for the CSP to load).
 * Browsers that cannot wrap a select's text show it as before. In forced
 * colours, where backgrounds are dropped, the system draws it again. */
.field select {
  appearance: none; white-space: normal; height: auto; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 21px center, right 15px center;
  background-size: 6px 6px; background-repeat: no-repeat;
}
@media (forced-colors: active) {
  .field select { appearance: auto; padding-right: 14px; background-image: none; }
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--brand); }
.field [aria-invalid="true"] { border-color: var(--flag); border-width: 2px; }
.field-error { display: block; color: var(--flag); font-size: 0.875rem; margin-top: 6px; font-weight: 600; }
/* Card 7I-B: a help link under a field, after its error, set like the hint above it. */
.field .field-help { font-size: 0.875rem; color: var(--ink-soft); margin: 6px 0 0; }

.listing-lock {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  background: var(--canvas); border: 1px solid var(--line); padding: 12px 14px; margin-bottom: 18px;
}
.listing-lock .label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.listing-lock .value { font-weight: 600; overflow-wrap: anywhere; }

.consent { border: 0; margin: 0 0 18px; padding: 0; }
.consent legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
/* A fieldset is otherwise never narrower than its widest content. */
.form-card fieldset { min-width: 0; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 12px; }
.check input[type="checkbox"], .check input[type="radio"] { width: 24px; height: 24px; min-height: 24px; margin: 2px 0 0; }
/* Card V1F: a fixed choice as radio buttons (fields.mjs radioField). The question
 * reads like a field's label; each choice's label wraps beside its button. */
.choices { border: 0; margin: 0 0 18px; padding: 0; }
.form-card .choices legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.choices .check { margin-bottom: 8px; }
.check label { font-weight: 400; margin: 0; overflow-wrap: break-word; }
.check .hint { margin-top: 2px; }
/* Card V2-B. The consent tick box's error sat flush left with no space under
 * it, directly above the next, optional tick box, and read as that box's
 * message. The box in error had no mark of its own either: the red border is
 * drawn only inside .field. The message now sits under the label it belongs
 * to (the box is 24px and the gap 12px), with space after it, and the box is
 * outlined. The outline gives way to the focus ring while the box has
 * keyboard focus, so the two are never drawn over each other. */
.consent .check + .field-error:not(:empty) { margin: -6px 0 14px 36px; }
.consent input[type="checkbox"][aria-invalid="true"]:not(:focus-visible) { outline: 2px solid var(--flag); outline-offset: 2px; }

/* The honeypot. Off screen and inert, so people, assistive technology and the
 * keyboard never reach it, but a form field a bot will happily fill in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 16px; }
.form-status:empty { margin: 0; }
.status-error { background: var(--flag-soft); border-left: 4px solid var(--flag); padding: 14px 16px; }
.status-ok { background: var(--surface); border-left: 4px solid var(--gold-500); padding: 14px 16px; }
/* Card V2-B. The reference is a code the buyer is asked to quote. It was set in
 * the serif face, Georgia, whose figures are old-style: its zero is the height
 * and shape of a small "o", so GP-261005-TEFQ50 read "TEFQ5o". The code's
 * alphabet has a zero and no letter O (src/server/reference.mjs), so a reader
 * has to be able to tell which one it is. The sans face with lining figures
 * was tried first, and an independent reader still took its plain oval zero for
 * a capital O where no O stood beside it ("0NVA06"). It is now in a monospace
 * face whose zero carries a slash (measured in Chrome, Firefox and WebKit on
 * Windows; the sans zero has none, and slashed-zero does nothing in it).
 * slashed-zero still asks for one wherever a face offers it as an option.
 * Every code is the same width in this face, so none is wider than its line. */
.status-ok .reference { font-family: var(--mono); font-variant-numeric: lining-nums slashed-zero; font-size: var(--step-2); display: block; margin: 6px 0; }
/* Card V1F. A reference such as GP-260929-XYWMCE wraps only at its hyphens, and
 * at 200% text on a 320px phone its last part was 226px on a 210px line. Like the
 * teaser price, it is never larger than 12.5vw: no limit at the default size
 * (22px against 40px at 320px), and at 200% text it fits the confirmation. */
.status-ok .reference { font-size: min(var(--step-2), 12.5vw); }
/* The next steps after a confidential request are indented list items, and at 200%
 * text on a 320px phone "unencumbered" was 214px on a 190px line. A word longer
 * than the whole line breaks there rather than run out of the box. (Not
 * hyphens: auto, which also reflows text at the default size wherever the
 * browser has a dictionary.) */
.form-status li { overflow-wrap: break-word; }

.enquiry-aside { font-size: 0.9375rem; }
.enquiry-aside h3 { font-size: calc(var(--step-1) * var(--serif-scale) * 1.1); margin-bottom: 8px; }
.enquiry-aside ul { padding-left: 20px; }

/* ---- Confidential investment teaser -------------------------------------- */
/* A typographic card stands where a photograph would. There is no licensed image
 * of the property, and a picture of some other building would mislead. */
.inv-card { margin: 0; max-width: 720px; }
/* Card V1F. The card's single column was sized to its content, so at 200% text on
 * a 320px phone "residential" made the card 46px wider than its box. The column
 * now takes the card's width, and a word longer than the whole line breaks
 * inside the card (not hyphens: auto, which also reflowed the title at the
 * default size on a 320px phone wherever the browser has a dictionary). The
 * figures' minimum grows with the text, so larger text gives fewer columns. */
.inv-card-face {
  background: var(--brand); color: var(--brand-on);
  padding: 24px 22px; border-radius: var(--radius);
  display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) { .inv-card-face { padding: 32px 36px; } }
.inv-card-face p { margin: 0; max-width: none; }
.inv-card-kicker { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.inv-card-title { font-family: var(--serif); font-size: var(--step-3); line-height: 1.15; overflow-wrap: break-word; }
/* The card is a picture made of words (its face is hidden from screen readers;
 * the caption and the key information say the same). At 200% text on a 320px
 * phone its 56px title broke "commercial", "residential" and "Investment" in
 * the middle. Like the price, it is never larger than 12vw: no limit at the
 * default size (28px against 38px at 320px). */
.inv-card-title { font-size: min(var(--step-3), 12vw); }
.inv-card-place { font-size: var(--step-1); opacity: 0.9; margin-bottom: 14px !important; }
.inv-card-figures {
  display: grid; gap: 14px 24px; margin: 8px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr));
}
.inv-card-figures div { min-width: 0; }
.inv-card-figures dt { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.inv-card-figures dd { margin: 2px 0 0; font-family: var(--sans); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; font-size: var(--step-2); overflow-wrap: anywhere; }
.inv-card-figures dd.inv-card-sub { font-family: var(--sans); font-size: 0.8125rem; opacity: 0.85; margin: 0; }
.inv-card figcaption { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 8px; max-width: var(--measure); }

.steps { margin: 0 0 20px; padding-left: 22px; display: grid; gap: 10px; max-width: var(--measure); }
.steps li { padding-left: 4px; }

.qualification { border: 1px solid var(--line); margin: 0 0 18px; padding: 14px 16px 2px; }
.qualification legend { font-weight: 600; padding: 0 6px; }
/* Card V1F. On a phone the optional questions of the investment form sat in a
 * box inside the form's own box, which left 176px for a choice's label at 200%
 * text on a 320px screen, and "Representing" is 186px. Below 560px the group
 * keeps its top and bottom rules but gives up its sides, so its questions line
 * up with the fields above it. Only a group of radio choices (the teasers'
 * form) changes; a listing's form is as it was. */
@media (max-width: 559px) {
  .qualification:has(> .choices) { padding-inline: 0; border-inline-width: 0; }
  .qualification:has(> .choices) > legend { padding-inline: 0 8px; }
}
.qualification > .hint { display: block; font-size: 0.875rem; color: var(--ink-soft); margin: 0 0 14px; }
.optional { font-weight: 400; color: var(--ink-soft); font-size: 0.875rem; }
.form-note { font-size: 0.9375rem; font-weight: 600; margin: 0 0 12px; }
.status-ok ol, .status-ok ul { margin: 8px 0 0; padding-left: 20px; }

/* ---- Guide cards --------------------------------------------------------- */
/* Card V1E-A. Up to three columns from 720px, none narrower than 12.5rem. The
 * minimum is in rem, so it grows with the reader's text: at 200% text a 768px
 * screen has one column and a 1440px screen two, where three columns had left
 * "Bloubergrant" running out of its card. At the default text size the columns
 * are exactly as before; the 1px only keeps rounding from dropping the third. */
.card-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(12.5rem, (100% - 32px) / 3 - 1px)), 1fr)); } }
.card { border: 1px solid var(--line); background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card h3 { font-size: calc(var(--step-1) * var(--serif-scale) * 1.1); line-height: 1.2; }
/* A card title is a standalone target, not a link inside a sentence, so it has
 * to clear 24px for SC 2.5.8. At this font size the line box alone is 21px.
 * Card V1E-A: as an inline block the link was as wide as its longest word, even
 * past the edge of its card. It now stops at the heading's width, and a word
 * longer than the whole line breaks there instead. */
.card h3 a, .listing-card h3 a { display: inline-block; padding-block: 3px; max-width: 100%; }
.card a { text-decoration: none; }
.card a:hover { text-decoration: underline; }
.card p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }
/* Card V1J (audit S-05). A listing's card says where the property is and gives
 * one fact from its own page, on two quiet lines under the price, on the hubs
 * as on a listing's or a guide's cards. The rule names only these two lines, so
 * no other card moves, a confidential opportunity's least of all. A place name
 * longer than the whole line ("Bloubergstrand" at 200% text on a 320px phone)
 * breaks there rather than leave its card. */
.card-place, .card-fact { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); overflow-wrap: break-word; }
.card-unpublished { border-style: dashed; background: var(--canvas); }
.card-status { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-top: auto; }

/* ---- FAQ ----------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.faq details p { padding-bottom: 14px; }
/* Card V1D (audit G-15). The flex layout above removed the browser's own marker,
 * so a question read as a plain bold line. Each question now ends in a chevron
 * that points down when closed and up when open. It is drawn, with no text, so
 * a screen reader hears only the question and the native expanded state; it is
 * sized in em, so it grows with the text. The rest-of-advertisement disclosure
 * uses the same marker. */
.faq summary::-webkit-details-marker, .description-more > summary::-webkit-details-marker { display: none; }
/* Redesign B08. The label is a flex item beside the marker, so it is as wide as
 * its longest word unless that word may break: on a 160px page "advertisement"
 * pushed the page sideways. */
.faq summary, .description-more > summary { overflow-wrap: anywhere; }
.faq summary::after, .description-more > summary::after {
  content: ""; flex: none; width: 0.55em; height: 0.55em; margin: -0.3em 0.3em 0 0;
  border-right: 2px solid var(--gold-600); border-bottom: 2px solid var(--gold-600);
  transform: rotate(45deg);
}
.faq details[open] > summary::after, .description-more[open] > summary::after { margin-top: 0.3em; transform: rotate(-135deg); }

/* ---- Listing index ------------------------------------------------------- */
/* Card V1E-A. The single phone column was 1fr, which is never narrower than the
 * widest card's longest word: at 320px with 200% text "Bloubergstrand" pushed
 * every card 33px past the content edge. The column now takes the width it is
 * given. From 620px there are up to two columns and from 980px up to three,
 * none narrower than 12.5rem, so larger text gives fewer, wider cards rather
 * than titles running out of them. The default text size is laid out as before. */
.listing-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .listing-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(12.5rem, (100% - 16px) / 2 - 1px)), 1fr)); } }
@media (min-width: 980px) { .listing-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(12.5rem, (100% - 32px) / 3 - 1px)), 1fr)); } }
.listing-card { border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.listing-card .ph { border: 0; border-bottom: 1px dashed var(--line-strong); }
.listing-card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.listing-card h3 { font-size: calc(var(--step-1) * var(--serif-scale) * 1.1); line-height: 1.2; }
.listing-card h3 a { text-decoration: none; }
.listing-card h3 a:hover { text-decoration: underline; }
.listing-card .price { font-family: var(--sans); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; font-size: var(--step-1); color: var(--brand); }
/* Card V1F (audit RA-14): a teaser card's VAT basis, on its own line directly
 * under the price instead of running on after it at a smaller size. */
.listing-card .price-vat { display: block; font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft); }
.listing-card .meta { font-size: 0.8125rem; color: var(--ink-soft); margin-top: auto; }
.listing-card .flag-count { color: var(--flag); font-weight: 600; }

/* ---- Cards that are links (feedback item 3, 12 October 2026) -------------- */
/* A card has one link, its title, or none (templates/cards.mjs). The title's
 * link is stretched over the whole card, as the main hub's four tiles already
 * were: a click, a middle click or a Ctrl click anywhere on the card is a
 * click on that one link, with no script and no second link, and a keyboard
 * meets one stop for each card. A card with no link (a guide that has no page
 * yet) has nothing stretched over it and does nothing. */
.card, .listing-card { position: relative; isolation: isolate; }
.card h3 a::after, .listing-card h3 a::after { content: ""; position: absolute; inset: 0; }
/* Under a stretched link a card's words cannot be selected by dragging. Where
 * assets/js/cards.js is running it says so with this class: the words are then
 * lifted above the link, so they select like any text, and the script follows
 * the title's link for a plain click on them. Where it is not running the
 * whole card stays the link. */
.has-card-clicks :is(.card, .listing-card-body, .hub-entries li, .guide-topics li) > p { position: relative; z-index: 1; }
.has-card-clicks :is(.card:not(.card-unpublished), .listing-card, .hub-entries li, .guide-topics li) p { cursor: pointer; }
/* One answer to the pointer and to the keyboard, for every card that is a
 * link and for the tiles that work the same way: a white surface, a stronger
 * edge and the navy-tinted glow. The title's link keeps the site's own focus
 * ring, and the card around it takes a navy edge, so focus is shown twice.
 * The colours change for everyone; the lift is in the block below. A panel on
 * navy sets --card-glow to the lighter glow. */
:is(.card:not(.card-unpublished), .listing-card, .hub-entries li, .guide-topics li):is(:hover, :has(a:focus-visible)) {
  background: var(--surface); border-color: var(--line-strong); box-shadow: var(--card-glow, var(--glow));
}
:is(.guide-card:not(.card-unpublished), .hub-entries li):is(:hover, :has(a:focus-visible)) { border-top-color: var(--gold-600); }
:is(.card:not(.card-unpublished), .listing-card, .hub-entries li, .guide-topics li):has(a:focus-visible) { border-color: var(--brand); }
:is(.card, .listing-card):hover h3 a { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  :is(.card:not(.card-unpublished), .listing-card, .hub-entries li, .guide-topics li) {
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  :is(.card:not(.card-unpublished), .listing-card, .hub-entries li, .guide-topics li):has(a:focus-visible) { transform: var(--lift); }
}
/* A finger has no hover to leave, so the lift is for a pointer that has one. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.card:not(.card-unpublished), .listing-card, .hub-entries li, .guide-topics li):hover { transform: var(--lift); }
}
/* Where the reader's own colours replace ours a shadow is not drawn: the edge
 * of the card with focus is drawn in the system's own highlight. */
@media (forced-colors: active) {
  :is(.card:not(.card-unpublished), .listing-card, .hub-entries li, .guide-topics li):has(a:focus-visible) { border-color: Highlight; }
}

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.filters a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--line-strong); background: var(--surface);
  text-decoration: none; font-size: 0.9375rem; border-radius: 999px;
}
.filters a[aria-current="true"] { background: var(--brand); color: var(--brand-on); border-color: var(--brand); }

/* ---- Sticky mobile CTA --------------------------------------------------- */
/* Added by JavaScript only, and hidden while the form is on screen, so it can
 * never sit over the consent controls. Without JavaScript the page still has
 * its calls to action in the hero. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  padding: 10px var(--gutter); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: none;
}
.sticky-cta .btn { width: 100%; }
.has-js .sticky-cta[data-visible="true"] { display: block; }
/* Card V1F. Where the bar would take more than 15% of the screen's height (200%
 * text on a phone, or a phone held sideways), nav.js places it in the page
 * instead, after the content: shown, covering nothing, still leading to the form. */
.has-js .sticky-cta[data-placement="flow"] { display: block; position: static; border-top: 0; background: none; padding: 8px var(--gutter) 32px; }
@media (min-width: 900px) { .sticky-cta { display: none !important; } }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: var(--brand-strong); color: #dce4ef; border-top: 3px solid var(--gold-500); padding: 36px 0; font-size: 0.875rem; }
.site-footer h2 { font-size: calc(var(--step-1) * var(--serif-scale)); color: var(--brand-on); margin-bottom: 8px; }
.site-footer a { color: #ffffff; }
.site-footer p { max-width: var(--measure); }
/* The bar is fixed, so the end of the document sits under it at the scroll
 * limit and the footer's privacy link was unreachable on a phone. Reserve the
 * bar's measured height below the footer while it is actually showing. nav.js
 * sets both the class and the height; the fallback covers one line of label
 * plus the bar's own padding. */
@media (max-width: 899px) {
  .sticky-cta-shown .site-footer { padding-bottom: calc(32px + var(--sticky-cta-height, 72px)); }
  /* And when Tab moves focus down the page, the browser scrolls the focused
   * link only just into view, which is under the bar: the footer's privacy
   * link was focused but completely hidden (WCAG 2.2 2.4.11). The same
   * measured height, as scroll padding, keeps it above the bar. */
  /* Card V1F: and 12px more, for the focus ring, which reaches 4px below the
   * link, and a gap of 8px between the ring and the bar (nav.js CLEARANCE). */
  .sticky-cta-shown { scroll-padding-bottom: calc(var(--sticky-cta-height, 72px) + 12px); }
}
.footer-cols { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
/* The buyer footer (card V1A): who handles enquiries, where to browse, and the
 * privacy page. Its links clear 24px as standalone targets (SC 2.5.8). */
@media (min-width: 720px) { .footer-cols-buyer { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-links a { display: inline-block; padding-block: 4px; }
/* The global ring is --brand, which is 1.18:1 on this footer: focus was
 * invisible there (audit G-07). White on --brand-strong is about 17:1. */
.site-footer :focus-visible { outline-color: #ffffff; }

/* ---- Article ------------------------------------------------------------- */
.article-body { background: var(--surface); }
/* Card V2-A (V2-07). On the privacy page, the one article without the guide's
 * column, the first heading's margin escaped the white section and left an
 * empty band of the page background above it, and the last item sat on the
 * footer. The body now holds its own margins and ends with room. */
.article-body > .wrap:not(.guide-read) { display: flow-root; padding-bottom: 48px; }
/* Card V1D (audit G-21, D-12): a heading sat about 4px above its paragraph. */
.article-body h2 { margin-top: 32px; margin-bottom: 0.5em; }
.article-body h3 { margin-top: 24px; margin-bottom: 0.5em; }
.source-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 16px 0; }
.source-table th, .source-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.source-table th { color: var(--ink-soft); font-weight: 600; }
.article-meta { font-size: 0.875rem; color: var(--ink-soft); }
.article-meta dt { font-weight: 600; float: left; clear: left; margin-right: 6px; }
/* Card V1G: a path in a review note ran 15px off a 320px screen at 200% text. */
.article-meta dd { margin: 0 0 4px; overflow-wrap: anywhere; }

@media (max-width: 559px) {
  .source-table, .source-table tbody, .source-table tr, .source-table td, .source-table th { display: block; }
  .source-table thead { display: none; }
  .source-table tr { border-bottom: 2px solid var(--line); padding: 8px 0; }
  .source-table td { border: 0; padding: 4px 0; }
  .source-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink-soft); }
}

/* ---- Guide reading column (card V1G) ------------------------------------- */
/* Audit D-03. A guide's text was a 590px column at the left of a 1056px row,
 * with the right half of the page empty for 8,000px and more. The heading, the
 * answer, the guide, its next step, the properties and the sources now share
 * one centred column exactly as wide as the paragraph measure. It is in ch, so
 * it widens with the reader's own text size until it meets the gutters; nothing
 * has a fixed height, is clipped or is capped by the viewport. The illustration
 * keeps the full width its sizes attribute declares (media.mjs). */
.wrap.guide-read { max-width: calc(var(--measure) + 2 * var(--gutter)); }
/* Room under the illustration band, and the next-step panel's space below stays on the guide's own white. */
.article-body > .guide-read { display: flow-root; padding-top: 20px; }
/* The answer comes first (answer-first guides), so it reads as the lead. */
/* In a column this narrow the listing pages' 3rem title ran to four or five lines at 1440;
 * it still follows the reader's own text size (rem). */
.guide-read .hero-title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.guide-read .guide-answer { line-height: 1.6; border-left: 4px solid var(--gold-500); padding-left: 16px; margin-bottom: 16px; }
.article-body .guide-read > .prose > h2 { margin-top: 2.5rem; }
.guide-read .checklist { margin: 12px 0 24px; gap: 12px; }
/* Audit G-16, D-11: the guide's own next step, then links to what it points to. */
.guide-next {
  margin: 2.5rem 0; padding: 20px 20px 24px;
  background: var(--canvas); border: 1px solid var(--line); border-left: 4px solid var(--gold-500);
}
.article-body .guide-next h2 { margin-top: 0; }
.guide-next-links { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.guide-next-links li { max-width: 100%; }
@media (max-width: 559px) {
  /* On a phone the panel runs to the screen's edges, so its text keeps the column's full width: inside
   * a padded box, 200% text broke twelve more next-step headings mid-word at 320 and 375. */
  .guide-next {
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    border-width: 4px 0 1px; border-color: var(--gold-500) transparent var(--line);
  }
  .guide-next-links li { flex: 1 1 100%; }
  .guide-next-links .btn { width: 100%; }
}
/* Audit D-04, D-05: the properties and opportunities on a band of their own,
 * before the sources; "See all current …" no longer sits flush on a card. */
.section-related { background: var(--canvas); }
.section-related + .section-related { padding-top: 8px; }
/* V1H: a listing's hub link, below fewer than two similar cards. Feedback item
 * 3: it is a button now (templates/listing.mjs), so it is sized as every button
 * is; a guide's own link of the kind became the two buttons under its related
 * properties (guides.css). */
.similar-all { margin: 20px 0 0; }
.section-sources { background: var(--surface); border-top: 1px solid var(--line); }
.section-sources h2 { font-size: calc(var(--step-2) * var(--serif-scale)); margin-top: 32px; }
.section-sources h2:first-child { margin-top: 0; }

/* ---- Guides index (card V1G) --------------------------------------------- */
/* Audit D-02. Topics to jump to, a rule between families and an accent on each
 * card, so the family headings lead and the cards are easy to scan. */
.guide-topics ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.guide-topics li { max-width: 100%; }
.guide-topics a {
  display: inline-block; max-width: 100%; padding: 8px 14px; overflow-wrap: break-word;
  border: 1px solid var(--line-strong); border-radius: 1.5em; background: var(--surface); text-decoration: none;
}
.guide-topics a:hover { background: var(--canvas-deep); text-decoration: underline; }
.guide-family + .guide-family { border-top: 1px solid var(--line); }
.guide-family h2 { margin-bottom: 16px; }
.guide-card { border-top: 3px solid var(--gold-500); }

/* ---- Usage measurement (card 4C) ----------------------------------------- */
/* The line an enquiry form carries where its measurement tick box used to be.
 * It starts where the labels beside the tick boxes above it start (a 24px box
 * and a 12px gap), so it reads as the third thing in that list. */
.consent-note { font-size: 0.875rem; color: var(--ink-soft); margin: 4px 0 0 36px; overflow-wrap: break-word; }
/* Redesign B08 (HUBS P9). On a 160px page the indent left the link
 * "Measurement settings" no room, and it ran past the screen. */
@media (max-width: 15em) {
  .consent-note { margin-left: 0; }
}

/* The settings on the privacy page. */
.measurement-settings { margin-top: 40px; border-top: 1px solid var(--line); }
.measurement-off { background: var(--canvas); border-left: 4px solid var(--line-strong); padding: 12px 14px; }
.measurement-status { font-weight: 600; margin: 20px 0 12px; }
.measurement-choices { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
/* On a phone each button fills its row, as the hero's two buttons do. */
.measurement-choices .btn { flex: 1 1 14em; }
/* The button for the choice in force is filled and the other outlined. The
 * status line above says the same in words, so nothing depends on the colour. */
.measurement-choices .btn-secondary[aria-pressed="true"] { background: var(--brand); color: var(--brand-on); }
.measurement-choices .btn-secondary[aria-pressed="true"]:hover { background: var(--brand-strong); }
.measurement-result { margin: 0 0 1em; }
.measurement-result:empty { margin: 0; }

/* The notice a released page shows while nothing is chosen. It is in the
 * page's own flow at the top: never fixed over the content, and never over a
 * listing's own button at the foot of a phone screen. */
.measurement-notice { background: var(--canvas-deep); border-bottom: 1px solid var(--line-strong); padding: 20px 0 8px; }
.measurement-notice[hidden] { display: none; }
.measurement-notice h2 { font-size: calc(var(--step-2) * var(--serif-scale)); margin-bottom: 0.4em; }
.measurement-notice .measurement-status { margin-top: 0; }

/* ---- Motion -------------------------------------------------------------- */
/* There is no decorative motion on this site. This covers the small transitions
 * above and anything added later. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Print --------------------------------------------------------------- */
/* André and his advisers will print these for a file. */
@media print {
  .review-banner, .site-nav, .sticky-cta, .section-enquiry, .skip-link { display: none !important; }
  body { background: #fff; }
  section[class^="section-"] { padding: 12px 0; break-inside: avoid; }
  .ph { border: 1px solid #999; background: none; }
}

/* ==== components.css ==================================================== */
/* Shared components (redesign). Owner: LEAD.
 *
 * The look of everything templates/components.mjs and templates/cards.mjs
 * write: the eight content blocks, the helpers, and the drawing classes a
 * figure's SVG is coloured with. Every class here starts c- (a component) or
 * d- (a part of a drawing).
 *
 * A lane places and spaces a component inside its own page type, in its own
 * stylesheet. It does not restyle the component itself: a table or a process
 * should look the same on a guide, a listing, a hub and a teaser.
 *
 * Nothing here hides content until a script runs, and every transition sits
 * inside prefers-reduced-motion: no-preference. A block sizes itself from the
 * column it is put in, not from the screen, so the same table reads well in a
 * narrow reading column and across a hub.
 */

/* ---- Small shared parts --------------------------------------------------- */
.c-eyebrow {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--space-2);
}
.c-section-head { margin-bottom: var(--space-5); }
.c-section-head > h2, .c-section-head > h3 { margin: 0; }
.c-section-head > .c-lede { margin: var(--space-2) 0 0; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.5; }
/* A short gold rule: the one piece of ornament the site uses. */
.c-rule { display: block; width: 56px; height: 3px; margin: 0 0 var(--space-4); border: 0; background: var(--gold-500); }

/* ---- In short -------------------------------------------------------------- */
.c-keypoints {
  margin: var(--space-5) 0; padding: var(--space-5);
  background: var(--gold-100); border-left: 4px solid var(--gold-500); border-radius: 0 var(--radius) var(--radius) 0;
}
.c-keypoints-title {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-strong); margin: 0 0 var(--space-3);
}
.c-keypoints-list { margin: 0; padding-left: 1.25em; }
.c-keypoints-list li { margin: 0; padding-left: 0.2em; max-width: none; }
.c-keypoints-list li + li { margin-top: var(--space-2); }
.c-keypoints-list li::marker { color: var(--gold-700); }

/* ---- Callout ---------------------------------------------------------------- */
.c-callout {
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--navy-700); border-radius: 0 var(--radius) var(--radius) 0;
}
.c-callout > p { margin: 0 0 var(--space-2); max-width: none; }
.c-callout > p:last-child { margin-bottom: 0; }
.c-callout-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand);
}
.c-callout-title { color: var(--brand-strong); }
/* General advice beside a property's facts: set apart, so it cannot be read as one of them. */
.c-callout-guidance { background: var(--navy-100); border-color: transparent; border-left-color: var(--navy-700); }
.c-callout-caution { background: var(--flag-soft); border-color: transparent; border-left-color: var(--flag); }

/* ---- Steps ------------------------------------------------------------------ */
.c-steps { margin: var(--space-6) 0; container-type: inline-size; }
.c-steps-title { margin: 0 0 var(--space-4); }
.c-steps-list { list-style: none; margin: 0; padding: 0; counter-reset: c-step; display: grid; }
.c-step { counter-increment: c-step; position: relative; margin: 0; padding: 0 0 var(--space-5) 56px; max-width: none; min-width: 0; }
.c-step:last-child { padding-bottom: 0; }
/* The number, and the line that joins it to the next. Both are drawn, not text a reader needs:
 * the list is ordered, so the order is already announced. */
.c-step::before {
  content: counter(c-step); position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy-700); color: var(--brand-on);
  font: 700 1rem/36px var(--sans); font-variant-numeric: lining-nums; text-align: center;
}
.c-step::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 6px; width: 2px; background: var(--gold-500); }
.c-step:last-child::after { content: none; }
.c-step > p { margin: 0 0 var(--space-1); max-width: none; overflow-wrap: break-word; }
.c-step-who { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.c-step-title { font-size: 1.0625rem; line-height: 1.35; color: var(--brand-strong); padding-top: 5px; }
/* Where the column is wide enough, up to four steps run across. Three need
 * 46rem. Four need 60rem (B08: four across in 46rem left each step a column of
 * about ten words' width, found on the guides and the listing pages). */
@container (min-width: 46rem) {
  .c-steps-list:not(:has(> :nth-child(4))) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--space-5); }
  .c-steps-list:not(:has(> :nth-child(4))) > .c-step { padding: 52px 0 0; }
  .c-steps-list:not(:has(> :nth-child(4))) > .c-step::after { left: 44px; right: calc(-1 * var(--space-5) + 8px); top: 17px; bottom: auto; width: auto; height: 2px; }
}
@container (min-width: 60rem) {
  .c-steps-list:not(:has(> :nth-child(5))) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--space-5); }
  .c-steps-list:not(:has(> :nth-child(5))) > .c-step { padding: 52px 0 0; }
  .c-steps-list:not(:has(> :nth-child(5))) > .c-step::after { left: 44px; right: calc(-1 * var(--space-5) + 8px); top: 17px; bottom: auto; width: auto; height: 2px; }
}
/* Where the reader's own colours replace ours, a fill is not drawn: the number
 * keeps a ring and the joining line is drawn in the text colour (B08). */
@media (forced-colors: active) {
  .c-step::before { border: 2px solid CanvasText; line-height: 32px; }
  .c-step::after { background: CanvasText; forced-color-adjust: none; }
}

/* ---- Table ------------------------------------------------------------------- */
.c-table-wrap { margin: var(--space-6) 0; container-type: inline-size; }
.c-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.9375rem; line-height: 1.5; }
.c-table caption {
  caption-side: top; text-align: left; padding: 0 0 var(--space-3);
  font-family: var(--serif); font-weight: 700; font-variant-numeric: lining-nums; font-size: calc(var(--step-1) * var(--serif-scale) * 1.1); line-height: 1.2; color: var(--brand-strong);
}
.c-table th, .c-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.c-table thead th { background: var(--navy-100); color: var(--brand-strong); font-weight: 700; border-bottom: 2px solid var(--navy-700); }
.c-table tbody th { font-weight: 600; color: var(--brand-strong); }
.c-table tbody tr:last-child > * { border-bottom-color: var(--line-strong); }
.c-table-note { margin: var(--space-2) 0 0; font-size: 0.8125rem; color: var(--ink-soft); max-width: none; }
/* In a narrow column each row becomes a card, and each cell names its column. The roles in the
 * markup keep it a table to a screen reader although its parts are no longer displayed as one. */
@container (max-width: 34rem) {
  .c-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .c-table, .c-table tbody, .c-table tr, .c-table th, .c-table td { display: block; }
  .c-table caption { display: block; }
  .c-table tbody tr { border: 1px solid var(--line); border-top: 3px solid var(--navy-700); margin: 0 0 var(--space-3); }
  .c-table tbody th, .c-table tbody td { border-bottom: 1px solid var(--line); padding: var(--space-2) var(--space-3); }
  .c-table tbody tr > :last-child { border-bottom: 0; }
  .c-table tbody th { background: var(--navy-100); }
  .c-table tbody td::before, .c-table tbody th::before {
    content: attr(data-label); display: block;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
  }
}

/* ---- Checklist ---------------------------------------------------------------- */
.c-checklist { margin: var(--space-5) 0; }
.c-checklist-title { margin: 0 0 var(--space-3); }
/* Questions to put to someone are marked as questions, not as boxes to tick. */
.c-checklist-ask .checklist li::before {
  /* Sized by its own text (1.5em of 0.75rem is 18px), so the disc grows with
   * the mark when a reader enlarges the text (B08). */
  content: "?"; width: 1.5em; height: 1.5em; left: 0; top: 0.3em; border: 0; border-radius: 50%;
  background: var(--navy-100); color: var(--brand); font: 700 0.75rem/1.5em var(--sans); text-align: center;
}
@media (forced-colors: active) {
  .c-checklist-ask .checklist li::before { border: 1px solid CanvasText; line-height: calc(1.5em - 2px); }
}

/* ---- Definitions -------------------------------------------------------------- */
.c-definitions { margin: var(--space-5) 0; }
.c-definitions-title { margin: 0 0 var(--space-3); }
.c-definitions-list { margin: 0; display: grid; gap: var(--space-3); }
.c-definitions-list > div { padding: var(--space-3) var(--space-4); background: var(--surface); border-left: 3px solid var(--gold-500); }
.c-definitions-list dt { font-weight: 700; color: var(--brand-strong); }
.c-definitions-list dd { margin: var(--space-1) 0 0; }

/* ---- Figure -------------------------------------------------------------------- */
.c-figure { margin: var(--space-6) 0; }
.c-figure-art { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
.c-figure-art svg { display: block; width: 100%; height: auto; }
.c-figure figcaption { margin-top: var(--space-3); font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); max-width: var(--measure); }
.c-figure-caption { font-weight: 600; color: var(--ink); }
/* What a drawing is coloured with. A drawing carries no colour of its own, so it follows the site. */
.c-figure svg .d-fill-navy { fill: var(--navy-700); }
.c-figure svg .d-fill-navy-deep { fill: var(--navy-900); }
.c-figure svg .d-fill-navy-soft { fill: var(--navy-100); }
.c-figure svg .d-fill-gold { fill: var(--gold-500); }
.c-figure svg .d-fill-gold-soft { fill: var(--gold-100); }
.c-figure svg .d-fill-paper { fill: var(--paper); }
.c-figure svg .d-fill-white { fill: var(--surface); }
.c-figure svg .d-fill-none { fill: none; }
.c-figure svg .d-stroke-navy { stroke: var(--navy-700); stroke-width: 2; }
.c-figure svg .d-stroke-gold { stroke: var(--gold-600); stroke-width: 2; }
.c-figure svg .d-stroke-line { stroke: var(--line-strong); stroke-width: 1; }
.c-figure svg .d-stroke-dashed { stroke-dasharray: 6 5; }
.c-figure svg text { font-family: var(--sans); font-size: 14px; fill: var(--ink); }
.c-figure svg .d-text-strong { font-weight: 700; fill: var(--brand-strong); }
.c-figure svg .d-text-small { font-size: 12px; fill: var(--ink-soft); }
.c-figure svg .d-text-on-navy { fill: var(--brand-on); }
.c-figure svg .d-text-serif { font-family: var(--serif); font-weight: 700; font-size: 18px; fill: var(--brand-strong); }

/* ---- On this page -------------------------------------------------------------- */
.c-toc { font-size: 0.9375rem; }
.c-toc-title { margin: 0 0 var(--space-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.c-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.c-toc li { margin: 0; max-width: none; }
.c-toc a { display: block; padding: 5px 0 5px var(--space-3); margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; }
.c-toc a:hover { color: var(--brand); text-decoration: underline; }
/* Set by enhance.js as the reader moves through the page. */
.c-toc a.is-current { color: var(--brand-strong); font-weight: 600; border-left-color: var(--gold-600); }

/* ---- Next step ------------------------------------------------------------------ */
.c-cta { margin: var(--space-6) 0; padding: var(--space-5); background: var(--navy-900); color: #dce4ef; border-radius: var(--radius); border-top: 3px solid var(--gold-500); }
.c-cta-title { margin: 0 0 var(--space-2); color: var(--brand-on); }
.c-cta > p { margin: 0 0 var(--space-4); max-width: var(--measure); }
.c-cta-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.c-cta-actions li { margin: 0; min-width: 0; max-width: 100%; }
/* On navy the primary action is white and the second is outlined. */
.c-cta .btn { background: var(--surface); border-color: var(--surface); color: var(--brand-strong); }
.c-cta .btn:hover { background: var(--gold-100); border-color: var(--gold-100); }
.c-cta .btn-secondary { background: transparent; border-color: #dce4ef; color: var(--brand-on); }
.c-cta .btn-secondary:hover { background: var(--navy-700); border-color: var(--brand-on); }
.c-cta :focus-visible { outline-color: #ffffff; }
/* The glow a button shows under the pointer or the keyboard, in its light form (site.css, Buttons). */
.c-cta { --btn-glow: var(--glow-on-navy); }

/* ---- Cards ----------------------------------------------------------------------- */
/* templates/cards.mjs keeps the two card shapes the site already had (.card and .listing-card,
 * styled in site.css). These are the parts it adds. */
.c-card-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 var(--space-3); border-radius: 2px; background: var(--canvas-deep); }
.c-card-tag { display: inline-block; margin: 0 0 var(--space-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.c-card-reason { margin: var(--space-2) 0 0; font-size: 0.875rem; color: var(--ink-soft); }

/* ---- A row of cards (feedback item 5, 12 October 2026) ------------------------------ */
/* templates/cards.mjs wraps two or more cards under one heading in .c-row: a labelled group around the
 * site's own grid. One card is never wrapped, so a row of one cannot happen.
 *
 * On a screen wide enough for columns the group is that grid, balanced: two cards share the row, four
 * sit two by two, and every other number runs three to a row as before.
 *
 * Below the width at which the grid falls to one column, the cards stand side by side instead of in a
 * long stack: one card takes most of the width and the next shows at the edge, and the reader moves
 * sideways through them by finger, trackpad, keyboard or scrollbar. That is the browser's own
 * scrolling and needs no script. Nothing moves by itself, and no rule here touches touch-action, so a
 * finger that starts on a card still scrolls the page up and down. assets/js/cards.js adds the
 * Previous and Next buttons and the position ("2 of 5") under the row, and brings a card that takes
 * keyboard focus wholly into the row; without it the row still scrolls, and a card that takes focus
 * while it is the one showing at the edge shows its focus there. The row reaches the screen's two
 * edges and gives the same space back as padding, so the page itself never scrolls sideways; the
 * padding above and below is room for a card's lift and glow, which a scrolling box would otherwise
 * cut off. In a row a card rises and does not grow: a card that grows moves the place the row snaps
 * to, and firefox follows it, so the whole row shifts by a pixel or two under the pointer. */
.c-row { min-width: 0; }
.c-row-controls { display: none; }
@media (min-width: 720px) {
  .c-row[data-row="cards"] > .card-grid:not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(12.5rem, (100% - 16px) / 2 - 1px)), 1fr)); max-width: 46rem;
  }
  .c-row[data-row="cards"] > .card-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(12.5rem, (100% - 16px) / 2 - 1px)), 1fr));
  }
}
@media (max-width: 719.98px) {
  .c-row[data-row="cards"] > .card-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 22rem);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: -8px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter) 20px; scroll-padding-inline: var(--gutter);
    scrollbar-width: thin; --lift: translateY(-2px);
  }
  .c-row[data-row="cards"] > .card-grid > * { scroll-snap-align: start; scroll-snap-stop: always; }
  .c-row[data-row="cards"] > .c-row-controls { display: flex; }
}
@media (max-width: 619.98px) {
  .c-row[data-row="listings"] > .listing-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 22rem);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: -8px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter) 20px; scroll-padding-inline: var(--gutter);
    scrollbar-width: thin; --lift: translateY(-2px);
  }
  .c-row[data-row="listings"] > .listing-grid > * { scroll-snap-align: start; scroll-snap-stop: always; }
  .c-row[data-row="listings"] > .c-row-controls { display: flex; }
}
/* Previous, the position, Next: written by the script, shown only where the row scrolls. */
.c-row-controls { align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0; }
.c-row-position { margin: 0; max-width: none; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: inherit; }
.c-row-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--c-row-edge, var(--brand)); border-radius: var(--radius); background: var(--c-row-surface, var(--surface)); color: var(--c-row-ink, var(--brand)); cursor: pointer;
}
/* The chevron is drawn, and the button's name is the hidden text in it. */
.c-row-btn::before { content: ""; width: 0.7em; height: 0.7em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.c-row-next::before { transform: translateX(-0.15em) rotate(45deg); }
.c-row-prev::before { transform: translateX(0.15em) rotate(-135deg); }
.c-row-btn:hover, .c-row-btn:focus-visible { background: var(--c-row-surface-hover, var(--navy-100)); box-shadow: var(--card-glow, var(--glow)); }
.c-row-btn:active { box-shadow: none; }

/* ---- Reading progress -------------------------------------------------------------- */
/* Added by enhance.js on a long page that asks for it; a thin gold line that fills as the page is read. */
.c-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 40; pointer-events: none; background: transparent; }
.c-progress > span { display: block; height: 100%; background: var(--gold-600); transform-origin: 0 50%; transform: scaleX(var(--c-progress, 0)); }

/* ---- Motion -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .c-toc a, .card, .listing-card { transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
  .c-row-btn { transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
  .c-row-btn:active { transform: var(--press); }
  /* A drawing or a process that starts below the screen arrives once, as it is first scrolled to:
   * enhance.js adds .is-seen and this plays. Nothing is held back to wait for it. At rest, with or
   * without the class, the content is fully visible, so a script, observer or animation that fails
   * costs the entrance and nothing else. No rule may hide content until a script's class arrives
   * (tests/redesign-foundation.test.mjs holds every stylesheet part to that). */
  .c-figure.is-seen .c-figure-art, .c-steps.is-seen .c-steps-list { animation: c-arrive var(--dur-2) var(--ease); }
}
@keyframes c-arrive { from { opacity: 0; transform: translateY(10px); } }

@media print {
  .c-progress, .c-toc { display: none; }
  .c-cta { background: none; color: inherit; border: 1px solid #000; }
  .c-cta-title { color: inherit; }
  .c-keypoints, .c-callout, .c-table thead th { background: none; }
}

/* ==== guides.css ======================================================== */
/* guides.css (redesign). Owner: GUIDES.
 *
 * Every selector in this file starts with .pt-guide, the class the page shell puts
 * on <body> for this lane's pages, so nothing here can reach another lane's
 * pages. tests/redesign-css-scope.test.mjs checks it. The build joins this file
 * into the one site.css a page loads, after site.css and components.css, so a
 * rule here can adjust either on this lane's own pages.
 *
 * Shared components (classes starting c- and d-) are placed and spaced here,
 * not restyled. No inline style, no @import, and no file named only here: an
 * image is an <img> or an inline SVG in the page.
 *
 * Redesign B02 (12 October 2026). A guide is read, then used: someone takes a
 * checklist to a viewing or sends a table to a conveyancer. So the page is a
 * reading column with a list of what is on it, tables and processes that may
 * run wider than the text, a next step that cannot be missed, and a print rule
 * that drops everything but the guide.
 *
 * One breakpoint, 75em (1200px at the usual text size, and wider for a reader
 * whose browser text is larger). From there the heading sits beside the
 * illustration and the list of contents is a column beside the text. Below it
 * the page is the single centred column of card V1G.
 */

.pt-guide {
  /* The contents column, and the space between it and the text. */
  --g-rail: min(15rem, 22vw);
  --g-gap: 56px;
}

/* ---- The top of the page: heading, answer, byline, illustration ---------- */

.pt-guide .guide-top { background: var(--surface); }
.pt-guide .guide-top .section-hero { padding-bottom: var(--space-5); }
.pt-guide .guide-kicker { margin-bottom: var(--space-3); }
/* The heading in two parts where the title has a colon. Together they are the
 * title, in order; the second part starts with a capital only on the screen. */
.pt-guide .guide-read .hero-title { margin-bottom: var(--space-4); }
.pt-guide .guide-title-main { display: block; font-size: 1.15em; line-height: 1.08; }
.pt-guide .guide-title-deck {
  display: block; margin-top: 0.4em;
  font-size: 0.7em; font-weight: 600; line-height: 1.22; color: var(--brand);
}
.pt-guide .guide-title-deck::first-letter { text-transform: uppercase; }
.pt-guide .guide-read .guide-answer { margin-bottom: var(--space-4); }
.pt-guide .guide-byline { margin: 0; color: var(--ink); }
.pt-guide .guide-meta { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
/* Feedback item 2 (12 October 2026). The way down to the properties is a button, and a large one: it
 * is the one thing at the top of a guide that a reader can act on. Its arrow is drawn here and is not
 * read out. On a phone it takes the full width, like the buttons at the foot of the guide. */
.pt-guide .guide-jump { margin: var(--space-5) 0 0; max-width: none; }
.pt-guide .guide-jump .btn { min-height: 56px; padding: 14px 28px; gap: 0.6em; font-size: var(--step-1); }
.pt-guide .guide-jump .btn::after { content: "\2193"; content: "\2193" / ""; flex: none; font-weight: 400; }
@media (max-width: 559px) {
  .pt-guide .guide-jump .btn { width: 100%; padding-inline: 16px; }
}
/* Below the breakpoint the illustration is as wide as the column it sits in. */
.pt-guide .guide-top .guide-hero { max-width: calc(var(--measure) + 2 * var(--gutter)); margin-bottom: 0; padding-bottom: var(--space-5); }
.pt-guide .guide-top .guide-hero img { border-radius: var(--radius); }

@media (min-width: 75em) {
  .pt-guide .guide-top {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--space-7); align-items: center;
    padding-block: var(--space-6) var(--space-7);
    padding-inline: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
    border-bottom: 1px solid var(--line);
  }
  .pt-guide .guide-top .section-hero { padding: 0; background: none; }
  .pt-guide .guide-top .section-hero > .wrap { max-width: none; margin: 0; padding-inline: 0; }
  .pt-guide .guide-top .guide-hero { max-width: none; margin: 0; padding: 0; }
  .pt-guide .guide-top .guide-hero img { aspect-ratio: 4 / 3; }
}

/* ---- Before the first section: the note, in short, what is on the page ---- */

.pt-guide .guide-disclaimer { margin: 0 0 var(--space-5); padding-left: var(--space-3); border-left: 2px solid var(--line-strong); }
.pt-guide .guide-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: var(--measure); }
.pt-guide .guide-intro > .c-keypoints { margin: 0; }
/* The box's own heading starts the box: the space a section heading takes
 * above itself (.article-body h2, site.css) is not wanted inside it. */
.pt-guide .article-body .c-keypoints-title { margin-top: 0; }
/* The list of contents, closed, on a narrow screen. */
.pt-guide .guide-toc-nav > details { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.pt-guide .guide-toc-nav > details > summary { cursor: pointer; min-height: 48px; padding: 12px var(--space-4); font-weight: 600; color: var(--brand-strong); }
.pt-guide .guide-toc-nav > details[open] > summary { border-bottom: 1px solid var(--line); }
.pt-guide .guide-toc-nav ol { display: grid; gap: 2px; margin: 0; padding: var(--space-3) var(--space-4) var(--space-4) 2.5rem; font-size: 0.9375rem; }
.pt-guide .guide-toc-nav li { max-width: none; }
.pt-guide .guide-toc-nav a { display: inline-block; padding-block: 4px; }

/* The same list as a column beside the text on a wide screen. Only one of the
 * two is ever displayed, so a reader meets the list once. */
.pt-guide .guide-rail { display: none; }

@media (min-width: 75em) {
  .pt-guide .article-body > .wrap.guide-read {
    display: grid; grid-template-columns: var(--g-rail) minmax(0, 1fr); column-gap: var(--g-gap); align-items: start;
    max-width: var(--page); padding-top: var(--space-6);
  }
  .pt-guide .guide-main { grid-column: 2; min-width: 0; }
  /* It stays in view while the guide is read, and scrolls by itself if it is taller than the screen. */
  .pt-guide .guide-rail {
    display: block; grid-column: 1; position: sticky; top: var(--space-5);
    max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto; padding: var(--space-1) 2px var(--space-1) 0;
  }
  .pt-guide .guide-toc-nav { display: none; }
  /* What follows the guide lines up with its text, not with the contents. */
  .pt-guide .section-related > .wrap.guide-read { max-width: var(--page); padding-left: calc(var(--gutter) + var(--g-rail) + var(--g-gap)); }
  .pt-guide .section-sources > .wrap.guide-read { max-width: var(--page); padding-left: calc(var(--gutter) + var(--g-rail) + var(--g-gap)); }
}

/* ---- The reading column ---------------------------------------------------- */

/* Text keeps the measure. A table may be wider than the text. */
.pt-guide .article-body .prose { max-width: none; }
.pt-guide .guide-section > h2 { max-width: var(--measure); }
.pt-guide .guide-section > h3 { max-width: var(--measure); }
.pt-guide .guide-section > h4 { max-width: var(--measure); }
.pt-guide .guide-section > .guide-source-links { max-width: var(--measure); }
.pt-guide .guide-section > .crosslink { max-width: var(--measure); }
.pt-guide .guide-section > .c-callout { max-width: var(--measure); }
.pt-guide .guide-section > .c-definitions { max-width: var(--measure); }
.pt-guide .guide-section > .c-figure { max-width: var(--measure); }
/* A process reads downwards in a guide, one step under the last, at the width
 * of the text. Set across in this column, four steps are a few words to a
 * line each; held to the measure, the shared component never sets them so. */
.pt-guide .guide-section > .c-steps { max-width: var(--measure); }
/* In the single column a table reaches out of it by the same amount on each
 * side, as far as the site's breakout width or the screen. */
.pt-guide .guide-section > .c-table-wrap {
  --g-wide: max(100%, min(var(--breakout), 100vw - 2 * var(--gutter) - 24px));
  width: var(--g-wide); margin-inline: calc((100% - var(--g-wide)) / 2);
}
@media (min-width: 75em) {
  /* Beside the contents, it takes the width of the text's own column. */
  .pt-guide .guide-section > .c-table-wrap { width: auto; margin-inline: 0; }
}

/* A section starts with the site's one ornament, the short gold rule. */
.pt-guide .guide-section { margin-top: var(--space-7); }
.pt-guide .article-body .guide-section > h2 { position: relative; margin: 0 0 0.5em; padding-top: 20px; }
.pt-guide .guide-section > h2::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 3px; background: var(--gold-500); }
.pt-guide .article-body .guide-section > h3 { margin-top: var(--space-6); color: var(--brand); }
.pt-guide .guide-section > p:last-child { margin-bottom: 0; }

/* Two kinds of list. Things to obtain keep the site's box; questions to put to
 * someone carry a question mark, as the shared checklist of questions does. */
.pt-guide .guide-section .checklist { margin: var(--space-3) 0 var(--space-5); gap: 10px; }
.pt-guide .guide-section .checklist li::before { top: 0.5em; width: 12px; height: 12px; }
.pt-guide .guide-section .checklist-ask li::before {
  content: "?"; content: "?" / ""; left: 0; top: 0.3em; width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: var(--navy-100); color: var(--brand); font: 700 0.75rem/18px var(--sans); text-align: center;
}

/* A link to another guide, where the text reaches for it. */
.pt-guide .guide-section .crosslink {
  margin-block: var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-left: 3px solid var(--gold-500); border-radius: 0 var(--radius) var(--radius) 0; background: var(--paper);
  font-size: 0.9375rem;
}
.pt-guide .guide-section .crosslink a { font-weight: 600; }
/* A link to an official source, where a reader needs it. */
.pt-guide .guide-source-links { margin-block: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--navy-100); font-size: 0.9375rem; }
.pt-guide .guide-source-label { margin: 0 0 var(--space-1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-strong); }
.pt-guide .guide-source-link { margin: 0; }
.pt-guide .guide-source-link + .guide-source-link { margin-top: 6px; }

/* A drawing is upright and narrow by design; on a wide column it is held to
 * the width it was drawn for and centred in its frame. The width is in rem, so
 * that a reader who sets larger text gets larger lettering in the drawing too
 * (400 pixels at the usual text size). */
.pt-guide .c-figure-art svg { max-width: 25rem; margin-inline: auto; }
@media (max-width: 359px) {
  /* On the narrowest screens the frame runs to the screen's edges, so that the
   * drawing is drawn at its own size and its smaller lettering stays about 12
   * pixels tall. Inside the gutters it was drawn at 85% (measured at 320). */
  .pt-guide .guide-section > .c-figure > .c-figure-art {
    margin-inline: calc(-1 * var(--gutter)); padding: var(--space-3) var(--space-1);
    border-inline: 0; border-radius: 0;
  }
}
/* The heavier line of a service network (content/guide-diagrams.mjs). */
.pt-guide .c-figure svg .g-main { stroke-width: 3; }

/* ---- The next step ---------------------------------------------------------- */

/* The guide's own last section, as the one place on the page that asks for
 * something: navy, with the buttons the shared next-step panel uses on navy. */
.pt-guide .guide-next-place { margin-top: var(--space-7); max-width: var(--breakout); }
.pt-guide .guide-next {
  margin: 0; padding: var(--space-6) var(--space-5);
  border: 0; border-top: 3px solid var(--gold-500); border-radius: var(--radius);
  background: var(--navy-900); color: #dce4ef;
}
.pt-guide .article-body .guide-next h2 { margin: 0 0 0.5em; color: var(--brand-on); }
.pt-guide .guide-next p { max-width: var(--measure); }
.pt-guide .guide-next .btn { background: var(--surface); border-color: var(--surface); color: var(--brand-strong); }
.pt-guide .guide-next .btn:hover { background: var(--gold-100); border-color: var(--gold-100); }
.pt-guide .guide-next .btn-secondary { background: transparent; border-color: #dce4ef; color: var(--brand-on); }
.pt-guide .guide-next .btn-secondary:hover { background: var(--navy-700); border-color: var(--brand-on); }
.pt-guide .guide-next :focus-visible { outline-color: #ffffff; }
.pt-guide .guide-next { --btn-glow: var(--glow-on-navy); }
/* Feedback item 2. The panel's actions are the same size: side by side where there is room for two,
 * one under the other, each the full width, on a phone. One action alone keeps the width of one. */
.pt-guide .guide-next-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); max-width: 46rem; }
.pt-guide .guide-next-links li { margin: 0; max-width: none; min-width: 0; }
.pt-guide .guide-next-links .btn { width: 100%; height: 100%; }
@media (min-width: 560px) {
  .pt-guide .guide-next-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pt-guide .article-body > .wrap.guide-read { padding-bottom: var(--space-7); }
@media (max-width: 559px) {
  /* On a phone the band runs to the screen's edges, as the panel it replaces did. */
  .pt-guide .guide-next { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-radius: 0; }
}

/* ---- After the guide: properties, then sources --------------------------------- */

.pt-guide .section-related { padding-block: var(--space-7); }
.pt-guide .section-related + .section-related { padding-top: 0; }
/* One related property is a card of the usual width, not a third of the column. */
.pt-guide .section-related .card-grid:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 22.5rem); }
/* Two cards, four cards and the buttons under them all run to the column's two edges. */
.pt-guide .section-related .c-row > .card-grid { max-width: none; }
/* Feedback item 2. Under the related properties: the guide's own category, then every property. Two
 * buttons of one size, side by side where there is room and one under the other on a phone. Where the
 * category is the list of every property there is one button, at the width of one. */
.pt-guide .guide-related-actions { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.pt-guide .guide-related-actions li { margin: 0; max-width: none; min-width: 0; }
.pt-guide .guide-related-actions .btn { width: 100%; height: 100%; }
@media (min-width: 560px) {
  .pt-guide .guide-related-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The heading the buttons above lead to takes focus when one of them is used (assets/js/cards.js). */
.pt-guide .section-related > .wrap > h2:focus-visible { outline-offset: 4px; }

/* The highlight. A reader who presses "See the properties this guide relates to" is taken to them, and
 * the cards and the buttons under them are then ringed in gold and navy three times and left alone:
 * the script sets .is-pulsing on the section when the button is pressed, at no other moment, and takes
 * it off when the third cycle has ended. Three is stated here and nowhere else. Only a shadow is
 * animated, so nothing moves. A reader who has asked for less motion is given .is-marked instead: the
 * same ring, drawn once and still, until focus leaves the heading. */
@media (prefers-reduced-motion: reduce) {
  .pt-guide .section-related.is-marked .card, .pt-guide .section-related.is-marked .guide-related-actions .btn { outline: 2px solid var(--navy-700); outline-offset: 3px; box-shadow: 0 0 0 3px var(--gold-500); }
}
@media (prefers-reduced-motion: no-preference) {
  .pt-guide .section-related.is-pulsing .card, .pt-guide .section-related.is-pulsing .guide-related-actions .btn {
    animation-name: g-pulse; animation-duration: 1.1s; animation-timing-function: ease-in-out; animation-delay: 0.5s;
    animation-iteration-count: 3;
  }
}
@keyframes g-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(202 181 76 / 0), 0 0 0 0 rgb(31 63 110 / 0); }
  50% { box-shadow: 0 0 0 3px rgb(202 181 76 / 1), 0 0 0 6px rgb(31 63 110 / 0.45); }
}
.pt-guide .section-sources { padding-block: var(--space-6) var(--space-7); }
.pt-guide .section-sources .source-list { font-size: 0.875rem; color: var(--ink-soft); }
.pt-guide .section-sources .source-list li { margin-bottom: var(--space-3); padding-left: var(--space-1); }
.pt-guide .section-sources .source-list li::marker { color: var(--accent); font-weight: 700; }

/* ---- Forced colours -------------------------------------------------------------- */

@media (forced-colors: active) {
  .pt-guide .guide-section > h2::before { background: CanvasText; }
  .pt-guide .guide-next { border: 1px solid CanvasText; }
  .pt-guide .guide-section .checklist-ask li::before { border: 1px solid CanvasText; }
}

/* ---- On paper --------------------------------------------------------------------- */

/* A guide is printed to be taken to a viewing or sent to an adviser: the text,
 * its tables, steps and lists, and the sources with their addresses. */
@media print {
  .pt-guide .site-header { display: none; }
  .pt-guide .site-footer { display: none; }
  .pt-guide .section-breadcrumb { display: none; }
  .pt-guide .guide-rail { display: none; }
  .pt-guide .guide-toc-nav { display: none; }
  .pt-guide .guide-hero { display: none; }
  .pt-guide .guide-jump { display: none; }
  .pt-guide .guide-next-links { display: none; }
  .pt-guide .guide-related-actions { display: none; }
  .pt-guide .section-related { display: none; }
  .pt-guide .guide-top { display: block; padding: 0; border: 0; }
  /* The top starts at the same edge as the text under it. */
  .pt-guide .guide-top .section-hero { padding: 0 0 12pt; }
  .pt-guide .guide-top .section-hero > .wrap { max-width: none; padding-inline: 0; }
  .pt-guide .article-body > .wrap.guide-read { display: block; max-width: none; padding: 0; }
  .pt-guide .guide-section { margin-top: 18pt; }
  /* A heading is never split between two sheets, nor left at the foot of one. */
  .pt-guide .guide-section > h2 { break-inside: avoid; break-after: avoid; }
  .pt-guide .guide-section > h3 { break-inside: avoid; break-after: avoid; }
  .pt-guide .guide-section > .c-table-wrap { width: auto; margin-inline: 0; }
  .pt-guide .c-step { break-inside: avoid; }
  .pt-guide .checklist li { break-inside: avoid; }
  .pt-guide .c-table tr { break-inside: avoid; }
  .pt-guide .c-figure { break-inside: avoid; }
  .pt-guide .crosslink { break-inside: avoid; background: none; }
  .pt-guide .guide-source-links { background: none; border: 1px solid #000000; }
  .pt-guide .guide-next { background: none; color: #000000; border: 1px solid #000000; }
  .pt-guide .article-body .guide-next h2 { color: #000000; }
  .pt-guide .section-sources > .wrap.guide-read { max-width: none; padding: 0; }
  .pt-guide .section-sources .source-list { color: #000000; }
  .pt-guide .source-list a::after { content: " (" attr(href) ")"; font-size: 0.85em; overflow-wrap: anywhere; }
  .pt-guide .guide-source-link a::after { content: " (" attr(href) ")"; font-size: 0.85em; overflow-wrap: anywhere; }
}

/* ==== listings.css ====================================================== */
/* listings.css (redesign). Owner: LISTINGS.
 *
 * Every selector in this file starts with .pt-listing, the class the page shell puts
 * on <body> for this lane's pages, so nothing here can reach another lane's
 * pages. tests/redesign-css-scope.test.mjs checks it. The build joins this file
 * into the one site.css a page loads, after site.css and components.css, so a
 * rule here can adjust either on this lane's own pages.
 *
 * Shared components (classes starting c- and d-) are placed and spaced here,
 * not restyled. No inline style, no @import, and no file named only here: an
 * image is an <img> or an inline SVG in the page.
 *
 * Card B06: a listing page is a fact sheet with a reading column. Three voices
 * are kept apart by shape and by a label in words, never by colour alone:
 *   - as advertised: paper, a grey quotation rule, the label "As advertised";
 *   - general guidance: LEAD's guidance callout, with its fixed label;
 *   - what to do: plain text under a small navy label.
 * Widths that change the layout are in em, so that enlarged text or page zoom
 * gets the one-column page a phone gets. Nothing here is hidden until a script
 * runs, and nothing moves unless the reader allows motion.
 */

/* ---- The fact sheet in the hero ------------------------------------------- */
.pt-listing .section-hero { padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.pt-listing .listing-hero-main { min-width: 0; }
.pt-listing .listing-hero-main .badges:last-child { margin-bottom: 0; }
/* The price, a few facts and the actions: one panel, read as one thing. */
.pt-listing .listing-sheet {
  min-width: 0; margin-top: var(--space-5); padding: var(--space-4);
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold-500);
  border-radius: 0 0 var(--radius) var(--radius);
  max-width: 34rem;
}
@media (min-width: 40em) {
  .pt-listing .listing-sheet { padding: var(--space-5); }
}
.pt-listing .listing-sheet .hero-price-block { margin: 0 0 var(--space-4); max-width: none; }
.pt-listing .listing-sheet .hero-price-block:last-child { margin-bottom: 0; }
/* The few facts: side by side under the price where the panel has the page's
   width (a phone, a tablet), each a label over its value, so that the actions
   stay near the top; one to a line when the text is enlarged. */
.pt-listing .sheet-facts {
  list-style: none; margin: 0 0 var(--space-5); padding: var(--space-3) 0 0; border-top: 1px solid var(--line-strong);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5em), 1fr)); gap: var(--space-3) var(--space-4);
}
.pt-listing .sheet-facts:last-child { margin-bottom: 0; }
.pt-listing .sheet-facts li { display: flex; flex-direction: column; margin: 0; max-width: none; min-width: 0; }
.pt-listing .sheet-fact-label { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.pt-listing .sheet-fact-value { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: var(--brand-strong); overflow-wrap: anywhere; min-width: 0; }
/* The two actions share the panel's width, and stack when it is narrow. */
.pt-listing .listing-sheet .actions .btn { flex: 1 1 13em; text-align: center; }
.pt-listing .listing-sheet .hero-notice { margin-top: var(--space-4); max-width: none; background: var(--surface); }
.pt-listing .listing-sheet > :first-child { margin-top: 0; }

@media (min-width: 60em) {
  .pt-listing .section-hero > .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    column-gap: var(--space-7); align-items: start;
  }
  .pt-listing .listing-hero-main { padding-top: var(--space-2); }
  .pt-listing .listing-sheet { margin-top: 0; max-width: none; }
  /* In the narrow panel beside the heading the facts are a short table: label left, value right. */
  .pt-listing .sheet-facts { display: block; padding-top: 0; }
  .pt-listing .sheet-facts li {
    flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--space-4);
    padding: var(--space-2) 0; border-bottom: 1px solid var(--line);
  }
  .pt-listing .sheet-fact-label { font-size: 0.8125rem; }
  .pt-listing .sheet-fact-value { text-align: right; }
  /* Beside the panel the heading has a narrower line than the page had. */
  .pt-listing .listing-hero-main .hero-title { font-size: clamp(2rem, 1.2rem + 2.1vw, 3rem); }
}

/* ---- Where to go from here (a page that takes no enquiries) ----------------- */
.pt-listing .section-onward { background: var(--canvas); border-bottom: 1px solid var(--line); }
.pt-listing .section-onward h2 { font-size: calc(var(--step-2) * var(--serif-scale)); }
.pt-listing .onward-links { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pt-listing .onward-links li { margin: 0; max-width: 100%; }
.pt-listing .onward-links a {
  display: inline-block; padding: 10px var(--space-4); max-width: 100%;
  background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--navy-700);
  font-weight: 600; text-decoration: none; overflow-wrap: break-word;
}
.pt-listing .onward-links a:hover { text-decoration: underline; background: var(--navy-100); }

/* ---- What is on the page ------------------------------------------------------ */
/* LEAD's list of contents, set across the page instead of down a rail. */
.pt-listing .listing-contents { background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--space-3) 0; }
.pt-listing .listing-contents .c-toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-5); }
.pt-listing .listing-contents .c-toc-title { margin: 0; padding: 6px 0; }
.pt-listing .listing-contents .c-toc ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); border-left: 0; min-width: 0; }
.pt-listing .listing-contents .c-toc a { margin-left: 0; padding: 6px 0; border-left: 0; border-bottom: 2px solid transparent; }
.pt-listing .listing-contents .c-toc a.is-current { border-left-color: transparent; border-bottom-color: var(--gold-600); }

/* ---- Key facts: what the structured facts do not supply -------------------------- */
.pt-listing .not-supplied {
  margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); max-width: 52rem;
  background: var(--canvas); border: 1px dashed var(--line-strong);
}
.pt-listing .not-supplied h3 { font-size: calc(var(--step-1) * var(--serif-scale) * 1.1); margin: 0 0 var(--space-3); }
.pt-listing .not-supplied ul { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.pt-listing .not-supplied li { margin: 0 0 var(--space-2); overflow-wrap: break-word; }
.pt-listing .not-supplied p { margin: 0; font-weight: 600; }

/* ---- In brief: our own summary, above the advertisement (feedback of 12 October 2026) ---- */
.pt-listing .brief-text {
  max-width: var(--measure); margin: 0 0 var(--space-3);
  padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold-600);
  font-size: 1.0625rem; overflow-wrap: break-word;
}
.pt-listing .brief-note { max-width: var(--measure); margin: 0; font-size: 0.875rem; color: var(--ink-soft); }

/* ---- The advertisement ---------------------------------------------------------------- */
/* The seller's words stand behind a quotation rule, so that they are never read as ours. */
.pt-listing .section-suitability .description { border-left: 3px solid var(--line-strong); padding-left: var(--space-4); }
.pt-listing .section-suitability .description + .description { margin-top: var(--space-4); }
.pt-listing .section-suitability .description p:last-child { margin-bottom: 0; }
/* Only the advertisement's first line is set larger, not the first line of every block. */
.pt-listing .section-suitability .description[lang] p:first-of-type,
.pt-listing .section-suitability .description ~ .description p:first-of-type { font-size: inherit; }
.pt-listing .section-suitability .description-note { font-size: 0.875rem; color: var(--ink-soft); margin: 0 0 var(--space-4); }
/* A list in the advertisement (short lines in a row) is set as one: close, and in two columns where there is room. */
.pt-listing .description-run p { margin-bottom: 0.3em; break-inside: avoid; }
.pt-listing .description-more .description + details { margin-top: var(--space-4); }
.pt-listing .section-suitability .description + .description-more { margin-top: var(--space-4); }
@media (min-width: 40em) {
  .pt-listing .description-run { columns: 2; column-gap: var(--space-6); }
}
/* What the first line is, where the advertisement is shown as one text. */
.pt-listing .ad-caption { font-size: 0.875rem; color: var(--ink-soft); margin: 0 0 var(--space-3); }

/* An advertisement set out under its own headings (feedback of 12 October 2026). The words
   are the seller's, so the whole outline stands behind the quotation rule; the labels that
   are ours are small capitals, as on the questions below. */
.pt-listing .ad-outline { max-width: var(--measure); border-left: 3px solid var(--line-strong); padding-left: var(--space-4); overflow-wrap: break-word; }
.pt-listing .ad-heading { margin: 0 0 var(--space-4); }
.pt-listing .ad-label {
  display: block; margin: 0 0 var(--space-1);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.pt-listing .ad-heading-text { font-family: var(--serif); font-size: calc(var(--step-1) * var(--serif-scale) * 1.15); font-weight: 600; color: var(--brand); }
.pt-listing .ad-group { margin: 0 0 var(--space-4); }
.pt-listing .ad-group-title {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; color: var(--brand);
}
.pt-listing .ad-group > .ad-group-title:first-child { margin-top: 0; }
.pt-listing .ad-line { margin: 0 0 var(--space-2); }
.pt-listing .ad-lines { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.pt-listing .ad-lines li { margin: 0; padding: 5px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.pt-listing .ad-lines li:last-child { border-bottom: 0; }
/* A line the advertisement ends in a colon reads as a label over what follows it. */
.pt-listing .ad-lines .ad-sub { padding-top: var(--space-3); font-weight: 700; }
.pt-listing .ad-outline details { margin: 0 0 var(--space-2); border: 1px solid var(--line); background: var(--surface); }
.pt-listing .ad-outline details > summary {
  cursor: pointer; padding: 11px 14px; min-height: 44px; font-weight: 600; font-size: 0.9375rem; color: var(--brand); overflow-wrap: anywhere;
}
.pt-listing .ad-outline details > summary:hover { background: var(--paper); }
.pt-listing .ad-outline details > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pt-listing .ad-outline details[open] > summary { border-bottom: 1px solid var(--line); }
.pt-listing .ad-outline details > .ad-lines,
.pt-listing .ad-outline details > .ad-line { margin-left: 14px; margin-right: 14px; }
.pt-listing .ad-outline details > .ad-line:first-of-type { margin-top: var(--space-3); }
.pt-listing .ad-outline + .description-more { margin-top: var(--space-5); }
@media (min-width: 40em) {
  .pt-listing .ad-lines-columns { columns: 2; column-gap: var(--space-6); }
}

/* The Afrikaans version of an advertisement that gives its content twice: a second, quieter disclosure. */
.pt-listing .description-more details > summary {
  cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 0.9375rem;
  border: 1px solid var(--line); background: var(--surface);
}
.pt-listing .description-more details > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pt-listing .description-more details[open] > summary { margin-bottom: 14px; }

/* ---- Points to ask ------------------------------------------------------------------------ */
.pt-listing .section-ask { background: var(--canvas); }
.pt-listing .ask-points { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52em) {
  .pt-listing .ask-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd point out takes the row, so that no card sits beside a gap. */
  .pt-listing .ask-point:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.pt-listing .ask-point {
  min-width: 0; padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--navy-700);
}
.pt-listing .ask-point h3 { font-size: calc(var(--step-1) * var(--serif-scale) * 1.15); margin: 0 0 var(--space-3); }
/* Which question this is, of how many. */
.pt-listing .ask-point .ask-number { margin: 0 0 var(--space-1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.pt-listing .ask-point p { margin: 0 0 var(--space-3); max-width: var(--measure); overflow-wrap: break-word; }
.pt-listing .ask-point p:last-child { margin-bottom: 0; }
/* As advertised: paper, the quotation rule, and the label in words. */
.pt-listing .ask-source { padding: var(--space-3) var(--space-4); background: var(--paper); border-left: 3px solid var(--line-strong); font-size: 0.9375rem; }
.pt-listing .tag-advertised {
  display: block; margin: 0 0 var(--space-1);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.pt-listing .ask-lead { color: var(--ink-soft); }
.pt-listing .ask-lead .ask-label { color: var(--ink-soft); }
.pt-listing .ask-label {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand);
}
.pt-listing .ask-more { padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 0.9375rem; }
.pt-listing .ask-official { font-size: 0.875rem; color: var(--ink-soft); }
.pt-listing .ask-more a,
.pt-listing .ask-official a,
.pt-listing .process-more a { padding-block: 3px; }
.pt-listing .ask-basis { margin-top: var(--space-5); font-size: 0.875rem; }
.pt-listing .ask-basis ul { margin: 0; padding-left: 1.2em; }

/* ---- How this sale works ------------------------------------------------------------------- */
.pt-listing .section-process { background: var(--surface); }
.pt-listing .section-process .c-callout { max-width: 52rem; margin-top: var(--space-4); }
.pt-listing .section-process .c-steps { margin-bottom: var(--space-5); }
.pt-listing .section-process .c-steps-title { font-size: calc(var(--step-1) * var(--serif-scale) * 1.15); }
/* Seven steps run down the page; their text keeps a readable line. */
.pt-listing .section-process .c-step > p { max-width: var(--measure); }
.pt-listing .process-more { margin: 0; font-size: 0.9375rem; }

/* ---- The checklist, in groups ---------------------------------------------------------------- */
.pt-listing .section-process + .section-pack { border-top: 1px solid var(--line); }
.pt-listing .checklist-groups { display: grid; gap: var(--space-5) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.pt-listing .checklist-groups .c-checklist { margin: 0; min-width: 0; }
.pt-listing .checklist-groups .c-checklist-title {
  font-size: calc(var(--step-1) * var(--serif-scale) * 1.05); padding-bottom: var(--space-2); border-bottom: 2px solid var(--gold-500);
}

/* ---- Guides and other properties --------------------------------------------------------------- */
.pt-listing .section-guides .guide-card { border-top: 3px solid var(--gold-500); }

/* ---- Arriving at a part of the page -------------------------------------------------------------- */
/* A place reached from the list of contents is marked for a moment by a gold rule beside its heading. */
@media (prefers-reduced-motion: no-preference) {
  .pt-listing :target > h2:first-child,
  .pt-listing :target > .wrap > h2:first-child,
  .pt-listing h2:target { animation: l-arrive 1.6s var(--ease); }
}
@keyframes l-arrive { from { box-shadow: -6px 0 0 var(--gold-500); } to { box-shadow: -6px 0 0 transparent; } }

/* What "Title" means in the specification: a line of ours under the advertised rows. */
.pt-listing .spec-note { max-width: var(--measure); margin: var(--space-3) 0 0; font-size: 0.875rem; color: var(--ink-soft); }

/* ---- Print: the fact sheet a buyer takes to an adviser --------------------------------------------- */
/* The advertisement prints whole. Where the browser lets a style sheet open a closed
   disclosure, this does; print-open.js opens them as well, for the browsers that do not.
   An unknown selector drops its whole rule, so this one stands alone. */
@media print {
  .pt-listing .section-suitability details::details-content { content-visibility: visible; display: block; }
}
@media print {
  /* Once its text is printed line by line, the outline above it would print every line twice. */
  .pt-listing .section-suitability:has(.description-more[open]) .ad-outline { display: none; }
  .pt-listing .brief-text { background: none; border: 1px solid #000; }
  .pt-listing .ad-outline details { border: 0; background: none; }
  .pt-listing .ad-lines-columns { columns: 1; }
  .pt-listing .section-breadcrumb,
  .pt-listing .listing-contents,
  .pt-listing .listing-sheet .actions,
  .pt-listing .section-guides,
  .pt-listing .section-similar,
  .pt-listing .site-footer { display: none; }
  .pt-listing .section-hero > .wrap { display: block; }
  .pt-listing .listing-sheet { margin-top: 12px; max-width: none; background: none; border: 1px solid #000; }
  .pt-listing .ask-points { display: block; }
  .pt-listing .ask-point { margin: 0 0 12px; border: 1px solid #000; break-inside: avoid; }
  .pt-listing .ask-source, .pt-listing .not-supplied { background: none; }
  .pt-listing .section-ask, .pt-listing .section-process, .pt-listing .section-pack { break-inside: auto; }
  .pt-listing .c-step, .pt-listing .checklist-groups .c-checklist { break-inside: avoid; }
  /* A link's address is of use on paper only where it leads off the page. */
  .pt-listing .ask-official a::after { content: " (" attr(href) ")"; overflow-wrap: anywhere; }
}

/* ==== hubs.css ========================================================== */
/* hubs.css (redesign). Owner: HUBS.
 *
 * Every selector in this file starts with .pt-hub or .pt-library, the class the page shell puts
 * on <body> for this lane's pages, so nothing here can reach another lane's
 * pages. tests/redesign-css-scope.test.mjs checks it. The build joins this file
 * into the one site.css a page loads, after site.css and components.css, so a
 * rule here can adjust either on this lane's own pages.
 *
 * Shared components (classes starting c- and d-) are placed and spaced here,
 * not restyled. No inline style, no @import, and no file named only here: an
 * image is an <img> or an inline SVG in the page.
 *
 * Redesign B07. The five property hubs (.pt-hub) and the guide library
 * (.pt-library). Written for a phone first; each wider layout is added at the
 * width where it has room. Gold is a rule or a marker here, never a text
 * colour. Nothing is hidden, clipped or given a fixed height, and the only
 * motion is inside prefers-reduced-motion: no-preference.
 */

/* ---- The count beside a name -------------------------------------------------
 * "Farms 14": how many are in a group, said in words to a screen reader by the
 * hidden text the markup carries. */
.pt-hub .hub-count, .pt-library .hub-count {
  display: inline-block; margin-left: 6px; padding: 3px 9px; vertical-align: middle;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0;
  color: var(--brand-strong); background: var(--navy-100); border-radius: 999px;
}

/* ---- The hero ------------------------------------------------------------------ */
.pt-hub .section-hero, .pt-library .section-hero { padding: var(--space-6) 0 var(--space-6); border-bottom: 1px solid var(--line); }
.pt-hub .hub-hero, .pt-library .library-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.pt-hub .hub-hero-text, .pt-hub .hub-hero-aside, .pt-library .library-hero-text, .pt-library .library-hero-aside { min-width: 0; }
/* The one ornament: a short gold rule above the page's heading. */
.pt-hub .hub-hero-text > .hero-title::before, .pt-library .library-hero-text > .hero-title::before {
  content: ""; display: block; width: 56px; height: 3px; margin: 0 0 var(--space-4); background: var(--gold-500);
}
.pt-hub .hub-hero-text > .prose, .pt-library .library-hero-text > .prose { margin: 0 0 var(--space-3); }
.pt-hub .hub-hero-text > .hero-title + .prose, .pt-library .library-hero-text > .hero-title + .prose { font-size: var(--step-1); line-height: 1.55; }
.pt-hub .hub-hero-text > .prose:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .pt-hub .section-hero, .pt-library .section-hero { padding: var(--space-7) 0; }
  .pt-hub .hub-hero-split, .pt-library .library-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
  .pt-hub .hub-hero-split:has(.hub-glance) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* The main hub: four ways in, each a whole tile to press. */
.pt-hub .hub-entries ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.pt-hub .hub-entries li {
  position: relative; max-width: none; margin: 0; padding: var(--space-4); min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold-500); border-radius: 0 0 var(--radius) var(--radius);
}
.pt-hub .hub-entries a {
  display: inline-block; max-width: 100%; padding-block: 3px;
  font-family: var(--serif); font-weight: 700; font-size: calc(var(--step-2) * var(--serif-scale)); line-height: 1.15; color: var(--brand-strong); text-decoration: none; overflow-wrap: break-word;
}
/* The link covers its tile, so the tile is the target; the sentence under it stays readable text. */
.pt-hub .hub-entries a::after { content: ""; position: absolute; inset: 0; }
/* What the tile does under the pointer and the keyboard is the shared answer of every card that is a
 * link (site.css, "Cards that are links"); this tile was its model. */
.pt-hub .hub-entries li:hover a { text-decoration: underline; }
.pt-hub .hub-entries p { margin: var(--space-1) 0 0; max-width: none; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }

/* The farm hub: three counts at a glance. */
.pt-hub .hub-glance { margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); }
.pt-hub .hub-glance > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; padding: var(--space-4); background: var(--navy-100); border-top: 3px solid var(--navy-700); border-radius: 0 0 var(--radius) var(--radius); }
.pt-hub .hub-glance dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.35; color: var(--ink); overflow-wrap: break-word; }
.pt-hub .hub-glance dd { margin: 0 0 var(--space-1); font-family: var(--sans); font-weight: 600; font-size: var(--step-4); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; color: var(--brand-strong); }

/* Homes and commercial: jump to a town or a kind. */
.pt-hub .hub-jump { padding: var(--space-4) var(--space-5) var(--space-5); background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold-500); border-radius: 0 0 var(--radius) var(--radius); }
.pt-hub .hub-jump-title, .pt-library .library-start-title, .pt-library .library-stages-title {
  margin: 0 0 var(--space-3); max-width: none; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.pt-hub .hub-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pt-hub .hub-jump li { max-width: 100%; margin: 0; }
.pt-hub .hub-jump a {
  display: inline-flex; align-items: center; flex-wrap: wrap; max-width: 100%; min-height: 44px; padding: 6px 8px 6px 14px;
  font-size: 0.9375rem; font-weight: 600; color: var(--brand-strong); text-decoration: none; overflow-wrap: anywhere;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
}
.pt-hub .hub-jump a:hover { border-color: var(--brand); text-decoration: underline; }

/* ---- The main hub: how an enquiry works ------------------------------------------ */
.pt-hub .hub-steps { padding: var(--space-6) 0; }
.pt-hub .hub-steps .c-section-head { margin-bottom: var(--space-4); }
.pt-hub .hub-steps .c-steps { margin: 0 0 var(--space-5); }
/* At twice the text size on a narrow phone a long word in a step breaks, and the page stays its width. */
.pt-hub .hub-steps .c-step > p { overflow-wrap: anywhere; }
.pt-hub .hub-steps-note { margin: 0 0 var(--space-2); font-size: 0.9375rem; color: var(--ink-soft); }
.pt-hub .hub-library { margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface); border-left: 3px solid var(--gold-500); }

/* ---- The main hub: the confidential band ----------------------------------------- */
/* Navy, so it cannot be read as one more group of the properties below it. */
.pt-hub #investment-opportunities { padding: var(--space-6) 0; background: var(--navy-900); border-top: 3px solid var(--gold-500); color: #dce4ef; }
.pt-hub #investment-opportunities > .wrap > h2 { margin: 0 0 var(--space-3); color: var(--brand-on); }
.pt-hub #investment-opportunities .section-lede { margin: 0 0 var(--space-5); color: #dce4ef; }
.pt-hub #investment-opportunities .hub-apart { display: block; margin-top: var(--space-2); font-weight: 600; color: var(--brand-on); }
.pt-hub #investment-opportunities .listing-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pt-hub #investment-opportunities .listing-card { border-color: transparent; border-radius: var(--radius); }
.pt-hub #investment-opportunities .listing-card .meta { margin-top: 0; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
/* On navy a card's glow is the light one, and the row's two buttons and its position are drawn in white. */
.pt-hub #investment-opportunities { --card-glow: var(--glow-on-navy); --c-row-edge: #dce4ef; --c-row-surface: transparent; --c-row-ink: #ffffff; --c-row-surface-hover: var(--navy-700); }
.pt-hub #investment-opportunities .c-row-btn:focus-visible { outline-color: #ffffff; }
@media (max-width: 619.98px) {
  /* The band's two cards are a row to move through on a phone, like every other group of cards. */
  .pt-hub #investment-opportunities .c-row > .listing-grid { grid-template-columns: none; }
}
@media (min-width: 900px) {
  .pt-hub #investment-opportunities { padding: var(--space-7) 0; }
  .pt-hub #investment-opportunities > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: var(--space-7); align-items: start; align-content: start; }
  .pt-hub #investment-opportunities > .wrap > h2, .pt-hub #investment-opportunities .section-lede { grid-column: 1; }
  .pt-hub #investment-opportunities .section-lede { margin-bottom: 0; }
  .pt-hub #investment-opportunities .listing-grid { grid-column: 2; grid-row: 1 / span 2; }
  .pt-hub #investment-opportunities .c-row { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- The properties, in groups ----------------------------------------------------- */
.pt-hub .hub-listings { padding: var(--space-6) 0 var(--space-7); }
.pt-hub .hub-group { scroll-margin-top: 96px; }
.pt-hub .hub-group + .hub-group { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line-strong); }
.pt-hub .hub-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-5); margin: 0 0 var(--space-4); padding-left: var(--space-3); border-left: 3px solid var(--gold-500); }
.pt-hub .hub-group-head h2 { margin: 0; min-width: 0; }
.pt-hub .hub-group-more { margin: 0; max-width: none; font-size: 0.9375rem; font-weight: 600; }
/* Feedback item 3: the way to a category's own page is a button, a size down from the page's main ones. */
.pt-hub .hub-group-more .btn { min-height: 44px; padding: 8px 16px; font-size: 0.9375rem; }
.pt-hub .hub-group-lede { margin: 0 0 var(--space-4); color: var(--ink-soft); }
.pt-hub .hub-listings > .wrap > .article-meta { margin: var(--space-6) 0 0; }
/* Arrived at from a link to this group: its heading's rule is navy until the reader moves on. */
.pt-hub .hub-group:target > .hub-group-head { border-left-color: var(--navy-700); }
@media (prefers-reduced-motion: no-preference) {
  .pt-hub .hub-group:target > .hub-group-head { animation: h-arrived 1.2s var(--ease); }
  .pt-hub .hub-jump a { transition: border-color var(--dur-1) var(--ease); }
}
@keyframes h-arrived { from { background-color: var(--gold-100); } to { background-color: transparent; } }

/* The farm hub's tender group: the guide and what a tender is, in short. */
.pt-hub .hub-tender { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold-500); }
.pt-hub .hub-group-guide { margin: 0; max-width: none; font-weight: 600; }
/* A link inside a sentence keeps its line and is given a taller place to press. */
.pt-hub .hub-group-guide a, .pt-hub .hub-library a, .pt-library .library-family-line a { padding-block: 11px; }
.pt-hub .hub-tender .c-table-wrap { margin: var(--space-4) 0 0; }
@media (min-width: 720px) { .pt-hub .hub-tender { padding: var(--space-5) var(--space-6) var(--space-6); } }

/* ---- Guides for this kind of buyer ---------------------------------------------------- */
.pt-hub .hub-guides { padding: var(--space-7) 0; background: var(--surface); border-top: 1px solid var(--line); }
.pt-hub .hub-guides .c-section-head { max-width: var(--measure); }
.pt-hub .hub-guides > .wrap > .article-meta { margin: var(--space-5) 0 0; }
.pt-hub .hub-guides .guide-card, .pt-library .guide-family .guide-card { background: var(--paper); }
/* Four cards sit two by two, then four in a row, rather than three and one. */
@media (min-width: 720px) {
  .pt-hub .hub-guides .card-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))), .pt-library .guide-family .card-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(12.5rem, (100% - 16px) / 2 - 1px)), 1fr));
  }
}
@media (min-width: 1040px) {
  .pt-hub .hub-guides .card-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))), .pt-library .guide-family .card-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(12.5rem, (100% - 48px) / 4 - 1px)), 1fr));
  }
}

/* The commercial hub: the way to the confidential opportunities. */
.pt-hub .hub-pointer { padding: 0 0 var(--space-7); background: var(--surface); }
.pt-hub .hub-pointer .c-cta { margin: 0; }
.pt-hub .hub-pointer .c-cta-actions li { min-width: 0; max-width: 100%; }
.pt-hub .hub-pointer .c-cta .btn, .pt-hub .hub-pointer .c-cta > p { max-width: 100%; overflow-wrap: anywhere; }

/* ---- The guide library ------------------------------------------------------------------ */
.pt-library .library-stages { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-4) var(--space-3); max-width: var(--measure); background: var(--paper); border: 1px solid var(--line); }
.pt-library .library-stages dl { margin: 0; display: grid; gap: 0; }
.pt-library .library-stages dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.pt-library .library-stages dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6; color: var(--accent); }
.pt-library .library-stages dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); }
@media (min-width: 480px) { .pt-library .library-stages dl > div { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); align-items: baseline; } }
.pt-library .library-pictures { margin: var(--space-3) 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.pt-library .library-hero-text > .claim-note { margin: var(--space-4) 0 0; max-width: var(--measure); }

/* "Start here": one entry for each family. The shared pill rules are undone for these entries. */
/* Feedback item 3: each entry is a tile to press, the same tile as the main hub's four ways in, and
 * answers the pointer and the keyboard as every card that is a link does (site.css). */
.pt-library .guide-topics ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: var(--space-3); margin: 0; }
.pt-library .guide-topics li {
  position: relative; max-width: none; margin: 0; padding: var(--space-4); min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold-500); border-radius: 0 0 var(--radius) var(--radius);
}
.pt-library .guide-topics a {
  display: inline-block; max-width: 100%; padding: 3px 0; border: 0; border-radius: 0; background: none;
  font-family: var(--serif); font-weight: 700; font-size: calc(var(--step-1) * var(--serif-scale) * 1.1); line-height: 1.2; color: var(--brand-strong); text-decoration: none;
}
.pt-library .guide-topics a::after { content: ""; position: absolute; inset: 0; }
.pt-library .guide-topics a:hover { background: none; text-decoration: underline; }
.pt-library .guide-topics li:hover a { text-decoration: underline; }
.pt-library .guide-topics li p { margin: 2px 0 0; max-width: none; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }

/* Each family: its heading, one sentence and the way back to its properties. */
.pt-library .guide-family { padding: var(--space-6) 0 var(--space-7); scroll-margin-top: 96px; }
.pt-library .library-family-head { margin: 0 0 var(--space-5); padding-left: var(--space-3); border-left: 3px solid var(--gold-500); }
.pt-library .library-family-head h2 { margin: 0; }
.pt-library .library-family-line { margin: var(--space-1) 0 0; color: var(--ink-soft); }
.pt-library .library-family-line a { font-weight: 600; white-space: normal; }
.pt-library .guide-family:target .library-family-head { border-left-color: var(--navy-700); }
@media (prefers-reduced-motion: no-preference) {
  .pt-library .guide-family:target .library-family-head { animation: h-arrived 1.2s var(--ease); }
}

@media print {
  .pt-hub #investment-opportunities { background: none; color: inherit; border: 1px solid #000; }
  .pt-hub #investment-opportunities > .wrap > h2, .pt-hub #investment-opportunities .section-lede, .pt-hub #investment-opportunities .hub-apart { color: inherit; }
  .pt-hub .hub-jump, .pt-hub .hub-entries, .pt-library .guide-topics { border: 0; padding: 0; background: none; }
}

/* ==== teasers.css ======================================================= */
/* teasers.css (redesign). Owner: HUBS.
 *
 * Every selector in this file starts with .pt-teaser, the class the page shell puts
 * on <body> for this lane's pages, so nothing here can reach another lane's
 * pages. tests/redesign-css-scope.test.mjs checks it. The build joins this file
 * into the one site.css a page loads, after site.css and components.css, so a
 * rule here can adjust either on this lane's own pages.
 *
 * Shared components (classes starting c- and d-) are placed and spaced here,
 * not restyled. No inline style, no @import, and no file named only here: an
 * image is an <img> or an inline SVG in the page.
 *
 * Redesign B07. The confidential teasers (.pt-teaser). Written for a phone
 * first. The page has no picture and gains none here: its one visual is the
 * card made of words the template already draws. Nothing is hidden, clipped or
 * given a fixed height, the form is not touched, and the only motion is inside
 * prefers-reduced-motion: no-preference.
 */

/* ---- The hero: what is offered, beside its card of words ------------------------ */
.pt-teaser .section-hero { padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
.pt-teaser .teaser-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.pt-teaser .teaser-hero-text, .pt-teaser .teaser-hero-aside { min-width: 0; }
.pt-teaser .teaser-hero-text::before { content: ""; display: block; width: 56px; height: 3px; margin: 0 0 var(--space-4); background: var(--gold-500); }
.pt-teaser .teaser-hero-text > .hero-eyebrow { line-height: 1.7; }
.pt-teaser .teaser-hero-text > .prose { margin: 0 0 var(--space-4); font-size: var(--step-1); line-height: 1.55; }
.pt-teaser .teaser-hero-text > .actions { margin: 0; }
/* At twice the text size on a narrow phone the longer button keeps to the column. */
.pt-teaser .teaser-hero-text > .actions > .btn { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.pt-teaser .teaser-hero-aside .inv-card-face { border-top: 3px solid var(--gold-500); }
@media (min-width: 900px) {
  .pt-teaser .section-hero { padding: var(--space-7) 0; }
  .pt-teaser .teaser-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
  .pt-teaser .teaser-hero-aside .inv-card { max-width: none; }
}

/* ---- On this page: a strip under the hero, in the page's own order ---------------- */
.pt-teaser .teaser-places { padding: var(--space-3) 0 var(--space-2); background: var(--surface); border-bottom: 1px solid var(--line); }
.pt-teaser .teaser-places .c-toc-title { margin: 0 0 var(--space-1); }
.pt-teaser .teaser-places .c-toc ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); border-left: 0; }
.pt-teaser .teaser-places .c-toc a { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 4px 0; border-left: 0; border-bottom: 2px solid transparent; font-weight: 600; color: var(--brand-strong); }
.pt-teaser .teaser-places .c-toc a.is-current { border-bottom-color: var(--gold-600); }

/* ---- What is reported, and what is still to be confirmed --------------------------- */
.pt-teaser .teaser-reported { padding: var(--space-6) 0 var(--space-7); }
.pt-teaser .teaser-reported > .wrap > h2 { margin-bottom: var(--space-4); }
.pt-teaser .teaser-reported .claim-note { max-width: var(--measure); }
/* Each fact is a row: its name, then what is reported with its qualification. */
.pt-teaser .teaser-reported .facts { grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--navy-700); }
.pt-teaser .teaser-reported .facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--space-5); padding: var(--space-3) 0; }
.pt-teaser .teaser-reported .facts dt { font-weight: 700; color: var(--ink); line-height: 1.5; }
.pt-teaser .teaser-reported .facts dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
@media (min-width: 560px) {
  .pt-teaser .teaser-reported .facts > div { grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); align-items: baseline; }
}
.pt-teaser .teaser-confirm { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-4) var(--space-4); min-width: 0; background: var(--gold-100); border-top: 3px solid var(--gold-500); border-radius: 0 0 var(--radius) var(--radius); }
.pt-teaser .teaser-confirm .c-checklist { margin: 0; }
.pt-teaser .teaser-confirm .c-checklist-title { font-size: calc(var(--step-1) * var(--serif-scale)); }
.pt-teaser .teaser-confirm-note { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line-strong); font-size: 0.9375rem; color: var(--ink); }
@media (min-width: 900px) {
  .pt-teaser .teaser-reported > .wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: var(--space-7); align-items: start; }
  .pt-teaser .teaser-reported > .wrap > * { grid-column: 1 / -1; }
  .pt-teaser .teaser-reported > .wrap > .facts { grid-column: 1; }
  .pt-teaser .teaser-reported > .wrap > .teaser-confirm { grid-column: 2; margin-top: 0; padding: var(--space-5); }
}

/* ---- Questions investors usually ask ------------------------------------------------- */
.pt-teaser .teaser-questions { padding: var(--space-7) 0; background: var(--navy-100); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pt-teaser .teaser-questions .c-section-head { max-width: var(--measure); }
.pt-teaser .teaser-question-groups { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.pt-teaser .teaser-question-groups .c-checklist { margin: 0; min-width: 0; padding: var(--space-4) var(--space-4) var(--space-3); background: var(--surface); border-top: 3px solid var(--navy-700); border-radius: 0 0 var(--radius) var(--radius); }
.pt-teaser .teaser-question-groups .c-checklist-title { font-size: calc(var(--step-1) * var(--serif-scale)); }
@media (min-width: 720px) { .pt-teaser .teaser-question-groups .c-checklist { padding: var(--space-5) var(--space-5) var(--space-4); } }

/* ---- How the information is released: who acts, step by step ---------------------- */
.pt-teaser .teaser-release { padding: var(--space-7) 0; }
/* Narrower than the width at which steps run across, so both lengths of the list read downwards. */
.pt-teaser .teaser-release .c-steps { max-width: 44rem; margin: var(--space-5) 0; }
/* At twice the text size on a narrow phone a long word in a step breaks, and the page stays its width. */
.pt-teaser .teaser-release .c-step > p { overflow-wrap: anywhere; }
.pt-teaser .teaser-release-line { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); max-width: 44rem; font-weight: 600; color: var(--brand-strong); background: var(--navy-100); border-left: 4px solid var(--navy-700); }
.pt-teaser .teaser-release .claim-note { max-width: 44rem; margin-bottom: 0; }

/* ---- Words this page uses, and its two official sources ----------------------------- */
.pt-teaser .teaser-words { padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.pt-teaser .teaser-words .c-section-head { max-width: var(--measure); }
.pt-teaser .teaser-words .c-definitions { margin: 0; }
@media (min-width: 720px) { .pt-teaser .teaser-words .c-definitions-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); } }
.pt-teaser .teaser-sources { margin: var(--space-6) 0 0; padding: var(--space-4); max-width: 46rem; background: var(--surface); border: 1px solid var(--line); }
.pt-teaser .teaser-sources h3 { margin: 0 0 var(--space-2); font-size: calc(var(--step-1) * var(--serif-scale)); }
.pt-teaser .teaser-sources p { margin: 0 0 var(--space-3); font-size: 0.9375rem; color: var(--ink-soft); }
.pt-teaser .teaser-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pt-teaser .teaser-sources li { margin: 0; max-width: none; padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.6; overflow-wrap: break-word; }
.pt-teaser .teaser-sources a { display: inline-block; max-width: 100%; padding-block: 10px; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 720px) { .pt-teaser .teaser-sources { padding: var(--space-5); } }

/* ---- Guides: words only, no picture --------------------------------------------------- */
.pt-teaser .teaser-guides { padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.pt-teaser .teaser-guides .guide-card { background: var(--paper); border-top: 3px solid var(--gold-500); }

@media print {
  .pt-teaser .teaser-places { display: none; }
  .pt-teaser .teaser-questions, .pt-teaser .teaser-confirm, .pt-teaser .teaser-release-line { background: none; }
  .pt-teaser .teaser-question-groups .c-checklist, .pt-teaser .teaser-confirm { border: 1px solid #000; }
}