/*
  The whole marketing site's stylesheet.

  ONE FILE, NO BUILD STEP, NO FRAMEWORK. Public-Website.md's performance note asks for LCP under
  2.5 s at the 75th percentile on mobile and no render-blocking third-party scripts. The cheapest
  way to meet that is to have almost nothing: this file is a few kilobytes, there is no JavaScript
  on any page, and no font, script or stylesheet is fetched from anywhere else. A visitor on a slow
  connection in a small town gets the page in one round trip after the HTML.

  System fonts for the same reason, and because they already render Tamil correctly on every device
  that has to — a webfont would be a large download to make Tamil look slightly different.

  >>> THE LOOK IS A PRODUCT SITE, NOT A BROCHURE, AND IT IS NOT A WEDDING BRAND.
  It was deep red on warm cream, which is right for one of the fourteen Event Categories and wrong
  for the other thirteen: a college alumni committee and a company booking a conference both read
  it as somebody else's product. Navy and violet carry a celebration without belonging to one kind
  of it.
*/

:root {
  color-scheme: light;

  /* Ink */
  --ink: #10152a;
  --ink-soft: #4a5474;
  --ink-faint: #6d7794;

  /* Surfaces */
  --paper: #ffffff;
  --paper-warm: #f6f7fb;
  --paper-tint: #f3f1fd;
  --surface: #ffffff;

  --line: #e4e7f0;
  --line-soft: #eef0f7;

  /*
    >>> THE HAIRLINE EVERY CARD USES, AND IT IS DELIBERATELY ALMOST INVISIBLE.

    The cards were outlined in --line, which reads as a drawn box: eight rectangles with grey
    edges look like a table of contents rather than a set of things. What actually separates a card
    from its ground is that the card is WHITE and the ground is not, so the border only has to stop
    the two dissolving into each other where the tint is faintest. This is that, and nothing more.

    --card-lift does the rest. It is far softer than --shadow, which is sized for the pricing cards
    that are meant to sit above the page.
  */
  --hairline: #eceef5;
  --card-lift: 0 1px 2px rgb(16 21 42 / 4%), 0 6px 16px -12px rgb(16 21 42 / 12%);

  /* Brand. Violet leads, blue supports, and the warm tone survives as the accent on the mark —
     the platform is Indian and the name is Tamil, and an entirely cool page loses that. */
  --brand: #6d4aff;
  --brand-deep: #5334e0;
  --brand-soft: #a78bfa;
  --brand-wash: #f1ecff;
  --blue: #2563eb;
  --warm: #ff7a59;

  /* Text ON a brand fill. Kept as a token rather than the literal white so that the contrast of
     the primary call to action is stated in one place and can be checked there. */
  --on-brand: #ffffff;

  /* The dark bands — the masthead, the hero, each page head, the moments band, the closing call
     to action and the footer. They carry their own ink rather than the tokens above, which is what
     lets them stay dark while everything around them is light. */
  --night: #0b1024;
  --night-soft: #131a35;
  --night-line: #26304f;
  --night-ink: #f4f6fd;
  --night-ink-soft: #a9b3d0;

  --measure: 62ch;
  --wrap: 92rem;

  --radius: 0.875rem;
  --radius-lg: 1.25rem;
  --shadow: 0 1px 2px rgb(16 21 42 / 5%), 0 10px 30px -14px rgb(16 21 42 / 18%);
  --shadow-lg: 0 2px 4px rgb(16 21 42 / 6%), 0 24px 60px -24px rgb(16 21 42 / 28%);
}

/*
  >>> ONE APPEARANCE, DELIBERATELY, AND THIS USED TO FOLLOW THE SYSTEM SCHEME.

  There was a `prefers-color-scheme: dark` block here that inverted --paper, --ink, --surface and
  the brand. It was the right instinct for an application and the wrong one for this page, and the
  reason is the design rather than taste:

  THE PAGE IS A COMPOSITION OF LIGHT AND DARK BANDS. A dark masthead and page head, light content,
  a dark band in the middle, light again, then a dark close and footer. That alternation is the
  design. Under the dark scheme every "light" band went dark too and the whole rhythm collapsed
  into one flat dark page — the bands stopped being bands, because there was nothing for them to
  contrast against. A visitor with a dark system saw a different and worse design, and never knew
  the other one existed.

  The `--night*` tokens below carry their own ink for exactly this reason, and they are what makes
  the dark bands dark. They are unaffected by any of this.

  `color-scheme: light` is not decoration: it tells the browser to paint the scrollbar, the form
  controls and the canvas behind the page in light, which otherwise stay dark on a dark system and
  frame the page in a colour it does not use.

  The Customer Portal is where a theme belongs and it HAS one, with a toggle. This is a seven-page
  brochure that a stranger reads once.
*/

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans Tamil", "Latha", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/*
  >>> WIDE, WITH THE READING MEASURE HELD SEPARATELY.

  The container is 92rem so the page fills a laptop screen rather than sitting in a column with
  margins either side. What does NOT widen with it is prose: --measure still caps a paragraph at
  62 characters, because a line of body text spanning 1,400 pixels is measurably harder to read —
  the eye loses its place on the return sweep. So the GRIDS span and the sentences do not, which is
  what every wide product site actually does even when it looks edge to edge.
*/
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 48rem) {
  .wrap {
    padding-inline: 2.5rem;
  }
}

@media (min-width: 80rem) {
  .wrap {
    padding-inline: 3.5rem;
  }
}

/* The first thing in the tab order, visible only once focused. */
.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--on-brand);
  padding: 0.6rem 1rem;
  z-index: 10;
}

.skip:focus {
  inset-inline-start: 0;
}

a {
  color: var(--brand);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--brand-deep);
}

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

img,
svg {
  max-width: 100%;
}

/* --- masthead ----------------------------------------------------------- */

.masthead {
  border-block-end: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* The hero is dark and sits directly beneath, so on the home page the bar joins it rather than
   drawing a white line across the top of the design. */
.masthead--onNight {
  background: var(--night);
  border-block-end-color: transparent;
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.85rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  margin-inline-end: auto;
}

.masthead--onNight .wordmark {
  color: var(--night-ink);
}

.wordmark__mark {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  align-items: center;
}

.nav__link {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  padding-block: 0.15rem;
  border-block-end: 2px solid transparent;
}

.masthead--onNight .nav__link {
  color: var(--night-ink-soft);
}

.nav__link:hover {
  color: var(--ink);
}

.masthead--onNight .nav__link:hover {
  color: var(--night-ink);
}

.nav__link--current {
  color: var(--ink);
  border-block-end-color: var(--brand);
}

.masthead--onNight .nav__link--current {
  color: var(--night-ink);
}

/* --- page body ---------------------------------------------------------- */

main {
  flex: 1;
}

/*
  >>> A READING PAGE IS NARROWER THAN THE GRIDS, AND SHARES THE SAME `.wrap` ELEMENT.

  `.wrap` is 92rem so the home page's grids can span a laptop screen. On a prose page that left the
  text pinned to the far left of a 1,440px window with sixty per cent of the page empty beside it,
  because `--measure` caps a paragraph long before the container runs out.

  Both classes sit on the same element, so this simply wins — and it narrows the pricing tables
  too, which were stretched across the full width with air inside every row.
*/
.page-body {
  max-width: 66rem;
  padding-block: 2.5rem 4rem;
}

h1 {
  font-size: clamp(2rem, 1.45rem + 2.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-block: 0 0.75rem;
  max-width: 22ch;
}

h2 {
  font-size: clamp(1.65rem, 1.35rem + 1.4vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-block: 0 0.75rem;
}

h3 {
  font-size: 1.075rem;
  margin-block: 0 0.4rem;
}

p,
ul,
address {
  max-width: var(--measure);
}

p {
  margin-block: 0 1rem;
}

address {
  font-style: normal;
  white-space: pre-line;
  color: var(--ink-soft);
  margin-block-end: 1rem;
}

.lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-block-end: 1.5rem;
}

.footnote {
  font-size: 0.9375rem;
  color: var(--ink-faint);
}

.entity {
  font-weight: 600;
  margin-block-end: 0.25rem;
}

.notice {
  background: var(--brand-wash);
  border-inline-start: 3px solid var(--brand);
  padding: 0.85rem 1.1rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.prose-list {
  padding-inline-start: 1.25rem;
  margin-block: 0 1.25rem;
}

.prose-list li {
  margin-block-end: 0.6rem;
}

.contact-line {
  font-size: 1.25rem;
}

/* --- buttons ------------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand);
  color: var(--on-brand);
  text-decoration: none;
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  border-radius: 2rem;
  box-shadow: var(--shadow);
}

.button:hover {
  background: var(--brand-deep);
  color: var(--on-brand);
}

/* The second action. A page with one button sends everybody who is not ready straight to the
   back button. */
.button--quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: none;
}

.button--quiet:hover {
  background: var(--paper-warm);
  color: var(--ink);
  border-color: var(--ink-faint);
}

.button--onNight {
  background: #ffffff;
  color: var(--night);
}

.button--onNight:hover {
  background: #e9ecf7;
  color: var(--night);
}

.button--ghostNight {
  background: transparent;
  color: var(--night-ink);
  border: 1px solid var(--night-line);
  box-shadow: none;
}

.button--ghostNight:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--night-ink);
}

/* --- section rhythm ----------------------------------------------------- */

.section {
  padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem);
}

.section--tinted {
  background: var(--paper-warm);
  border-block: 1px solid var(--line-soft);
}

.section--brandTinted {
  background: var(--paper-tint);
}

.section__intro {
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: 1.075rem;
}

/* The small capitalised label above a heading — the convention every product site uses to say
   what KIND of section this is before the heading says what it holds. */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-wash);
  border-radius: 2rem;
  padding: 0.3rem 0.85rem;
  margin-block-end: 1rem;
}

/* Two columns where the left is a heading block and the right is the content it introduces. */
.split {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    align-items: start;
  }
}
/* --- hero --------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(45rem 30rem at 12% -15%, rgb(109 74 255 / 38%), transparent 60%),
    radial-gradient(40rem 26rem at 88% 10%, rgb(37 99 235 / 26%), transparent 58%),
    var(--night);
  color: var(--night-ink);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

/* The device mock only earns its place when there is room for it. Below this it would be a
   postage stamp under the words, so it is hidden rather than shrunk. */
@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem;
  }
}

.hero__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--night-ink-soft);
  border: 1px solid var(--night-line);
  border-radius: 2rem;
  padding: 0.35rem 0.95rem;
  margin-block-end: 1.5rem;
}

.hero__title {
  color: var(--night-ink);
  max-width: 16ch;
  font-size: clamp(2.3rem, 1.6rem + 3.2vw, 3.9rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
}

/* The gradient half of the headline. `background-clip: text` degrades to the solid colour it
   inherits wherever it is unsupported, so nothing is ever unreadable. */
.hero__accent {
  background: linear-gradient(100deg, var(--brand-soft), #7fb0ff 60%, #b79bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  color: var(--night-ink-soft);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
  max-width: 46ch;
  margin-block: 1.25rem 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-block: 2rem 1.75rem;
}

/* The three short promises under the buttons. Each is a fact about the product rather than a
   claim about its popularity — see the home page's own note on why that distinction is enforced. */
.assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.assurances li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--night-ink-soft);
  font-size: 0.925rem;
}

.assurances svg {
  flex: none;
  color: var(--brand-soft);
}

/* --- the device mock ---------------------------------------------------- */

/*
  >>> DRAWN, NOT PHOTOGRAPHED, AND THAT IS A CONSTRAINT RATHER THAN A PREFERENCE.
  This site fetches no images at all, which is how it meets the mobile speed target. The hero
  visual is therefore inline SVG: a few kilobytes, sharp at any size, and it costs no request. It
  abstracts the real dashboard rather than pretending to be a screenshot of it — a drawing that
  claimed to be a photograph of software would be the same kind of untruth as an invented
  testimonial, just quieter.
*/
.hero__visual {
  display: none;
}

@media (min-width: 64rem) {
  .hero__visual {
    display: block;
    filter: drop-shadow(0 30px 60px rgb(0 0 0 / 45%));
  }
}

/* --- the strip beneath the hero ----------------------------------------- */

.strip {
  background: var(--paper);
  border-block-end: 1px solid var(--line-soft);
  padding-block: 1.75rem;
}

.strip__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-block-end: 1rem;
  max-width: none;
}

.strip__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.strip__items li {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-warm);
  border: 1px solid var(--hairline);
  border-radius: 2rem;
  padding: 0.35rem 0.95rem;
}

/* --- occasions ---------------------------------------------------------- */

/* THREE COLUMNS, NOT auto-fit: there are nine tiles, and auto-fit chose four per row and left
   the ninth alone on a row of its own. A count that divides evenly is worth pinning. */
.occasions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 40rem) {
  .occasions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
  Each tile carries its own gradient, and a photograph — when one exists — is an `<img>` child
  layered over it. An `<img>` rather than a `background-image` because only a real element can be
  lazy-loaded and decoded asynchronously, and this section is below the fold on every viewport.
*/
.occasion {
  position: relative;
  isolation: isolate;
  min-height: 9.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  color: #fff;
  background: linear-gradient(150deg, #3b2a7a, #1b2452);
  text-decoration: none;
}

.occasion:nth-child(2) { background: linear-gradient(150deg, #7a2f4e, #3a1c3f); }
.occasion:nth-child(3) { background: linear-gradient(150deg, #1e3a6b, #14243f); }
.occasion:nth-child(4) { background: linear-gradient(150deg, #6b2f6e, #2c1740); }
.occasion:nth-child(5) { background: linear-gradient(150deg, #1f5150, #10262f); }
.occasion:nth-child(6) { background: linear-gradient(150deg, #4a3a86, #1d1d44); }
.occasion:nth-child(7) { background: linear-gradient(150deg, #7a4a25, #3a2216); }
.occasion:nth-child(8) { background: linear-gradient(150deg, #2f5f3f, #16301f); }
.occasion:nth-child(9) { background: linear-gradient(150deg, #2b3a72, #171d3c); }

/*
  THE PHOTOGRAPH LAYER, WHICH IS OPTIONAL BY DESIGN.

  The gradient underneath is not a placeholder waiting to be replaced — it stays, and shows through
  wherever a photograph has not been supplied or fails to load. A tile is therefore never broken,
  only plainer, which is why the site can ship today and gain pictures later without a redesign.

  `object-fit: cover` because the sources will not all be exactly 3:2, and letting one letterbox
  inside a nine-tile grid looks worse than cropping it.
*/
.occasion__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  >>> THE SCRIM IS WHAT MAKES THE LABEL READABLE, AND IT IS DRAWN UNCONDITIONALLY.

  White text over an arbitrary photograph is a coin toss: a bright sky behind "Weddings" makes the
  word vanish. It could have been drawn only when a photograph is present — `:has(.occasion__photo)`
  — but drawing it always is both simpler and better: over the gradient tiles it deepens the bottom
  corner the label already sits in, and there is no browser-support question to think about.

  >>> THE Z-INDEXES ARE LOAD-BEARING AND THE FIRST VERSION HAD THEM WRONG. A generated `::after` is
  the element's LAST child, so among positioned boxes it paints on top — the scrim would have
  darkened the icon and the label it exists to make legible. `isolation` keeps that ordering inside
  the tile rather than letting a stacked label escape over the rest of the page.
*/
.occasion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgb(8 11 26 / 88%) 0%, rgb(8 11 26 / 66%) 28%, rgb(8 11 26 / 20%) 62%, transparent 100%);
}

.occasion__icon {
  position: absolute;
  z-index: 2;
  inset-block-start: 0.9rem;
  inset-inline-start: 0.9rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 0.6rem;
  background: rgb(255 255 255 / 16%);
  color: #fff;
}

.occasion__label {
  position: relative;
  z-index: 2;
  font-weight: 650;
  font-size: 0.975rem;
  margin: 0;
  max-width: none;
  text-shadow: 0 1px 6px rgb(0 0 0 / 45%);
}

/* --- features ----------------------------------------------------------- */

/* Eight features: two per row divides evenly in this column, three leaves two stranded. */
.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 34rem) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
  >>> CARDS RATHER THAN EIGHT PARAGRAPHS IN A GRID.

  Loose text in columns is readable and it does not look like a product page — a visitor scanning
  for "does it do check-in" has nothing to fix their eye on, so the section reads as one block of
  prose. A bordered surface gives each capability an edge and makes the grid legible at a glance,
  which is what both reference designs do and what the pricing cards on this same page already did.

  The surface is a token, so this inverts correctly in the dark scheme instead of staying white.
*/
.feature {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.35rem;
  box-shadow: var(--card-lift);
}

.feature__icon {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--brand-wash);
  color: var(--brand);
  margin-block-end: 0.85rem;
}

/*
  The icon tint rotates through the palette so eight cards do not read as eight of the same thing.
  It is decoration only: nothing about a feature is encoded in its colour, and the heading beside it
  carries the whole meaning — so a visitor who cannot separate these hues loses nothing.
*/
.feature:nth-child(4n + 2) .feature__icon { background: rgb(37 99 235 / 12%); color: var(--blue); }
.feature:nth-child(4n + 3) .feature__icon { background: rgb(255 122 89 / 14%); color: #c2410c; }
.feature:nth-child(4n + 4) .feature__icon { background: rgb(16 143 108 / 12%); color: #0f766e; }

.feature h3 {
  margin-block-end: 0.3rem;
}

.feature p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-block-end: 0;
  max-width: none;
}

/* --- the page head band ------------------------------------------------- */

/*
  >>> EVERY PAGE OPENS DARK, WHICH IS WHAT MAKES THIS A SITE RATHER THAN A HOME PAGE.

  The home page alternated dark and light bands and every other page was one pale column under a
  pale bar. The two did not look like the same product. This band carries the heading and the
  opening sentence on the same night ground the hero uses, so `about`, `pricing` and the three legal
  documents all begin the way home does and the masthead can be one colour everywhere.

  It uses the `--night*` tokens, which are NOT redefined by the dark scheme — so this stays dark
  when the visitor's system is light, and does not go double-dark when it is not.
*/
.pagehead {
  background:
    radial-gradient(48rem 26rem at 15% -20%, rgb(109 74 255 / 34%), transparent 62%),
    var(--night);
  color: var(--night-ink);
  padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.25rem);
}

.pagehead h1 {
  color: var(--night-ink);
  margin-block-end: 0.9rem;
}

.pagehead .lede {
  color: var(--night-ink-soft);
  margin-block-end: 0;
}

/* The "last updated" line on the three legal documents, which sits above the summary. */
.pagehead .footnote {
  color: var(--night-ink-soft);
  opacity: 0.8;
}

/* The band already carries the top spacing, so the body below it starts closer in. */
.pagehead + .page-body {
  padding-block-start: 2.75rem;
}

/* --- the dark band ------------------------------------------------------ */

.band {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(40rem 24rem at 20% 0%, rgb(109 74 255 / 30%), transparent 60%),
    var(--night);
  color: var(--night-ink);
  padding-block: clamp(3rem, 2rem + 3.5vw, 5rem);
}

/*
  >>> THE BAND PHOTOGRAPH, WHICH IS OPTIONAL LIKE THE TILES.

  Same contract as `.occasion__photo`: the gradient underneath stays and shows through if no file
  has been supplied, so the band is never broken, only plainer.

  The difference is the scrim, which is far heavier here. A tile carries two words in a corner; this
  band carries a heading, a paragraph and four figures across the whole width, so there is nowhere
  for the picture to be busy. It is treated as texture at low contrast rather than as an image the
  visitor is meant to look at — which is also why it takes no `alt` text and is not announced.
*/
.band__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgb(11 16 36 / 94%) 0%, rgb(11 16 36 / 82%) 45%, rgb(11 16 36 / 68%) 100%),
    radial-gradient(40rem 24rem at 20% 0%, rgb(109 74 255 / 26%), transparent 60%);
}

.band h2 {
  color: var(--night-ink);
}

.band .eyebrow {
  color: var(--brand-soft);
  background: rgb(255 255 255 / 8%);
}

.band__lede {
  color: var(--night-ink-soft);
  max-width: 46ch;
}

/* Two by two rather than a single row: four across the top of a tall band left the whole lower
   half of it empty, which reads as content that failed to load. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.fact {
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  background: rgb(255 255 255 / 4%);
}

.fact__value {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--night-ink);
  line-height: 1.15;
}

.fact__label {
  display: block;
  font-size: 0.875rem;
  color: var(--night-ink-soft);
  margin-block-start: 0.3rem;
}

/* --- how it works ------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

/*
  The three steps are cards for the same reason the features are: a numbered circle above loose text
  reads as a list of paragraphs, and the reference design gives each step an edge. The number stays
  where it was, half outside the card, so the sequence is still the first thing read.
*/
.steps li {
  counter-increment: step;
  padding: 3.25rem 1.35rem 1.35rem;
  position: relative;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--card-lift);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-block-start: 1.35rem;
  inset-inline-start: 1.35rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
}

.steps strong {
  display: block;
  color: var(--ink);
  font-size: 1.075rem;
  margin-block-end: 0.35rem;
}

/* --- pricing ------------------------------------------------------------ */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--card-lift);
  display: flex;
  flex-direction: column;
}

/* The middle card is raised rather than merely outlined: a pricing table where one plan is
   recommended should say so with weight, not with a word alone. */
.plan--featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
}

.plan__badge {
  position: absolute;
  inset-block-start: -0.8rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: 0.25rem 0.85rem;
  white-space: nowrap;
}

.plan h3 {
  font-size: 1.2rem;
}

.plan__for {
  color: var(--ink-soft);
  font-size: 0.925rem;
  max-width: none;
}

.plan__price {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block: 0.75rem 0.25rem;
  max-width: none;
}

.plan__unit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-faint);
}

.plan__list {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  max-width: none;
  color: var(--ink-soft);
  font-size: 0.925rem;
}

.plan__list li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-block-end: 0.5rem;
}

.plan__list svg {
  flex: none;
  color: var(--brand);
  margin-block-start: 0.2rem;
}

.plan .button {
  margin-block-start: auto;
  justify-content: center;
}

/* --- closing call to action --------------------------------------------- */

.closing {
  background:
    radial-gradient(38rem 22rem at 80% 120%, rgb(109 74 255 / 32%), transparent 60%),
    var(--night);
  color: var(--night-ink);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.closing h2 {
  color: var(--night-ink);
  max-width: 20ch;
}

.closing p {
  color: var(--night-ink-soft);
}

.closing__inner {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 52rem) {
  .closing__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
/* --- tables ------------------------------------------------------------- */

/* Wide content scrolls inside its own box; the page body never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
  margin-block-end: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 0.5rem;
}

.rates {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9875rem;
}

.rates caption {
  text-align: start;
  padding: 0.75rem 1rem;
  color: var(--ink-faint);
  font-size: 0.9375rem;
  border-block-end: 1px solid var(--line);
}

.rates th,
.rates td {
  padding: 0.6rem 1rem;
  text-align: end;
  border-block-start: 1px solid var(--line);
}

.rates thead th {
  border-block-start: 0;
  color: var(--ink-faint);
  font-weight: 600;
}

.rates tbody th[scope="row"],
.rates thead th:first-child {
  text-align: start;
  font-weight: 500;
}

/* --- footer ------------------------------------------------------------- */

/*
  >>> THE FOOTER IS DARK IN BOTH COLOUR SCHEMES, LIKE THE HERO AND THE CLOSING BAND.

  The page is deliberately a light-and-dark alternation rather than one ground throughout: a dark
  hero, light bands of content, a dark band in the middle, then a dark close. Ending on a pale
  footer broke that rhythm — the closing call to action went dark and then the page went light again
  underneath it for the legal text, which reads as two different sites stapled together.

  It uses the `--night*` tokens, which carry their OWN ink and are not redefined by the dark scheme
  (see the token block at the top). So this stays dark when the visitor's system is light, which is
  the point, and it does not go double-dark when their system is dark.
*/
.footer {
  border-block-start: 1px solid var(--night-line);
  background: var(--night);
  padding-block: 2.5rem 1.75rem;
  font-size: 0.9375rem;
  color: var(--night-ink-soft);
}

/*
  Links here are the statutory ones — terms, privacy, refunds, the support address. `--brand` is a
  violet chosen against white and it is too dark to sit on the night ground, so the footer states
  its own. This is the same reason `--on-brand` exists for buttons.
*/
.footer a {
  color: var(--night-ink);
  text-decoration-color: rgb(255 255 255 / 40%);
}

.footer a:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

.footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem;
}

.footer__heading {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--night-ink-soft);
  margin-block: 0 0.6rem;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__list li {
  margin-block-end: 0.35rem;
}

.footer__entity {
  font-weight: 600;
  color: var(--night-ink);
  margin-block-end: 0.25rem;
}

.footer p {
  margin-block-end: 0.35rem;
}

.footer__copyright {
  margin-block: 1.75rem 0;
  color: var(--night-ink-soft);
}