/* ============================================================================
   rf.css — the GST Rate Finder page only (rebuilt around the tool 2026-10-01).
   Loaded after the tool's static/style.css (unchanged) and site.css.

   Sizes, colours, spacing and animations are copied from the inline styles of
   design_reference/site_rate_finder_v2_reference.html (approved 1 Oct 2026). Brand colours
   and Inter as everywhere on the site.

   THE TOOL IS NOT CHANGED: its markup (templates/_tool.html) and scripts are exactly as
   before. The rules under "the tool, laid out to the reference" only restyle it from
   outside — every one of them is scoped to .rf-tool on this page, so the desktop program
   and every other page are untouched.

   Revision 4 of the reference (2 Oct 2026): the homepage's textured background (shared rules in
   site.css; this page's sizes below — five rings, so they stop above the search box); grey text
   #5D5672 everywhere the old grey #6B6480 was; the three highlighted terms no longer push the
   words and full stop beside them away; a share row for THIS page under the two rates notes
   (look in site.css, behaviour in share.js).

   Follow-up of 2 Oct 2026 (home reference revision 7 / rate finder revision 5): the rings round
   Sakhi fade out before the top bar (site.css, .vr-hero .vr-rings).
   On phones, "Browse by chapter" shows every name in full (see the rule under "the tool").

   HOW THE MOTION IS SWITCHED ON: the page's default is the still version. static/site/rf.js
   adds "play" to the outer box (#top) once on load, and "in" / "wait" to the lower section
   (#stmt) as it scrolls in and out of view. Every animation below needs one of those
   classes; reduced motion switches every animation off.

   Timings, from the reference's header comment (once on page load):
     0.2 s  rings pulse round Sakhi
     0.4 s  "GST Rate Finder" appears word by word (0.17 s apart)
     1.3 s  first line rises; its two terms underline at 1.9 s
     2.3 s  second line rises; "GST rate", "source notification number", "effective date"
            light up one at a time at 2.8, 3.6 and 4.4 s
     3.0 s  Sakhi starts to raise her hand; thumbs-up at about 4.7 s; she lowers it at 7.0 s
     5.0 s  the homepage pill pops in; a soft ring pulses round it every 7 s; its arrow
            nudges every 2.4 s
     0 s    the search box, its hint line and the tool are on screen and usable at once (third
            round, 2026-10-01: no entrance animation on them at all — the owner's brief; the
            newer reference lets them rise at 0.3-0.5 s); the two rates notes rise at 0.6 s;
            example searches type themselves into the empty box from 1.2 s, 3 s each, and repeat
     0.7 s  the share row rises with the notes under the tool (revision 4)
     4.6 s  a ripple runs out through the five rings round Sakhi, one ring every 0.14 s (as her
            thumbs-up lands; the delays are on each ring in site_landing.html), repeating every 5 s
   The lower section, when scrolled into view (and again on return): rise, strike at 1.0 s,
   "Not anymore." pops at 1.6 s, underline at 2.2 s, video at 2.6 s, button at 3.0 s.
   ============================================================================ */

/* (body keeps the tool stylesheet's line-height of 1.5: the tool's text is laid out with it) */
body.rf2 { margin: 0; background: #F0EEF7; color: #2A2440; }
.rf2 a { color: #3D2B7A; }
.rf2 a:hover { color: #6A55E8; }
/* ...except inside the tool, whose links keep the colour they had on this page before
   (site.css's ".site a": the action purple, no hover change) */
.rf-tool a, .rf-tool a:hover { color: #6A55E8; }

.rf {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #2A2440;
  background: #F0EEF7; display: flex; flex-direction: column; align-items: center;
  /* The textured background's layers sit inside this box, behind everything (site.css explains).
     z-index 0 makes this box the layer stack they sit at the back of. */
  position: relative; z-index: 0;
  /* The rings round Sakhi are wider than a phone screen: cut off whatever sticks out, so there
     is never a sideways scroll. "clip" where the browser knows it; "hidden" otherwise. */
  overflow: hidden; overflow: clip;
}

/* ---------- top bar ---------- */
.rf-head {
  width: 100%; max-width: 1120px; box-sizing: border-box;
  padding: 20px clamp(16px, 4vw, 24px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.rf2 .rf-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: #3D2B7A; }
.rf-brand img { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; }
.rf-brand-words { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.rf-wordmark { font-size: 20px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.rf-wordmark .dot { color: #C9BFFF; }
.rf-tagline { font-size: 12px; line-height: 1.3; font-weight: 400; color: #5D5672; }
.rf-nav { display: flex; align-items: center; gap: 24px; }
.rf2 .btn { background: #6A55E8; transition: background-color .2s; }
.rf2 .btn:hover { background: #5745D1; }
.rf2 .nav-cta {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 18px;
  border-radius: 12px; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none;
}
.rf2 .nav-cta:hover { color: #FFFFFF; }
@media (max-width: 520px) { .rf2 .nav-cta { display: none; } }
/* a text link in the top bar ("Pricing", since 1 Nov 2026), like the homepage's "GST Rate Finder";
   44 px tall so it is easy to tap */
.rf2 .rf-nav-link {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}

/* ---------- page column ---------- */
.rf-main {
  width: 100%; max-width: 1120px; box-sizing: border-box;
  padding: clamp(8px, 1.4vw, 20px) clamp(16px, 4vw, 24px) 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative;             /* the rings round Sakhi are placed from this box's top */
}

/* The background round Sakhi (site.css draws it): Sakhi's width (--sk, the same clamp as
   .rf-sakhi below) and the gap above her (--pt, this column's top padding). Five rings, so they
   stop above the search box and nothing sits behind the tool's text. */
.rf .vr-hero { --sk: clamp(120px, 11vw, 160px); --pt: clamp(8px, 1.4vw, 20px); }

/* Sakhi */
.rf-sakhi { position: relative; width: clamp(120px, 11vw, 160px); }
.rf-disc, .rf .ring { position: absolute; left: 12%; top: 5%; width: 76%; aspect-ratio: 1; border-radius: 50%; }
.rf-disc { background: #E3DCFA; }
.rf .ring { box-sizing: border-box; border: 2px solid #C9BFFF; opacity: 0; }
.rf .sakhi {
  position: relative; width: 100%; aspect-ratio: 320 / 312;
  background: url(/static/site/sakhi-smile-strip.webp) 0% 0 / 3900% 100% no-repeat;
}

/* Heading and lines */
.rf-h1 { margin: 12px 0 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.14; font-weight: 600; letter-spacing: -0.025em; color: #3D2B7A; }
.tw { display: inline-block; }
.rf-lead { margin: 14px 0 0; max-width: 760px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; font-weight: 500; color: #2A2440; text-wrap: balance; }
.rf-lead2 { margin-top: 2px; }
.rf .mk { background: linear-gradient(#D6CDFF, #D6CDFF) no-repeat 0 94% / 100% .2em; }
/* The three highlighted terms. The negative side margin equals the side padding, so the
   highlight's padding takes no room of its own: the words and the full stop beside them sit at
   normal spacing (revision 4; was -3px). */
.gh {
  padding: 1px 5px; margin: 0 -5px; border-radius: 6px; font-weight: 600; color: #3D2B7A; white-space: nowrap;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rf-count { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #5D5672; }

/* The pill to the homepage */
.rf2 .rf-pill {
  margin-top: 22px; max-width: 100%; box-sizing: border-box;
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  padding: 8px 8px 8px 20px; background: #FFFFFF; border: 1.5px solid #6A55E8; border-radius: 28px;
  text-decoration: none; color: #3D2B7A; font-size: 15px; line-height: 1.5; font-weight: 500;
}
.rf-pill-go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 0 16px;
  border-radius: 20px; background: #6A55E8; color: #FFFFFF; font-weight: 600; white-space: nowrap;
}
.arrn { display: inline-block; }

/* ---------- the tool, laid out to the reference (from outside; the tool is unchanged) ---------- */
.rf-tool { margin-top: 28px; width: 100%; max-width: 760px; position: relative; text-align: left; }
.rf-tool main { max-width: none; margin: 0; padding: 0; }
.rf-tool .search-hero { margin: 0; }
/* the search box: 60 px tall, room on the left for the magnifier */
.rf-tool #mainSearch {
  width: 100%; height: 60px; box-sizing: border-box; padding: 0 20px 0 54px;
  border: 1.5px solid #CFC8E6; border-radius: 16px; background: #FFFFFF; color: #2A2440;
  font-family: inherit; font-size: 18px; box-shadow: none;
}
.rf-tool #mainSearch:focus { outline: 2px solid #6A55E8; outline-offset: 1px; border-color: #CFC8E6; box-shadow: none; }
/* the box's own placeholder is drawn by the "Try …" line instead (it stays the box's accessible name) */
.rf-tool #mainSearch::placeholder { color: transparent; }
/* the hint line under the box (the tool's own #searchHint, unchanged text) */
.rf-tool .search-hero .hint { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #5D5672; text-align: center; }
/* the lists and "Browse by chapter": where the reference has its dashed box */
.rf-tool #results.standalone { margin-top: 20px; }
.rf-tool .result-panel { margin-top: 20px; }
.rf-tool .browse-panel { margin-top: 20px; }
/* "Browse by chapter" on phones (owner's decision, 2 Oct 2026): the names show IN FULL, wrapping
   where needed, instead of being cut to 4-5 letters ("Live an…"). On a phone the tool's own layout
   (static/style.css, unchanged) gives each name only 30-60 px: the code column is 92 px wide and
   the "HSN" badge, the count and the arrow sit on the same line. Here, up to 600 px wide, each row
   becomes a small grid (layout only — the rows, their words and what a tap does are the tool's):
       01   Live animals                      ›
            HSN  101 codes
   the code on the left, the name with the whole width beside it, the badge and count under the
   name, the arrow on the right. Rows one level down (a chapter's headings: code, name, rate, arrow)
   get the same shape, with the rate under the name. Wider screens keep the tool's one-line rows. */
@media (max-width: 600px) {
  .rf-tool .tree li {
    display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 8px; row-gap: 3px; align-items: center;
  }
  .rf-tool .tree .t-code { grid-column: 1; grid-row: 1 / span 2; align-self: start; min-width: 2.2em; }
  .rf-tool .tree .t-desc { grid-column: 2 / 4; grid-row: 1; white-space: normal; overflow: visible; text-overflow: clip; }
  .rf-tool .tree .badge { grid-column: 2; grid-row: 2; }
  .rf-tool .tree .t-rate { grid-column: 3; grid-row: 2; }
  .rf-tool .tree .t-desc + .t-rate { grid-column: 2 / 4; }   /* a row with no badge: the rate starts under the name */
  .rf-tool .tree .chev { grid-column: 4; grid-row: 1 / span 2; }
  .rf-tool .tree li.empty { display: block; }                 /* "No finer codes …": a plain line */
}
/* the tool's own copy of the "Read-only reference tool …" note: shown by the page instead,
   under "Rates as on …", in the reference's order (same words) */
.rf-tool .footer-note { display: none; }

/* the magnifier and the "Try …" examples, drawn over the EMPTY box only */
.rf-glass { position: absolute; left: 20px; top: 19px; z-index: 1; pointer-events: none; }
.rf-try {
  position: absolute; left: 54px; top: 0; height: 60px; z-index: 1;
  display: flex; align-items: center; gap: 7px;
  font-size: 18px; line-height: 22px; color: #5D5672; pointer-events: none;
}
.rf-try-words { position: relative; display: inline-block; min-width: 10em; height: 22px; text-align: left; color: #3D2B7A; }
.ex { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.ex1 { opacity: 1; }
/* gone the moment the box is focused or holds text (rf.js adds .rf-typing for older browsers) */
.rf-tool:has(#mainSearch:focus) .rf-try,
.rf-tool:has(#mainSearch:not(:placeholder-shown)) .rf-try,
.rf-tool.rf-typing .rf-try { visibility: hidden; }

/* ---------- the two rates notes ---------- */
.rf-note { margin: 20px 0 0; max-width: 760px; font-size: 14px; line-height: 1.6; color: #5D5672; }
.rf-note2 { margin-top: 6px; font-size: 13px; }

/* ---------- the share row for this page (revision 4; its look is in site.css) ---------- */
.rf-share-row { margin-top: 22px; }

/* ---------- the lower section ---------- */
.rf-stmt { width: 100%; max-width: 1040px; margin-top: clamp(64px, 8vw, 120px); display: flex; flex-direction: column; align-items: center; }
.rf-stmt-q, .rf-stmt-a { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.rf-stmt-q { color: #5D5672; }
.rf-stmt-a { margin-top: 4px; color: #3D2B7A; }
.rf .st { background: linear-gradient(#5D5672, #5D5672) no-repeat 0 56% / 100% 2px; }
.rf .um { background: linear-gradient(#C9BFFF, #C9BFFF) no-repeat 0 96% / 100% .16em; }
.rf-video {
  margin-top: clamp(28px, 3vw, 40px); width: 100%; position: relative;
  border-radius: clamp(12px, 1.6vw, 20px); overflow: hidden; background: #FFFFFF; border: 1px solid #E7E4F3;
  box-shadow: 0 30px 60px -30px rgba(61, 43, 122, 0.35), 0 8px 20px -12px rgba(61, 43, 122, 0.18);
  text-align: left;
}
/* the demo video block fills the box (no border or size cap of its own) */
.rf-video .hero-frame { border: 0; border-radius: 0; max-width: none; background: #F0EEF7; }
.rf2 .rf-join {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; box-sizing: border-box;
  padding: 0 28px; border-radius: 14px; color: #FFFFFF; font-size: 18px; font-weight: 600; text-decoration: none;
}
.rf2 .rf-join:hover { color: #FFFFFF; }
.rf-join .arr { transition: transform .2s; }
.rf-join:hover .arr { transform: translateX(4px); }
/* (.rf-beta-note, the line "Beta opens November 2026. The waitlist goes first.", was removed on 26 Oct 2026.) */

/* ---------- footer ---------- */
.rf-foot {
  width: 100%; max-width: 1120px; box-sizing: border-box; margin-top: clamp(56px, 6.5vw, 96px);
  padding: 0 clamp(16px, 4vw, 24px) 28px; display: flex; flex-direction: column; gap: 16px;
}
.rf-about { margin: 0; border-top: 1px solid #E7E4F3; padding-top: 20px; font-size: 13px; line-height: 1.65; color: #5D5672; text-align: left; }
.rf-about strong { font-weight: 600; color: #2A2440; }
.rf-foot-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  font-size: 13px; line-height: 1.6; color: #5D5672;
}
.rf-foot-left { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.rf-foot-left p { margin: 0; }
.rf-foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.rf-foot-links a { display: inline-block; padding: 12px 0; }

/* ============================================================================
   THE MOTION (only with the classes rf.js adds) — keyframes and timings from the reference
   ============================================================================ */
@keyframes rfWord { from { opacity: 0; transform: translateY(.3em); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rfMark { from { background-size: 0 .2em; } to { background-size: 100% .2em; } }
@keyframes rfMark2 { from { background-size: 0 .16em; } to { background-size: 100% .16em; } }
@keyframes rfStrike { from { background-size: 0 2px; } to { background-size: 100% 2px; } }
@keyframes rfRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rfPop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes rfRing { from { opacity: .8; transform: scale(.74); } to { opacity: 0; transform: scale(1.32); } }
@keyframes sakRF { 0% { background-position: 0% 0; } 40% { background-position: 0% 0; animation-timing-function: steps(38, end); } 82.3% { background-position: 100% 0; } 93.3% { background-position: 100% 0; animation-timing-function: steps(19, end); } 100% { background-position: 0% 0; } }
@keyframes g1 { 0%, 36% { background-color: rgba(106,85,232,0); color: #3D2B7A; } 38%, 46% { background-color: #6A55E8; color: #FFFFFF; } 49%, 100% { background-color: rgba(106,85,232,0); color: #3D2B7A; } }
@keyframes g2 { 0%, 46% { background-color: rgba(106,85,232,0); color: #3D2B7A; } 48%, 57% { background-color: #6A55E8; color: #FFFFFF; } 60%, 100% { background-color: rgba(106,85,232,0); color: #3D2B7A; } }
@keyframes g3 { 0%, 57% { background-color: rgba(106,85,232,0); color: #3D2B7A; } 59%, 68% { background-color: #6A55E8; color: #FFFFFF; } 71%, 100% { background-color: rgba(106,85,232,0); color: #3D2B7A; } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(106,85,232,.5); } 16% { box-shadow: 0 0 0 14px rgba(106,85,232,0); } 100% { box-shadow: 0 0 0 0 rgba(106,85,232,0); } }
@keyframes nudge { 0%, 62%, 100% { transform: none; } 80% { transform: translateX(6px); } }
@keyframes ex { 0% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(14, end); } 10% { opacity: 1; clip-path: inset(0 0 0 0); } 30% { opacity: 1; clip-path: inset(0 0 0 0); } 33.3%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }

/* Once on page load */
.play .rise { animation: rfRise .7s cubic-bezier(.2,.7,.2,1) both; }
.play .sakhi { animation: sakRF 7.5s linear both; }
.play .ring { animation: rfRing 1.3s ease-out .2s 2 both; }
.play .ring2 { animation-delay: .65s; }
.play .tw { animation: rfWord .55s cubic-bezier(.2,.7,.2,1) both; }
.play .tw:nth-child(1) { animation-delay: .4s; }
.play .tw:nth-child(2) { animation-delay: .57s; }
.play .tw:nth-child(3) { animation-delay: .74s; }
.play .mk { animation: rfMark .6s cubic-bezier(.4,0,.2,1) 1.9s both; }
.play .q { animation: rfRise .7s cubic-bezier(.2,.7,.2,1) both; }
.play .q1 { animation-delay: 1.3s; }
.play .q2 { animation-delay: 2.3s; }
.play .q3 { animation-delay: 2.7s; }
.play .q8 { animation-delay: .6s; }
.play .q9 { animation-delay: .7s; }      /* the share row, with the notes */
/* (The search box, its hint line and the tool have no entrance animation: usable at once.) */
.play .gh1 { animation: g1 7.5s linear both; }
.play .gh2 { animation: g2 7.5s linear both; }
.play .gh3 { animation: g3 7.5s linear both; }
.play .pt { animation: rfPop .6s cubic-bezier(.2,1.5,.4,1) 5s both, halo 7s ease-out 5.7s infinite; }
.play .arrn { animation: nudge 2.4s ease-in-out 6s infinite; }
.play .ex { animation: ex 9s linear 1.2s infinite; }
.play .ex2 { animation-delay: 4.2s; }
.play .ex3 { animation-delay: 7.2s; }
.play .ex1 { opacity: 0; }

/* The lower section, each time it scrolls into view ("in"); hidden while away ("wait") */
.in .a { animation: rfRise .7s cubic-bezier(.2,.7,.2,1) both; }
.in .d1 { animation-delay: .1s; }
.in .d6 { animation-delay: 2.6s; }
.in .d7 { animation-delay: 3s; }
.in .d8 { animation-delay: 3.15s; }
.in .st { animation: rfStrike .5s cubic-bezier(.4,0,.2,1) 1s both; }
.in .a2 { animation: rfPop .6s cubic-bezier(.2,1.5,.4,1) 1.6s both; }
.in .um { animation: rfMark2 .6s cubic-bezier(.4,0,.2,1) 2.2s both; }
.wait .a, .wait .a2 { opacity: 0; }
.wait .st { background-size: 0 2px; }
.wait .um { background-size: 0 .16em; }

/* Reduced motion requested: nothing moves (rf.js also leaves the page still). */
@media (prefers-reduced-motion: reduce) {
  .rf *, .rf { animation: none !important; }
}