/* ==========================================================================
   aczen.live stylesheet
   Palette and font are aczen.in's own (Inter, smebank blues, smeorange),
   so the redesign reads as the same brand. The signature kept from the
   ledger concept: an orange double margin line down the left of the page.
   Orange means "due / overdue / needs action" and nothing else.
   Mobile-first: base rules target 360px phones, min-width queries widen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

/* Metric-matched stand-in for Inter: Arial stretched to Inter's width and line box, so the font-display swap moves no text (no layout shift) */
@font-face {
  font-family: "Inter Fallback"; /* the name the --font stack references right after "Inter" */
  src: local("Arial"); /* already installed on Windows/macOS, so it costs no download */
  size-adjust: 107%; /* Inter's glyphs run ~7% wider than Arial's; scaling matches line lengths so wraps don't change on swap */
  ascent-override: 90%; /* Inter's ascender, so the first baseline sits where Inter's will */
  descent-override: 22.43%; /* Inter's descender, so line boxes keep the same height after the swap */
  line-gap-override: 0%; /* Inter has no built-in line gap; Arial's would add extra height */
}

/* Every colour and spacing decision lives here; each colour names its aczen.in source so the mapping stays traceable */
:root {
  --paper: #FFFFFF; /* aczen.in white: page background, same as production */
  --paper-deep: #EDF3FF; /* aczen.in smebank-50: tinted sections, table headers, audience band */
  --cell: #F9FAFB; /* aczen.in gray-50: calendar day squares, so they read on a white card */
  --ink: #111827; /* aczen.in gray-900: headings and body text, 17.7:1 on white */
  --ink-soft: #4B5563; /* aczen.in gray-600: secondary text, 7.6:1 on white and 6.8:1 on smebank-50 */
  --rule: #E5E7EB; /* aczen.in gray-200: borders and ledger rule lines */
  --brand: #0A5CF5; /* aczen.in smebank-600: primary buttons, links, today ring; 5.4:1 on white */
  --brand-hover: #094DCE; /* aczen.in smebank-700: primary hover, 7.1:1 with white text */
  --brand-deep: #042158; /* aczen.in smebank-950: closing band background, 15.4:1 with white text */
  --deadline: #FF914D; /* aczen.in smeorange-500: fills and lines only (is-due cells, margin line); fails AA as text */
  --deadline-text: #B54708; /* darker orange for orange text on light grounds: 5.4:1 on white, 4.5:1 on its tint */
  --deadline-tint: #FFE6D6; /* aczen.in smeorange-100: background behind .tag-due text */
  --info: #2E77FF; /* aczen.in smebank-500: GSTR-2B swatch and cell outline (non-text only) */
  --info-tint: #D6E4FF; /* aczen.in smebank-100: GSTR-2B cell fill under ink text, 13.9:1 */
  --done: #1F7A4D; /* paid/matched/filed green, 5.3:1 on white (not in aczen.in's palette; kept for "done") */
  --done-tint: #E7F5EC; /* light green behind done text, keeps 4.7:1 */
  --focus-on-dark: #80ACFF; /* light brand blue for focus rings on smebank-950, 6.8:1 there */

  --radius-sm: 8px; /* buttons and calendar cells: the smallest tier of the radius hierarchy */
  --radius-md: 12px; /* plans and chat bubbles: middle tier */
  --radius-lg: 16px; /* product panels (filing card, transcript): top tier */
  --ease-out: cubic-bezier(.2, .7, .2, 1); /* one shared deceleration curve so every file's motion feels the same */

  --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; /* aczen.in's family; the metric-matched fallback holds Inter's footprint while it loads, system fonts cover devices without Arial */

  --margin-x: 14px; /* phone: margin line hugs the edge so text keeps its width */
  --rule-w: 5px; /* two 1px lines with a 3px gap between them */
  --gutter: 16px; /* minimum breathing room between the margin line and the text */
  --pad-r: 16px; /* right side gutter on phones */
  --pad-l: calc(var(--margin-x) + var(--rule-w) + var(--gutter)); /* content always starts right of the margin line */
  --content-max: 1160px; /* widest the content column gets; beyond this lines get too long to scan */
  --section-y: 64px; /* phone vertical rhythm; one variable so every section breathes the same */
}

/* Tablet widths: pull the margin line inward so it reads as a book margin, not a border */
@media (min-width: 760px) {
  /* Redefining on :root recomputes --pad-l everywhere automatically */
  :root {
    --margin-x: 40px; /* halfway to the desktop position */
    --gutter: 28px; /* more air next to the line once there is room for it */
    --pad-r: 40px; /* matching right gutter so the column doesn't feel lopsided */
    --section-y: 96px; /* desktop rhythm per the brief */
  }
}

/* Desktop: the margin line settles at its book-like position */
@media (min-width: 1100px) {
  /* Only the margin moves; gutters stay as set above */
  :root {
    --margin-x: 64px; /* inside the 56-72px band the brief specifies */
    --gutter: 32px; /* step-day numerals sit just right of the line */
  }
}

/* --------------------------------------------------------------------------
   2. Base and reset
   -------------------------------------------------------------------------- */

/* border-box everywhere so padding never pushes an element past 100% width (the usual horizontal-scroll culprit) */
*,
*::before,
*::after {
  box-sizing: border-box; /* width includes padding and border */
}

/* Root-level scroll behaviour and text sizing */
html {
  -webkit-text-size-adjust: 100%; /* stop iOS inflating text in landscape and breaking the layout */
  scroll-padding-top: 84px; /* in-page anchors land below the sticky header instead of under it */
}

/* The page itself */
body {
  margin: 0; /* browser default 8px margin would offset the margin line */
  background: var(--paper); /* explicit background, white like aczen.in */
  color: var(--ink); /* default text colour for everything that doesn't override it */
  font-family: var(--font); /* Inter */
  font-size: 1.0625rem; /* 17px on phones: readable without making lines too short */
  font-weight: 400; /* regular body weight; heavy weights are reserved for headings */
  font-optical-sizing: auto; /* lets Inter pick its text cut (opsz ~14-18) for body sizes */
  line-height: 1.55; /* comfortable reading leading for long paragraphs */
  font-kerning: normal; /* ensures kerning pairs apply in every engine */
  -webkit-font-smoothing: antialiased; /* lighter, crisper rendering of dark-on-light text on macOS */
}

/* 18px body once the screen is wide enough for longer lines */
@media (min-width: 760px) {
  /* Scales body copy only; rem-based sizes elsewhere stay predictable */
  body {
    font-size: 1.125rem; /* 18px per the brief's 17-18px range */
  }
}

/* The signature: an orange double margin line running the full page height */
body::before {
  content: ""; /* pseudo-elements render only with content set */
  position: fixed; /* fixed to the viewport, so it spans every section and never adds scroll length */
  top: 0; /* from the very top edge */
  bottom: 0; /* to the very bottom, i.e. full viewport height at all scroll positions */
  left: var(--margin-x); /* position shifts with the breakpoint tokens */
  width: var(--rule-w); /* exactly two lines and their gap */
  background: linear-gradient(to right, var(--deadline) 0 1px, transparent 1px 4px, var(--deadline) 4px 5px); /* two 1px orange lines, 3px apart, like an account-book margin */
  opacity: 0.5; /* half strength: a signature, not a shout, and it keeps full-strength orange for real deadlines */
  pointer-events: none; /* purely decorative, must never block a click */
  z-index: 30; /* above section backgrounds and the sticky header, so the line is truly continuous */
}

/* Headings share a reset; each class below sets its own scale */
h1,
h2,
h3 {
  margin: 0; /* spacing is owned by component rules, not browser defaults */
  text-wrap: balance; /* avoids single orphaned words on multi-line headings */
}

/* Paragraph reset: components set spacing explicitly so margins never collapse unexpectedly */
p {
  margin: 0; /* each component chooses its own gap */
  text-wrap: pretty; /* fewer one-word last lines in body copy */
}

/* SVGs are block-level so no baseline gap appears under the brand mark */
svg {
  display: block; /* removes the inline descender gap */
}

/* Images never exceed their container, the other common cause of horizontal scroll */
img {
  max-width: 100%; /* shrinks to fit narrow columns */
  height: auto; /* keeps the aspect ratio when width shrinks */
}

/* Body-text links: brand blue with an offset underline */
a {
  color: var(--brand); /* aczen.in link blue, 5.4:1 on white, 4.9:1 on smebank-50 */
  text-decoration-line: underline; /* underline is the non-colour cue that this is a link */
  text-decoration-thickness: 1px; /* thin line matches the rules */
  text-underline-offset: 0.2em; /* clears descenders so the underline doesn't cut "g" and "y" */
}

/* Hover thickens the underline and deepens the blue */
a:hover {
  color: var(--brand-hover); /* smebank-700, matches button hover */
  text-decoration-thickness: 2px; /* visible feedback beyond colour */
}

/* One focus style for every interactive element */
:focus-visible {
  outline: 3px solid var(--brand); /* brand ring, 5.4:1 against white so it passes non-text contrast */
  outline-offset: 2px; /* gap keeps the ring distinct from blue buttons it surrounds */
}

/* On the dark closing band the brand blue would vanish, so switch to a light blue */
.closer :focus-visible {
  outline-color: var(--focus-on-dark); /* 6.8:1 against smebank-950 */
}

/* Mouse clicks shouldn't leave a ring behind in browsers that apply :focus broadly */
:focus:not(:focus-visible) {
  outline: none; /* keyboard users still get :focus-visible above */
}

/* Standard visually-hidden utility, e.g. the billing legend */
.sr-only {
  position: absolute; /* out of the flow so it takes no space */
  width: 1px; /* smallest size screen readers still announce */
  height: 1px; /* same */
  padding: 0; /* no padding that could enlarge it */
  margin: -1px; /* cancels the 1px so it occupies nothing */
  overflow: hidden; /* clips the text */
  clip: rect(0 0 0 0); /* legacy clipping for older engines */
  clip-path: inset(50%); /* modern clipping */
  white-space: nowrap; /* stops the text wrapping into a tall invisible column */
  border: 0; /* legends and fieldsets carry default borders */
}

/* Skip link: hidden off-screen until a keyboard user tabs to it */
.skip {
  position: absolute; /* lifted out of flow so it never shifts the header */
  top: 12px; /* where it appears once focused */
  left: var(--pad-l); /* aligns with content, right of the margin line */
  z-index: 40; /* above the header and the margin line */
  padding: 10px 16px; /* large enough to be an obvious target */
  background: var(--brand); /* high-contrast chip */
  color: var(--paper); /* white on smebank-600, 5.4:1 */
  border-radius: var(--radius-sm); /* matches button radius */
  font-weight: 600; /* reads as an action */
  text-decoration: none; /* chip shape already signals it's clickable */
  transform: translateY(-200%); /* parked above the viewport until focused */
}

/* Bring the skip link into view on focus */
.skip:focus {
  transform: none; /* slides back to its top: 12px position */
}

/* --------------------------------------------------------------------------
   3. Layout wrappers
   -------------------------------------------------------------------------- */

/* Left-anchored content column, like writing that starts at a ledger's margin */
.wrap {
  width: 100%; /* fills the viewport up to its max */
  max-width: calc(var(--content-max) + var(--pad-l) + var(--pad-r)); /* 1160px of content plus the gutters */
  margin-inline: 0 auto; /* anchored left, not centred: the margin line is the page's spine */
  padding-left: var(--pad-l); /* content begins right of the margin line at every width */
  padding-right: var(--pad-r); /* side gutter so text never touches the right edge */
}

/* Narrow column for the FAQ, where long answers need short lines */
.wrap-narrow {
  max-width: calc(760px + var(--pad-l) + var(--pad-r)); /* ~760px of content per the brief */
}

/* --------------------------------------------------------------------------
   4. Typography components
   -------------------------------------------------------------------------- */

/* The hero headline: Inter's display optical size at a heavy weight is the headline device */
.display {
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); /* 2.4rem on phones up to 4.6rem on wide screens */
  font-variation-settings: "opsz" 32; /* Inter's display cut: tighter spacing and finer details built for large sizes */
  font-weight: 800; /* heavy, so the headline lands as a block */
  line-height: 1.03; /* tight leading keeps a multi-line headline together */
  letter-spacing: -0.03em; /* display sizes need negative tracking or Inter looks loose */
  color: var(--ink); /* explicit, because .closer sets it differently */
}

/* Smaller display size for the closing call to action */
.display-sm {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem); /* 2-3rem per the brief */
  line-height: 1.08; /* slightly more leading at the smaller size */
}

/* Section headings: same display cut, one step down */
.section-title {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); /* scales between phone and desktop */
  font-variation-settings: "opsz" 32; /* display cut, matching the hero */
  font-weight: 750; /* just under the hero's 800 to keep hierarchy */
  line-height: 1.08; /* tight, per the brief's 1.02-1.1 band */
  letter-spacing: -0.02em; /* a little less tightening than the larger hero */
  max-width: 24ch; /* keeps headings to two or three lines */
}

/* Intro paragraph under the hero headline */
.lede {
  margin-top: 24px; /* separates it from the headline's heavy block */
  max-width: 60ch; /* keeps line length readable */
  font-size: 1.1875rem; /* a notch above body: it's the first sentence people read */
  color: var(--ink-soft); /* secondary to the headline */
}

/* Intro paragraph under each section heading */
.section-lede {
  margin-top: 16px; /* gap below the heading */
  max-width: 60ch; /* readable line length */
  color: var(--ink-soft); /* supporting, not competing with the heading */
}

/* Small print: offers, add-ons, terms */
.fine {
  margin-top: 18px; /* sits a clear step below whatever it qualifies */
  font-size: 0.9375rem; /* smaller, but not so small it becomes hard to read */
  color: var(--ink-soft); /* secondary information */
  max-width: 70ch; /* even fine print shouldn't run too long */
}

/* Tabular figures anywhere a number sits in a column */
.num,
.price {
  font-variant-numeric: tabular-nums; /* digits share a width so amounts align vertically */
}

/* --------------------------------------------------------------------------
   5. Buttons and quiet links
   -------------------------------------------------------------------------- */

/* Base button: shared shape, no arrows, no transitions */
.btn {
  display: inline-flex; /* centres the label vertically regardless of line-height */
  align-items: center; /* vertical centring */
  justify-content: center; /* horizontal centring when a button stretches */
  gap: 8px; /* room for an icon if one is ever added */
  min-height: 44px; /* minimum touch target */
  padding: 0.65rem 1.15rem; /* comfortable click area */
  border: 1.5px solid transparent; /* reserves the border so outline and filled buttons are the same size */
  border-radius: var(--radius-sm); /* smaller radius than panels, per the radius hierarchy */
  font: inherit; /* buttons don't inherit fonts by default */
  font-size: 1rem; /* fixed size so buttons don't grow with the 18px body */
  font-weight: 600; /* reads as an action */
  line-height: 1.2; /* tight enough for a single-line label */
  text-decoration: none; /* links styled as buttons lose the underline */
  white-space: nowrap; /* a two-line button label looks broken */
  cursor: pointer; /* affordance for mouse users */
}

/* Primary: brand fill */
.btn-ink {
  background: var(--brand); /* aczen.in's primary button blue */
  color: var(--paper); /* white on smebank-600, 5.4:1 */
}

/* Primary hover: the darker brand step, nothing else moves */
.btn-ink:hover {
  background: var(--brand-hover); /* bg change only, per the brief */
  color: var(--paper); /* restated because the global a:hover would otherwise recolour the label */
}

/* Secondary: brand outline on transparent */
.btn-line {
  background: transparent; /* lets the section background show through */
  border-color: var(--brand); /* 1.5px brand outline */
  color: var(--brand); /* brand label, 5.4:1 on white */
}

/* Secondary hover: fill with the pale brand tint */
.btn-line:hover {
  background: var(--paper-deep); /* subtle fill as feedback; label stays 4.9:1 */
  color: var(--brand); /* keeps the label from picking up a:hover */
}

/* White button for use on the dark closing band */
.btn-paper {
  background: var(--paper); /* light button on smebank-950 */
  color: var(--brand-deep); /* smebank-950 label, 15.4:1 */
}

/* White button hover: pale brand tint */
.btn-paper:hover {
  background: var(--paper-deep); /* slight shift, bg only */
  color: var(--brand-deep); /* keeps the label from picking up a:hover */
}

/* Large variant for hero and closer CTAs */
.btn-lg {
  min-height: 52px; /* bigger target for the page's key actions */
  padding: 0.85rem 1.5rem; /* more generous padding */
  font-size: 1.0625rem; /* slightly larger label */
}

/* Quiet link: plain ink text, underline only on hover (header "Sign in") */
.link-quiet {
  color: var(--ink); /* primary text colour, quieter than a blue link */
  font-weight: 500; /* slightly firmer than body so it reads as navigation */
  text-decoration: none; /* keeps the header calm */
  padding-block: 10px; /* taller hit area without changing layout */
}

/* Quiet link hover */
.link-quiet:hover {
  color: var(--ink); /* stays ink instead of turning blue */
  text-decoration-line: underline; /* the underline appears as feedback */
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

/* Sticky header keeps "Start free" reachable during the long scroll */
.site-header {
  position: sticky; /* stays in flow, so no layout jump like position: fixed */
  top: 0; /* pins to the viewport top edge */
  z-index: 20; /* above page content, below the margin line and skip link */
  background: var(--paper); /* opaque so content scrolls under it cleanly */
  border-bottom: 1px solid var(--rule); /* the first rule line of the page */
}

/* Brand, nav and actions on one line */
.header-row {
  display: flex; /* one row */
  align-items: center; /* vertical centring of mixed-height children */
  justify-content: space-between; /* brand left, actions right */
  gap: 12px; /* keeps items apart at 360px where space is tightest */
  min-height: 68px; /* stable header height for the scroll-padding value */
}

/* Brand link: mark plus wordmark */
.brand {
  display: inline-flex; /* mark and name side by side */
  align-items: center; /* centred on each other */
  gap: 10px; /* space between mark and name */
  color: var(--ink); /* wordmark colour */
  text-decoration: none; /* a logo isn't underlined */
  flex-shrink: 0; /* never squeeze the logo */
}

/* The aczen.in logo image, sized to match its width/height attributes */
.brand-mark {
  display: block; /* removes the inline-image baseline gap */
  width: 36px; /* matches the markup's width attribute so nothing rescales */
  height: 36px; /* square */
  border-radius: 6px; /* softens the JPEG's hard corners to sit with the 8px button radius */
  object-fit: cover; /* never distorts if the source isn't exactly square */
}

/* Wordmark uses the same display cut as headlines */
.brand-name {
  font-size: 1.3rem; /* reads as a logo, not a heading */
  font-variation-settings: "opsz" 32; /* display cut, consistent with headings */
  font-weight: 800; /* bold wordmark */
  letter-spacing: -0.02em; /* tightening suits the display cut */
  line-height: 1; /* no extra height around the name */
}

/* Main navigation: hidden on phones and small tablets where the header row can't fit it */
.nav {
  display: none; /* below 900px only the brand and actions show */
  gap: 28px; /* spacing once visible */
}

/* Show the nav on wide screens */
@media (min-width: 900px) {
  /* Display switch only */
  .nav {
    display: flex; /* horizontal row of links */
  }
}

/* Nav links are secondary to the actions on the right */
.nav a {
  color: var(--ink-soft); /* quieter than the "Start free" button */
  font-weight: 500; /* firmer than body */
  text-decoration: none; /* clean header */
  padding-block: 10px; /* taller click area */
}

/* Nav hover */
.nav a:hover {
  color: var(--ink); /* darkens to ink */
  text-decoration-line: underline; /* non-colour cue */
}

/* Sign-in and Start free */
.header-actions {
  display: flex; /* side by side */
  align-items: center; /* vertically aligned */
  gap: 16px; /* separation between the quiet link and the button */
}

/* --------------------------------------------------------------------------
   7. Sections: one place for vertical rhythm
   -------------------------------------------------------------------------- */

/* Every content section shares the same vertical padding; set once to avoid specificity fights */
.tour,
.month,
.calc,
.audiences,
.ask,
.pricing,
.security,
.quote,
.faq,
.closer {
  padding-block: var(--section-y); /* 64px phone, 96px desktop */
}

/* Rule lines between adjacent white sections, the way a ledger separates entries */
.tour,
.month,
.pricing,
.security,
.quote,
.faq {
  border-top: 1px solid var(--rule); /* a single thin rule instead of alternating grey bands */
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

/* Hero gets extra top room so the headline has space to land */
.hero {
  padding-top: clamp(48px, 7vw, 112px); /* generous top padding, scaled to viewport */
  padding-bottom: var(--section-y); /* matches the rhythm of the sections below */
}

/* Copy and calendar: stacked on phones */
.hero-grid {
  display: grid; /* grid so the desktop split is one property change */
  gap: 48px; /* space between copy and calendar when stacked */
  align-items: start; /* calendar top-aligns with the headline rather than centring */
}

/* Two columns once there's room for both at a readable size */
@media (min-width: 960px) {
  /* Copy slightly wider than the calendar */
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); /* minmax(0) lets columns shrink below content size, preventing overflow */
    gap: clamp(40px, 5vw, 72px); /* wider gap on bigger screens */
  }
}

/* Primary and secondary CTA side by side */
.cta-row {
  display: flex; /* horizontal row */
  flex-wrap: wrap; /* wraps on narrow phones instead of overflowing */
  gap: 12px; /* spacing between buttons, and between rows when wrapped */
  margin-top: 32px; /* separates actions from the lede */
}

/* Three short promises under the CTAs, in a wrapping row */
.hero-promises {
  display: flex; /* one row on wide screens */
  flex-wrap: wrap; /* wraps on phones instead of overflowing */
  gap: 8px 20px; /* row gap when wrapped, space between items otherwise */
  margin: 20px 0 0; /* gap under the CTA row; list default margins removed */
  padding: 0; /* list indent removed */
  list-style: none; /* the tick replaces the bullet */
  font-size: 0.9375rem; /* small */
  color: var(--ink-soft); /* secondary, 7.6:1 on white */
}

/* Each promise leaves room for its tick */
.hero-promises li {
  position: relative; /* anchor for the tick */
  padding-left: 22px; /* space for the tick */
}

/* Green tick, same approach as .ticks */
.hero-promises li::before {
  content: "✓"; /* fallback for engines without CSS alt text: the tick still draws */
  content: "✓" / ""; /* empty alt text keeps the decorative tick out of the accessibility tree, so screen readers don't say "check mark" before every promise */
  position: absolute; /* sits in the left padding */
  left: 2px; /* slight inset */
  top: 0; /* aligns with the text line */
  color: var(--done); /* done-green, 5.3:1 on white */
  font-weight: 700; /* reads as a mark */
}

/* --------------------------------------------------------------------------
   8b. Tour and calculator: section boxes and grids only
   (everything inside .video-frame belongs to video.css; .calc-form,
   .calc-result and other .calc-* internals belong to calculator.css)
   -------------------------------------------------------------------------- */

/* Tour sits on white, like the hero above it */
.tour {
  background: var(--paper); /* explicit so the section box is self-describing */
}

/* Tour copy and video: stacked on phones */
.tour-grid {
  display: grid; /* grid so the desktop split is one property */
  gap: 32px; /* space between copy and video when stacked */
}

/* Side by side once the video can be a useful size */
@media (min-width: 900px) {
  /* Video gets the larger share because a 16:9 frame needs width */
  .tour-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); /* copy | video; minmax(0) stops the poster forcing overflow */
    gap: clamp(32px, 4vw, 64px); /* wider gap on bigger screens */
    align-items: center; /* copy centres against the video frame */
  }
}

/* Calculator gets the pale brand band so the tool stands apart from the timeline above */
.calc {
  background: var(--paper-deep); /* smebank-50 */
}

/* Intro, form and result: stacked on phones */
.calc-grid {
  display: grid; /* grid for the intro-on-top, form|result layout */
  gap: 32px; /* space between stacked blocks */
}

/* Intro across the top, then form and result side by side */
@media (min-width: 760px) {
  /* Two equal columns below a full-width intro row */
  .calc-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* form | result */
    gap: 40px; /* wider gap once side by side */
    align-items: stretch; /* form and result panels are the grid items themselves, so stretching gives both the row's height and their edges line up */
  }

  /* The intro spans both columns so the form and result share the row below */
  .calc-intro {
    grid-column: 1 / -1; /* full width top row */
  }
}

/* --------------------------------------------------------------------------
   9. Filing calendar card
   -------------------------------------------------------------------------- */

/* White panel with a larger radius than tables, so it ranks above them */
.filing-card {
  margin: 0; /* <figure> has default side margins that would push it off-grid */
  padding: 18px; /* tighter on phones to give the 7 columns more width */
  background: var(--paper); /* white panel */
  border: 1px solid var(--rule); /* the edge carries the panel on a white page, no blur shadow needed */
  border-radius: var(--radius-lg); /* largest radius on the page: hierarchy over tables (10px) and plans (12px) */
  box-shadow: 0 1px 0 var(--rule); /* a hard 1px underline, like a page edge, instead of a soft blur */
}

/* More padding once the card has room */
@media (min-width: 520px) {
  /* Padding only */
  .filing-card {
    padding: 24px; /* comfortable inner margin */
  }
}

/* Countdown and month label block */
.filing-head {
  margin-bottom: 18px; /* separates the sentence from the grid */
}

/* The key line: which return is due next */
.filing-next {
  font-size: 1.25rem; /* medium-large, per the brief */
  font-weight: 600; /* semi-bold */
  line-height: 1.3; /* two-line sentences stay compact */
  letter-spacing: -0.01em; /* Inter reads slightly loose at this size */
  color: var(--ink); /* primary text */
}

/* Return name inserted by JS */
.filing-next strong {
  font-weight: 750; /* heavier than the sentence so the return name stands out */
}

/* "in 6 days": the urgency, in the orange that means due */
.countdown {
  color: var(--deadline-text); /* dark orange: 5.4:1 on white, where raw smeorange-500 would fail */
  font-weight: 700; /* bold per the brief */
  white-space: nowrap; /* "in 6" and "days" should never split across lines */
}

/* "September 2026" under the countdown */
.filing-month {
  margin-top: 6px; /* small gap under the sentence */
  font-size: 0.875rem; /* small */
  color: var(--ink-soft); /* secondary */
}

/* Weekday header row */
.cal-weekdays {
  display: grid; /* same 7-column grid as the days, so labels sit over their columns */
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* seven equal columns that can shrink */
  gap: 4px; /* matches the day grid gap */
  margin-bottom: 6px; /* separates labels from cells */
  font-size: 0.75rem; /* small labels */
  font-weight: 600; /* legible at small size */
  color: var(--ink-soft); /* secondary */
  text-align: center; /* centred over each column */
}

/* The day grid: an <ol> reset into seven columns */
.cal-grid {
  display: grid; /* seven-column grid */
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* equal columns that never force overflow */
  gap: 4px; /* thin gutters like ruled squares */
  margin: 0; /* list default margin removed */
  padding: 0; /* list default indent removed */
  list-style: none; /* no numbers; the day number is the content */
  font-variant-numeric: tabular-nums; /* digits line up across rows */
}

/* Every cell, blank or day */
.cal-grid li {
  display: flex; /* stacks number and tag */
  flex-direction: column; /* number above tag */
  align-items: center; /* centred horizontally */
  justify-content: center; /* centred vertically */
  aspect-ratio: 1; /* square-ish cells */
  min-height: 40px; /* stays tappable-looking even at 360px */
  min-width: 0; /* lets the grid shrink cells instead of overflowing */
  border: 1.5px solid transparent; /* reserved so the info outline doesn't shift size */
  border-radius: var(--radius-sm); /* per the brief */
  font-size: 0.9375rem; /* readable day numbers */
  line-height: 1.1; /* number and tag stay close */
}

/* Ordinary day: faint grey square on the white card */
.cal-day {
  background: var(--cell); /* gray-50 distinguishes real days from blank leading cells */
  color: var(--ink); /* full-contrast numbers */
}

/* Leading blank cells carry nothing */
.cal-blank {
  background: transparent; /* empty space before day 1 */
}

/* Days already gone: quieter, still AA-readable */
.cal-grid .is-past {
  color: var(--ink-soft); /* gray-600 on gray-50 is 7.2:1; opacity would drop contrast unpredictably */
}

/* GSTR-2B availability: blue tint, never orange, because nothing is due */
.cal-grid .is-info {
  background: var(--info-tint); /* smebank-100 fill */
  border-color: var(--info); /* smebank-500 outline carries the meaning alongside the legend */
  color: var(--ink); /* ink text, 13.9:1 on the tint */
}

/* Return due: the one filled orange cell type */
.cal-grid .is-due {
  background: var(--deadline); /* smeorange-500 fill = deadline */
  color: var(--ink); /* ink on orange is 7.9:1; white would be only 2.3:1 */
  font-weight: 700; /* bold per the brief */
}

/* Today: an inset brand ring and bold number */
.cal-grid .is-today {
  box-shadow: inset 0 0 0 2px var(--brand); /* ring drawn inside the cell so it never collides with neighbours */
  font-weight: 700; /* emphasis */
}

/* Due today (11th/20th): keep the orange fill and add the brand ring, so both meanings show at once */
.cal-grid .is-due.is-today {
  background: var(--deadline); /* deadline meaning wins the fill */
  color: var(--ink); /* ink on orange, 7.9:1 */
  box-shadow: inset 0 0 0 2px var(--brand); /* today's ring inside the orange cell */
}

/* Past deadline: still orange-coded but dimmed to a tint, so the eye moves on to what's ahead */
.cal-grid .is-due.is-past {
  background: var(--deadline-tint); /* smeorange-100 instead of the solid fill */
  border-color: var(--deadline); /* orange outline keeps it recognisable as a due day */
  color: var(--deadline-text); /* dark orange on the tint is 4.5:1, still AA */
  font-weight: 600; /* a notch lighter than an upcoming deadline */
}

/* Past GSTR-2B day: keeps its outline, loses its fill */
.cal-grid .is-info.is-past {
  background: var(--cell); /* same fill as an ordinary day, so it recedes */
  border-color: var(--info); /* outline keeps it recognisable as the 2B day */
  color: var(--ink-soft); /* past-day text colour, 7.2:1 on gray-50 */
}

/* Return label under the day number, e.g. "GSTR-1" */
.cal-grid small {
  display: none; /* hidden on the narrowest phones where cells are ~40px wide */
  margin-top: 2px; /* gap under the number */
  font-size: 0.625rem; /* tiny, per the brief */
  font-weight: 600; /* legible at tiny size */
  letter-spacing: -0.02em; /* claws back a few pixels so "GSTR-3B" fits the cell */
  line-height: 1; /* no extra height */
  white-space: nowrap; /* "GSTR-3B" must not break at the hyphen */
}

/* Show the labels once cells are wide enough (Inter is wider than a condensed cut, hence 460px, not 420px) */
@media (min-width: 460px) {
  /* Display switch only */
  .cal-grid small {
    display: block; /* sits on its own line under the number */
  }
}

/* Legend: words beside every colour, so colour is never the only signal */
.cal-legend {
  display: flex; /* row of legend items */
  flex-wrap: wrap; /* wraps on narrow cards */
  gap: 8px 18px; /* row gap, column gap */
  margin-top: 16px; /* separates legend from grid */
  font-size: 0.8125rem; /* small */
  color: var(--ink-soft); /* secondary */
}

/* Each legend item: swatch plus words */
.cal-legend span {
  display: inline-flex; /* swatch and label aligned */
  align-items: center; /* vertical centring */
  gap: 6px; /* space between swatch and word */
}

/* The colour swatch */
.key {
  display: inline-block; /* <i> is inline and would ignore width/height otherwise */
  width: 10px; /* 10px square per the brief */
  height: 10px; /* square */
  border-radius: 2px; /* barely softened, like a printed key */
  flex-shrink: 0; /* never squashed by long legend text */
}

/* Due swatch */
.key-due {
  background: var(--deadline); /* matches .is-due */
}

/* Info swatch */
.key-info {
  background: var(--info); /* matches .is-info outline */
}

/* Today swatch: a ring, not a fill, because today is shown as a ring */
.key-today {
  background: transparent; /* hollow, like the calendar cell */
  box-shadow: inset 0 0 0 2px var(--brand); /* brand ring matches .is-today */
}

/* QRMP scope note */
.cal-note {
  margin-top: 12px; /* gap under the legend */
  font-size: 0.75rem; /* tiny print */
  line-height: 1.45; /* readable at small size */
  color: var(--ink-soft); /* secondary; 7.6:1 on white keeps tiny text readable */
}

/* --------------------------------------------------------------------------
   10. Month-close steps
   -------------------------------------------------------------------------- */

/* The ordered list of steps */
.steps {
  position: relative; /* containing block for motion.css, which owns .steps::before/::after */
  margin: 48px 0 0; /* separates the timeline from the section intro */
  padding: 0; /* removes the list indent */
  list-style: none; /* the day marker replaces list numbers */
}

/* One step: stacked on phones */
.step {
  display: grid; /* grid from the start so breakpoints only change columns */
  gap: 12px 32px; /* tight vertical gap when stacked, wide column gap later */
  padding-block: 32px; /* space inside each ledger entry */
  border-top: 1px solid var(--rule); /* a single rule between steps, like ledger entries */
}

/* Close the last entry with a rule too */
.step:last-child {
  border-bottom: 1px solid var(--rule); /* the ledger ends with a line under the last entry */
}

/* The day-of-month marker */
.step-day {
  font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3rem); /* large per the brief */
  font-variation-settings: "opsz" 32; /* display cut, like the headings */
  font-weight: 800; /* heavy */
  line-height: 1; /* no extra height above the step title */
  letter-spacing: -0.03em; /* display tracking */
  color: var(--ink-soft); /* default: neutral, for "all month" */
  font-variant-numeric: tabular-nums; /* 11, 14 and 20 share digit widths */
  white-space: nowrap; /* "1–31" must not break at the dash */
}

/* Deadline days: dark orange numbers over a full-strength orange underline */
.step-day-due {
  color: var(--deadline-text); /* 5.4:1 on white; smeorange-500 itself is kept for the underline */
}

/* The underline bar sits below the digits so the orange never sits behind text */
.step-day-due span {
  display: inline-block; /* lets padding and border wrap the digits tightly */
  padding-bottom: 6px; /* clears the digits before the bar */
  border-bottom: 5px solid var(--deadline); /* smeorange-500 bar echoes the calendar's orange cells */
}

/* GSTR-2B day in brand blue */
.step-day-info {
  color: var(--brand); /* smebank-600, 5.4:1 on white */
}

/* Step title */
.step-body h3 {
  font-size: 1.3rem; /* clearly a sub-heading below .section-title */
  font-weight: 700; /* bold */
  line-height: 1.25; /* compact two-line titles */
  letter-spacing: -0.015em; /* Inter tightens slightly at heading sizes */
}

/* Step description */
.step-body p {
  margin-top: 10px; /* gap under the title */
  max-width: 60ch; /* readable line length */
  color: var(--ink-soft); /* secondary text */
}

/* Two columns on tablets: day in its own column, body and table stacked beside it */
@media (min-width: 760px) {
  /* Day column plus content column */
  .step {
    grid-template-columns: 7.5rem minmax(0, 1fr); /* day column sized to the widest marker, "1–31"; minmax(0) prevents table overflow */
    padding-block: 40px; /* more space per entry */
  }

  /* Table sits under the body text, in the content column */
  .step .ledger {
    grid-column: 2; /* aligned with the step body, not under the day */
  }
}

/* Three columns on desktop: day | body | ledger */
@media (min-width: 1180px) {
  /* Ledger gets slightly more width than the prose because tables need it */
  .step {
    grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1.3fr); /* day, body, ledger; day column matches tablet */
    align-items: start; /* each column top-aligns with the day number */
  }

  /* Reset the tablet placement so the table takes the third column */
  .step .ledger {
    grid-column: auto; /* flows into column 3 */
  }
}

/* --------------------------------------------------------------------------
   11. Ledger tables and tags
   -------------------------------------------------------------------------- */

/* Tables that look like a page of a ledger */
.ledger {
  display: table; /* a real table at every width: keeps row/column semantics in Safari and lets the header band span the full width */
  width: 100%; /* fills the column, so the header band reaches both edges */
  max-width: 100%; /* never wider than its column */
  overflow: hidden; /* clips the header fill to the rounded corners */
  border-collapse: separate; /* needed for border-radius to render on a table */
  border-spacing: 0; /* no gaps between cells in separate mode */
  background: var(--paper); /* white sheet */
  border: 1px solid var(--rule); /* gray-200 edge */
  border-radius: 10px; /* smaller than the filing card, per the radius hierarchy */
  font-size: 0.875rem; /* 14px on large phones; the <560px block below steps it down again */
  line-height: 1.35; /* compact rows */
}

/* Tablet and up: slightly larger text now there is room */
@media (min-width: 760px) {
  /* Size only; display and clipping are already right from the base rule */
  .ledger {
    font-size: 0.9375rem; /* slightly larger once space allows */
  }
}

/* Small phones: fit the table in ~305px (360px viewport minus the margin-line gutter and right gutter) with no sideways scroll */
@media (max-width: 559.98px) {
  /* Tighter text so three columns fit comfortably at 360px */
  .ledger {
    font-size: 0.8125rem; /* 13px: still readable, buys ~7% width over 14px */
  }

  /* Header and body cells share the tighter padding */
  .ledger th,
  .ledger td {
    padding: 8px 6px; /* 6px sides instead of 10px saves ~8px per column */
  }

  /* Header labels a step smaller so they never outgrow their data */
  .ledger th {
    font-size: 0.75rem; /* 12px labels under 13px data keeps the hierarchy */
  }

  /* First column holds IDs like "INV-2026-0421"; wrapping at the hyphens stacked it onto three lines */
  .ledger td:first-child {
    white-space: nowrap; /* one line per ID; the hidden second column frees the width it needs */
  }

  /* Smaller pill so "Reminder sent" fits the last column without clipping */
  .ledger .tag {
    padding: 2px 7px; /* 2px less each side than the base pill */
    font-size: 0.75rem; /* 12px pill text, a step under the row text as on larger screens */
    white-space: nowrap; /* restated here so the phone fix does not rely on the base rule staying put */
  }
}

/* Four-column tables drop column 2 (Customer / Items) on small phones: the ID, amount and status carry the story */
@supports selector(:has(*)) {
  /* Only below 560px, where four columns cannot fit */
  @media (max-width: 559.98px) {
    /* :has() limits this to tables that actually have a 4th column, so the 2- and 3-column ledgers keep every cell */
    .ledger:has(th:nth-child(4)) th:nth-child(2),
    .ledger:has(th:nth-child(4)) td:nth-child(2) {
      display: none; /* removes the cell from layout and the accessibility tree together, so headers and cells stay paired */
    }
  }
}

/* Browsers without :has() cannot hide the column, so let the table scroll inside itself rather than widen the page */
@supports not selector(:has(*)) {
  /* Same small-phone range as above */
  @media (max-width: 559.98px) {
    /* Last-resort fallback: block display trades table semantics for no page-level horizontal scroll */
    .ledger {
      display: block; /* a block box can scroll; a table box cannot */
      overflow-x: auto; /* the four columns scroll within the table's own width */
    }
  }
}

/* Header cells: pale brand band, small sentence-case labels */
.ledger th {
  padding: 9px 10px; /* compact header */
  background: var(--paper-deep); /* smebank-50 header band */
  color: var(--ink-soft); /* 6.8:1 on smebank-50 */
  font-size: 0.8125rem; /* small */
  font-weight: 600; /* legible at small size */
  text-align: left; /* aligns with the data below; .num overrides for figures */
  white-space: nowrap; /* single-word headers never wrap */
}

/* Body cells: rule lines between rows */
.ledger td {
  padding: 10px; /* row height and cell breathing room */
  border-top: 1px solid var(--rule); /* horizontal ledger rule between rows */
  vertical-align: middle; /* tags and text align on one line */
}

/* Roomier cells once the table isn't squeezed */
@media (min-width: 760px) {
  /* Header and body cell padding together */
  .ledger th,
  .ledger td {
    padding-inline: 14px; /* more horizontal air */
  }
}

/* Figures right-aligned so the rupee amounts line up on their last digit */
.ledger .num {
  text-align: right; /* accountants read columns of numbers right-aligned */
  white-space: nowrap; /* "₹18,42,900" must never break */
}

/* Status pill: neutral by default */
.tag {
  display: inline-block; /* padding applies on all sides */
  padding: 2px 9px; /* small pill */
  border-radius: 999px; /* fully rounded */
  background: var(--paper-deep); /* neutral pale fill */
  color: var(--ink-soft); /* 6.8:1 on smebank-50 */
  font-size: 0.8125rem; /* smaller than the row text */
  font-weight: 600; /* legible at small size */
  line-height: 1.4; /* consistent pill height */
  white-space: nowrap; /* "12 days overdue" stays one pill */
}

/* Done state: paid, matched, filed */
.tag-done {
  background: var(--done-tint); /* light green */
  color: var(--done); /* 4.7:1 on its tint */
}

/* Due state: overdue, mismatch, needs action */
.tag-due {
  background: var(--deadline-tint); /* smeorange-100 */
  color: var(--deadline-text); /* dark orange, 4.5:1 on smeorange-100 */
}

/* --------------------------------------------------------------------------
   12. Audiences (debit / credit split)
   -------------------------------------------------------------------------- */

/* Pale brand band to separate the audience split from the timeline */
.audiences {
  background: var(--paper-deep); /* smebank-50, the brief's alternate section background */
}

/* Two columns stacked on phones */
.aud-grid {
  display: grid; /* grid so the split is one property */
  margin-top: 40px; /* gap below the heading */
}

/* Each audience column */
.aud {
  padding-block: 24px; /* vertical space when stacked */
}

/* Horizontal rule between the stacked columns on phones */
.aud + .aud {
  border-top: 1px solid var(--rule); /* debit above, credit below */
}

/* Side by side on tablets and up, with a single vertical rule like a ledger's debit/credit split */
@media (min-width: 760px) {
  /* Two equal columns */
  .aud-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* equal debit and credit sides */
  }

  /* Columns get side padding instead of vertical */
  .aud {
    padding-block: 0; /* no stacking gap needed */
    padding-right: 40px; /* space before the centre rule */
  }

  /* The right column sits across the centre rule */
  .aud + .aud {
    border-top: 0; /* drop the phone rule */
    border-left: 1px solid var(--rule); /* the single vertical debit/credit line */
    padding-left: 40px; /* space after the centre rule */
    padding-right: 0; /* no trailing padding at the wrap edge */
  }
}

/* Audience column headings */
.aud h3 {
  font-size: 1.35rem; /* sub-heading scale */
  font-weight: 700; /* bold */
  line-height: 1.25; /* compact */
  letter-spacing: -0.015em; /* matches step titles */
}

/* Tick list: custom green check instead of bullets */
.ticks {
  margin: 20px 0 0; /* gap under the column heading */
  padding: 0; /* remove the list indent */
  list-style: none; /* the tick replaces the bullet */
}

/* Each tick item */
.ticks li {
  position: relative; /* anchor for the tick pseudo-element */
  padding: 10px 0 10px 30px; /* room on the left for the tick */
  border-top: 1px solid var(--rule); /* each item is a ruled ledger line */
  max-width: 52ch; /* readable in the half-width column */
}

/* The tick mark in done-green */
.ticks li::before {
  content: "✓"; /* fallback for engines without CSS alt text: the tick still draws */
  content: "✓" / ""; /* empty alt text makes the tick silent; the list item's own words carry the meaning */
  position: absolute; /* out of flow, in the left padding */
  left: 4px; /* slight inset from the column edge */
  top: 10px; /* aligns with the first line of text */
  color: var(--done); /* green = done/included; 4.6:1 even on smebank-50 */
  font-weight: 700; /* heavy enough to read as a mark */
}

/* --------------------------------------------------------------------------
   13. Ask (assistant transcript)
   -------------------------------------------------------------------------- */

/* Explanation and transcript: stacked on phones */
.ask-grid {
  display: grid; /* grid for the two-column switch */
  gap: 40px; /* space between explanation and transcript */
}

/* Side by side on tablets and up */
@media (min-width: 760px) {
  /* Equal columns, centred against each other */
  .ask-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* explanation | transcript */
    align-items: center; /* transcript centres against the heading block */
  }
}

/* White panel holding the example exchange */
.transcript {
  display: flex; /* stacks the ask and answer */
  flex-direction: column; /* vertical conversation */
  gap: 16px; /* space between turns */
  padding: 20px; /* inner margin */
  background: var(--paper); /* white panel */
  border: 1px solid var(--rule); /* gray-200 edge */
  border-radius: var(--radius-lg); /* same tier as the filing card: both are "product" panels */
}

/* The user's request, right-leaning like a chat bubble */
.t-ask {
  align-self: flex-end; /* pushed toward the right edge */
  max-width: 85%; /* never full width, so it reads as a bubble */
  padding: 12px 16px; /* bubble padding */
  background: var(--brand); /* brand bubble */
  color: var(--paper); /* white text, 5.4:1 */
  border-radius: 12px 12px 4px 12px; /* squared corner points at the sender */
}

/* The assistant's answer block */
.t-answer {
  padding: 16px; /* inner margin */
  background: var(--paper-deep); /* smebank-50 distinguishes the reply from the request */
  border-radius: var(--radius-md); /* matches the request bubble */
}

/* "Example prompt" caption closing the transcript */
.transcript .fine {
  margin-top: 4px; /* small gap under the answer; the panel's 16px flex gap already separates it */
}

/* --------------------------------------------------------------------------
   14. Pricing
   -------------------------------------------------------------------------- */

/* Heading and billing toggle share a row */
.pricing-head {
  display: flex; /* one row on wide screens */
  flex-wrap: wrap; /* toggle drops below the heading on phones */
  align-items: flex-end; /* toggle aligns to the heading's baseline area */
  justify-content: space-between; /* heading left, toggle right */
  gap: 20px 32px; /* row gap when wrapped, column gap otherwise */
  margin-bottom: 40px; /* separates the head from the plans */
}

/* Fieldset reset into a segmented control */
.billing {
  display: inline-flex; /* the two options sit side by side */
  margin: 0; /* fieldset default margin removed */
  padding: 3px; /* inset so the checked pill has a frame around it */
  min-inline-size: 0; /* fieldsets default to min-content width, which can overflow */
  border: 1.5px solid var(--brand); /* outline of the whole control */
  border-radius: 10px; /* outer radius a step larger than the inner pills */
}

/* Each option label */
.billing label {
  display: flex; /* collapses the whitespace text node between input and span */
  position: relative; /* containing block for the hidden radio */
  cursor: pointer; /* the whole label is clickable */
}

/* Native radios stay in the accessibility tree and keyboard order but are invisible */
.billing input {
  position: absolute; /* out of flow */
  opacity: 0; /* invisible, still focusable (unlike display:none) */
  width: 1px; /* minimal footprint */
  height: 1px; /* minimal footprint */
  margin: 0; /* no stray spacing */
}

/* The visible option pill */
.billing span {
  display: block; /* padding applies fully */
  padding: 8px 14px; /* comfortable target */
  border-radius: 7px; /* sits inside the 10px outer radius */
  font-size: 0.9375rem; /* compact control label */
  font-weight: 600; /* reads as a control */
  color: var(--brand); /* unchecked label, 5.4:1 on white */
  white-space: nowrap; /* "Billed yearly" on one line */
}

/* Checked option: brand fill */
.billing input:checked + span {
  background: var(--brand); /* selected state */
  color: var(--paper); /* white text, 5.4:1 */
}

/* Keyboard focus shows on the visible pill, since the radio itself is invisible */
.billing input:focus-visible + span {
  outline: 3px solid var(--brand); /* same brand ring as everything else */
  outline-offset: 2px; /* same offset as the global focus style */
}

/* Plans: one column on phones */
.plans {
  display: grid; /* grid of plan cards */
  gap: 20px; /* space between plans */
  margin: 0; /* list margin removed */
  padding: 0; /* list indent removed */
  list-style: none; /* no bullets */
}

/* Two columns on large phones and tablets */
@media (min-width: 640px) {
  /* Column count only */
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 up */
  }
}

/* Four columns on desktop */
@media (min-width: 1000px) {
  /* Column count only */
  .plans {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* all plans in one row for comparison */
  }
}

/* A plan: white column with the CTA pinned to the bottom */
.plan {
  display: flex; /* column layout so the button can be pushed down */
  flex-direction: column; /* vertical stack */
  padding: 24px; /* inner margin */
  background: var(--paper); /* white sheet */
  border: 1px solid var(--rule); /* gray-200 edge */
  border-radius: var(--radius-md); /* between tables (10px) and panels (16px) */
}

/* Recommended plan: a heavier brand edge instead of a badge or shadow */
.plan-pick {
  border: 2px solid var(--brand); /* the only emphasis */
  padding: 23px; /* 1px less padding keeps content aligned with the 1px-border plans */
}

/* Plan name */
.plan h3 {
  font-size: 1.35rem; /* sub-heading */
  font-weight: 750; /* bold */
  line-height: 1.15; /* compact */
  letter-spacing: -0.015em; /* matches other sub-headings */
}

/* "Most chosen" note in brand blue; orange is reserved for deadlines */
.plan-note {
  margin-top: 4px; /* tucked under the plan name */
  font-size: 0.875rem; /* small */
  font-weight: 600; /* readable at small size */
  color: var(--brand); /* smebank-600, 5.4:1 on white */
}

/* Price row */
.price {
  display: flex; /* amount and /month on one baseline */
  align-items: baseline; /* "/month" sits on the amount's baseline */
  flex-wrap: wrap; /* long monthly prices wrap rather than overflow */
  gap: 4px; /* tiny space before "/month" */
  margin: 14px 0 18px; /* space around the price; the bottom gap now leads straight into the limits list */
}

/* The amount itself */
.price .amount {
  font-size: 2.4rem; /* the number people compare */
  font-variation-settings: "opsz" 32; /* display cut, like the headings */
  font-weight: 800; /* heavy */
  line-height: 1; /* no extra height */
  letter-spacing: -0.03em; /* display tracking */
}

/* "/month" */
.per {
  color: var(--ink-soft); /* secondary */
  font-size: 0.9375rem; /* smaller than body */
}

/* Plan limits: ruled list */
.plan-list {
  margin: 0 0 24px; /* space before the CTA */
  padding: 0; /* no indent */
  list-style: none; /* rules separate items instead of bullets */
  font-size: 0.9375rem; /* compact */
}

/* Each limit line */
.plan-list li {
  padding-block: 9px; /* ruled line height */
  border-top: 1px solid var(--rule); /* ledger rule separator */
}

/* CTA always at the bottom so buttons line up across plans */
.plan .btn {
  margin-top: auto; /* consumes leftover space above the button */
}

/* Add-on note under the plans */
.pricing-fine {
  margin-top: 28px; /* clear gap below the grid */
}

/* --------------------------------------------------------------------------
   15. Security
   -------------------------------------------------------------------------- */

/* Heading and controls: stacked on phones */
.sec-grid {
  display: grid; /* two-column switch later */
  gap: 40px; /* space between heading block and list */
}

/* Side by side on tablets and up */
@media (min-width: 760px) {
  /* Controls column a little wider */
  .sec-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); /* heading | controls */
    align-items: start; /* top-aligned */
  }
}

/* Definition list as a 2x2 grid of controls (1 column on phones) */
.controls {
  display: grid; /* grid of dt/dd pairs */
  gap: 0 32px; /* column gap only; rules provide vertical separation */
  margin: 0; /* dl default margin removed */
}

/* Two columns once there's room */
@media (min-width: 560px) {
  /* Column count only */
  .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2x2 */
  }
}

/* Each control pair with a rule on top */
.controls > div {
  padding-block: 20px; /* space inside each entry */
  border-top: 1px solid var(--rule); /* rule above each item */
}

/* Control name */
.controls dt {
  font-weight: 600; /* semi-bold */
  color: var(--ink); /* primary */
}

/* Control explanation */
.controls dd {
  margin: 6px 0 0; /* removes the default indent, adds a small gap */
  color: var(--ink-soft); /* secondary */
}

/* --------------------------------------------------------------------------
   16. Quote
   -------------------------------------------------------------------------- */

/* Figure reset */
.quote figure {
  margin: 0; /* default figure margins removed */
}

/* Blockquote reset */
.quote blockquote {
  margin: 0; /* default indent removed; the margin line already provides the edge */
}

/* The quote text: large, medium weight, no decorative marks */
.quote blockquote p {
  max-width: 30ch; /* short lines at a large size stay readable */
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); /* scales with the viewport */
  font-variation-settings: "opsz" 32; /* display cut suits the large size */
  font-weight: 500; /* medium weight, so it reads as a voice rather than a heading */
  line-height: 1.25; /* comfortable at this size */
  letter-spacing: -0.02em; /* display tracking */
  color: var(--ink); /* primary */
}

/* Attribution */
.quote figcaption {
  margin-top: 20px; /* gap under the quote */
  color: var(--ink-soft); /* secondary */
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */

/* Space between heading and the first question */
.faq .section-title {
  margin-bottom: 32px; /* separates the heading from the ruled list */
}

/* Each question is a ruled line */
.faq details {
  border-bottom: 1px solid var(--rule); /* rule under each item */
}

/* First item gets a top rule to close the list */
.faq details:first-of-type {
  border-top: 1px solid var(--rule); /* top edge of the list */
}

/* Question row */
.faq summary {
  display: flex; /* question left, indicator right */
  justify-content: space-between; /* pushes the indicator to the edge */
  align-items: baseline; /* indicator aligns with the first text line */
  gap: 16px; /* space between text and indicator */
  padding-block: 20px; /* tall, easy target */
  font-size: 1.15rem; /* per the brief */
  font-weight: 600; /* semi-bold */
  line-height: 1.3; /* compact two-line questions */
  cursor: pointer; /* clickable */
  list-style: none; /* removes the default triangle in Firefox */
}

/* WebKit's own disclosure marker */
.faq summary::-webkit-details-marker {
  display: none; /* removes the default triangle in Safari/Chrome */
}

/* Custom plus indicator */
.faq summary::after {
  content: "+"; /* closed state; fallback for engines without CSS alt text */
  content: "+" / ""; /* empty alt text: <summary> already announces expanded/collapsed, so a spoken "plus" is noise */
  flex-shrink: 0; /* never squeezed by long questions */
  width: 1ch; /* fixed width so + and - don't shift the text */
  font-weight: 500; /* not too heavy */
  font-size: 1.4rem; /* visible at a glance */
  line-height: 1; /* no extra height */
  color: var(--brand); /* brand blue marks the control, 5.4:1 */
  text-align: center; /* centred in its box */
}

/* Open state swaps to a minus */
.faq details[open] summary::after {
  content: "−"; /* true minus sign, same width as the plus; fallback for engines without CSS alt text */
  content: "−" / ""; /* silent for the same reason as the plus: the open state is announced by <details> itself */
}

/* Answer text */
.faq details p {
  padding-bottom: 20px; /* space before the next rule */
  max-width: 60ch; /* readable */
  color: var(--ink-soft); /* secondary */
}

/* --------------------------------------------------------------------------
   18. Closer
   -------------------------------------------------------------------------- */

/* Deep brand band to end the page; the margin line keeps running over it */
.closer {
  background: var(--brand-deep); /* smebank-950 */
  color: var(--paper); /* white text, 15.4:1 */
}

/* Heading and button in a row, wrapping on phones */
.closer-row {
  display: flex; /* one row */
  flex-wrap: wrap; /* button drops under the heading on phones */
  align-items: center; /* vertical centring */
  justify-content: space-between; /* heading left, button right */
  gap: 24px 40px; /* row gap when wrapped, column gap otherwise */
}

/* Heading on the dark band needs white */
.closer .display {
  color: var(--paper); /* overrides .display's ink */
  max-width: 20ch; /* keeps the heading from stretching across the whole band */
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

/* Footer on white with a top rule */
.site-footer {
  padding: 56px 0 32px; /* space above the grid and below the copyright */
  background: var(--paper); /* matches the page */
  border-top: 1px solid var(--rule); /* rule separating footer from the closer band */
}

/* Footer columns: one on phones */
.footer-grid {
  display: grid; /* grid of blocks */
  gap: 32px; /* space between blocks */
}

/* Two columns on large phones */
@media (min-width: 640px) {
  /* Column count only */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 up */
  }
}

/* Four columns on desktop, company block a bit wider */
@media (min-width: 1000px) {
  /* Column count only */
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); /* brand column needs more room than link lists */
  }
}

/* Footer logo above the tagline */
.footer-logo {
  display: block; /* own line, no inline baseline gap */
  width: 40px; /* matches the markup's width attribute */
  height: 40px; /* square */
  border-radius: var(--radius-sm); /* same 8px tier as buttons */
  object-fit: cover; /* never distorts a non-square source */
  margin-bottom: 14px; /* gap before the tagline */
}

/* aczen.in's tagline */
.footer-tagline {
  max-width: 34ch; /* wraps into two or three short lines */
  margin-bottom: 14px; /* gap before the address */
  color: var(--ink-soft); /* secondary */
}

/* Social links row */
.social {
  display: flex; /* links side by side */
  flex-wrap: wrap; /* wraps rather than overflowing on narrow phones */
  gap: 16px; /* per the brief */
  margin-top: 16px; /* gap under the address */
}

/* A heading that follows a link list starts a new group in the same column (Contact, then Legal) */
.footer-grid a + .footer-h {
  margin-top: 1.5rem; /* separates the second group from the first */
}

/* Group headings */
.footer-h {
  margin-bottom: 8px; /* gap before the links */
  font-size: 0.9375rem; /* small */
  font-weight: 600; /* semi-bold, sentence case, no tracking */
  color: var(--ink); /* primary */
}

/* Footer links stacked, quiet */
.site-footer a {
  display: block; /* one per line */
  padding-block: 4px; /* taller touch target */
  width: fit-content; /* underline and click area only span the text */
  color: var(--ink-soft); /* secondary */
  text-decoration: none; /* clean list */
}

/* Footer link hover */
.site-footer a:hover {
  color: var(--ink); /* darkens */
  text-decoration-line: underline; /* non-colour cue */
}

/* Social links: 44x44 minimum tap target (WCAG 2.5.8 / Apple HIG); .site-footer prefix outranks the block rule above */
.site-footer .social a {
  display: inline-flex; /* overrides the stacked-link block display so the links stay in a row */
  align-items: center; /* keeps the label vertically centred in the taller box */
  justify-content: center; /* centres short labels like "X" in the widened box */
  min-height: 44px; /* audit measured 34px tall; 44px is the minimum comfortable touch height */
  min-width: 44px; /* audit measured the "X" link at 12px wide; it now gets a full-size target */
  padding-inline: 4px; /* a little air so neighbouring targets don't touch */
}

/* Address: normal text, not italic */
.site-footer address {
  font-style: normal; /* browsers italicise <address> by default */
  color: var(--ink-soft); /* secondary */
  max-width: 34ch; /* wraps the address into natural lines */
}

/* Pointer back to aczen.in: a slightly more prominent sibling of the copyright line */
.main-site {
  margin-top: 40px; /* this line opens the bottom strip, so it takes the gap below the grid */
  font-size: 0.9375rem; /* one step larger than the copyright */
  color: var(--ink); /* ink rather than ink-soft, so it reads as a real pointer */
}

/* The aczen.in link must look like an inline body link, not a stacked footer link */
.site-footer .main-site a {
  display: inline; /* undoes the block display footer link lists use */
  padding-block: 0; /* inline link needs no extra hit padding inside a sentence */
  color: var(--brand); /* brand link, 5.4:1 */
  text-decoration-line: underline; /* visible link cue inside a sentence */
}

/* Copyright line */
.copyright {
  margin-top: 8px; /* tucked under the main-site line, which owns the gap below the grid */
  font-size: 0.875rem; /* small */
  color: var(--ink-soft); /* secondary */
}

/* --------------------------------------------------------------------------
   20. Motion: one orchestrated load moment, only for people who allow it
   -------------------------------------------------------------------------- */

/* Everything animated lives inside this query so reduced-motion users get a static page */
@media (prefers-reduced-motion: no-preference) {
  /* Smooth anchor scrolling only when motion is welcome */
  html {
    scroll-behavior: smooth; /* nav jumps glide instead of teleporting */
  }

  /* Calendar cells fade in once, left to right, using the --i index main.js sets */
  .cal-grid li {
    animation: cal-in 360ms ease-out both; /* "both" keeps cells invisible until their delay passes */
    animation-delay: calc(var(--i, 0) * 14ms); /* ~0.6s total stagger across a month */
  }

  /* Today's cell fades in with the rest, then pulses its ring once */
  .cal-grid .is-today {
    animation: cal-in 360ms ease-out both, today-pulse 1100ms ease-out 1; /* two animations, one run each */
    animation-delay: calc(var(--i, 0) * 14ms), calc(var(--i, 0) * 14ms + 500ms); /* pulse starts after the cell has appeared */
  }
}

/* Opacity-only entrance: no translate, so nothing shifts layout or looks like fade-up-on-scroll */
@keyframes cal-in {
  /* Start invisible */
  from {
    opacity: 0; /* hidden */
  }
  /* End fully visible */
  to {
    opacity: 1; /* shown */
  }
}

/* One expanding brand ring around today, fading out; the inset ring stays constant */
@keyframes today-pulse {
  /* Pulse ring starts tight and visible */
  from {
    box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 0 rgba(10, 92, 245, 0.55); /* inset ring plus the smebank-600 pulse ring */
  }
  /* Pulse ring grows and fades */
  to {
    box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 9px rgba(10, 92, 245, 0); /* pulse fully transparent at 9px */
  }
}

/* "Sample data" caption: visible so illustrative ledger rows are never mistaken for real customer figures */
.ledger-caption {
  caption-side: bottom; /* sits under the rows so it labels without competing with the column headings */
  text-align: left; /* aligns with the first column, where the eye starts each row */
  padding: 8px 12px; /* matches the cell padding rhythm so it reads as part of the table */
  font-size: 0.8125rem; /* small, because it's a label, not content */
  color: var(--ink-soft); /* gray-600 passes AA on white while staying secondary */
}

/* Partners strip: aczen.in's PartnersSection, restyled as a calm logo row instead of a scrolling marquee */
.partners {
  padding-block: var(--section-y, 96px); /* same rhythm as every other homepage section */
  border-top: 1px solid var(--rule); /* separates it from the hero without a background change */
}
/* Logo row wraps instead of scrolling, so every partner is visible without motion */
.partner-logos {
  list-style: none; /* it's a list for screen readers, not for bullets */
  margin: 32px 0 0; /* space under the lede */
  padding: 0; /* removes the default list indent */
  display: flex; /* one row on desktop */
  flex-wrap: wrap; /* wraps to several rows on phones */
  align-items: center; /* logos of different heights share a centre line */
  gap: 28px 48px; /* generous gaps so logos don't read as one blob */
}
/* Each logo is height-capped so wide and square marks look equally weighted */
.partner-logos img {
  display: block; /* removes the inline baseline gap under images */
  height: 44px; /* one height for all logos */
  width: auto; /* keeps each logo's own proportions */
  max-width: 160px; /* stops very wide wordmarks dominating */
  object-fit: contain; /* never crops a logo */
  filter: grayscale(1); /* one neutral tone so partner brand colours don't fight Aczen's */
  mix-blend-mode: multiply; /* lets white logo backgrounds disappear into the page */
  opacity: 0.8; /* quieter than content, still clearly legible */
}
/* Names for partners whose logos aren't self-hosted on aczen.in */
.partner-names {
  margin-top: 24px; /* separates the sentence from the logo row */
}