/* ==========================================================================
   DINKOMART HELP CENTRE — CENTRE
   The help centre's enhancement layer. Loads after demo.css, last of all.

   ---------------------------------------------------------------------------
   WHAT WAS ACTUALLY WRONG, AFTER THE FIRST PASS FIXED THE OBVIOUS PART

   The first version of this file corrected the type ramp — the four section
   headings were 19px because the markup asked for it inline, against a 44px
   h1, so the navigational headings were the smallest type on the page. That
   was real and it is fixed (they are `.hc-h` now, set here rather than in four
   places in the document).

   It did not make the page look designed, and the reason is structural rather
   than typographic:

     - ONE COLUMN, ONE ALIGNMENT, ONE WIDTH, top to bottom. Nine blocks, all
       left-aligned, all the same measure. No layout event anywhere.
     - NO GROUND. Every block is a white card on a near-white page. Nothing is
       nearer or further away than anything else.
     - THE TWO INTERESTING THINGS ARE BURIED. The season strip and the
       delivery calculator are the only instruments on the page and they sit
       mid-column in plain boxes, set exactly like the prose above them.
     - THE FAQ IS A WALL. Eight rows in one column, in the middle of the page.

   So this pass is about strata, measure and emphasis. The contract is
   unchanged and is the reason none of it is risky:

     1. NOTHING AUTHORED IS HIDDEN — no rule here sets `opacity: 0` on content
        a script must reveal. `.hc-in` replays what is already visible and is
        always taken back off; see centre.js.
     2. NOTHING EXISTING IS REPLACED — every rule decorates markup index.php
        already ships. Delete the two tags and the page is as it was.
     3. NO WASH FROM A RAW PALETTE TOKEN — only semantic tokens are painted,
        so every ground below flips with the theme. That rule has cost this
        project a cream smear across every dark page once already.
   ========================================================================== */

:root {
  --hc-dur: 190ms;
  --hc-dur-slow: 460ms;
  --hc-ease: cubic-bezier(.22, .68, .36, 1);
  --hc-ease-soft: cubic-bezier(.22, .61, .36, 1);
  --hc-gap: clamp(3.5rem, 2rem + 5vw, 6rem);
}

/* ==========================================================================
   1. THE HERO — give the top of the page somewhere to stand

   The question, the box you ask it in, and the four answers most people came
   for are one composition. They were four sibling blocks with nothing saying
   where the header ended and the page began.

   The ground is `--rhythm`, the build's own alternating-section wash — the
   semantic token that exists precisely so a tint is not painted from a raw
   palette value. It sits under a full-bleed pseudo-element rather than a
   background on the container, so the tint runs edge to edge while the
   content keeps the page measure.
   ========================================================================== */
/* THE BLEED DOES NOT USE `100vw`, AND THAT IS THE POINT.

   `100vw` includes the scrollbar; the client width does not. So a full-bleed
   element built from it is always wider than the page it bleeds across —
   measured here at 787px against a 772px client width, i.e. 8px of horizontal
   scroll on a page with no element out of place. That is KNOWN_ISSUES' bug 8,
   and reaching for `overflow-x: clip` to hide it is treating the symptom.

   Symmetric negative insets with `width: auto` bleed past the container by a
   fixed amount without ever asking how wide the viewport is, and `.hub` clips
   what spills. Nothing to get wrong when a scrollbar appears or does not.
   Clip goes on `.hub`, never on `body`: body as the scroll container is what
   stops the sticky header sticking. */
.hub { overflow-x: clip; }

.hc-hero {
  position: relative;
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) var(--hc-gap);
  margin-bottom: var(--hc-gap);
}
.hc-hero::before {
  content: '';
  position: absolute;
  /* Full bleed. `inset` with both 50% AND a width is contradictory — the
     insets win and the width resolves to nothing, which is what it did:
     measured, the pseudo-element had no computed width at all. One edge
     pinned, then pulled back half a viewport, is the technique that works. */
  top: calc(-1 * var(--s-9, 3rem));
  left: -50%;
  right: -50%;
  bottom: auto;
  width: auto;
  height: calc(100% + var(--s-9, 3rem));
  background:
    /* one soft bloom behind the question, then the wash. Both semantic. */
    radial-gradient(120% 90% at 18% 0%, var(--brand-soft) 0%, transparent 62%),
    var(--rhythm);
  border-bottom: 1px solid var(--hairline);
  z-index: -1;
  pointer-events: none;
}

.hc-hero h1 {
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin-bottom: var(--s-5);
}
.hc-hero .lead {
  font-size: clamp(1.05rem, .98rem + .45vw, 1.28rem);
  line-height: 1.55;
  max-width: 54ch;
  color: var(--fg-muted);
}

/* ==========================================================================
   2. THE ASK BOX — the first control, and it read as a panel

   A tinted box with a small field in it and a four-line disclaimer set at the
   same weight as the suggestions. The field is the point. It is now sized
   like one, the ring says so on focus, and the disclaimer is small print
   under a rule, which is what it is.
   ========================================================================== */
.hub .ask {
  border-radius: var(--r-panel, 16px);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--hc-dur) var(--hc-ease),
              box-shadow var(--hc-dur) var(--hc-ease);
}
.hub .ask:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent),
              var(--shadow-lg);
}
.hub .ask input {
  font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
  padding-block: var(--s-4);
}
.hub .ask-top .ico { color: var(--brand); }

.hub .ask-seeds button,
.hub .ask-seeds a {
  border-radius: 999px;
  transition: background-color var(--hc-dur) var(--hc-ease),
              border-color var(--hc-dur) var(--hc-ease),
              color var(--hc-dur) var(--hc-ease),
              transform 90ms var(--hc-ease);
}
.hub .ask-seeds button:hover,
.hub .ask-seeds a:hover {
  border-color: var(--brand);
  color: var(--brand-ink, var(--fg));
  background: var(--brand-soft);
}
.hub .ask-seeds button:active,
.hub .ask-seeds a:active { transform: translateY(1px); }

.hub .ask-foot {
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--fg-muted);
  border-top: 1px solid var(--hairline);
}

/* ==========================================================================
   3. THE FIGURES — the page's answer sheet, set as the ornament

   "Order by 9 PM / Next day / ₹499 / On delivery" answers four of the eight
   questions further down this page, and it was four small grey labels over
   four medium words — the quietest row on the page.

   This site's art direction is that numbers are the ornament. This is the one
   row that is entirely numbers, so it gets the figure size, a mono tracked
   label, and `tabular-nums` so the four sit on a common grid.
   ========================================================================== */
.hub .figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: var(--hc-gap) 0 0;
  padding: 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 820px) { .hub .figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hub .figs > div {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-6) var(--s-5);
  background: var(--bg);
  transition: background-color var(--hc-dur) var(--hc-ease);
}
.hub .figs > div:hover { background: var(--surface); }
.hub .figs dt {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1;
}
.hub .figs dd {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4. SECTION RHYTHM AND SCALE

   The headings go to a fluid ramp that lands between the h1 and the card
   headings, so the page reads 64 -> 38 -> 31 -> body instead of 44 -> 31 ->
   19. Each gains a rule in the margin: the storefront earns its rhythm with a
   numbered index entry, and a help centre has no ordinal to show, so it takes
   the same gesture without the number.
   ========================================================================== */
.hub .hc-h {
  font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin-top: var(--hc-gap);
  margin-bottom: var(--s-5);
  position: relative;
  text-wrap: balance;
}
.hub .hc-h::before {
  content: '';
  display: block;
  width: 38px;
  height: 2px;
  margin-bottom: var(--s-4);
  background: var(--brand);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(1);      /* resting = drawn. The animation only replays it. */
}
.hub .hc-h + p { max-width: 62ch; color: var(--fg-muted); }

/* ==========================================================================
   5. THE TWO CARDS — spend the tone they already declare

   Each card carries `--tone` and `--tone-ink` inline in the markup, and
   almost nothing was drawn with them. They now take a tone rule along the top
   edge, a tinted icon well, and a tone-coloured border on hover — so the
   green card and the amber card read as two different destinations rather
   than two identical boxes with different words.

   `align-items: start`, because the contact card carries three bullets to the
   topics card's five and was being padded out to match.
   ========================================================================== */
.hub .fork-grid { align-items: start; gap: var(--s-6); }

.hub .fork-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel, 16px);
  transition: transform var(--hc-dur) var(--hc-ease),
              border-color var(--hc-dur) var(--hc-ease),
              box-shadow var(--hc-dur) var(--hc-ease);
}
.hub .fork-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tone, var(--brand));
}
.hub .fork-card:hover {
  transform: translateY(-5px);
  border-color: var(--tone, var(--brand));
  box-shadow: var(--shadow-lg);
}
.hub .fork-card:focus-visible {
  outline: 2px solid var(--tone, var(--brand));
  outline-offset: 3px;
}
.hub .fork-ico {
  background: color-mix(in srgb, var(--tone, var(--brand)) 14%, transparent);
  transition: transform var(--hc-dur) var(--hc-ease);
}
.hub .fork-ico .ico { color: var(--tone-ink, var(--tone, var(--brand))); }
.hub .fork-card:hover .fork-ico { transform: scale(1.06) rotate(-3deg); }

.hub .fork-card h2 { letter-spacing: -.02em; }
.hub .fork-go {
  color: var(--tone-ink, var(--tone, var(--brand)));
  transition: gap var(--hc-dur) var(--hc-ease);
}
.hub .fork-go .ico { transition: transform var(--hc-dur) var(--hc-ease); }
.hub .fork-card:hover .fork-go .ico { transform: translateX(5px); }
.hub .fork-list li { transition: color var(--hc-dur) var(--hc-ease); }
.hub .fork-card:hover .fork-list li { color: var(--fg); }

/* ==========================================================================
   6. THE TWO INSTRUMENTS

   The season strip and the delivery calculator are the only things on this
   page you can operate, and they were set exactly like the paragraphs above
   them. They now sit on a panel with a mono rubric, so they read as
   instruments rather than as more prose. `data-demo-mount` is the hook
   demo.js already builds into; nothing here changes what it builds.
   ========================================================================== */
.hub [data-demo-mount] {
  border: 1px solid var(--border);
  border-radius: var(--r-panel, 16px);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--hc-dur) var(--hc-ease),
              border-color var(--hc-dur) var(--hc-ease);
}
.hub [data-demo-mount]:hover { box-shadow: var(--shadow-lg); }
.hub [data-demo-mount]:focus-within { border-color: var(--brand); }

/* ==========================================================================
   7. COMMON QUESTIONS — two columns, because eight rows in one is a wall

   DELIBERATELY NOT AN ACCORDION. Every answer here is one line; putting a
   one-line answer behind a click costs an interaction and saves nothing, and
   a closed panel is content hidden waiting for JS, which is this project's
   first hard rule. What it needed was for the question and the answer to stop
   being the same weight, and for the run to stop being eight rows tall.

   A table cannot be two columns, so the ROWS are laid out as a grid — the
   table keeps its semantics for a screen reader and gains a second column for
   an eye. Below 1000px it falls back to one, and below 620px the question and
   answer stack.
   ========================================================================== */
@media (min-width: 1000px) {
  /* `display: grid` takes the table out of table layout, and a non-table
     block is auto-width — it shrank to its content and the two columns came
     out 195px each. Both the wrapper and the table have to be told to take
     the full measure, since neither inherits it once table layout is gone. */
  .hub .table-responsive { max-width: none !important; }
  /* ONLY `tbody` is the grid. Declaring it on the table as well nested one
     two-column grid inside another: `tbody` became a single item in column
     one, then split ITS half in two, and the columns measured 265px inside a
     1440px page. The table is just a block that carries the measure. */
  .hub .table-responsive .table { display: block; width: 100%; }
  .hub .table-responsive tbody {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s-8);
  }
  .hub .table-responsive tr { display: grid; align-content: start; }
}

.hub .table-responsive .table { margin: 0; }
.hub .table-responsive tr {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-4);
  transition: background-color 120ms var(--hc-ease);
}
.hub .table-responsive td { border: 0; padding: 0; vertical-align: baseline; }
.hub .table-responsive td:first-child {
  color: var(--fg);
  font-weight: 650;
  font-size: var(--t-md);
  letter-spacing: -.008em;
  padding-bottom: 3px;
}
.hub .table-responsive td:first-child b { font-weight: 650; }
.hub .table-responsive td:last-child { color: var(--fg-muted); line-height: 1.55; }
.hub .table-responsive td:last-child b { color: var(--fg); font-weight: 650; }

/* the More link needs an affordance AT REST — the lesson the storefront's
   stepper cost: nobody clicks what does not look clickable, and hover is
   invisible to the person deciding whether to bother */
.hub .table-responsive a {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--brand);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  transition: border-color var(--hc-dur) var(--hc-ease);
}
.hub .table-responsive a::after {
  content: '\203A';
  transition: transform var(--hc-dur) var(--hc-ease);
}
.hub .table-responsive a:hover { border-color: var(--brand); }
.hub .table-responsive a:hover::after { transform: translateX(2px); }

@media (max-width: 620px) {
  .hub .table-responsive td { display: block; width: auto; }
}

/* ==========================================================================
   8. GO STRAIGHT TO — six links that were text with an icon beside it
   ========================================================================== */
.hub .quick { gap: var(--s-3); }
.hub .quick a {
  border-radius: 999px;
  transition: background-color var(--hc-dur) var(--hc-ease),
              border-color var(--hc-dur) var(--hc-ease),
              color var(--hc-dur) var(--hc-ease),
              box-shadow var(--hc-dur) var(--hc-ease),
              transform 90ms var(--hc-ease);
}
.hub .quick a .ico { transition: transform var(--hc-dur) var(--hc-ease); color: var(--brand); }
.hub .quick a:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}
.hub .quick a:hover .ico { transform: translateY(-1px) scale(1.08); }
.hub .quick a:active { transform: translateY(1px); }

@media (pointer: coarse) {
  .hub .quick a,
  .hub .ask-seeds button, .hub .ask-seeds a { min-height: 44px; }
}

/* ==========================================================================
   9. ARRIVAL

   THE RESTING STATE IS THE FINISHED STATE, and centre.js guarantees it by
   always taking `.hc-in` back off — read the note there. A fill mode of
   `both` pins an element at its FROM keyframe, so a class that is never
   removed is a page that is never visible in any renderer that does not
   advance animations. That is this project's oldest bug and it was written
   into the first draft of this very file.
   ========================================================================== */
@keyframes hc-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hc-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.hc-in { animation: hc-rise var(--hc-dur-slow) var(--hc-ease-soft) both; }
.hc-in.hc-h::before { animation: hc-draw var(--hc-dur-slow) var(--hc-ease-soft) both .12s; }

.hc-stagger > *:nth-child(1) { animation-delay: 0ms }
.hc-stagger > *:nth-child(2) { animation-delay: 60ms }
.hc-stagger > *:nth-child(3) { animation-delay: 120ms }
.hc-stagger > *:nth-child(4) { animation-delay: 180ms }
.hc-stagger > *:nth-child(n+5) { animation-delay: 220ms }

/* ==========================================================================
   10. THE OFF SWITCH, AND THE HATCH
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hc-in, .hc-in.hc-h::before { animation: none !important; }
  .hub .fork-card, .hub .fork-ico, .hub .quick a, .hub .ask, .hub .ask-seeds button,
  .hub .ask-seeds a, .hub .figs > div, .hub .table-responsive tr,
  .hub .table-responsive a, .hub [data-demo-mount] { transition-duration: 1ms !important; }
  .hub .fork-card:hover { transform: none; }
  .hub .fork-card:hover .fork-ico { transform: none; }
  .hub .quick a:active, .hub .ask-seeds button:active { transform: none; }
}

[data-flat] .hc-in, [data-flat] .hc-in.hc-h::before { animation: none !important; }
[data-flat] .hub * { transition: none !important; }