/* docs.css: privacy, terms and help. Loads after base.css. */

.rhub .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
/* ================= legal doc views ================= */
.docview{background:var(--sheet);min-height:100vh}
.docwrap{max-width:760px;margin:0 auto;padding:52px 26px 90px}
/* Type below is sure-shared.css's scale: .eyebrow, .h1 for the title, .h3 for
   the section heads (a legal page runs a dozen of them, and the shared .h2 at
   32px would shout over the prose), and 16px/1.55 body. */
/* Help: the column sits on the same left edge as the navbar pill and footer
   (the shared 966px container) instead of centring at 760px. The prose keeps
   its 760px measure. */
.docwrap--flush{width:min(966px,100% - var(--nav-gutter)*2);max-width:none;margin-inline:auto;padding-inline:0}
.docwrap--flush > *{max-width:760px}
.docwrap .eyebrow{font-size:12px;font-weight:600;line-height:1.25;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.docwrap h1{font-size:clamp(32px,2.2vw + 18px,48px);line-height:1.084;letter-spacing:-.01em;margin:0 0 .3em}
.docwrap .docmeta{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.docwrap h2{font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:1.7em 0 .45em}
.docwrap p,.docwrap li{font-size:16px;color:var(--ink-soft);line-height:1.55}
.docwrap ul{padding-left:20px;margin:0 0 1em}
.docwrap a{color:var(--accent)}
.docwrap .asklink{background:none;border:none;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}


/* ================= type =================
   base.css was built on Fraunces at 16.5px/1.62; the rest of the site runs
   Besley over Inter at 16px/1.55 (sure-shared.css). Restated here so these two
   pages set type the same way every other page does. */
:root{
  --doc-serif:'Besley',Georgia,'Times New Roman',serif;
  --doc-sans:Inter,-apple-system,'Segoe UI',Arial,sans-serif;
}
body{font-family:var(--doc-sans);font-size:16px;line-height:1.55;letter-spacing:normal}
h1,h2,h3,h4{font-family:var(--doc-serif);font-weight:600;letter-spacing:-.02em}
h3,h4{font-weight:700}

/* ================= site navbar =================
   Privacy and Terms load base.css, whose header is the older warm-light bar.
   The rules below replace it with the navbar every other page renders: the
   floating pill (see index.html / pricing.html) sitting on the shared nav
   base from sure-shared.css. Both are inlined here rather than linking
   sure-shared.css, which would redefine --ink, --line, --surface, .wrap and
   .btn out from under base.css. */
:root{
  --nav-pill:56px;                                       /* pill height        */
  --nav-top:12px;                                        /* offset from top    */
  --nav-h:calc(var(--nav-top) + var(--nav-pill) + 12px); /* chrome clearance   */
  --nav-gutter:clamp(20px,5vw,200px);
  --nav-dark:#161617;
  --nav-warm-white:#fffdf7;
  --nav-gold:#ffdd78;
  --nav-ease:cubic-bezier(.4,0,.6,1);
}
/* The fixed strip is transparent and lets clicks through; .nav__inner is the
   pill itself: translucent warm white, blurred, hovering over the page. */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:auto;display:block;
  background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:var(--nav-top) clamp(12px,3vw,22px) 0;pointer-events:none;
  /* The nav inherits its type from the page, so restate sure-shared.css's body
     type here or the links and CTA render a hair off from every other page.
     These are the interior-page values (pricing, teachers, who-its-for, pilot,
     report); index.html alone runs a tighter 17px/1.47 scale. */
  font-family:var(--doc-sans);font-size:16px;line-height:1.55;letter-spacing:normal}
/* common.js toggles .stuck on scroll; the pill has no scrolled state. */
header.nav.stuck{background:transparent;border-bottom-color:transparent}
/* base.css's .wrap is a 1120px padded container; the nav wants the shared one. */
header.nav .wrap{max-width:none;width:min(966px,100% - var(--nav-gutter)*2);margin-inline:auto;padding:0}
header.nav .nav__inner{pointer-events:auto;position:relative;display:flex;align-items:center;
  justify-content:space-between;gap:36px;height:var(--nav-pill);padding:0 12px 0 24px;
  background:rgba(255,252,244,.86);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(29,29,31,.08);border-radius:980px;
  box-shadow:0 16px 40px rgba(22,22,23,.10),0 2px 8px rgba(22,22,23,.05)}
.nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.nav .logo-mark{height:22px;width:auto;display:block;flex:none}
.nav .logo-mark path{fill:var(--nav-dark)}
/* Links cluster on the right, flush against the CTA; the brand holds the left edge. */
.nav__links{display:flex;align-items:center;gap:32px;margin-left:auto}
.nav__links a{position:relative;font-size:14px;font-weight:500;text-decoration:none;
  white-space:nowrap;color:rgba(29,29,31,.72);transition:color .3s var(--nav-ease)}
.nav__links a:hover,.nav__links a.is-active{color:#1d1d1f}
/* Hover underline: a 1px rule that grows out from the left, in the link's colour. */
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;
  border-radius:1px;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
.nav__cta{display:flex;align-items:center;gap:24px;flex:none}
.nav .btn{height:32px;padding:0 16px;border-radius:980px;font-size:13px;font-weight:500;line-height:1;
  gap:8px;border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease}
.nav .btn--gold{background:var(--nav-gold);color:var(--nav-dark)}
.nav .btn--gold:hover{background:color-mix(in srgb,var(--nav-gold) 88%,#000)}
.nav .btn:focus-visible{outline:2px solid var(--nav-gold);outline-offset:2px}
/* Mobile menu: checkbox-driven, no JS. The checkbox sits between .nav__brand
   and .nav__links so the sibling combinators below can reach the links. */
.nav__toggle{position:absolute;opacity:0;pointer-events:none}
.nav__burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;cursor:pointer;flex:none}
.nav__burger span{display:block;width:20px;height:2px;background:#1d1d1f;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
/* Very narrow phones (≤360px): tighten the pill so logo, CTA and burger fit. */
@media(max-width:360px){
  .nav .nav__inner{gap:10px;padding:0 8px 0 16px}
  .nav .logo-mark{height:19px}
  .nav .nav__cta{gap:12px}
  .nav .nav__cta .btn{padding:0 12px;font-size:12px}
  .nav .nav__burger{width:30px}
}
@media(max-width:900px){
  header.nav .nav__inner{gap:16px}
  /* backdrop-filter would make the pill the containing block for fixed
     descendants and trap the overlay menu inside it, so drop the blur here
     and lean on a near-opaque fill instead. */
  header.nav .nav__inner{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,252,244,.97)}
  /* CTA sits left of the burger, which holds the right edge; `order` does the
     visual swap so the DOM keeps the checkbox ahead of .nav__links. */
  .nav__cta{order:2;margin-left:auto}
  .nav__burger{order:3;display:flex;position:relative;z-index:20}
  /* Full-screen overlay, still dark, so the links go light in here. */
  .nav__links{display:none;position:fixed;inset:0;z-index:10;margin-left:0;flex-direction:column;
    align-items:stretch;justify-content:flex-start;gap:0;background:var(--nav-dark);
    padding:101px var(--nav-gutter) 48px;overflow-y:auto}
  .nav__links a{padding:14px 0;font-size:clamp(24px,6vw,32px);font-weight:600;letter-spacing:-.02em;
    color:var(--nav-warm-white)}
  .nav__links a:hover{color:var(--nav-warm-white)}
  .nav__links a.is-active{color:var(--nav-gold)}
  .nav__links a::after{display:none}
  .nav__toggle:checked ~ .nav__links{display:flex}
  .nav__toggle:checked ~ .nav__burger span{background:var(--nav-warm-white)}
  .nav__toggle:checked ~ .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle:checked ~ .nav__burger span:nth-child(2){opacity:0}
  .nav__toggle:checked ~ .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Scroll lock behind the overlay (progressive enhancement). */
  html:has(.nav__toggle:checked),body:has(.nav__toggle:checked){overflow:hidden}
}
/* The nav floats, so the doc starts below it and anchors clear it. */
.docview{padding-top:var(--nav-h)}
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ================= site footer =================
   The footer every other page renders (see pricing.html's inline rules over
   sure-shared.css), restated against base.css for the same reason as the
   navbar above. Colours come from the --nav-* tokens so the dark bar matches
   the rest of the site rather than base.css's warmer --dark. */
.sheet{min-height:100vh;display:flex;flex-direction:column}
.docview{flex:1;min-height:0}
.foot{background:var(--nav-dark);color:var(--nav-warm-white);padding:64px 0 40px;margin-top:0;
  font-family:var(--doc-sans);font-size:16px;line-height:1.55;letter-spacing:normal}
.foot .wrap{max-width:none;width:min(966px,100% - var(--nav-gutter)*2);margin-inline:auto;padding:0}
.foot__inner{display:flex;flex-direction:column;gap:32px}
.foot__row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;width:100%}
.foot .logo-mark{height:27px;width:auto;display:block;flex:none}
.foot__divider{height:1px;background:rgba(255,255,255,.08);border:0;margin:0}
.foot__tag{margin:0;font-size:13px;letter-spacing:-.01em;color:rgba(255,251,240,.4)}
.foot__links{display:flex;gap:32px;font-size:13px;font-weight:500;letter-spacing:-.01em}
.foot__links a{color:rgba(255,251,240,.6);text-decoration:none;transition:color .3s var(--nav-ease)}
.foot__links a:hover,.foot__links a:focus-visible{color:var(--nav-warm-white)}