/* ══ shared chrome ═══════════════════════════════════════════════════════
   The nav and the footer appear on all three pages, so they live here and in
   site.js, once. Every page-specific style stays in that page.
   hero.html loads this file too, so the footer cannot drift between the landing
   page and the rest. That drift is how a site ends up telling somebody two
   different things about its own refund policy. It was eight pages until
   8 September 2026; four legal ones were deleted and careers with them. */

/* ══ the one line of reset this file needs ═════════════════════════════════
   The browser's default body margin is 8px, and until 11 September 2026 that was
   showing as a strip of paper down the left and right of the dark .dochead band
   and along the top of it, on all three document pages. hero.html never had the
   problem because it carries its own reset in its page-local stylesheet, and this
   file never had one at all.

   Only the margin. Deliberately not a blanket `*{margin:0;padding:0}`, because
   the document styles below set their own margins and a global reset would also
   strip the default padding-left off every ul, shifting the lists on About and
   the medicine page 40px to the left. That is a layout change rather than a bug
   fix and it is not what he asked for.

   Worth knowing and deliberately left alone: hero.html sets box-sizing:border-box
   and this file does not, so .docbody's 760px max-width is 760px of text plus its
   padding on a document page, and would be 760px including the padding if the two
   were unified. Unifying them narrows the reading column on every document page,
   which is a design decision for her rather than a tidy-up. */
html,body{margin:0}

:root{
  --ink:#2A1810; --accent:#DB7541; --cream:#FBF4EE; --paper:#FFFBF2;
  /* terracotta dark enough to read as text on the light washes. Same value as
     the app's accentInk, so there is one of it and not two that nearly match. */
  --accentInk:#964C28;
  --field:#1B0F09;   /* kept: the nav, the footer and the phone bezel */
  --foot:#110904;
}

/* ══ the brand surface ═════════════════════════════════════════════════════
   Every large surface on this site, and every piece of type that sits on one,
   comes out of this block. Brown, which is the scheme she wants.

   The terracotta version is underneath, commented out. Swapping the two blocks
   is the whole change either way: no rule anywhere else names a surface colour,
   so there is nothing to hunt for and nothing that can be left half done.

   Why the two blocks differ by more than a background. Cream on terracotta is
   3.07:1, which clears the bar for display type and misses it at reading size,
   so on terracotta the headlines have to be cream and the body copy ink. On
   brown, cream clears both, so --brand-lo is cream here and ink there.

   The primary button stays terracotta in both. It is the one part of the
   terracotta work she never objected to, and a solid button should take the most
   contrast available against its own field, which on brown is terracotta.
*/
:root{
  --brand:        #1B0F09;                 /* the surface itself */
  --brand-stage:  radial-gradient(72% 62% at 33% 46%,#3A2317 0%,#1E1109 56%,#140B06 100%);
  --brand-bloom:  rgba(219,117,65,.22);    /* the lit centre behind the phone */
  /* The gradient at the foot of the hero, in .hero::after. It was 0, which turns
     the thing off, and that was survivable while the clip was dark exactly where
     the three-column strip sits. The kitchen clip is not: the marble counter
     shows through and the strip sub-labels measured 3.82:1 against it, under the
     4.5:1 bar for 13.5px text. This is what that gradient is for. */
  --brand-scrim:  rgba(20,11,6,.55);
  --brand-hi:     #FBF4EE;                 /* headlines on the surface */
  --brand-lo:     rgba(251,244,238,.78);   /* body copy on the surface */
  --brand-line:   rgba(251,244,238,.18);   /* hairlines on it */
  --brand-soft:   rgba(251,244,238,.1);    /* quiet fills on it */
  --brand-edge:   rgba(251,244,238,.2);    /* quiet borders on it */
  --brand-mark:   #DB7541;                 /* small accent marks on it */
  --brand-btn:    #DB7541;                 /* the solid button */
  --brand-btn-in: #FFFBF2;
  --brand-btn-hi: #C96736;                 /* its hover */
}

/* terracotta. Swap this block in to go back to it.
:root{
  --brand:        #DB7541;
  --brand-stage:  #DB7541;
  --brand-bloom:  rgba(255,251,242,.18);
  --brand-scrim:  rgba(20,11,6,.74);
  --brand-hi:     #FFFBF2;
  --brand-lo:     #2A1810;
  --brand-line:   rgba(42,24,16,.24);
  --brand-soft:   rgba(42,24,16,.09);
  --brand-edge:   rgba(42,24,16,.3);
  --brand-mark:   #FFFBF2;
  --brand-btn:    #FFFBF2;
  --brand-btn-in: #964C28;
  --brand-btn-hi: #FFFFFF;
}
*/


/* ══ motion ════════════════════════════════════════════════════════════════
   Three durations and three curves for the whole site, next to the palette
   because this file's whole argument is one place per system. Before these there
   were nine durations across four files, three of them within 20ms of each
   other, which is not a system, it is nine separate afternoons.

   Read the note under a token before adding a fourth of anything. A fourth is
   how nine happened the first time.

   --t-tap 140ms. The floor where a state change still reads as a transition
     rather than a jump is around 100ms. 140 is eight frames at 60Hz, which is
     what a mid-range Android will actually give, and it sits inside the window
     a person reads as instant, so it costs nothing in felt speed.
   --t-move 240ms. iOS's default UIView animation is 250ms and Material's medium
     enter is 200 to 250. This file already clustered at .24s for the nav and
     .26s for the hamburger, both checked on a real phone, so adopting 240
     collapses four values into one and changes nothing anybody can see.
   --t-surf 320ms. Justified by velocity rather than by feel, because this one is
     for things that travel. .menupanel crosses a 390px phone: 320ms is 1.22px
     per ms, and an iOS sheet lives between 1.0 and 1.3. It is within 20ms of the
     300 that was already measured on a device, which is the only reason it moved.

   --e-out is easeOutCubic. Fast away, long settle, which is the half a person
     reads as responsiveness. For anything arriving and anything answering a tap.
   --e-move is symmetric, for something that starts at rest off screen and ends at
     rest on screen. Already in this file twice and kept because it was measured.
   --e-fade is linear, and it is the one opinion in the set. Easing an opacity
     cross-fade between two stacked layers puts both under 50% at the midpoint and
     you see the dip. Film dissolves are linear for exactly that reason. A single
     element fading up from nothing is a different job and uses --e-out.

   --stagger 60ms. Under about 40 a stagger stops reading as a sequence and
     becomes a smear; over about 90 the sixth item feels forgotten. */
:root{
  --t-tap:  140ms;
  --t-move: 240ms;
  --t-surf: 320ms;
  --e-out:  cubic-bezier(.22,.61,.36,1);
  --e-move: cubic-bezier(.4,0,.2,1);
  --e-fade: linear;
  --stagger: 60ms;
}

/* Was in hero.html's own style block, so the landing page glided and the three
   document pages jumped on the same footer link.
   It has to sit ABOVE the reduced-motion block, not below it. Both rules are
   html{scroll-behavior}, so they tie on specificity and the later one wins; with
   this underneath, smooth overrode auto and the reduced-motion path silently did
   nothing. Caught by measuring the computed value rather than reading the file. */
html{scroll-behavior:smooth}

/* Five things moved on this site before today and there was no way out of any of
   them, including a four-viewport pinned scroll sequence. This is the way out.

   1ms rather than 0s, deliberately. A transition-duration of 0s never fires
   transitionend, so any JS that waits on that event hangs silently, and it hangs
   only for the people who asked for less motion. 1ms fires. */
@media (prefers-reduced-motion:reduce){
  :root{ --t-tap:1ms; --t-move:1ms; --t-surf:1ms }
  html{scroll-behavior:auto}
}

/* ── nav ──────────────────────────────────────────────────── */
/* Fixed, not absolute inside the hero, so it survives the scroll. It is
   transparent over the dark field at the top of every page and gains a bar once
   you leave it, because cream type on the cream sections would be invisible.
   Every page behaves the same way. It did not until 11 September 2026: a document
   page started solid, on the reasoning that the page under it was paper from the
   first pixel. That stopped being true when .dochead became var(--brand), and a
   solid bar over a near-black header reads as a darker rectangle with a hairline
   under it rather than as chrome. */
.sitenav{position:fixed;inset:0 0 auto 0;z-index:50;height:76px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,3.4vw,48px);
  transition:background var(--t-move) ease,border-color var(--t-move) ease}
.sitenav.solid{background:rgba(17,9,5,.86);backdrop-filter:blur(15px) saturate(1.1);
  border-bottom:1px solid rgba(251,244,238,.11)}
/* Wins over .solid on specificity, so opening the menu does not have to unset
   the scroll state and put it back afterwards. */
.sitenav.solid.menu-open{background:none;backdrop-filter:none;
  border-bottom-color:transparent}
.lockup{display:flex;align-items:center;gap:10px}
.lockup .bfly{height:36px;width:auto;display:block}          /* already white */
/* The nudge is optical, not a fudge. Centring the two boxes puts them within
   0.2px of each other, but the butterfly's ink is not evenly spread: its mass
   sits 2.25px below the middle of its own box, because the lower wing is the
   big one. So the wordmark rides down to meet the butterfly's centre of mass
   rather than the centre of its bounding box. */
.lockup .word{height:24px;width:auto;display:block;transform:translateY(3px);
  filter:brightness(0) invert(1);opacity:.95}                /* ink, reversed */
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{color:rgba(251,244,238,.72);text-decoration:none;font-size:14.5px;
  font-weight:500;cursor:pointer}
.navlinks a:hover{color:var(--cream)}
.navbtn{border:1px solid rgba(251,244,238,.28);border-radius:999px;
  padding:9px 18px;font-size:14.5px;font-weight:600;color:var(--cream);
  text-decoration:none}
.navbtn:hover{background:rgba(251,244,238,.1)}
/* ── the press state ──────────────────────────────────────────
   Every control on this site had a :hover and not one had an :active. The whole
   audience is on a touchscreen, where :hover either never fires or, on Android,
   fires on tap and then sticks until she touches something else. So the only
   feedback a tap got was a navigation that may take 300ms to start, and for
   those 300ms the button looked broken.
   -webkit-tap-highlight-color goes in the SAME rule as the scale and never
   before it. Android's grey flash is ugly, but removing it without replacing it
   makes every control feel dead. One change, not two.
   It survives reduced motion at 1ms and is instant, which is right: a press
   acknowledgement is feedback rather than decoration. */
.navbtn,.menubtn,.docnav a,.menupanel a{-webkit-tap-highlight-color:transparent}
.navbtn{transition:background var(--t-tap) var(--e-out),transform var(--t-tap) var(--e-out)}
.navbtn:active{transform:scale(.97)}
.menubtn:active i{opacity:1}
.docnav a{transition:color var(--t-tap) var(--e-out)}
.menupanel a{transition:opacity var(--t-tap) var(--e-out)}
.menupanel a:active{opacity:.6}

/* ── focus ────────────────────────────────────────────────────
   There was no :focus-visible anywhere in this repository, so every control fell
   back to the UA ring, which over the near-black brown of .faqbtn, .menubtn and
   the app index is a thin blue box that is close to invisible. One rule, four
   pages. Not a motion fix; it was sitting next to the motion work. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.menupanel a:focus-visible,.docnav a:focus-visible{outline-offset:3px}

/* ── the phone menu ───────────────────────────────────────────
   Hidden above 860px, where the five text links are in the bar instead. Both
   are rendered from the one NAVLINKS list in site.js.

   The panel is var(--brand), the same near-black brown as the bar's own solid
   state and as .dochead, so it reads as more chrome rather than as a new
   surface. Not a literal hex: the whole point of the --brand block at the top
   of this file is that swapping the palette carries every surface with it, and
   a hardcoded colour here is exactly the rule that would get left behind. */
.menubtn{display:none;width:44px;height:44px;   /* 44 is Apple's HIG minimum */
  margin-right:-9px;                            /* so the bars, not the box, line up with the edge */
  align-items:center;justify-content:center;flex-direction:column;
  background:none;border:0;padding:0;cursor:pointer;color:var(--cream)}
.menubtn i{display:block;width:21px;height:1.6px;border-radius:2px;
  background:currentColor;opacity:.88;
  /* Both on --t-move. They were .26s and .16s, so for 100ms you saw two crossed
     bars and a gap where the third had been: one gesture read as two. */
  transition:transform var(--t-move) var(--e-move),opacity var(--t-move) ease}
.menubtn i + i{margin-top:5px}   /* 6.6px between bar centres, which is the travel below */
.menubtn[aria-expanded="true"] i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.menubtn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menubtn[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* z-index 49, one under the bar, so the wordmark and the button that closes it
   stay on top of the panel they opened. visibility rather than display, so the
   slide has something to animate and the links stay out of the tab order while
   it is shut. */
.menupanel{display:none;position:fixed;inset:0;z-index:49;
  background:var(--brand);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  padding:76px 26px 40px;overflow:auto;
  visibility:hidden;transform:translateX(100%);
  transition:transform var(--t-surf) var(--e-move),visibility var(--t-surf);
  /* The one place on the site worth promoting. A full-viewport surface with a
     real transform travel, and the layer has to exist before the transition
     starts or it buys nothing. Roughly 1.3MB held for the session on a 390x844
     phone, which is a fair price for the largest single movement here. Do not
     copy this onto .btn or .reason: 21 permanently promoted layers for elements
     that animate once is the textbook will-change leak. */
  will-change:transform}
.menupanel.on{visibility:visible;transform:none}
.menupanel-in{display:flex;flex-direction:column;
  min-height:100%;justify-content:center}
.menupanel a{display:block;padding:16px 0;font-size:25px;font-weight:600;
  letter-spacing:-.022em;color:var(--brand-hi);text-decoration:none;
  border-bottom:1px solid rgba(251,244,238,.11)}
/* :last-of-type among the direct children, not :last-child among every a in the
   panel. Questions is the last link in the primary group but not the last node
   in the panel, so :last-child left its rule in place and .menu-more added its
   own 34px below it: two hairlines where the design has one. */
.menupanel-in > a:last-of-type{border-bottom:0}
/* About and Contact are the quiet half of the panel, so they are the footer's
   size and the footer's ink rather than a second set of headlines. */
.menu-more{margin-top:26px;padding-top:8px;border-top:1px solid rgba(251,244,238,.11)}
.menu-more a{font-size:16.5px;font-weight:500;padding:13px 0;
  color:rgba(251,244,238,.7);border-bottom:0}

/* ── site footer ───────────────────────────────────────────── */
/* This is where India's required disclosures belong: the e-commerce rules want
   a legal name, address and grievance officer; the DPDP Act wants a contact for
   data questions; the Telemedicine Practice Guidelines want each doctor's
   registration published. Razorpay will not onboard without live terms,
   privacy, refund and contact pages either.
   Most of that is not here at the moment. The .legal block that carried the
   three disclaimers was cut on 8 September 2026 at her instruction, along with
   two of the markers, and all of it is on the launch list in README.md. What
   is still marked is a dashed marker, never a plausible guess. */
.sitefoot{background:var(--foot);color:var(--cream);
  padding:80px clamp(20px,3.4vw,48px) 34px;
  font-family:'Hanken Grotesk',system-ui,sans-serif}
.sitefoot-in{max-width:1180px;margin:0 auto}

.foot-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,2fr);
  gap:clamp(30px,5vw,72px)}
.foot-brand .lockup{margin-bottom:16px}
.foot-brand p{font-size:16px;line-height:1.55;max-width:30ch;
  color:rgba(251,244,238,.6)}

.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:26px}
/* ══ a note on the opacities below ═════════════════════════════════════════
   Several of these were bumped on 8 September 2026, in the last review pass
   before the push. Everything on these pages was measured with the text colour
   composited over whatever is actually painted behind it, rather than by reading
   the hex out of the file, and a set of quiet labels turned out to be sitting
   between 3.2 and 4.1 against their own paper. Small-caps and bold do not buy any
   allowance: bold only counts as large type at 18.66px, so a 12px uppercase
   heading is held to 4.5:1 like any sentence.
   They still read as quiet. That is the point of the change: quiet is the weight,
   the size and the letter-spacing, not fading the ink until it is nearly gone. */
.foot-cols h5{font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:rgba(251,244,238,.55);margin-bottom:15px}
.foot-cols a{display:block;padding:6px 0;font-size:15.5px;text-decoration:none;
  color:rgba(251,244,238,.75);cursor:pointer}
.foot-cols a:hover{color:var(--cream)}
.foot-cols a.here{color:var(--cream);font-weight:600}

.foot-bar{margin-top:56px;padding-top:20px;
  border-top:1px solid rgba(251,244,238,.1);
  display:flex;gap:12px 26px;flex-wrap:wrap;align-items:center;
  font-size:13px;color:rgba(251,244,238,.54)}
.foot-bar .pend{border:1px dashed rgba(251,244,238,.3);border-radius:7px;
  padding:4px 9px;font-weight:600;color:rgba(251,244,238,.5)}

/* ══ touch sizes ═══════════════════════════════════════════════════════════
   Everything in the block below that changes a padding is buying a 44px target,
   and every number in it was measured rather than guessed. Apple's HIG asks for
   44x44, Google's for 48x48, and WCAG 2.5.8 for 24x24 as the AA floor. Measured
   at 390px before this change: the wordmark 116x30, Sign in 74x37, a footer link
   397x33, and the Read more toggle on the doctor card 111x24, which is the only
   one of the four that was also failing the AA floor.
   Nothing here moves anything on the page. The visible sizes are untouched; the
   boxes around them grew. */
@media (max-width:860px){
  .sitenav{height:64px}
  .lockup{min-height:44px}                 /* the marks stay 30px and 20px */
  .lockup .bfly{height:30px}
  .lockup .word{height:20px;transform:translateY(2.5px)}   /* same nudge, to scale */
  /* The five text links are in .menupanel below this width, from the same list. */
  .navlinks a:not(.navbtn){display:none}
  .navlinks{gap:7px}                       /* two children left, not six */
  .navbtn{padding:13px 16px;font-size:13.5px}   /* 16 + 26 + 2 of border = 44 */
  .menubtn{display:flex}
  .menupanel{display:block}

  .sitefoot{padding:56px 22px 28px}
  .foot-top{grid-template-columns:1fr;gap:34px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .foot-cols a{padding:11.5px 0}           /* 21 of line box + 23 = 44 */
  .foot-bar{margin-top:38px}
}

/* ══ where terracotta is allowed ═══════════════════════════════════════════
   It had eight jobs on this site and no rule, which is how it ended up looking
   sprinkled. It has three now, taken from the app, whose whole colour rule is
   one line in AGENTS.md: chrome stays quiet, colour lives in data and actions.

   Terracotta --accent marks exactly three things:
     1. Something she can act on.  the solid button, Read more, the + on it
     2. Her own data.              the chart line, the progress bar in a mockup
     3. Where she is.              the open step, the open question, a step number

   --accentInk is the same colour dark enough to be read as text on the light
   washes. It is for the first job only: links, and the label on a control.

   Everything else is ink at an opacity. Eyebrow dots, bullet points, small-caps
   section labels, callout rules, ticks in a list, the rules between rows. All of
   it is structure rather than meaning, and structure stays quiet. A tick beside
   an inclusion is not her data and not an action; it is a bullet with a nicer
   shape, so it is ink.

   The dashed markers are their own thing and deliberately not on brand. They say
   nobody has finished this yet, and they should look like a hole in the page
   rather than a design decision. Ink, dashed, never terracotta.
*/

/* ══ document pages ══════════════════════════════════════════════════════
   Everything below styles the seven prose pages. The landing page does not
   use any of it. */

body.doc{background:var(--paper);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.doc .serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-weight:400}

/* Terracotta, so the brand colour is on every page rather than only the
   landing one. Ink is the default here and the h1 overrides to cream: cream on
   terracotta is 3.1:1, fine for a 62px headline and not fine for anything at
   reading size, so anything added below inherits the readable one. */
.dochead{background:var(--brand);color:var(--brand-lo);
  padding:150px clamp(20px,3.4vw,48px) 74px}
.dochead-in{max-width:760px;margin:0 auto}
.dochead .eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-lo);margin-bottom:22px}
/* the dot was terracotta, which on a terracotta band is nothing at all */
.dochead .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--brand-lo);
  flex:0 0 auto}
.dochead h1{font-size:clamp(38px,5.4vw,62px);line-height:1.03;font-weight:700;
  letter-spacing:-.032em;color:var(--brand-hi)}
.dochead h1 .serif{font-size:1.06em;letter-spacing:-.01em}
.dochead .sub{margin-top:22px;font-size:18.5px;line-height:1.55;
  color:var(--brand-lo);max-width:46ch}
/* No opacity on this one. At 13px, fading ink over terracotta composites to
   4.0:1, which is under the bar, so it is separated by size and weight. */
.dochead .stamp{margin-top:26px;font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--brand-lo)}

/* The wrapper stays 760px so a list or a callout can use the full width. The
   MEASURE is set on the text itself, at 34em, which at 17.5px is about 68
   characters. Setting it on the wrapper instead would narrow everything, including
   the things that are better wide. */
.docbody{max-width:760px;margin:0 auto;padding:66px clamp(20px,3.4vw,48px) 96px}
.docbody p,.docbody li,.docbody h2,.docbody h3{max-width:34em}

/* A draft notice, on the pages that make promises a lawyer has to sign off.
   Deliberately ugly for the same reason the dashed markers are: it should be
   impossible to publish this by accident.
   Nothing uses it today. The four pages that did were deleted on 8 September
   2026 and are coming back for Razorpay onboarding, and re-inventing this notice
   is exactly how one of them ships without it. */
.draft{border:1px dashed rgba(42,24,16,.45);border-radius:12px;
  background:rgba(42,24,16,.04);padding:16px 18px;margin-bottom:48px}
.draft b{display:block;font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(42,24,16,.72);margin-bottom:6px}
.draft p{font-size:15px;line-height:1.55;color:rgba(42,24,16,.78)}

/* ══ the type on these pages, rebuilt 19 September 2026 ════════════════════
   The medicine page was called unreadable, and measuring it said why rather than
   leaving it to taste. Four faults, and the first is the one that made it feel
   wrong:

   1. h2 WAS 15px UPPERCASE AND THE BODY IS 17.5px. Section headings were smaller
      than the paragraphs under them, which inverts the one signal a reader uses to
      find their place in a long page. Upwork, Better Stack, Skillshare and Dollar
      Shave Club all set an explainer's headings visibly larger than its body; not
      one of them sets them smaller.
   2. Eleven distinct font sizes on one page: 12.5, 13, 14, 15, 15.5, 17.5, 18.5,
      19, 20, 62 and 65.7. Six now.
   3. Five ink opacities in the body: .64, .68, .70, .82 and 1. Three now, and each
      one has a job: text, a heading, small print.
   4. A 737px measure at 17.5px, which is about 95 characters a line. Comfortable
      reading is 60 to 75. It is 34em now, about 68 characters.

   The uppercase tracked label is a good style and it has a place: it is what the
   eyebrow above the page title is. It is not what a section heading is. */
.docbody h2{scroll-margin-top:96px;font-size:27px;line-height:1.2;font-weight:700;letter-spacing:-.022em;
  color:var(--ink);margin:52px 0 12px}
.docbody h2:first-of-type{margin-top:0}
.docbody h3{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.014em;
  color:var(--ink);margin:30px 0 8px}
.docbody h2 + h3{margin-top:0}
/* One body ink, .82, and one line height. The old page had paragraphs at .82 and
   list items at .82 but bullets at .3, small print at .64, markers at .68 and the
   sources block at .64, which is what made it read as muddy rather than quiet. */
.docbody p{font-size:17.5px;line-height:1.7;color:rgba(42,24,16,.82);
  margin-bottom:17px}
.docbody p.lede{font-size:20px;line-height:1.6;color:var(--ink);margin-bottom:26px}
.docbody ul{list-style:none;margin:0 0 18px}
.docbody li{position:relative;font-size:17.5px;line-height:1.7;
  color:rgba(42,24,16,.82);padding-left:22px;margin-bottom:11px}
.docbody li::before{content:'';position:absolute;left:2px;top:11px;
  width:7px;height:7px;border-radius:50%;background:rgba(42,24,16,.3)}
.docbody li b{font-weight:700;color:var(--ink)}
.docbody a{color:var(--accentInk);text-decoration:underline;text-underline-offset:3px}
.docbody strong{font-weight:700;color:var(--ink)}

/* An inline marker for a fact nobody has given me yet. Same job as the dashed
   markers in the footer: visible, and clearly not content. */
.docbody .pend{display:inline-block;border:1px dashed rgba(42,24,16,.34);
  border-radius:7px;padding:2px 9px;font-size:13px;font-weight:700;
  color:rgba(42,24,16,.64);background:rgba(42,24,16,.03)}
.docbody .pendblock{display:block;margin:0 0 15px}

/* ── in this article ─────────────────────────────────────────
   Upwork and Better Stack both put a contents list in the left rail and Skillshare
   puts one inline under the lede. Inline is the version that works here, because
   these pages are one column and a rail would mean a second layout to maintain.
   A page with seven sections gets scanned before it gets read, and until now there
   was no way to scan it. */
.toc{margin:0 0 38px;padding:20px 22px;border:1px solid rgba(42,24,16,.14);
  border-radius:14px;background:rgba(42,24,16,.02);max-width:34em}
.toc b{display:block;font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:rgba(42,24,16,.64);margin-bottom:11px}
.toc ol{list-style:none;margin:0;counter-reset:toc}
.toc li{counter-increment:toc;padding:5px 0;font-size:16.5px;line-height:1.45;
  max-width:none}
.toc li::before{content:counter(toc,decimal-leading-zero);position:static;
  display:inline-block;width:auto;height:auto;border-radius:0;background:none;
  margin-right:11px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:rgba(42,24,16,.5)}
.toc a{color:var(--ink);text-decoration:none;font-weight:600}
.toc a:hover{color:var(--accentInk);text-decoration:underline;text-underline-offset:3px}

/* A quiet card, for the numbered escalation steps and the plain fact rows. */
.card{border:1px solid rgba(42,24,16,.12);border-radius:14px;
  background:var(--cream);padding:22px 24px;margin-bottom:14px}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.card .step{display:inline-block;font-size:12.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(42,24,16,.5);
  margin-bottom:9px}

/* The one thing on these pages that has to be readable at a glance. */
.callout{border-left:3px solid rgba(42,24,16,.34);padding:4px 0 4px 20px;margin:26px 0}
.callout p{font-size:20px;line-height:1.6;color:var(--ink);margin-bottom:0;
  font-weight:500;max-width:32em}

.docnav{margin-top:70px;padding-top:26px;border-top:1px solid rgba(42,24,16,.14);
  display:flex;gap:10px 22px;flex-wrap:wrap;font-size:15.5px}
.docnav a{color:rgba(42,24,16,.7);text-decoration:none;font-weight:500}
.docnav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media (max-width:860px){
  .dochead{padding:112px 22px 54px}
  .dochead .sub{font-size:16.5px}
  .docbody{padding:44px 22px 68px}
  .docbody p,.docbody li{font-size:16.5px}
  .docbody p.lede{font-size:18.5px}
  /* h2 stays clearly above the body at every width. 23 against 16.5. */
  .docbody h2{font-size:23px;margin:42px 0 10px}
  .docbody h3{font-size:18.5px}
  .toc{padding:17px 18px;margin-bottom:30px}
  .callout p{font-size:17.5px}
  /* 21px tall measured, and these are navigation rather than links inside a
     sentence, so the 44px floor applies to them. The row gap goes to 0 because
     the padding is now doing that job; keeping both would put 32px between two
     rows of links. */
  .docnav{gap:0 22px}
  .docnav a{padding:11.5px 0}
}