/* India Architecture Awards: the site's one stylesheet (2 November 2026). header.php links it on every page.
   In order: tokens and dark mode, the shared parts (base, header, footer, menus, sections, components), then the homepage, the text
   pages (Terms, Privacy, Code of conduct, Refunds, Cookie settings, About, Contact), the FAQ and Register. The few rules for one page
   only start with that page's class on <html>, such as html.page-faq. Every page links this file with its date in the address, so
   browsers fetch it again after a change. */
/* Design system: a gallery wall. Warm grey canvas, white cards, ink text, one typeface (Inter Tight) and very large light headlines.
   The interface is achromatic; the photographs carry the colour. Ember is the brand and live status: the star, "India", the section
   titles Joy marks, and the Ongoing and days-left chips, with a darker Ember for small orange text. Practice-size and fee cards take
   their tier's colour: Sage (Boutique), Sand (Mid-sized) and Blue (Enterprise).
   Flat throughout: no shadows, no gradients outside the photo scrim. Radii are 4 (badges), 8 (cards, buttons, images) and 14 (featured blocks).
   The three firm-size tiers always share one style, so no tier ever looks ranked above another. */
:root {
  /* Colour */
  --page: #E9E9E9;           /* Canvas */
  --card: #FFFFFF;           /* Paper */
  --ink: #222222;            /* Ink: text */
  --ink-2: #4D4D4D;          /* Graphite: secondary text */
  --ink-3: #808080;          /* Smoke: icons, placeholders and large light lines only (under 4.5:1) */
  --ink-nav: #696969;        /* Slate: section menu links for sections not in view (4.5:1 on the canvas) */
  --line: #B8B8B8;           /* Ash: dividers and outlines on the canvas */
  --line-soft: #DEDEDE;      /* Fog: dividers inside white cards */
  --accent: #FA5D29;         /* Ember: the days-left and Ongoing chips and the logo star */
  --accent-text: #B93A0E;  /* Ember for small text: 4.7:1 on the canvas */
  --on-accent: #222222;
  --btn-bg: #2D2F3B;         /* filled buttons */
  --btn-fg: #FFFFFF;
  --inv-bg: #2D2F3B;         /* dark cards: What winners receive and the closing block */
  --tier-1: #DCE5D6;         /* Sage: Boutique Practice card */
  --tier-1-chip: #C6D3BE;
  --tier-2: #F1EADB;  /* Sand: Mid-sized Practice */
  --tier-2-chip: #E3D6B8;
  --tier-3: #D8E3EF;         /* Blue: Enterprise Practice card */
  --tier-3-chip: #BFD0E3;
  --portrait-bg: #DEDEDE;
  --portrait-fg: #CCCCCC;
  --on-photo: #FFFFFF;       /* text over photographs, both themes */
  --scrim: 18 18 18;         /* overlay on photographs, as rgb channels */
  /* Type */
  --font: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Type scale: edit a size here and every element that uses it follows */
  --fs-display: clamp(1.5rem, 2.9vw, 2.55rem);                         /* hero title, and the line under the name */
  --fs-name: clamp(3rem, 1rem + 6.6vw, 7.5rem);                      /* "India Architecture Awards" name line */
  --fs-h2: clamp(2.5rem, 2rem + 1.2vw, 3rem);  /* 40 to 48: section headings */
  --fs-figure: clamp(2.5rem, 1.6rem + 2.4vw, 4rem);  /* 40 to 64: practice sizes */
  --fs-group: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);  /* 28 to 40: category groups and the four criteria */
  --fs-menu: 1.75rem;
  --fs-h3: 1.25rem;
  --fs-acc: 1.25rem;
  --fs-lead: clamp(1rem, .9rem + .4vw, 1.25rem);  /* 16 to 20 */
  --fs-brand: 1rem;
  --fs-body: 1rem;                                                   /* body text */
  --fs-text: 1rem;
  --fs-small: .875rem;                                               /* buttons, menu, hero lines, notes */
  --fs-legal: .75rem;
  --fs-label: .75rem;                                                /* labels, badges, numbers, photo credits */
  /* Layout */
  --max: 1440px;
  --gutter: clamp(16px, 3vw, 40px);
  --edge: clamp(8px, 1.4vw, 20px);      /* margin around full-bleed images */
  --section: clamp(72px, 6vw, 96px);
  --header-h: 64px;
  --subnav-h: 48px;          /* the homepage section menu and the FAQ section menu */
  --btn-sm-h: 36px;                                         /* the header Enter button */
  --header-btn-gap: calc((var(--header-h) - var(--btn-sm-h)) / 2);  /* space under that button, reused under the hero on laptops */
  --r-badge: 4px;
  --r: 8px;
  --r-feature: 14px;
  --fs-sub: 1.75rem;  /* 28: sub-headings inside a section */
  --accent-name: #E04A1A;  /* Ember for "India" set large: 3.3:1 on the canvas */
  --hero-bg: #2D2F3B;
  --on-photo-2: #D6D6D6;  /* the hero's quieter lines */
  --plate-bg: #FFFFFF;  /* the winner's credit, certificate and post */
  --plate-ink: #222222;
  --plate-muted: #6B6B6B;
}
/* Dark mode (a phone or laptop set to dark): built on the same #2D2F3B as the dark cards and buttons (Joy, 14 October 2026).
   The dark cards go a step darker so they still read as cards. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #2D2F3B; --card: #373A47; --ink: #EDEDED; --ink-2: #BFC1CA; --ink-3: #8E91A0; --ink-nav: #A5A8B4;
    --line: #4C4F5E; --line-soft: #41444F; --btn-bg: #EDEDED; --btn-fg: #2D2F3B; --inv-bg: #22242E;
    --portrait-bg: #373A47; --portrait-fg: #444857; --tier-1: #343F3B; --tier-1-chip: #405048; --tier-3: #313B4C; --tier-3-chip: #3D4A5F;
    --accent-text: #FF7448; --accent-name: #FF7448; --tier-2: #403D36; --tier-2-chip: #565044; --hero-bg: #22242E; --plate-bg: #373A47; --plate-ink: #EDEDED; --plate-muted: #BFC1CA;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #2D2F3B; --card: #373A47; --ink: #EDEDED; --ink-2: #BFC1CA; --ink-3: #8E91A0; --ink-nav: #A5A8B4;
  --line: #4C4F5E; --line-soft: #41444F; --btn-bg: #EDEDED; --btn-fg: #2D2F3B; --inv-bg: #22242E;
  --portrait-bg: #373A47; --portrait-fg: #444857; --tier-1: #343F3B; --tier-1-chip: #405048; --tier-3: #313B4C; --tier-3-chip: #3D4A5F;
  --accent-text: #FF7448; --accent-name: #FF7448; --tier-2: #403D36; --tier-2-chip: #565044; --hero-bg: #22242E; --plate-bg: #373A47; --plate-ink: #EDEDED; --plate-muted: #BFC1CA;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-photo :focus-visible { outline-color: var(--on-photo); }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip {
  position: absolute; left: 16px; top: -120px; z-index: 100;
  background: var(--btn-bg); color: var(--btn-fg);
  padding: 10px 16px; border-radius: var(--r);
  font-size: var(--fs-small); font-weight: 500; text-decoration: none;
}
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Type: one family; hierarchy comes from size. Large type is light (300) with tight line-height. */
.eyebrow { font-size: var(--fs-label); line-height: 1.5; font-weight: 500; }
.muted { color: var(--ink-2); }
.display {
  font-weight: 300;
  font-size: var(--fs-display); line-height: .93;
  letter-spacing: -.02em; text-wrap: balance;
}
.h2 {
  font-weight: 300;
  font-size: var(--fs-h2); line-height: 1;
  letter-spacing: -.015em; text-wrap: balance;
}
.h3 { font-size: var(--fs-h3); line-height: 1.36; font-weight: 400; text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 400; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.5; }

/* Sections: separated by space and type size, not by coloured bands */
.section { padding-block: var(--section); }
.section-head { display: grid; gap: 20px; max-width: 60rem; margin-bottom: clamp(32px, 4vw, 52px); }
.more { margin-top: 32px; }
.section--follow { padding-top: 0; }
.panel { border-radius: var(--r-feature); padding: clamp(24px, 5vw, 72px); }
.panel-inverse {
  --ink: #F2F2F2; --ink-2: #BDBDBD; --line: #4D4D4D; --btn-bg: #F2F2F2; --btn-fg: #222222;
  background: var(--inv-bg); color: var(--ink);
}
.panel-inverse .btn-primary:hover { background: #BDBDBD; }
.panel-inverse .btn-outline:hover { color: #222222; }
.panel-inverse :focus-visible { outline-color: #F2F2F2; }

/* Buttons: filled and outlined are a matched pair, same size and 8px radius */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--r);
  font-size: var(--fs-small); font-weight: 500; line-height: 1.29;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-sm { min-height: var(--btn-sm-h); padding: 8px 16px; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--ink-2); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--page); }
.btn-light { background: var(--on-photo); color: #222222; }
.btn-light:hover { background: #DEDEDE; }
.btn-outline-light { background: transparent; color: var(--on-photo); border-color: var(--on-photo); }
.btn-outline-light:hover { background: var(--on-photo); color: #222222; }
.btn-ghost-light { background: transparent; color: var(--on-photo); padding-inline: 2px; }
.btn-ghost { background: transparent; color: var(--ink); padding-inline: 2px; }
.btn-ghost:hover { text-decoration: underline; text-underline-offset: .25em; }
.btn-ghost-light:hover { text-decoration: underline; text-underline-offset: .25em; }
/* Secondary links (Read the entry guide, Learn More, Meet the jury, Become a partner): text and an arrow, underlined on hover */
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: var(--fs-small); font-weight: 500; text-decoration: none; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.link:hover { text-decoration-line: underline; }
.arrow { display: inline-block; transition: transform .2s ease; }
.link:hover .arrow, .btn:hover .arrow { transform: translateX(3px); }
.badge {
  display: inline-flex; align-items: center; justify-self: start;
  min-height: 24px; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: var(--r-badge);
  font-size: var(--fs-label); font-weight: 500; line-height: 1.5; white-space: nowrap;
}

/* Header: flat on the canvas, no border, no shadow */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  height: var(--header-h);
  background: var(--page); color: var(--ink);
}
.site-header > .wrap { height: 100%; display: flex; align-items: center; gap: 16px; }
/* A 1px strip of the canvas under the header. At a zoom or scale between whole pixels, the slider's bottom edge would otherwise
   blend into the header's last pixel row and show as a hairline once the page turns to the name card (Joy, 14 October 2026). */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1px; background: var(--page); pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; color: inherit; text-decoration: none; }
.brand-mark { width: 24px; height: 24px; flex: none; fill: var(--accent); }  /* Joy's logo star, header and phone menu only */
.brand-name { font-size: var(--fs-brand); font-weight: 400; line-height: 1.1; }
.brand-name-rest { white-space: nowrap; }
/* Phones: the header and menu name reads India / Architecture Awards; the footer name stays on one line */
@media (max-width: 767px) {
  .site-header .brand-name, .mm-top .brand-name { font-size: var(--fs-small); }
}
@media (max-width: 480px) {
  .brand-name { font-size: var(--fs-body); }
  .site-header .brand-name, .mm-top .brand-name { font-size: var(--fs-small); }
  .brand-name-rest { display: block; }
  .footer-brand .brand-name { white-space: nowrap; }
}
.nav { display: none; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-flex; align-items: center; padding: 8px 12px;
  font-size: var(--fs-small); font-weight: 400; line-height: 1.29; color: var(--ink); text-decoration: none; white-space: nowrap;
  border-radius: var(--r);
}
.nav-link:hover { text-decoration: underline; text-underline-offset: .35em; }
.nav-drop { position: relative; }
.nav-drop-btn { gap: 6px; border: 0; background: none; font-family: inherit; cursor: pointer; }
.nav-drop-btn svg { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: grid; min-width: 220px; padding: 8px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r);
}
.nav-drop-list[hidden] { display: none; }
.nav-drop-list::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }  /* keeps hover alive across the gap */
.nav-drop-list a {
  display: block; padding: 10px 12px; border-radius: var(--r-badge);
  font-size: var(--fs-small); font-weight: 400; line-height: 1.29; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav-drop-list a:hover { background: var(--page); }
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.menu-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--r);
  background: transparent; color: inherit; cursor: pointer;
}
.menu-btn svg { width: 18px; height: 18px; }
@media (min-width: 1200px) { .nav { display: block; } .site-header .menu-btn { display: none; } }

/* Section menus (Joy, 14 October 2026). Homepage: its sections sit in the header on laptops and along the bottom of the screen below
   1200 px. FAQ: a second menu under the header on laptops, along the bottom below 1200 px. Plain text, not buttons:
   Slate, and the section in view in Ink with an underline. */
.subnav-list {
  display: flex; align-items: center; gap: 28px; min-height: var(--subnav-h);
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.subnav-list::-webkit-scrollbar { display: none; }
.subnav-link {
  display: inline-flex; align-items: center; flex: none; min-height: 32px;
  color: var(--ink-nav); font-size: var(--fs-small); font-weight: 400; line-height: 1.29; text-decoration: none; white-space: nowrap;
  transition: color .2s ease;
}
.nav-link.section-link { color: var(--ink-nav); transition: color .2s ease; }
.nav-link.section-link:not([aria-current="true"]):hover { text-decoration: none; }
@media (hover: hover) { .subnav-link:hover, .nav-link.section-link:hover { color: var(--ink); } }  /* a tap on a phone would leave its link dark */
.subnav-link[aria-current="true"], .nav-link.section-link[aria-current="true"] {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em;
}
/* Below 1200 px, where the header shows the menu icon, a section menu docks to the foot of the screen */
@media (max-width: 1199px) {
  .menu-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--page); border-top: 1px solid var(--line);
    transform: translateY(100%); visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .menu-dock.is-shown { transform: none; visibility: visible; transition: transform .3s ease; }
  .menu-dock .subnav-list { gap: 24px; }
  html:has(#section-nav) .site-footer { padding-bottom: calc(32px + var(--subnav-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1200px) { .section-nav { display: none; } }

/* Hero: full-bleed photographs (minus a thin margin), type set directly on the image */
.hero { padding-inline: var(--edge); }
.hero-frame { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); background: #2D2F3B; color: var(--on-photo); }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.slide.is-active { opacity: 1; }
.slide picture, .slide img { display: block; width: 100%; height: 100%; }
.slide img { object-fit: cover; }
.slide img[src=""] { visibility: hidden; }  /* no link yet: the slide stays blank */
.slide:has(img[src=""])::after { display: none; }  /* and with no photograph to darken, the frame shows its own #2D2F3B */
.slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--scrim) / .8) 0%, rgb(var(--scrim) / .5) 45%, rgb(var(--scrim) / .05) 85%),
    linear-gradient(0deg, rgb(var(--scrim) / .7) 0%, rgb(var(--scrim) / 0) 45%);
}
@media (max-width: 767px) {
  .slide::after { background: linear-gradient(0deg, rgb(var(--scrim) / .9) 0%, rgb(var(--scrim) / .6) 55%, rgb(var(--scrim) / .45) 100%); }
}
.hero-inner {
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: flex-end; gap: 40px;
  padding-top: 72px; padding-bottom: 24px;
}
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-chip { font-size: var(--fs-small); font-weight: 300; line-height: 1.5; color: #B8B8B8; }
.hero .display { max-width: 19em; line-height: 1.1; }  /* three lines on laptops */
@media (min-width: 768px) { .hero-l1 { display: block; } }
@media (max-width: 767px) { .hero .display { font-size: clamp(1.75rem, 8vw, 2.25rem); } }  /* phones: larger (Joy, 14 October 2026) */  /* on tablets and laptops the first line always ends after "India," */
.hero .display .nobr { white-space: nowrap; }  /* never split "mid-sized" at its hyphen */
.hero-sub { max-width: 42ch; font-size: var(--fs-small); font-weight: 300; line-height: 1.5; color: #B8B8B8; }
.hero-browse { font-weight: 300; }
.hero-actions { display: grid; gap: 12px; justify-items: start; margin-top: 8px; }
.hero-enter { display: flex; flex-wrap: wrap; gap: 8px; }
/* Photographer credit: one line at the bottom right of the slider, level with the Browse link, above the scrim */
.hero-credit {
  position: absolute; z-index: 1; bottom: 37px; right: calc((100% - min(var(--max), 100% - 2 * var(--gutter))) / 2);
  font-size: var(--fs-label); font-weight: 400; line-height: 1.5; color: #4D4D4D;
}
.hero-credit:empty { display: none; }
/* Laptops: the image ends as far above the screen bottom as the header Enter button sits above the header's bottom */
@media (min-width: 768px) {
  .hero-inner { min-height: calc(100svh - var(--header-h) - var(--header-btn-gap)); }
}
/* Phones: the image fills the screen under the header, and the four buttons sit in a staggered 2 x 2 grid */
@media (max-width: 767px) {
  .header-actions .btn { display: none; }
  .hero-inner { padding-top: 40px; padding-bottom: 20px; gap: 0; }
  .hero-credit { display: none; }  /* phones show the credit at the foot of the page instead */
  .hero-actions { margin-top: 40px; }
}
@media (max-width: 560px) {
  .hero-actions { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .hero-enter { display: contents; }
  .hero-actions .btn { grid-column: span 4; width: 100%; padding-inline: 10px; }
  .hero-enter .btn:first-child, .hero-actions .hero-browse { grid-column: span 6; }
  .hero-actions .hero-browse { border-color: var(--on-photo); }
  .hero-browse .arrow { display: none; }
}

/* Firm size */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tier { display: grid; gap: 16px; align-content: start; padding: 24px; background: var(--tier-bg); border-radius: var(--r); }
/* Tier colours: sage, softened Ember and blue, used by the firm-size cards, the fee cards and the accordion chips */
.tier:nth-child(1), .price:nth-child(1), .acc-chips .badge:nth-child(1) { --tier-bg: var(--tier-1); --tier-chip: var(--tier-1-chip); }
.tier:nth-child(2), .price:nth-child(2), .acc-chips .badge:nth-child(2) { --tier-bg: var(--tier-2); --tier-chip: var(--tier-2-chip); }
.tier:nth-child(3), .price:nth-child(3), .acc-chips .badge:nth-child(3) { --tier-bg: var(--tier-3); --tier-chip: var(--tier-3-chip); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The tier mark sits in each card's top-right corner, in the chip colour: Boutique 50% and Mid-sized 75% of the Enterprise size */
.tier, .price { position: relative; isolation: isolate; overflow: hidden; --mark-full: clamp(96px, 9.6vw, 140.8px); }
.tier-mark { position: absolute; top: 0; right: 0; z-index: -1; width: var(--mark); height: var(--mark); fill: var(--tier-chip); opacity: .5; }
.tier:nth-child(1), .price:nth-child(1) { --mark: calc(var(--mark-full) * .5); }
.tier:nth-child(2), .price:nth-child(2) { --mark: calc(var(--mark-full) * .75); }
.tier:nth-child(3), .price:nth-child(3) { --mark: var(--mark-full); }
.tier .badge, .price .badge { min-height: 30px; padding: 3px 12px; border: 0; background: var(--tier-chip); font-size: var(--fs-body); font-weight: 300; }
.tier-size { font-size: var(--fs-figure); font-weight: 300; line-height: .93; letter-spacing: -.015em; margin-top: 40px; }
.tier-size span { display: block; margin-top: 10px; font-size: var(--fs-small); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); }
.tier-desc { color: var(--ink-2); font-size: var(--fs-text); }
.tiers-note { margin-top: 16px; color: var(--ink-2); }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.step { display: grid; gap: 12px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line); }
.step-num { font-size: var(--fs-label); font-weight: 500; line-height: 1.5; color: var(--accent-text); }
.step .h3, .criterion h3, .name-point .h3, .who-point .h3, .model-point .h3 { font-weight: 500; }
.step p { color: var(--ink-2); font-size: var(--fs-text); }
/* Key dates: the four-steps layout, with the event as the small label and the date as the heading */
.date-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.step p.date-label { font-size: var(--fs-label); color: var(--accent-text); }
.date-note:empty { display: none; }
.date-note.is-countdown { padding: 0 6px; background: var(--accent); color: var(--on-accent); border-radius: var(--r-badge); font-size: var(--fs-label); font-weight: 400; line-height: 1.5; }  /* the next deadline */

/* Categories: WAF-style accordions, one group per discipline */
.cat-groups { display: grid; gap: clamp(52px, 6vw, 72px); }
.cat-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: 24px 64px; }
.cat-group-head { position: sticky; top: calc(var(--header-h) + 24px + env(safe-area-inset-top, 0px)); display: grid; gap: 12px; }
.cat-group-head .eyebrow { color: var(--ink-2); }
.cat-group-title { font-weight: 500; font-size: var(--fs-group); line-height: 1.05; letter-spacing: -.01em; }
.cat-group-rule { max-width: 34ch; color: var(--ink-2); font-size: var(--fs-text); }
.acc-list { border-bottom: 1px solid var(--line); }
.acc { border-top: 1px solid var(--line); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 16px; cursor: pointer; list-style: none;
  font-size: var(--fs-acc); font-weight: 400; line-height: 1.45;
}
.acc summary::-webkit-details-marker { display: none; }
.acc-name { transition: color .2s ease; }
.acc[open] > summary .acc-name { color: var(--accent-text); }
/* The + and − are text glyphs, not two drawn bars: text lands on whole pixels, so both strokes of the +, the −, and the icon
   on every row render at the same weight (Joy, 14 October 2026) */
.acc-icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r);
  padding-bottom: 2px; font-size: 1.625rem; font-weight: 300; line-height: 1; transition: background-color .2s ease;
}
.acc-icon::before { content: "+"; }
.acc[open] > summary .acc-icon::before { content: "\2212"; }
.acc summary:hover .acc-icon { background: var(--line-soft); }
.acc-body { display: grid; gap: 20px; padding-bottom: 28px; }
.acc-desc { max-width: 62ch; color: var(--ink-2); }
.acc-note { max-width: 62ch; }
.acc-includes { display: grid; gap: 8px; }
.acc-includes .eyebrow { color: var(--ink-2); font-size: var(--fs-body); font-weight: 400; }
.acc-includes ul { columns: 2 15rem; column-gap: 32px; color: var(--ink-2); }
.acc-includes ul.one-col { columns: 1; }
.acc-includes li { position: relative; break-inside: avoid; padding: 0 0 6px 18px; }
/* A text en dash, not a 1px box: glyphs snap to whole pixels, so every line's dash renders the same even when the row sits on a fractional pixel */
.acc-includes li::before { content: "\2013"; position: absolute; left: 0; top: 0; }
.acc-note { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.acc-note-label { color: inherit; font-weight: inherit; }
.acc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 16px 20px; background: var(--line-soft); border-radius: var(--r); }
.acc-foot .badge { border: 0; background: var(--tier-chip); font-weight: 300; }
.acc-tiers { display: grid; gap: 8px; }
.acc-tiers-label { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; font-weight: 400; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-note { max-width: 60ch; margin-top: 36px; color: var(--ink-2); font-size: var(--fs-text); }

/* What the jury looks for */
.criteria-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; counter-reset: crit; }
.criterion { display: grid; gap: 12px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line); counter-increment: crit; }
.criterion::before { content: "0" counter(crit); font-size: var(--fs-label); font-weight: 500; line-height: 1.5; color: var(--accent-text); }
.criterion h3 { font-size: var(--fs-h3); line-height: 1.36; text-wrap: balance; }
.criterion p { color: var(--ink-2); font-size: var(--fs-text); }

/* Jury */
.jury-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 8px; }
.juror { display: grid; gap: 2px; align-content: start; }
.portrait {
  aspect-ratio: 4 / 5; max-width: 100%; margin-bottom: 12px; border-radius: var(--r);
  background:
    radial-gradient(circle at 50% 40%, var(--portrait-fg) 0 15%, transparent 15.5%),
    radial-gradient(ellipse 34% 26% at 50% 100%, var(--portrait-fg) 0 99%, transparent 100%),
    var(--portrait-bg);
}
img.portrait { display: block; width: 100%; height: auto; object-fit: cover; }
.juror-name { font-weight: 500; }

/* The name: "India" cycles through twelve scripts in the accent colour, phonetic spellings only */
/* The name and its line fill one screen under the header; the description and the three cards come after one scroll */
.name-section { padding-top: 0; }
.name-screen {
  display: flex; flex-direction: column; justify-content: center; gap: clamp(48px, 9svh, 112px);
  min-height: calc(100svh - var(--header-h)); padding-block: clamp(96px, 20svh, 240px) clamp(48px, 8svh, 96px);
}
.name-lead { padding-top: clamp(24px, 3vw, 40px); margin-bottom: clamp(32px, 4vw, 52px); }
@media (max-width: 767px) {
  .name-card { display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h)); padding-bottom: 32px; }
  .name-screen { flex: 1; min-height: 0; padding-block: clamp(40px, 10svh, 96px) 0; gap: clamp(32px, 6svh, 64px); }
  .name-lead { padding-top: clamp(32px, 6svh, 64px); margin-bottom: 0; }
  .name-card + .wrap { padding-top: 0; }
}
.name-line { font-size: var(--fs-display); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; color: var(--accent-text); text-wrap: balance; }
.name-lockup {
  font-weight: 500; font-size: var(--fs-name); line-height: 1; letter-spacing: -.02em;
}
@media (max-width: 767px) { .name-lockup { font-size: min(16.5vw, 4.25rem); } }  /* phones: as large as "Architecture" allows (Joy, 14 October 2026) */
/* One fixed 1em row: the Noto faces carry taller metrics than Inter Tight, so a free row would grow and push the line below away */
.name-rotor { display: grid; grid-template-rows: 1em; justify-items: start; align-items: baseline; padding-block: .06em .24em; color: var(--accent-text); }
.name-word {
  grid-area: 1 / 1; white-space: nowrap; font-weight: 600;
  opacity: 0; transform: translateY(.25em); filter: blur(8px);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1), filter .45s ease;
}
.name-word:not(:lang(en)) { letter-spacing: 0; }
.name-word:lang(hi) { font-family: "Noto Sans Devanagari", var(--font); }
.name-word:lang(bn), .name-word:lang(as) { font-family: "Noto Sans Bengali", var(--font); }
.name-word:lang(te) { font-family: "Noto Sans Telugu", var(--font); }
.name-word:lang(gu) { font-family: "Noto Sans Gujarati", var(--font); }
.name-word:lang(ta) { font-family: "Noto Sans Tamil", var(--font); }
.name-word:lang(pa) { font-family: "Noto Sans Gurmukhi", var(--font); }
.name-word:lang(kn) { font-family: "Noto Sans Kannada", var(--font); }
.name-word:lang(ur) { font-family: "Noto Sans Arabic", var(--font); }
.name-word:lang(or) { font-family: "Noto Sans Oriya", var(--font); }
.name-word:lang(ml) { font-family: "Noto Sans Malayalam", var(--font); }
.name-word.is-active { opacity: 1; transform: none; filter: none; }
.name-word.is-leaving { opacity: 0; transform: translateY(-.25em); filter: blur(8px); }
.name-rest { display: block; text-wrap: balance; }

/* Three reasons, and who can enter, in the same open layout as the steps: a top rule, a heading and one line */
.name-points, .who-points, .model-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.name-point, .who-point, .model-point { display: grid; gap: 12px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line); }
.name-point > p, .who-point > p, .model-point > p { color: var(--ink-2); font-size: var(--fs-text); }

/* What winners receive: the heading on the canvas, the four benefits as dark cards */
.perks { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; }
.perk {
  --ink: #F2F2F2; --ink-2: #BDBDBD;
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 20px; align-items: start; align-content: start;
  padding: clamp(20px, 2vw, 28px); border-radius: var(--r); background: var(--inv-bg); color: var(--ink);
}
.perk > svg { width: 28px; height: 28px; color: var(--ink); }
/* All four cards set their heading and line like the "What the jury looks for" cards */
.perk-text { display: grid; gap: 12px; }
.perk-text h3 { font-size: var(--fs-h3); line-height: 1.36; font-weight: 500; text-wrap: balance; }
.perk-text p { max-width: 52ch; color: var(--ink-2); font-size: var(--fs-text); }
/* The title: a winner's credit on a light plate, set the way a client sees it, over what it means. Every size on the plate is a share
   of its width (cqi), so each line keeps to one line from a phone to a laptop. The practice size turns through the three tiers. */
.perk--feature { grid-row: span 3; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: clamp(12px, 1.4vw, 20px); }
.perk--feature .perk-text { padding: 0 clamp(8px, .8vw, 12px) clamp(8px, .8vw, 12px); }
.credit { container-type: inline-size; border-radius: var(--r); background: #E9E9E9; color: #222222; }
.credit-plate { display: flex; flex-direction: column; justify-content: space-between; gap: 6cqi; aspect-ratio: 786 / 446; padding: 5.2cqi 5.4cqi 4.6cqi; }
.credit-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqi; }
.credit-logo { flex: none; width: 11.6cqi; height: 11.6cqi; fill: #FA5D29; }
.credit-winner { display: grid; justify-items: end; text-align: right; font-size: 3.3cqi; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.credit-year { color: #FA5D29; }
.credit-practice { font-weight: 600; }
.credit-foot { display: grid; justify-items: start; }
.credit-tier {
  position: relative; overflow: hidden; margin-bottom: 1.2cqi; padding: .35em .7em; border-radius: max(3px, .25em);
  background: #C6D3BE; font-size: 2.05cqi; font-weight: 400; line-height: 1.45; white-space: nowrap;
  transition: background-color .6s ease, width .6s cubic-bezier(.45, 0, .15, 1);
}
.credit-tier[data-at="1"] { background: #E3D6B8; }
.credit-tier[data-at="2"] { background: #BFD0E3; }
.credit-tier > span { display: block; width: max-content; transition: transform .6s cubic-bezier(.45, 0, .15, 1), opacity .6s ease; }
.credit-tier > span:not(.is-active) { position: absolute; top: .35em; left: .7em; opacity: 0; transform: translateY(120%); }
.credit-tier > span.is-leaving { transform: translateY(-120%); }
.credit-meta { color: #808080; font-size: 3.3cqi; font-weight: 400; line-height: 1.45; letter-spacing: -.01em; white-space: nowrap; }
.credit-name { margin-top: 1cqi; font-size: 8.4cqi; font-weight: 400; line-height: 1.1; letter-spacing: -.025em; white-space: nowrap; }
/* Narrow plates (phones): the small lines grow, the plate grows taller to hold them */
@container (max-width: 520px) {
  .credit-plate { aspect-ratio: 4 / 3; gap: 8cqi; }
  .credit-logo { width: 14cqi; height: 14cqi; }
  .credit-winner { font-size: 4.4cqi; }
  .credit-tier { margin-bottom: 1.8cqi; font-size: 3.5cqi; }
  .credit-meta { font-size: 4.4cqi; }
}
@media (max-width: 960px) {
  .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perk { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .perk--feature { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .perks { grid-template-columns: minmax(0, 1fr); }
  .perk { grid-template-columns: 28px minmax(0, 1fr); gap: 16px; }
  .perk--feature { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Fees: one card per practice size, in its tier colour. Four rows, one per fee period: its name and the date it ends on the left,
   the fee and "per entry" on the right, the fee at the size of the period's name. The period running today carries the Ongoing chip,
   and periods that have ended are struck through. GST sits under the rows, on the right. */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.price { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--tier-bg); border-radius: var(--r); }
.price .badge { align-self: flex-start; }
.price-size { font-size: var(--fs-small); color: var(--ink-2); }
.price-rows { display: grid; margin-top: 20px; border-bottom: 1px solid rgb(128 128 128 / .3); }
.price-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 16px;
  padding-block: 12px; border-top: 1px solid rgb(128 128 128 / .3);
}
.price-row:first-child { padding-top: 0; border-top: 0; }
.price-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 500; line-height: 1.5; }
.price-fee { justify-self: end; font-weight: 500; line-height: 1.5; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.price-until, .price-per { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.price-per { justify-self: end; white-space: nowrap; }
.price-row.is-past .price-stage, .price-row.is-past .price-fee { color: var(--ink-2); font-weight: 400; }
.price-row.is-past .price-fee { text-decoration: line-through; text-decoration-thickness: 1px; }
.price-gst { margin-bottom: 20px; text-align: right; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.price .btn { margin-top: auto; }
/* Laptops and tablets, three cards side by side: the period names and fees drop to the small size too, keeping their weight */
@media (min-width: 861px) {
  .price-stage, .price-fee { font-size: var(--fs-small); }
  /* The people count and the left column (period names, dates) start where the practice chip's name does (Joy, 15 October 2026);
     the rules and the button keep the card's edge */
  .price-size, .price-stage, .price-until { padding-left: 12px; }  /* the chip's own inside space, .price .badge */
}
/* Phones and tablets: three toggles above one card, each toggle in its card's colour when chosen. The toggle names the practice,
   so the card leaves its name out. */
.price-switch { display: none; }
@media (max-width: 860px) {
  .price-switch.is-ready { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
  .price-switch-btn {
    min-height: 44px; padding: 8px 6px; border: 0; border-radius: var(--r); background: transparent;
    color: var(--ink-2); font: inherit; font-size: var(--fs-small); font-weight: 500; line-height: 1.29; cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
  }
  .price-switch-btn:nth-child(1) { --tier-bg: var(--tier-1); }
  .price-switch-btn:nth-child(2) { --tier-bg: var(--tier-2); }
  .price-switch-btn:nth-child(3) { --tier-bg: var(--tier-3); }
  .price-switch-btn[aria-pressed="true"] { background: var(--tier-bg); color: var(--ink); }
  .prices.has-switch .price:not(.is-current) { display: none; }
  .prices.has-switch .price .badge { display: none; }
  .prices.has-switch .price-rows { margin-top: 16px; }
}
.fees-note { margin-top: 16px; }

/* Timeline: the fee periods and the milestones, as rows; the fee period running today carries an Ongoing chip */
.timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
.timeline-group { display: grid; gap: 16px; align-content: start; }
.timeline-group .h3 { font-weight: 500; }
.timeline-list { border-bottom: 1px solid var(--line); }
.timeline-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 56px; padding-block: 12px; border-top: 1px solid var(--line); }
.timeline-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 500; }
.timeline-when { color: var(--ink-2); font-size: var(--fs-small); text-align: right; font-variant-numeric: tabular-nums; }
.chip-ongoing { padding: 0 8px; background: var(--accent); color: var(--on-accent); border-radius: var(--r-badge); font-size: var(--fs-label); font-weight: 500; line-height: 1.75; }
@media (max-width: 760px) { .timeline { grid-template-columns: minmax(0, 1fr); } }

/* Partners */
.partner-rows { display: grid; gap: 20px; }
.partner-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 16px 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.partner-row .eyebrow { color: var(--ink-2); }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.logo-slot { display: grid; place-items: center; height: 80px; background: var(--card); border-radius: var(--r); color: var(--ink-3); font-size: var(--fs-label); font-weight: 500; }

/* Closing call to action: a typographic full stop */
.final { display: grid; gap: 24px; justify-items: start; }
.final-title { max-width: 16em; font-weight: 300; font-size: var(--fs-h2); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.final-sub { max-width: 52ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.final-actions { display: grid; gap: 12px; justify-items: start; margin-top: 8px; }
.final-enter { display: flex; flex-wrap: wrap; gap: 8px; }
/* Phones: a taller closing block, with the buttons at its foot */
@media (max-width: 767px) {
  .final { min-height: 75svh; grid-template-rows: auto auto 1fr; gap: 32px; padding: 40px 24px 32px; }
  .final-actions { align-self: end; margin-top: 24px; }
}
/* Phones: the same staggered 2 x 2 grid as the hero, with Browse as an outlined button */
@media (max-width: 560px) {
  .final-actions { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .final-enter { display: contents; }
  .final-actions .btn { grid-column: span 4; width: 100%; padding-inline: 10px; }
  .final-enter .btn:first-child, .final-actions .final-browse { grid-column: span 6; }
  .final-actions .final-browse { border-color: var(--ink); }
  .final-browse .arrow { display: none; }
}

/* Footer */
.site-footer { padding-bottom: 32px; }
.footer-grid { padding-top: 48px; border-top: 1px solid var(--line); }  /* the rule spans the content, not the screen */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px 32px; }
.footer-brand { display: grid; gap: 16px; align-content: start; }
.footer-brand .brand { margin-right: 0; justify-self: start; }
.footer-tagline { color: var(--ink-2); font-size: var(--fs-small); font-weight: 400; line-height: 1.5; }
.footer-social { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-social a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: var(--fs-small); text-decoration: none; }
.footer-social a:hover { text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 767px) {  /* 44 px rows to tap on phones */
  .footer-col ul { gap: 0; }
  .footer-col a { display: flex; align-items: center; min-height: 44px; }
  .footer-legal ul { gap: 0 20px; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767px) { .footer-brand { gap: 6px; } }
.footer-col { display: grid; gap: 14px; align-content: start; }
.footer-col h2 { color: var(--ink-2); }
.footer-col ul { display: grid; gap: 6px; }
.footer-col a { color: var(--ink); font-size: var(--fs-small); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: .3em; }
.newsletter { display: grid; gap: 12px; }
.newsletter label { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.nl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-row input {
  flex: 1 1 12rem; min-width: 0; height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--ink); font-size: var(--fs-small);
}
.nl-row input:focus, .nl-row input:focus-visible { outline: 0; border-color: var(--ink); }
.nl-row input::placeholder { color: var(--ink-3); opacity: 1; }
.nl-row input[aria-invalid="true"] { border-color: var(--ink); }
.nl-msg { min-height: 1.5em; color: var(--ink-2); }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: var(--fs-legal); line-height: 1.5; color: var(--ink-2);
}
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal a { color: var(--ink-2); text-decoration: none; }
.footer-legal a:hover { color: var(--ink); text-decoration: underline; }
.footer-credits { flex-basis: 100%; }
.footer-credits:empty { display: none; }
@media (min-width: 768px) { .footer-credits { display: none; } }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; overflow-y: auto;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--page); color: var(--ink);
}
.mm-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); border-bottom: 1px solid var(--line); }
.mm-nav { flex: 1 0 auto; display: grid; grid-auto-rows: minmax(48px, 1fr); }  /* the links share the height evenly */
.mm-nav a { display: flex; align-items: center; border-bottom: 1px solid var(--line); font-size: var(--fs-menu); font-weight: 300; line-height: 1.1; text-decoration: none; }
.mm-bottom { display: grid; gap: 12px; padding-block: 24px 32px; }
.mm-bottom .btn { justify-self: start; }

/* Cookie notice: a small card at the bottom right until the visitor chooses; above the section menu where that is docked */
.cookie {
  position: fixed; right: var(--gutter); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 75;
  display: grid; gap: 10px; width: min(380px, calc(100% - 2 * var(--gutter))); padding: 20px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r);
  transition: bottom .3s ease;
}
.cookie[hidden] { display: none; }
html:has(.mobile-menu:not([hidden])) .cookie { display: none; }  /* out of the way while the phone menu is open */
.cookie-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-title { font-size: var(--fs-body); font-weight: 500; line-height: 1.5; }
.cookie-close {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0; padding: 0;
  border: 0; border-radius: var(--r); background: none; color: var(--ink-2); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.cookie-close svg { width: 18px; height: 18px; }
.cookie-close:hover { background: var(--line-soft); color: var(--ink); }
.cookie-text--short { display: none; }
.cookie-text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.cookie-text a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (max-width: 1199px) {
  html:has(.menu-dock.is-shown) .cookie { bottom: calc(var(--subnav-h) + 12px + env(safe-area-inset-bottom, 0px)); }
}
/* Phones: a slim bar across the foot of the screen, one short line beside two buttons (Joy, 15 October 2026).
   The title and the cross are left out: Essential does what the cross does. On a narrow phone the buttons drop under the line. */
@media (max-width: 767px) {
  .cookie {
    left: 0; right: 0; bottom: 0; width: auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0; border-radius: 0;
  }
  .cookie-head, .cookie-text { display: none; }
  .cookie-text--short { display: block; flex: 1 1 10rem; font-size: var(--fs-label); }
  .cookie-actions { flex: none; flex-wrap: nowrap; gap: 6px; margin: 0 0 0 auto; }
  .cookie-actions .btn { min-height: 40px; padding: 8px 14px; font-size: var(--fs-label); }
  html:has(.menu-dock.is-shown) .cookie { bottom: calc(var(--subnav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 10px; }
}

/* Responsive */
@media (max-width: 1080px) {
  .jury-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand, .footer-join { grid-column: 1 / -1; }
  .footer-join { max-width: 34rem; }
}
@media (max-width: 960px) {
  .steps, .criteria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tiers, .prices, .cat-group { grid-template-columns: minmax(0, 1fr); }
  .cat-group-head { position: static; }
  .tier-size { margin-top: 20px; }
}
@media (max-width: 760px) {
  .name-points, .who-points, .model-points { grid-template-columns: minmax(0, 1fr); }
  .partner-row { grid-template-columns: minmax(0, 1fr); }
  .acc-foot { padding: 16px; }
}
@media (max-width: 560px) {
  .steps, .criteria-grid { grid-template-columns: minmax(0, 1fr); }
  .jury-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ==================== Homepage ==================== */
/* Small text never at weight 300 */
.acc-foot .badge { font-weight: 400; }
.link { min-height: 44px; }

/* Badges: tier chips in the accordions, picked by practice size rather than by position (a category may skip one) */
.acc-chips .badge.tier-chip--1 { --tier-chip: var(--tier-1-chip); }
.acc-chips .badge.tier-chip--2 { --tier-chip: var(--tier-2-chip); }
.acc-chips .badge.tier-chip--3 { --tier-chip: var(--tier-3-chip); }
.status-chip {
  display: inline-flex; align-items: center; justify-self: start; min-height: 24px; padding: 2px 8px;
  border-radius: var(--r-badge); font-size: var(--fs-label); font-weight: 500; line-height: 1.5; white-space: nowrap;
}

/* Header: a hairline once the page scrolls; More in the same Slate as the section links */
.site-header.is-compact::after { background: var(--line); }
.nav--home .nav-drop-btn { color: var(--ink-nav); transition: color .2s ease; }
@media (hover: hover) { .nav--home .nav-drop-btn:hover { color: var(--ink); } }
.nav--home .nav-drop-btn[aria-expanded="true"] { color: var(--ink); }

/* 1. Hero: the slider. The early-bird countdown sits under the dates in Smoke grey. */
.hero-frame { background: var(--hero-bg); }
.hero-credit { color: rgb(255 255 255 / .7); }
.hero .status-chip { background: #808080; color: #FFFFFF; }
.hero-countdown { margin-top: -8px; }

/* 2. The name: "India" turns through its twelve scripts without pausing. On laptops the name, its line and the three points fill one
   screen under the header; the same four columns return for Who can enter. */
.name-home .name-rotor { color: var(--accent-name); padding-block: .04em .14em; }
.name-home .name-screen { display: grid; align-content: center; gap: clamp(40px, 6svh, 88px); min-height: 0; padding-block: 0; }
@media (min-width: 1081px) {
  .name-home.name-section { padding-block: 0; }
  .name-home .name-screen { min-height: calc(100svh - var(--header-h)); padding-block: clamp(32px, 6svh, 72px); align-content: space-evenly; }
}
@media (max-width: 1080px) {
  .name-home.name-section { padding-top: var(--section); }
  .name-home .name-card { display: block; min-height: 0; padding-bottom: 0; }
}
.strip-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); gap: 32px clamp(24px, 4vw, 64px); align-items: start; }
.strip-head { display: grid; gap: 12px; }
.strip-title { font-size: var(--fs-sub); font-weight: 300; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.strip-title--accent { color: var(--accent-text); }
.strip-head p { color: var(--ink-2); }
.strip-grid .name-points { gap: 24px; }
.strip-grid .name-point { gap: 8px; }
.strip-grid .name-point :is(h3, h4) { font-size: var(--fs-body); font-weight: 500; line-height: 1.4; }
.strip-grid .name-point > p { font-size: var(--fs-small); }
@media (max-width: 1080px) { .strip-grid { grid-template-columns: minmax(0, 1fr); } }

/* 3. Practice size: each card in its tier's deep colour, the practice name as plain text on it, the star a step lighter.
   "people" on its own line at the size of the card's description. The fee cards follow the same rule. */
.home .tier, .home .price { background: var(--tier-chip); }
.home .tier .badge, .home .price .badge { min-height: 0; padding: 0; background: transparent; font-size: var(--fs-body); font-weight: 500; }
.home .tier-mark { fill: var(--tier-bg); opacity: .75; }
.home .tier-size { margin-top: 32px; }
.home .tier-size span { display: block; margin: 10px 0 0; font-size: var(--fs-text); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); }
.tiers-rule { margin-top: 8px; padding: 14px 24px; color: var(--ink-2); font-size: var(--fs-small); }
.tiers-rule-label { margin-right: 8px; color: var(--ink); font-weight: 500; }
.who-strip { margin-top: clamp(48px, 6vw, 80px); }

/* 4. Categories: a four-way switch, one group at a time. On laptops the switch and the group's name stay in view in the left column
   while the list scrolls. */
.cat-switch:not([hidden]) { display: flex; width: max-content; max-width: 100%; gap: 4px; margin-bottom: clamp(32px, 4vw, 48px); padding: 4px; border-radius: var(--r); background: var(--card); }
.cat-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--fs-small); font-weight: 500; line-height: 1.29; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.cat-tab:hover { color: var(--ink); }
.cat-tab[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.cat-tab-count { font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }
.cat-block.is-switched .cat-group:not(.is-current) { display: none; }
.cat-note[hidden] { display: none; }
@media (min-width: 861px) {
  .cat-block.is-switched { --cat-switch-h: 52px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; }
  .cat-block.is-switched .cat-switch {
    grid-column: 1; grid-row: 1; align-self: start; z-index: 2; margin-bottom: 0;
    position: sticky; top: calc(var(--header-h) + 24px + env(safe-area-inset-top, 0px));
  }
  .cat-block.is-switched .cat-groups { grid-column: 1 / -1; grid-row: 1; }
  .cat-block.is-switched .cat-group-head { margin-top: calc(var(--cat-switch-h) + 32px); top: calc(var(--header-h) + 24px + var(--cat-switch-h) + 32px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 560px) {
  .cat-switch:not([hidden]) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .cat-tab { padding-inline: 4px; gap: 6px; }
}
.acc-name .nobr { white-space: nowrap; }  /* "(up to 4,000 sq ft)" moves to the next line whole */

/* 6. What winners receive: the credit plate large, then the kit itself, then three short texts */
.kit-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 64px); align-items: end; }
.kit-feature-text { display: grid; gap: 12px; padding-bottom: 8px; }
.kit-feature-text h3, .kit-text h3 { font-size: var(--fs-sub); font-weight: 300; line-height: 1.15; letter-spacing: -.01em; }
.kit-feature-text p, .kit-text p { max-width: 44ch; color: var(--ink-2); }
.home .credit { background: var(--plate-bg); color: var(--plate-ink); }
.home .credit-year { color: inherit; }
.home .credit-meta { color: var(--plate-muted); }
.home .credit-tier { background: var(--tier-1-chip); color: var(--plate-ink); }
.home .credit-tier[data-at="1"] { background: var(--tier-2-chip); }
.home .credit-tier[data-at="2"] { background: var(--tier-3-chip); }
.kit-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.kit-item { display: grid; gap: 10px; align-content: start; }
.kit-art { container-type: inline-size; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--card); }
.kit-caption { color: var(--ink-2); font-size: var(--fs-small); }
.kit-art--seal > svg { width: 52%; height: auto; overflow: visible; }
.seal-edge { fill: var(--page); stroke: var(--ink); stroke-width: 1.5; }
.seal-inner { fill: none; stroke: var(--line); stroke-width: 1; }
.seal-text { fill: var(--ink); font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: .14em; }
.kit-art--seal svg svg { fill: var(--accent); }
.cert {
  display: flex; flex-direction: column; align-items: center; gap: 1.4cqi; width: 78%; aspect-ratio: 1.414 / 1; padding: 4cqi;
  border: 1px solid var(--line); border-radius: 3px; background: var(--plate-bg); color: var(--plate-ink); text-align: center;
}
.cert-logo { width: 6.5cqi; height: 6.5cqi; fill: var(--accent); }
.cert-kicker { font-size: 2.3cqi; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--plate-muted); }
.cert-practice { font-size: 5.6cqi; font-weight: 300; line-height: 1.1; letter-spacing: -.01em; }
.cert-meta { font-size: 2.5cqi; line-height: 1.45; color: var(--plate-muted); }
.cert-name { margin-top: auto; padding-top: 1.6cqi; border-top: 1px solid var(--line); font-size: 2.5cqi; font-weight: 500; }
.post { display: grid; gap: 2.4cqi; width: 74%; padding: 3.4cqi; border: 1px solid var(--line); border-radius: 6px; background: var(--plate-bg); color: var(--plate-ink); }
.post-head { display: flex; align-items: center; gap: 2.4cqi; }
.post-avatar { flex: none; width: 7cqi; height: 7cqi; border-radius: 50%; background: var(--line); }
.post-who { display: grid; font-size: 2.8cqi; font-weight: 500; line-height: 1.3; }
.post-who span { color: var(--plate-muted); font-size: 2.4cqi; font-weight: 400; }
.post-text { font-size: 2.7cqi; line-height: 1.4; }
.post-plate { display: flex; align-items: center; gap: 2.4cqi; padding: 3cqi; border-radius: 4px; background: var(--page); color: var(--ink); font-size: 2.5cqi; line-height: 1.3; }
.post-plate svg { flex: none; width: 6cqi; height: 6cqi; fill: var(--accent); }
.post-plate strong { font-weight: 500; }
.kit-texts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 64px); margin-top: clamp(32px, 4vw, 48px); }
.kit-text { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 960px) {
  .kit-feature { grid-template-columns: minmax(0, 1fr); }
  .kit-texts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .kit-row, .kit-texts { grid-template-columns: minmax(0, 1fr); }
  .kit-art { aspect-ratio: 16 / 10; }
  .kit-art--seal > svg { width: 38%; }
  .cert { width: 64%; }
  .post { width: 62%; }
}

/* 7. Fees: rows for the later fees, under the fee running today set large with its Ongoing chip. The practice name and
   the rows start at the card's own edge, as there is no chip to line up with. */
.price-now { display: grid; gap: 4px; margin-top: 20px; }
.price-now-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 500; line-height: 1.5; }
.price-now-fee { font-size: 2.5rem; font-weight: 400; line-height: 1.05; letter-spacing: -.015em; font-variant-numeric: lining-nums tabular-nums; }
.price-now-meta { color: var(--ink-2); font-size: var(--fs-small); }
.home .price-now + .price-rows { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgb(128 128 128 / .3); }
.home .price-switch-btn:nth-child(1) { --tier-bg: var(--tier-1-chip); }
.home .price-switch-btn:nth-child(2) { --tier-bg: var(--tier-2-chip); }
.home .price-switch-btn:nth-child(3) { --tier-bg: var(--tier-3-chip); }
@media (min-width: 861px) {
  .home .price-size, .home .price-stage, .home .price-until { padding-left: 0; }
}

/* 8. How it works: four steps, with each step's dates under its name */
.step p.step-when { color: var(--ink); font-size: var(--fs-small); font-weight: 500; }
.step p.step-fee { padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--fs-small); font-weight: 500; }  /* the fee, kept apart from the dates so it doesn't read as a deadline */
.step-fee .chip-ongoing { white-space: nowrap; }
.home .hero-sub { max-width: none; }



/* ==================== Text pages: Terms, Privacy, Code of conduct, Refunds, Cookie settings, About, Contact ==================== */
.doc-intro { padding-top: calc(var(--section) / 2); }
.doc-intro .section-head { margin-bottom: 0; }
.doc-updated { color: var(--ink-2); font-size: var(--fs-small); }

.doc-section { padding-top: clamp(40px, 5vw, 64px); }
.doc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: 24px 64px; }
.doc-toc { position: sticky; top: calc(var(--header-h) + 24px + env(safe-area-inset-top, 0px)); display: grid; gap: 12px; }
.doc-toc-title { color: var(--ink-2); }
.doc-toc ol { display: grid; gap: 8px; }
.doc-toc a { color: var(--ink-nav); font-size: var(--fs-small); line-height: 1.4; text-decoration: none; transition: color .2s ease; }
.doc-toc a:hover { color: var(--ink); }
.doc-toc a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }

/* The text: one readable column */
.doc-body { display: grid; gap: 40px; max-width: 46rem; }
.doc-part { display: grid; gap: 14px; }
.doc-part h2 { font-size: var(--fs-h3); line-height: 1.36; font-weight: 500; text-wrap: balance; }
.doc-part p, .doc-part li { font-size: var(--fs-body); line-height: 1.6; text-wrap: pretty; }
.doc-part ul { display: grid; gap: 10px; padding-left: 1.25em; list-style: disc; }
.doc-part li::marker { color: var(--ink-3); }
.doc-part strong { font-weight: 500; }
.doc-part a, .doc-note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; overflow-wrap: anywhere; }
.doc-part a:hover, .doc-note a:hover { text-decoration-thickness: 2px; }
.doc-note { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }

/* Tables: rows ruled like the homepage timeline. On phones a wide table scrolls inside its own box. */
.doc-table { overflow-x: auto; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.doc-table th, .doc-table td { padding: 12px 16px 12px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-table th:last-child, .doc-table td:last-child { padding-right: 0; }
.doc-table tr:last-child td { border-bottom: 1px solid var(--line); }
.doc-table th { font-weight: 500; }
.doc-table td:first-child { font-weight: 500; }
.doc-table code { font-family: inherit; }

/* Cookie settings: the two choices, as white cards */
.consent-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.consent-option { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r); background: var(--card); }
.consent-option h3 { font-size: var(--fs-body); font-weight: 500; line-height: 1.5; }
.consent-option p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.consent-option.is-chosen { outline: 2px solid var(--ink); outline-offset: -2px; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.consent-now { color: var(--ink-2); font-size: var(--fs-small); }

/* About: one row per topic, the title on the left and the text on the right, ruled like the homepage timeline */
.about-rows { display: grid; border-bottom: 1px solid var(--line); }
.about-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px 64px; padding-block: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); }
.about-row h2 { font-size: var(--fs-h3); line-height: 1.36; font-weight: 500; text-wrap: balance; }
.about-text { display: grid; gap: 14px; max-width: 46rem; }
.about-text p, .about-text li { font-size: var(--fs-body); line-height: 1.6; text-wrap: pretty; }
.about-text ul { display: grid; gap: 10px; padding-left: 1.25em; list-style: disc; }
.about-text li::marker { color: var(--ink-3); }
.about-text strong { font-weight: 500; }
.about-text .timeline-list { border-bottom: 0; }
.about-text .timeline-row:first-child { padding-top: 0; min-height: 0; border-top: 0; }
.about-text .timeline-row { padding-left: 0; }

/* Contact: email and address on the left, the form on the right */
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: 40px 64px; }
.contact-side { display: grid; gap: 32px; }
.contact-block { display: grid; gap: 8px; }
.contact-block h2 { font-size: var(--fs-h3); line-height: 1.36; font-weight: 500; }
.contact-block p { color: var(--ink-2); line-height: 1.6; }
.contact-email { color: var(--ink); font-size: var(--fs-lead); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; overflow-wrap: anywhere; }
.contact-email:hover { text-decoration-thickness: 2px; }
.contact-form { --err: #B3360B; display: grid; gap: 20px; max-width: 46rem; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-feature); background: var(--card); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contact-form { --err: #FF8A5C; } }
:root[data-theme="dark"] .contact-form { --err: #FF8A5C; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.contact-form .field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.contact-form .field--full { grid-column: 1 / -1; }
.contact-form .field > label { font-size: var(--fs-small); font-weight: 500; line-height: 1.5; }
.contact-form .opt { font-weight: 400; color: var(--ink-2); }
.contact-form .input {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--page); color: var(--ink);
  font: inherit; font-size: var(--fs-body); line-height: 1.5;  /* 16px keeps phones from zooming in */
  transition: border-color .2s ease;
}
.contact-form textarea.input { height: auto; min-height: 160px; padding-block: 12px; resize: vertical; }
.contact-form .input:hover { border-color: var(--ink-2); }
.contact-form .input:focus, .contact-form .input:focus-visible { outline: 0; border-color: var(--ink); }
.contact-form .input[aria-invalid="true"] { border-color: var(--err); }
.contact-form .input-wrap { position: relative; }
.contact-form select.input { appearance: none; padding-right: 40px; cursor: pointer; }
.contact-form .select-chev { position: absolute; right: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; pointer-events: none; }
.contact-form .field-error { color: var(--err); font-size: var(--fs-small); line-height: 1.5; }
.contact-form .field-error:empty { display: none; }
.contact-form .check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; cursor: pointer; }
.contact-form .check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--btn-bg); cursor: pointer; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-send { display: grid; gap: 10px; justify-items: start; }
.contact-send .small { color: var(--ink-2); }
.contact-send a { color: var(--ink); text-underline-offset: .18em; }
.contact-msg { padding: 16px 20px; border-radius: var(--r); background: var(--card); }
.contact-msg--error { color: var(--ink); outline: 1px solid var(--line); outline-offset: -1px; background: transparent; }

@media (max-width: 960px) {
  .doc, .contact-grid, .about-row { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { display: none; }
}
@media (max-width: 680px) {
  .consent-choices, .contact-fields { grid-template-columns: minmax(0, 1fr); }
  .contact-form { padding: 20px 16px; }
}


/* ==================== FAQ ==================== */
:root { --faq-nav-h: 49px; }  /* the section menu's height; the script measures it */

.faq-intro { padding-top: calc(var(--section) / 2); }
.faq-intro .section-head { margin-bottom: 20px; }

/* Section menu: plain text links, the current section in Ink and underlined (Joy, 14 October 2026). Laptops: sticky under the
   header once scrolled past ("menu 2"). Below 1200 px it docks to the foot of the screen (.menu-dock in style.css). */
@media (min-width: 1200px) {
  html.page-faq { scroll-padding-top: calc(var(--header-h) + var(--faq-nav-h) + 24px); }
  .faq-nav {
    position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 40;
    background: var(--page); border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
  }
  .faq-nav.is-stuck { border-bottom-color: var(--line); }
  .faq-page .cat-group-head { top: calc(var(--header-h) + var(--faq-nav-h) + 32px + env(safe-area-inset-top, 0px)); }
}
/* When the row is wider than the screen, the edge it continues past fades out */
.faq-nav-list.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.faq-nav-list.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.faq-nav-list.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }

/* Sections: the homepage's category groups */
.faq-body { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 0; }
.faq-num { color: var(--ink-2); font-size: var(--fs-label); font-weight: 500; line-height: 1.5; font-variant-numeric: tabular-nums; }
.faq-page .acc summary { align-items: flex-start; }
.faq-page .acc-icon { margin-top: -2px; }

/* Answers: the accordion body text, in Graphite with links and labels in ink */
.faq-answer { display: grid; gap: 14px; padding-bottom: 28px; color: var(--ink-2); }
.faq-answer > p, .faq-answer > ul, .faq-answer > ol { max-width: 62ch; }
.faq-answer a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; overflow-wrap: anywhere; }
.faq-answer a:hover { text-decoration-thickness: 2px; }
.faq-answer strong { color: var(--ink); font-weight: 500; }
.faq-answer ul { display: grid; gap: 6px; }
.faq-answer ul li { position: relative; padding-left: 18px; }
.faq-answer ul li::before { content: "\2013"; position: absolute; left: 0; top: 0; }
.faq-answer ol { display: grid; gap: 6px; counter-reset: faq-step; }
.faq-answer ol li { display: flex; gap: 10px; counter-increment: faq-step; color: var(--ink); }
.faq-answer ol li::before { content: "0" counter(faq-step); min-width: 1.5em; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.71; font-variant-numeric: tabular-nums; }
.faq-table { max-width: 48rem; overflow-x: auto; }
.faq-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.faq-table th { padding: 0 16px 8px 0; color: var(--ink-2); font-weight: 400; text-align: left; vertical-align: bottom; }
.faq-table td { padding: 10px 16px 10px 0; border-top: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.faq-table th:last-child, .faq-table td:last-child { padding-right: 0; }
.faq-table td:first-child { font-weight: 500; }
.faq-fees th:not(:first-child), .faq-fees td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.faq-fees td:first-child { white-space: nowrap; }
.faq-tier { display: inline-block; padding: 1px 8px; border-radius: var(--r-badge); font-weight: 400; white-space: nowrap; }
.faq-tier-1 { background: var(--tier-1-chip); }
.faq-tier-2 { background: var(--tier-2-chip); }
.faq-tier-3 { background: var(--tier-3-chip); }
/* The categories, group by group, in up to three columns that drop to two and then one as the screen narrows */
.faq-cats { display: grid; gap: 20px; max-width: 48rem; font-size: var(--fs-small); line-height: 1.5; }
.faq-cat-group { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.faq-cat-head { display: flex; align-items: baseline; gap: 8px; }
.faq-cat-head span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.faq-answer .faq-cat-list { display: block; columns: 3 11rem; column-gap: 24px; color: var(--ink); }
.faq-answer .faq-cat-list li { break-inside: avoid; padding-bottom: 6px; }

/* Still have questions? Same columns as the sections above */
.faq-contact {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; gap: 16px 64px;
  padding-top: 32px; border-top: 1px solid var(--line);
}
.faq-end { padding-top: clamp(72px, 8vw, 112px); }
.faq-contact .cat-group-title { font-weight: 400; }
.faq-contact-text { font-size: var(--fs-body); font-weight: 400; line-height: 1.5; color: var(--ink-2); }
.faq-contact-text a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; overflow-wrap: anywhere; }
.faq-contact-text a:hover { text-decoration-thickness: 2px; }

@media (max-width: 860px) {
  .faq-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1199px) {
  /* Docked at the foot of the screen, the row runs to the screen edges without fading */
  .faq-nav-list, .faq-nav-list.fade-l, .faq-nav-list.fade-r, .faq-nav-list.fade-l.fade-r { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 767px) {
  .faq-contact { padding-top: 0; border-top: 0; }
}
@media (max-width: 560px) {
  .faq-table td, .faq-table th { padding-right: 12px; }
  .faq-fees td:first-child { white-space: normal; }
}


/* ==================== Register ==================== */
:root { --paybar-h: 69px; }  /* the bar: its 44 px button, padding and top border */
/* Placeholders a shade darker than --ink-3, so they read on white (5.3:1) and on the dark card */
.reg-page { --err: #B3360B; --placeholder: #6B6B6B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reg-page { --err: #FF8A5C; --placeholder: #A5A8B4; } }
:root[data-theme="dark"] .reg-page { --err: #FF8A5C; --placeholder: #A5A8B4; }

.reg-page > .section { padding-top: calc(var(--section) / 2); }
.reg-intro { max-width: 46rem; color: var(--ink-2); font-size: var(--fs-text); }
.reg-time { display: flex; align-items: center; gap: 8px; }
.reg-time svg { width: 15px; height: 15px; flex: none; }
.reg-closed { margin-bottom: 32px; padding: 16px 20px; background: var(--card); border-radius: var(--r); }

/* Stepper, at the top of the form: one bar per step, dark once the step is complete. Steps done and the current one are in ink. */
.stepper { display: grid; gap: 12px; }
.stepper-text { font-size: var(--fs-small); font-weight: 500; line-height: 1.5; }
.stepper-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 0; }
.stepper-step { display: grid; gap: 10px; width: 100%; padding: 0 0 2px; border: 0; background: none; color: var(--ink-2); font-size: var(--fs-small); font-weight: 400; line-height: 1.4; text-align: left; cursor: pointer; }
.stepper-bar { height: 4px; border-radius: 2px; background: var(--line); transition: background-color .3s ease; }
.stepper-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.stepper-num { font-variant-numeric: tabular-nums; }
.stepper-pipe { opacity: .45; }
.stepper-step.is-done, .stepper-step[aria-current="step"] { color: var(--ink); font-weight: 500; }
.stepper-step.is-done .stepper-bar { background: var(--ink); }
.stepper-step[aria-current="step"]:not(.is-done) .stepper-bar { background: var(--ink-3); }
@media (hover: hover) { .stepper-step:not([aria-disabled="true"]):hover .stepper-name { text-decoration: underline; text-underline-offset: .3em; } }
.stepper-step[aria-disabled="true"] { cursor: default; }

.reg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 48px clamp(32px, 5vw, 80px); align-items: start; }
.reg-steps { display: grid; gap: 32px; min-width: 0; }

/* A step. One title per screen (Joy, 15 October 2026): the page title and the stepper name the step, so its own title is
   kept for screen readers only, and takes focus when the step opens. */
.reg-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.reg-legend { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reg-title { font-size: var(--fs-group); font-weight: 300; line-height: 1.05; letter-spacing: -.01em; }
.reg-title:focus { outline: 0; }
.reg-hint { max-width: 60ch; margin-bottom: 28px; color: var(--ink-2); font-size: var(--fs-text); }
.reg-step-error { margin: -16px 0 24px; }

/* Back and Next under every step; on the last step Next becomes Pay */
.reg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reg-actions .btn { min-height: 48px; padding-inline: 20px; }
.reg-actions .btn-ghost { padding-inline: 2px; }
.reg-next { margin-left: auto; }
.reg-pay { min-width: 13rem; font-size: var(--fs-body); }
.reg-pay[aria-busy="true"] { cursor: progress; opacity: .7; }
@media (hover: hover) { .btn:hover .arrow-back { transform: translateX(-3px); } }
.pay-note { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: -20px; color: var(--ink-2); font-size: var(--fs-small); text-align: right; }
.pay-note svg { width: 12px; height: 12px; flex: none; }

/* Categories: white chips on the canvas. A chosen chip turns ink and grows a counter, so a second project in the same category is one tap away. */
.picks { display: grid; gap: 32px; scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 16px); }
.pick { display: grid; gap: 12px; }
.pick-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.pick-title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.36; }
.pick-rule { flex-basis: 100%; color: var(--ink-2); font-size: var(--fs-small); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: stretch; max-width: 100%;
  border: 1px solid transparent; border-radius: var(--r); background: var(--card); color: var(--ink);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }  /* a tap on a phone would leave the outline behind */
.chip.is-on { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.chip.is-off-limits { opacity: .45; }
@media (hover: hover) { .chip.is-off-limits:hover { border-color: transparent; } }
.chip.is-off-limits .chip-main { cursor: not-allowed; }
/* Tap targets are 44 px tall (Joy, 15 October 2026): the chip itself, and the − and + inside it reach to its edges */
.chip-main {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 8px 14px 8px 12px;
  border: 0; border-radius: inherit; background: none; color: inherit;
  font-size: var(--fs-small); font-weight: 400; line-height: 1.29; text-align: left; cursor: pointer;
}
.chip.is-on .chip-main { padding-right: 10px; }
.chip-main svg { width: 14px; height: 14px; flex: none; }
.chip .i-check { display: none; }
.chip.is-on .i-check { display: block; }
.chip.is-on .i-plus { display: none; }
.chip-step { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.chip-btn { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-badge); background: transparent; color: inherit; cursor: pointer; }
.chip-btn::after { content: ""; position: absolute; inset: -4px -2px; }
@media (hover: hover) {
  .chip-btn:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
  .chip-btn:disabled:hover { background: transparent; }
}
.chip-btn svg { width: 12px; height: 12px; }
.chip-btn:disabled { opacity: .35; cursor: not-allowed; }
.chip-qty { min-width: 18px; font-size: var(--fs-small); font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.chip.is-on :focus-visible { outline-color: var(--btn-fg); outline-offset: -3px; }
.pick-note { color: var(--ink-2); font-size: var(--fs-small); }
.pick-note:empty { display: none; }
.pick .field { max-width: 26rem; margin-top: 8px; }

/* Phones: a tab for each section (Built, Future, Interiors, Firm), held under the header while you scroll its list (Joy, 15 October 2026).
   Wider screens show every section, and no tabs. */
.pick-tabs, .pick-tabs-hint { display: none; }
.pick-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 44px; padding: 0 4px;
  border: 0; border-radius: var(--r); background: var(--card); color: var(--ink);
  font-size: var(--fs-small); font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.pick-tab[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.pick-tab:focus-visible { outline-offset: 2px; }
.pick-tab-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: color-mix(in srgb, currentColor 16%, transparent); font-size: var(--fs-label); font-variant-numeric: tabular-nums;
}

/* Firm size, at the top of Category Selection: the homepage's tier colours as three cards, each with its fee today.
   One can be chosen, so each has a round mark, as a single choice does. */
.size-pick { margin-bottom: 32px; }
.sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.size {
  position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px 20px;
  border-radius: var(--r); background: var(--tier-bg); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s ease;
}
.size:nth-child(1) { --tier-bg: var(--tier-1); --tier-chip: var(--tier-1-chip); }
.size:nth-child(2) { --tier-bg: var(--tier-2); --tier-chip: var(--tier-2-chip); }
.size:nth-child(3) { --tier-bg: var(--tier-3); --tier-chip: var(--tier-3-chip); }
@media (hover: hover) { .size:hover { box-shadow: inset 0 0 0 1px var(--ink-2); } }
.size:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--ink); }
.size:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.size-text { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-small); line-height: 1.5; }
.size-name { font-weight: 500; }
.size-people { color: var(--ink-2); }
.size-fee { margin-top: 4px; font-weight: 500; font-variant-numeric: tabular-nums; }
.size-period { margin-top: 4px; color: var(--ink-2); font-size: var(--fs-small); }
.size-tick { width: 18px; height: 18px; border: 1px solid var(--ink-2); border-radius: 50%; background: var(--card); transition: box-shadow .2s ease; }
.size:has(input:checked) .size-tick { border-color: var(--btn-bg); background: var(--btn-bg); box-shadow: inset 0 0 0 4px var(--card); }

/* The firm size, as a chip in its card colour, in the basket and the review */
.tier-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-badge); background: var(--tier-chip); color: var(--ink); white-space: nowrap; }
.tier-chip[data-tier="boutique"] { --tier-chip: var(--tier-1-chip); --tier-bg: var(--tier-1); }
.tier-chip[data-tier="established"] { --tier-chip: var(--tier-2-chip); --tier-bg: var(--tier-2); }
.tier-chip[data-tier="large"] { --tier-chip: var(--tier-3-chip); --tier-bg: var(--tier-3); }
.basket .tier-chip { background: var(--tier-bg); }

/* Your Details: Contact, then Firm, each with a small title and one line on why we ask */
.detail-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.detail-group + .detail-group { margin-top: 40px; }
.detail-title { float: left; width: 100%; padding: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.36; }
.detail-hint { clear: both; max-width: 60ch; margin-bottom: 20px; padding-top: 2px; }

/* Fields */
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .field-label { font-size: var(--fs-small); font-weight: 500; line-height: 1.5; }
.field .opt { font-weight: 400; color: var(--ink-2); }
/* Firm address: pincode, state and city side by side, filled from the pincode where we can; then the two address lines */
.address { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.address > legend { float: left; width: 100%; padding: 0 0 6px; }
.address > .field-hint { clear: both; margin-bottom: 16px; }
.address-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
.address-fields .field--full { grid-column: 1 / -1; }
.pin-note { grid-column: 1 / -1; margin-top: -8px; }
.input {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink);
  font-size: var(--fs-body); line-height: 1.5;  /* 16px keeps phones from zooming in */
  transition: border-color .2s ease;
}
@media (hover: hover) { .input:hover { border-color: var(--ink-2); } }
.input:focus, .input:focus-visible { outline: 0; border-color: var(--ink); }
.input::placeholder { color: var(--placeholder); opacity: 1; }
.input[aria-invalid="true"] { border-color: var(--err); }
.input-wrap { position: relative; }
.input-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.input-wrap .input--prefixed { padding-left: 50px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
select.input { appearance: none; padding-right: 40px; cursor: pointer; }
.select-chev { position: absolute; right: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; pointer-events: none; }
.field-hint { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.field-error { color: var(--err); font-size: var(--fs-small); line-height: 1.5; }
.field-error:empty { display: none; }
.uppercase { text-transform: uppercase; }
.uppercase::placeholder { text-transform: none; }
.legal { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--line-soft); }
.legal .input { background: var(--card); }

/* Check boxes */
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--btn-bg); cursor: pointer; }
.check a { color: var(--ink); text-underline-offset: .25em; }
.legal .check { color: var(--ink); }

/* Review: white cards, each with a Change link back to its step */
.review { display: grid; gap: 8px; margin-bottom: 28px; }
.review-group { display: grid; gap: 8px; padding: 20px 20px 12px; background: var(--card); border-radius: var(--r); }
.review-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.review-title { font-size: var(--fs-body); font-weight: 500; line-height: 1.5; }
.review-change {
  display: inline-flex; align-items: center; min-height: 44px; margin: -11px -8px -11px 0; padding: 0 8px;
  border: 0; background: none; color: var(--ink); font-size: var(--fs-small); font-weight: 500;
  text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; cursor: pointer;
}
@media (hover: hover) { .review-change:hover { text-decoration-thickness: 2px; } }
.review-list > div { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 4px 16px; padding-block: 9px; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); line-height: 1.5; }
.review-list dt { color: var(--ink-2); }
.review-list dd { overflow-wrap: anywhere; white-space: pre-line; }
.review-list .is-empty { color: var(--ink-2); }
.review-list .is-missing { color: var(--err); }
.review-list .review-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.review-list > .review-entry { grid-template-columns: minmax(7rem, 11rem) minmax(0, 12rem) auto; justify-content: start; }
.review-entry dt { color: var(--ink); }
.review-entry .review-group-name { color: var(--ink-2); }
.review-entry .review-count { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Project of the Year, on Review & Pay rather than in a pop-up after Pay (Joy, 15 October 2026): a tick beside each project adds it */
.poty-sub { max-width: 60ch; color: var(--ink-2); font-size: var(--fs-small); }
.poty-list { display: grid; gap: 16px; margin-top: 8px; }
.poty-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.poty-group-title { padding: 0 0 6px; color: var(--ink-2); font-size: var(--fs-label); font-weight: 500; line-height: 1.5; }
.check.poty-item { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; min-height: 44px; padding-block: 8px; border-top: 1px solid var(--line-soft); color: var(--ink); }
.poty-item input { margin: 0; }
.poty-fee { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.poty-item:has(input:checked) .poty-fee { color: var(--ink); font-weight: 500; }
.poty-item:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.poty-item:has(input:disabled) input { cursor: not-allowed; }

/* The basket: entries and the total, in a white card that follows you down the page on laptops */
.basket { position: sticky; top: calc(var(--header-h) + 16px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 20px; padding: 24px; background: var(--card); border-radius: var(--r); }
.basket > * { flex: none; }
.basket-head { display: grid; gap: 8px; }
.basket-title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.36; }
.basket-title:focus { outline: 0; }
.basket-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); font-size: var(--fs-small); }
.basket-empty { color: var(--ink-2); font-size: var(--fs-small); }
.lines { display: grid; }
.lines:empty { display: none; }
.line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding-block: 12px; border-top: 1px solid var(--line-soft); }
.line:last-child { border-bottom: 1px solid var(--line-soft); }
.line-name { font-size: var(--fs-small); font-weight: 500; line-height: 1.4; }
.line-name span { display: block; font-weight: 400; color: var(--ink-2); }
.line-price { font-size: var(--fs-small); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-ctrl { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; }
/* 32 px to look at, 44 px to tap */
.qty-btn { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-soft); border-radius: var(--r-badge); background: transparent; cursor: pointer; }
.qty-btn::after { content: ""; position: absolute; inset: -6px; }
@media (hover: hover) {
  .qty-btn:hover { border-color: var(--ink); }
  .qty-btn:disabled:hover { border-color: var(--line-soft); }
}
.qty-btn svg { width: 12px; height: 12px; }
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.qty-num { min-width: 28px; font-size: var(--fs-small); text-align: center; font-variant-numeric: tabular-nums; }
.qty-label { margin-left: 4px; color: var(--ink-2); font-size: var(--fs-small); }
.totals { display: grid; gap: 6px; font-size: var(--fs-small); }
.totals div { display: flex; justify-content: space-between; gap: 12px; }
.totals dt { color: var(--ink-2); }
.totals dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals .total { align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.totals .total dt { color: var(--ink); font-weight: 500; }
.totals .total dd { font-weight: 500; }
.sheet-close { display: none; }

/* Phones and tablets: a slim bar keeps the total in view while you work through a step */
.paybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: calc(var(--paybar-h) + env(safe-area-inset-bottom, 0px));
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--card); border-top: 1px solid var(--line-soft);
}
.paybar-sum { display: grid; font-size: var(--fs-small); line-height: 1.35; }
.paybar-sum strong { font-size: var(--fs-body); font-weight: 500; font-variant-numeric: tabular-nums; }

/* View summary: the basket rises from the foot of the screen as a sheet, over a dimmed page (Joy, 15 October 2026) */
.basket.is-sheet {
  position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 80;
  max-height: min(85dvh, calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px))); margin: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-feature) var(--r-feature) 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
  animation: sheet-in .25s ease;
}
.basket.is-sheet .basket-head { padding-right: 40px; }
.basket.is-sheet .sheet-close {
  position: absolute; top: 14px; right: calc(var(--gutter) - 10px); display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.sheet-close svg { width: 20px; height: 20px; }
@media (hover: hover) { .sheet-close:hover { background: var(--line-soft); } }
.sheet-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(18, 18, 18, .55); animation: backdrop-in .25s ease; }
html:has(.basket.is-sheet) { overflow: hidden; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes backdrop-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .basket.is-sheet, .sheet-backdrop { animation: none; } }

/* You're in */
.done-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.done-card { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3vw, 32px); background: var(--card); border-radius: var(--r); }
.done-code { font-size: var(--fs-figure); font-weight: 300; line-height: 1; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; word-break: break-all; }
.done-card .btn { justify-self: start; }
/* What was paid, for the entrant's accounts team, above Download invoice */
.done-receipt { display: grid; margin-top: 8px; font-size: var(--fs-small); }
.done-receipt div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: 1px solid var(--line-soft); }
.done-receipt div:last-child { border-bottom: 1px solid var(--line-soft); }
.done-receipt dt { color: var(--ink-2); }
.done-receipt dd { min-width: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.done-list { display: grid; }
.done-list li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 16px; padding-block: 10px; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); }
.done-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.done-num { font-variant-numeric: tabular-nums; font-weight: 500; }
.done-list span:last-child { color: var(--ink-2); }
.done-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.done-after { max-width: 60ch; margin-top: 20px; color: var(--ink-2); font-size: var(--fs-small); }
.demo-note { max-width: 60ch; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); }

@media (min-width: 1081px) {
  .paybar, .sheet-backdrop { display: none !important; }
  .basket { margin-top: calc(var(--fs-small) * 1.5 + 12px); }  /* the height of the stepper's "steps complete" line and its gap, so the card starts level with the bars */
  /* Never taller than the screen, so the total stays in view; a long list of entries scrolls inside the card (Joy, 15 October 2026) */
  .basket { max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - 32px); }
  .lines { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 1080px) {
  .reg-grid { grid-template-columns: minmax(0, 1fr); }
  .basket:not(.is-sheet) { position: static; }
  .reg-page { padding-bottom: var(--paybar-h); }
  /* The cookie notice sits above the bar, not over it */
  html:has(.paybar:not([hidden])) .cookie { bottom: calc(var(--paybar-h) + 12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 860px) {
  .sizes, .done-grid { grid-template-columns: minmax(0, 1fr); }
  .address-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  html:has(.paybar:not([hidden])) .cookie { bottom: calc(var(--paybar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 10px; }
}
@media (max-width: 560px) {
  .stepper-list { gap: 4px; }
  .stepper-step { font-size: var(--fs-label); }
  .stepper-label { display: grid; }  /* number above the name; the divider only reads on one line */
  .stepper-pipe { display: none; }
  .pick-tabs-hint { display: block; margin-bottom: 4px; color: var(--ink-2); font-size: var(--fs-small); }  /* above the tabs, which stick under the header */
  .pick-tabs {
    position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 5;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
    margin: 0 calc(var(--gutter) * -1) 16px; padding: 8px var(--gutter);
    background: var(--page);
  }
  .picks { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 60px + 8px); }  /* under the header and the tabs */
  .picks > .pick:not(.is-current) { display: none; }
  .fields, .address-fields { grid-template-columns: minmax(0, 1fr); }
  .reg-next { flex: 1; }
  .reg-actions.is-last #back-btn { display: none; }  /* on phones, Review & Pay has a Change link on every card, so Pay gets the full width */
  .reg-pay { min-width: 0; }
  .pay-note { display: block; text-align: center; }  /* the lock stays beside the first word when the line wraps */
  .pay-note svg { display: inline-block; margin-right: 4px; vertical-align: -1px; }
  .done-list li { grid-template-columns: minmax(0, 1fr); }
  .done-actions .btn { width: 100%; }
  .review-list > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .review-list > .review-entry { grid-template-columns: minmax(0, 1fr) auto; justify-content: stretch; gap: 0 16px; }
  .review-entry .review-count { text-align: right; }
  .review-entry .review-group-name { grid-row: 2; }
  .review-entry .review-count { grid-row: 1; grid-column: 2; }
}

/* ==================== Page not found ==================== */
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }