/* The guides. Same tokens as the rest of the site, their own shapes.
   A guide is read top to bottom, so it is built as one column with a rail
   beside it, not as a stack of marketing bands. */

.gprog { position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 70;
         background: var(--leaf2); transform: scaleX(0); transform-origin: left; }

/* the opening. Title on the left, the answer in a card on the right, because
   the answer is what the reader came for and what Google lifts. */
.ghero { padding-block: clamp(96px,9vw,128px) clamp(28px,4vw,44px); position: relative; isolation: isolate; }
.ghero::before { content: ""; position: absolute; inset: 0 0 auto; height: 100%; z-index: -1;
  background: radial-gradient(58% 70% at 84% 0%, color-mix(in oklch,var(--leaf2) 11%,transparent), transparent 68%),
              radial-gradient(50% 60% at 4% 6%, color-mix(in oklch,var(--sun) 12%,transparent), transparent 62%),
              linear-gradient(180deg, var(--soft), var(--paper) 86%); }
.ghero .wrap { display: grid; grid-template-columns: 1.25fr .95fr; gap: clamp(26px,3.6vw,54px); align-items: start; }
.ghero h1 { margin-top: 14px; max-width: 17ch; }
.ghero .lead { margin-top: 14px; }

.gmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 20px;
         font-size: 13px; color: var(--mut); }
.gmeta b { color: var(--ink); font-weight: 600; }
.gmeta span { display: inline-flex; align-items: center; gap: 6px; }
.gmeta svg { width: 15px; height: 15px; fill: none; stroke: currentcolor; stroke-width: 1.7;
             stroke-linecap: round; stroke-linejoin: round; }

/* the short answer */
.gans { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
        padding: 22px 24px; box-shadow: var(--sh-1); position: relative; overflow: hidden; }
.gans::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px;
                background: linear-gradient(var(--leaf2), var(--sun)); }
.gans h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); font-weight: 600; }
.gans p { margin-top: 10px; font-size: 17px; color: var(--ink); font-weight: 500; line-height: 1.5; }
.gans ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.gans li { position: relative; padding-inline-start: 28px; font-size: 14.5px; }
.gans li::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--tint); box-shadow: inset 0 0 0 1.5px color-mix(in oklch,var(--leaf2) 45%,transparent); }

/* body and rail */
.gbody { padding-block: clamp(30px,4vw,56px) 0; }
.gbody .wrap { display: grid; grid-template-columns: minmax(0,1fr) 232px; gap: clamp(30px,4vw,64px); align-items: start; }
.gart { max-width: 72ch; }
/* The same Inter the rest of the site is set in, pushed to the heaviest cut
   and tracked in tighter, which is what reads as expensive. Nothing new is
   loaded. [2026-10-07, malik: "font ko premium karo, heading ka font weight
   accha karo"] */
.gart h2 { margin-top: clamp(44px,5vw,66px); scroll-margin-top: 104px;
           font-weight: 800; letter-spacing: -.034em; font-size: clamp(25px,2.7vw,33px); }
.gart h3 { font-weight: 750; letter-spacing: -.02em; font-size: 20px; }
.ghero h1, .ghub h1 { letter-spacing: -.038em; font-weight: 800; }
.gart { font-size: 17px; line-height: 1.72; }
.gart p + p { margin-top: 15px; }
.gart h2:first-child { margin-top: 0; }
.gart h3 { margin-top: 28px; }
.gart p { margin-top: 14px; text-align: justify; text-justify: inter-word; hyphens: auto; }
/* The opening line and the quoted line are not set justified. A short block
   set justified opens rivers of white down the middle of it. */
.gart .gpull, .gfaq p { text-align: left; hyphens: none; }
/* The marker sits outside the text, not beside it in a grid column. A grid was
   written here first and it broke every list that had a bold word in it: the
   bold run and the sentence after it became two separate grid items, so half
   the sentence was squeezed into a twenty six pixel column, one word per line.
   [2026-10-07, malik: "image sahi nahi dikh raha"] */
.gart ul, .gart ol { margin: 16px 0 0 0; padding-inline-start: 0; list-style: none; display: grid; gap: 11px; }
.gart li { position: relative; padding-inline-start: 32px; }
.gart ul li::before { content: ""; position: absolute; inset-inline-start: 7px; top: 9px;
                      width: 7px; height: 7px; border-radius: 50%; background: var(--leaf2); }
.gart ol { counter-reset: s; }
.gart ol li { counter-increment: s; }
.gart ol li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 3px;
  font: 700 12px/20px Inter, sans-serif; color: var(--leaf);
  width: 20px; height: 20px; border-radius: 50%; text-align: center;
  background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in oklch,var(--leaf2) 30%,transparent); }
.gart strong { color: var(--ink); font-weight: 650; }
/* A link inside the article is green. A button is not a link that happens to
   be green: it already carries its own colours in --bg and --fg, and this rule
   is more specific than .btn, so it painted the label of every button in the
   article the same green as the button behind it. The text was there and
   nobody could read it.
   One button everywhere on the site: .btn, with .lg, .ghost or .sun on top.
   Never a new class, never a hand coloured one.
   [2026-10-07, malik: "button ka text nahi dikh raha, same class sare article
    mein use ho button ke liye"] */
.gart a:not(.btn) { color: var(--leaf); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gart a.btn { color: var(--fg); text-decoration: none; }

/* a picture of the thing itself */
.gshot { margin-top: 24px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
         background: var(--soft); box-shadow: var(--sh-1); }
.gshot img { width: 100%; }
.gshot figcaption { padding: 11px 15px; font-size: 13px; color: var(--mut); border-top: 1px solid var(--line);
                    background: var(--paper); }

/* the buttons in the middle of an article get their own line */
.gart .acts { margin-top: 26px; }

/* a line worth stopping on */
.gpull { margin-top: 26px; padding: 20px 22px; border-radius: 14px; background: var(--soft);
         border: 1px solid var(--line); font-size: 17.5px; font-weight: 600; color: var(--ink);
         line-height: 1.45; letter-spacing: -.015em; }
.gpull em { font-style: normal; color: var(--leaf); }

/* real numbers off the shop */
.gnums { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr));
         gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.gnums div { background: var(--paper); padding: 16px 14px; }
.gnums b { display: block; font: 800 24px/1 Inter, sans-serif; color: var(--ink); letter-spacing: -.03em;
           font-variant-numeric: tabular-nums; }
.gnums span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--mut); line-height: 1.35; }

/* the rail */
.grail { position: sticky; top: 104px; display: grid; gap: 18px; }
.grailcta .btn { margin-top: 13px; width: 100%; }
/* ── the trail ───────────────────────────────────────────────────────────── */
.gcrumb { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.gcrumb a, .gcrumb span { font: 600 12px/1 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.gcrumb a { color: var(--mut); text-decoration: none; padding: 9px 13px; border-radius: 99px;
            border: 1px solid color-mix(in oklch,var(--line) 85%,transparent);
            background: color-mix(in oklch,var(--paper) 62%,transparent);
            backdrop-filter: blur(10px) saturate(1.3);
            transition: color .18s, border-color .18s, box-shadow .18s, transform .18s; }
.gcrumb a:hover { color: var(--ink); border-color: color-mix(in oklch,var(--leaf2) 38%,transparent);
                  box-shadow: 0 4px 14px color-mix(in oklch,var(--leaf2) 14%,transparent); transform: translateY(-1px); }
.gcrumb span { color: var(--leaf); padding: 9px 14px; border-radius: 99px;
               background: linear-gradient(135deg, color-mix(in oklch,var(--leaf2) 15%,white),
                                                   color-mix(in oklch,var(--sun) 16%,white));
               box-shadow: inset 0 0 0 1px color-mix(in oklch,var(--leaf2) 26%,transparent); }
.gcrumb i { width: 5px; height: 5px; border-top: 1.4px solid var(--mut); border-right: 1.4px solid var(--mut);
            rotate: 45deg; opacity: .5; }

/* ── the rail ────────────────────────────────────────────────────────────── */
.gtoc { position: relative; border: 0; padding-inline-start: 26px; gap: 0; }
.gtoc b { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--mut);
          font-weight: 700; padding-bottom: 14px; }
.gtocline { position: absolute; inset-block: 30px 6px; inset-inline-start: 9px; width: 2px;
            border-radius: 2px; background: var(--line); overflow: hidden; }
.gtocline i { display: block; width: 100%; height: 0;
              background: linear-gradient(var(--leaf2), var(--leaf)); border-radius: 2px;
              transition: height .35s cubic-bezier(.2,.9,.3,1); }
.gtoc a { position: relative; display: block;
          padding: 9px 0; font-size: 13.5px; line-height: 1.35; color: var(--body);
          text-decoration: none; transition: color .18s, translate .18s; }
.gtoc a em { position: absolute; inset-inline-start: -26px; top: 8px;
             width: 19px; height: 19px; border-radius: 50%; font: 700 10.5px/19px Inter, sans-serif;
             font-style: normal; text-align: center; color: var(--mut);
             background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line);
             transition: color .2s, background .2s, box-shadow .2s, scale .2s; }
.gtoc a:hover { color: var(--ink); translate: 2px 0; }
.gtoc a.on { color: var(--ink); font-weight: 600; }
.gtoc a.on em { color: white; background: var(--leaf); box-shadow: 0 0 0 4px color-mix(in oklch,var(--leaf2) 15%,transparent); scale: 1.08; }

.grailcta { border: 1px solid var(--line); border-radius: 16px; padding: 18px; position: relative; overflow: hidden;
            background: linear-gradient(170deg, color-mix(in oklch,var(--leaf2) 7%,white), var(--paper) 62%);
            box-shadow: var(--sh-1); }
.grailcta .gshop { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
                   background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 11px; }
.grailcta .gshop svg { width: 19px; height: 19px; fill: none; stroke: var(--leaf);
                       stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.grailcta b { display: block; font: 700 14.5px/1.3 Inter, sans-serif; color: var(--ink); letter-spacing: -.02em; }
.grailcta p { margin-top: 6px; font-size: 13px; color: var(--body); line-height: 1.45; }


/* questions */
.gfaq { margin-top: clamp(44px,5vw,66px); }
.gfaq details { border-block-end: 1px solid var(--line); }
.gfaq details:first-of-type { border-block-start: 1px solid var(--line); }
.gfaq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
                font: 650 16.5px/1.4 Inter, sans-serif; color: var(--ink); letter-spacing: -.015em; }
.gfaq summary::-webkit-details-marker { display: none; }
.gfaq summary::after { content: ""; position: absolute; inset-inline-end: 6px; top: 25px; width: 11px; height: 11px;
  border-right: 1.8px solid var(--mut); border-bottom: 1.8px solid var(--mut); rotate: 45deg;
  transition: rotate .22s, border-color .22s; }
.gfaq details[open] summary::after { rotate: -135deg; border-color: var(--leaf); }
.gfaq details p { padding-block: 0 18px; margin: 0; max-width: 68ch; }

/* where to go next */
.gnext { padding-block: clamp(50px,6vw,78px); }
.gnext .cards { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit,minmax(248px,1fr)); gap: 14px; }
.gnext a { display: block; padding: 20px; border-radius: 15px; border: 1px solid var(--line);
           background: var(--paper); text-decoration: none; transition: transform .16s, box-shadow .16s, border-color .16s; }
.gnext a:hover { transform: translateY(-2px); box-shadow: var(--sh-1); border-color: color-mix(in oklch,var(--leaf2) 35%,transparent); }
.gnext b { display: block; color: var(--ink); font: 700 16.5px/1.3 Inter, sans-serif; letter-spacing: -.02em; }
.gnext span { display: block; margin-top: 7px; font-size: 13.5px; color: var(--mut); line-height: 1.45; }
.gnext i { display: block; margin-top: 12px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--leaf); }

/* the band at the end */
.gcta { background: var(--soft); border-block: 1px solid var(--line); padding-block: clamp(46px,5vw,70px); }
.gcta .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.gcta h2 { max-width: 20ch; }
.gcta p { margin-top: 10px; color: var(--body); max-width: 54ch; }

/* the hub */
.ghub { padding-block: clamp(96px,9vw,120px) clamp(40px,5vw,60px); }
.ghublist { padding-bottom: clamp(50px,6vw,80px); display: grid; gap: 34px; }
.ghubgrp b.ghubh { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
                   color: var(--mut); font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ghubgrp .rows { display: grid; }
.ghubgrp a { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
             padding: 18px 2px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .18s; }
.ghubgrp a:hover { padding-inline: 10px 2px; background: linear-gradient(90deg,var(--soft),transparent 60%); }
.ghubgrp a strong { display: block; color: var(--ink); font: 700 18px/1.3 Inter, sans-serif; letter-spacing: -.022em; }
.ghubgrp a span { display: block; margin-top: 6px; font-size: 14px; color: var(--mut); line-height: 1.45; max-width: 70ch; }
.ghubgrp a em { font-style: normal; font-size: 13px; color: var(--leaf); font-weight: 600; white-space: nowrap; }

@media (max-width: 980px) {
  .ghero .wrap { grid-template-columns: 1fr; }
  .gbody .wrap { grid-template-columns: 1fr; }
  .grail { position: static; order: -1; }
  /* On a phone the list of headings is a row of things to press, not a margin
     note, so each line is tall enough for a thumb. [2026-10-07] */
  .gtoc { border: 1px solid var(--line); border-radius: 16px; padding: 10px 16px 10px 40px; background: var(--paper); }
  .gtoc b { padding-block: 8px 4px; }
  .gtocline { inset-block: 34px 10px; inset-inline-start: 23px; }
  .gtoc a { padding-block: 10px; border-block-end: 1px solid color-mix(in oklch,var(--line) 55%,transparent); }
  .gtoc a:last-child { border-block-end: 0; }
  .gcrumb { margin-bottom: 14px; }
  .grailcta { display: none; }
  .gcta .wrap { grid-template-columns: 1fr; }
}

/* A phone screenshot is taller than it is wide. Stretched across the column it
   is a wall of blur, so it keeps a phone's width and sits in the middle.
   [2026-10-07] */
.gshot img { height: auto; }
.gshot.tall { max-width: 300px; margin-inline: auto; border-radius: 20px; }
.gshot.tall figcaption { text-align: center; }