/* /privacy and /terms (legal/build_legal.py). Sep 27 (owner): the landing page's type and palette on a plain reading
   page: parchment #f0ece3, ink #261b1b, HW Cigars for titles, Neue Montreal for text (Medium = Regular + the site's
   .3px stroke, as on the landing page), the painting gold #c9a86a as the one accent. A fluid page (no design canvas):
   a contents rail beside one 680px reading column (from 1200px: rail, a 624px column and a margin column for the
   "put simply" notes, the same grid on both pages); on a phone the rail folds into a disclosure under the title. */
@font-face{font-display:swap;font-family:"HW Cigars";src:url(../assets/fonts/HWCigarsTRIAL-Regular.woff2) format("woff2");font-weight:400}
@font-face{font-display:swap;font-family:"Neue Montreal";src:url(../assets/fonts/PPNeueMontreal-Regular.woff2) format("woff2");font-weight:400}
@font-face{font-display:swap;font-family:"Neue Montreal";src:url(../assets/fonts/PPNeueMontreal-Italic.woff2) format("woff2");font-weight:400;font-style:italic}

:root{--ink:#261b1b;--text:rgba(38,27,27,.78);--muted:rgba(38,27,27,.52);--rule:rgba(38,27,27,.12);--paper:#f0ece3;--gold:#c9a86a;
  --f-display:"HW Cigars",Georgia,serif;--f-body:"Neue Montreal",Helvetica,Arial,sans-serif;--ease-out:cubic-bezier(.23,1,.32,1);--bar:72px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 28px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:focus,:focus-visible{outline:none}   /* the site has no focus rings (owner); focus shows as underline / colour below */
a{color:inherit}
.lg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lg-skip{position:absolute;left:16px;top:-60px;z-index:20;padding:8px 14px;border-radius:4px;background:var(--ink);color:var(--paper);font-size:14px;text-decoration:none}
.lg-skip:focus{top:12px}
.lg-wrap{width:100%;max-width:1272px;margin:0 auto;padding:0 40px}

/* bar: the landing page's sticky bar, reduced to brand / the two documents / the call */
.lg-bar{position:sticky;top:0;z-index:10;height:var(--bar);background:rgba(240,236,227,.86);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 rgba(38,27,27,0);transition:box-shadow .3s ease}
.lg-bar.is-scrolled{box-shadow:0 1px 0 var(--rule)}
.lg-bar__in{max-width:1352px;height:100%;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:32px}
.lg-brand{display:flex;align-items:center;gap:7.8px;height:30px;color:var(--ink);text-decoration:none;transition:opacity .2s ease}
.lg-brand:hover{opacity:.72}
/* Oct 14: the product Figma's logo, mark and wordmark (assets/brand), 24 high, the lockup's own spacing */
.lg-brand .lg-mark{display:block;width:24px;height:24px}
.lg-brand .lg-word{display:block;width:78.86px;height:24px}
.lg-tabs{margin-left:auto;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(38,27,27,.05)}
.lg-tabs a{padding:7px 14px;border-radius:999px;font-size:14px;line-height:1;color:var(--muted);text-decoration:none;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease}
.lg-tabs a:hover{color:var(--ink)}
.lg-tabs a[aria-current]{color:var(--ink);background:#faf8f3;box-shadow:0 1px 2px rgba(61,42,20,.12),0 0 0 1px rgba(230,195,138,.35)}
/* the site's dark CTA as the landing page's sticky bar draws it (sections/nav.css .sbar__btn; Figma 592:2646, 608:537/538):
   the taupe-to-ink ramp reaching deep brown by 45% (the gold label clears 4.5:1), bevel, grain, Figma's sheen band, gilt label.
   Sep 27 (owner: the CTA hover "looks kind of wonky ... a stroke which shows up and then it goes away"): this one still ran an
   older effect, a full-height soft-light sweep (over the border too) that faded in and slid off the far side, the stroke
   exactly (face +14 levels mid-sweep, then back), with Figma's grey-ground glow (a beige smudge on the parchment) on a .35s
   ramp. Now the landing page's hover number for number (base.css "CTA glow"): --cta-h (glow, drop, fill; the border on h²)
   on the bloom curve and --cta-s (the band) on the glide curve, together; the band soft in flight, the halo swelling from
   under the face, the bar's feathered 14px halo. No pointer light here (no btn-glow.js on this page). */
@property --cta-h{syntax:"<number>";inherits:false;initial-value:0}
@property --cta-s{syntax:"<number>";inherits:false;initial-value:0}
.lg-cta{--cta-h:0;--cta-s:0;--cta-bloom:cubic-bezier(.35,.55,.25,1);--cta-glide:cubic-bezier(.45,.15,.25,1);
  --cta-b:calc(var(--cta-h) * var(--cta-h));--cta-f:calc(4 * var(--cta-s) * (1 - var(--cta-s)));
  --cta-sc:calc(11.538% + 58.975% * var(--cta-s));
  --cta-sl:calc((10.256% + 2.565% * var(--cta-s)) * (1 + 1.2 * var(--cta-f)));
  --cta-sr:calc(12.821% * (1 + 1.2 * var(--cta-f)));
  --cta-sp:calc((.288 + .162 * var(--cta-s)) * (1 - .5 * var(--cta-f)));
  position:relative;display:inline-flex;align-items:center;height:36px;padding:0 19.6px;border-radius:5px;overflow:hidden;isolation:isolate;text-decoration:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  border:1.4px solid rgb(calc(171 + 38 * var(--cta-b)) calc(149 + 35 * var(--cta-b)) calc(137 + 26 * var(--cta-b)));
  background:linear-gradient(124.5deg,rgba(255,255,255,0) calc(var(--cta-sc) - var(--cta-sl)),
      rgba(255,255,255,calc(var(--cta-sp) * (.3333 - .0833 * var(--cta-f)))) calc(var(--cta-sc) - .6667 * var(--cta-sl)),
      rgba(255,255,255,calc(var(--cta-sp) * (.6667 + .0833 * var(--cta-f)))) calc(var(--cta-sc) - .3333 * var(--cta-sl)),
      rgba(255,255,255,var(--cta-sp)) var(--cta-sc),
      rgba(255,255,255,calc(var(--cta-sp) * (.6667 + .0833 * var(--cta-f)))) calc(var(--cta-sc) + .3333 * var(--cta-sr)),
      rgba(255,255,255,calc(var(--cta-sp) * (.3333 - .0833 * var(--cta-f)))) calc(var(--cta-sc) + .6667 * var(--cta-sr)),
      rgba(255,255,255,0) calc(var(--cta-sc) + var(--cta-sr))),
    linear-gradient(119.05deg,rgba(179,159,149,var(--cta-h)) 0%,rgba(80,67,63,var(--cta-h)) 45%,rgba(60,50,50,var(--cta-h)) 100%),
    linear-gradient(119.05deg,#ab9589 0%,#3a2c28 45%,#261b1b 100%);
  background-blend-mode:soft-light,normal,normal;
  box-shadow:inset 1.12px 1.12px 2.24px 0 #ecded7,inset -1.12px -1.12px 4.2px 0 rgba(18,10,9,.8),
    0 calc(3px * (.4 + .6 * var(--cta-h))) calc(8px * (.6 + .4 * var(--cta-h))) 0 rgba(61,42,20,calc(.3 * var(--cta-h))),
    0 0 calc(14px * (.7 + .3 * var(--cta-h))) calc(-2px - 4.2px * (1 - var(--cta-h))) rgba(236,176,74,calc(.8 * var(--cta-h)));
  transition:transform .2s var(--ease-out),--cta-h .55s var(--cta-bloom),--cta-s .55s var(--cta-glide)}   /* out: the band home with the glow (base.css) */
/* Sep 27 (owner, "the tenth time"): no border ramp, no band; the glow and the face only (base.css "CTA glow") */
.lg-cta{--cta-b:0;--cta-sp:0}
.lg-cta::before,.lg-cta::after{content:"";position:absolute;inset:0;z-index:-1;mix-blend-mode:overlay;background:url(../assets/shared/btn-noise-1.webp) 0 0/173.217px 173.217px;opacity:.45;pointer-events:none}
.lg-cta::after{background-image:url(../assets/shared/btn-noise-2.webp);opacity:.25}
.lg-cta span{position:relative;font-size:13.7px;line-height:1;white-space:nowrap;color:#f0d9a0;filter:drop-shadow(0 .56px 1.12px rgba(0,0,0,.25))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .lg-cta span{color:transparent;background:linear-gradient(94deg,#ffe792 0%,#e6c38a 100%);-webkit-background-clip:text;background-clip:text}
}
/* in (hover, and keyboard focus: the site has no focus rings) and press; rest is the way out */
@media (hover:hover) and (pointer:fine){
  .lg-cta:hover{--cta-h:1;--cta-s:1;transition:transform .2s var(--ease-out),--cta-h .6s var(--cta-bloom),--cta-s .8s var(--cta-glide)}
}
.lg-cta:focus-visible{--cta-h:1;--cta-s:1;transition:transform .2s var(--ease-out),--cta-h .6s var(--cta-bloom),--cta-s .8s var(--cta-glide)}
.lg-cta:active{--cta-h:1;transform:scale(.97);transition:transform .1s var(--ease-out),--cta-h .32s var(--cta-bloom),--cta-s .8s var(--cta-glide)}
/* Sep 27 (review): touch (a tablet wide enough to show the bar): press and glow wait 60ms, so a scroll that starts on the
   button never flashes it (base.css "CTA glow") */
@media (hover:none){
  .lg-cta:active{transition:transform .1s var(--ease-out) 60ms,--cta-h .32s var(--cta-bloom) 60ms,--cta-s .8s var(--cta-glide)}
}
/* Sep 27 (review): reduced motion: only the glow fades; the band stays at its rest place (with no transition it jumped to its
   hover place in one frame, a streak popping in and out) */
@media (prefers-reduced-motion:reduce){
  .lg-cta,.lg-cta:hover,.lg-cta:focus-visible,.lg-cta:active{transition:transform .1s var(--ease-out),--cta-h .24s cubic-bezier(.37,0,.63,1)}
  .lg-cta:is(:hover,:focus-visible){--cta-s:0}
}

/* title */
.lg-hero{padding:112px 0 56px;border-bottom:1px solid var(--rule)}
.lg-eyebrow{margin:0 0 14px;font-size:14px;line-height:1.2;letter-spacing:-.14px;text-transform:uppercase;color:var(--ink);opacity:.4}
.lg-title{margin:0;font:400 clamp(44px,6.2vw,80px)/.95 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.lg-meta{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;max-width:760px;font-size:15px;line-height:1.5;color:var(--muted)}
.lg-meta__date{color:var(--ink);white-space:nowrap}
.lg-meta__date::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 2px 0;border-radius:50%;background:var(--gold);vertical-align:middle}
.lg-meta a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(38,27,27,.3);text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .lg-eyebrow,.lg-title,.lg-meta{animation:lg-in .9s var(--ease-out) both}
  .lg-title{animation-delay:.06s}.lg-meta{animation-delay:.14s}
  @keyframes lg-in{from{opacity:0;transform:translateY(14px)}}
}

/* contents + document */
.lg-grid{display:grid;grid-template-columns:260px minmax(0,680px);justify-content:space-between;gap:64px;padding-top:64px;padding-bottom:120px}
.lg-toc{position:relative}
.lg-toc__box{position:sticky;top:calc(var(--bar) + 40px)}
.lg-toc summary{list-style:none;margin-bottom:18px;font-size:13px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:default}
.lg-toc summary::-webkit-details-marker{display:none}
.lg-toc ol{margin:0;padding:0 0 0 1px;list-style:none;border-left:1px solid var(--rule)}
.lg-toc a{position:relative;display:flex;gap:12px;padding:7px 0 7px 18px;font-size:14.5px;line-height:1.35;color:var(--muted);text-decoration:none;transition:color .45s cubic-bezier(.22,1,.36,1)}
/* one marker for the whole rail (the script sets its translateY/scaleY to the reading entry): it glides, never pops */
.lg-toc__list{position:relative}
.lg-toc__ink{position:absolute;left:.5px;top:0;width:2px;height:1px;background:var(--ink);transform-origin:0 0;opacity:0;pointer-events:none}
.lg-toc__ink.is-live{transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.lg-toc a:hover{color:var(--ink)}
.lg-toc a.is-on{color:var(--ink)}

.lg-doc{min-width:0}
.lg-doc section+section{margin-top:64px}
.lg-doc h2{margin:0 0 20px;font-weight:400}
.lg-h2{font:400 32px/1.08 var(--f-display);letter-spacing:-.32px;color:var(--ink)}
.lg-doc h3{margin:36px 0 12px;font:400 19px/1.3 var(--f-body);letter-spacing:-.1px;-webkit-text-stroke:.3px currentColor;color:var(--ink)}
.lg-doc p{margin:0 0 16px}
.lg-doc strong{font-weight:400;-webkit-text-stroke:.3px currentColor;color:var(--ink)}
.lg-doc ul,.lg-doc ol{margin:0 0 18px;padding:0;list-style:none}
.lg-doc li{position:relative;margin:0 0 10px;padding-left:24px}
.lg-doc ul>li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:1px;background:var(--ink);opacity:.45}
.lg-doc ol{counter-reset:lg}
.lg-doc ol>li{counter-increment:lg}
.lg-doc ol>li::before{content:counter(lg);position:absolute;left:0;top:0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--gold)}
.lg-doc a,.lg-see a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(38,27,27,.3);text-underline-offset:3px;transition:text-decoration-color .2s ease}
.lg-doc a:hover,.lg-see a:hover,.lg-doc a:focus-visible{text-decoration-color:var(--ink)}
/* Sep 27 (owner: "not a fan of this, looks very AI coded"): the "put simply" asides were a tinted box with a gold side
   stripe and a tracked-caps label. Now they are margin notes, as in an essay (Wix's #ItsThatEasy column, Webflow's
   "Basically" notes, Matter's summary rail; Pinterest's and Square's inline grey boxes were the look to leave behind).
   No box, stripe or rule: the gold dot from the title's date hangs in the gutter, then a plain "Put simply", then the
   sentence in HW Cigars. From 1200px the grid gets a third column and each note sits in it beside the clause it restates
   (build_legal.py wraps the two in .lg-clause): the caption on the clause heading's baseline, the sentence on its first
   line's. Narrower than that, the note sits under its clause, indented by the hanging dot. */
.lg-aside{margin:18px 0 8px;padding-left:15px}
.lg-doc .lg-aside__k{display:flex;align-items:center;gap:9px;margin:0 0 6px -15px;font-size:13px;line-height:1.3;color:rgba(38,27,27,.66)}   /* 4.6:1; --muted is 3.3:1 */
.lg-aside__k::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.lg-doc .lg-aside__t{margin:0;font:400 21px/1.28 var(--f-display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}   /* pretty stranded "we" / "re-bake." in Chromium */
/* Sep 27 (owner): both pages share the three-column grid, so the text column does not jump when you switch tabs
   (Privacy has no notes; its margin stays empty, as it is beside most of Terms) */
@media (min-width:1200px){
  .lg-grid{--note:212px;--note-gap:40px;grid-template-columns:260px minmax(48px,1fr) minmax(0,624px) var(--note-gap) var(--note);column-gap:0}
  .lg-grid>.lg-toc{grid-column:1}
  .lg-grid>.lg-doc{grid-column:3}
  .lg-clause{display:grid;grid-template-columns:minmax(0,1fr) var(--note);column-gap:var(--note-gap);align-items:start;
    margin:36px calc(-1 * (var(--note) + var(--note-gap))) 16px 0}
  .lg-clause__text>:first-child{margin-top:0}
  .lg-clause__text>:last-child{margin-bottom:0}
  .lg-clause>.lg-aside{margin:0;padding-top:10px}
  .lg-doc .lg-clause .lg-aside__k{margin-bottom:9.9px}   /* sentence on the clause's first baseline */
  .lg-doc .lg-clause .lg-aside__t{font-size:19px;line-height:28.9px}   /* the body's 17px x 1.7: every note line on a text line */
}
.lg-see{margin:72px 0 0;padding-top:24px;border-top:1px solid var(--rule);font-size:15px;color:var(--muted)}

/* footer */
.lg-foot{border-top:1px solid var(--rule);padding:28px 0 40px;font-size:14px;color:var(--muted)}
.lg-foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.lg-foot p{margin:0}
.lg-foot ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.lg-foot a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.lg-foot a:hover,.lg-foot a:focus-visible{color:var(--ink)}

/* phone + tablet: one column; the contents fold into a card under the title */
@media (max-width:899px){
  :root{--bar:60px}
  .lg-wrap,.lg-bar__in{padding:0 20px}
  .lg-bar__in{gap:12px}
  .lg-brand .lg-word{display:none}
  .lg-tabs{min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lg-tabs::-webkit-scrollbar{display:none}
  .lg-tabs a{padding:7px 12px;font-size:13.5px;white-space:nowrap;flex:0 0 auto}
  .lg-cta{display:none}
  .lg-hero{padding:56px 0 36px}
  .lg-meta{margin-top:20px;font-size:14px}
  .lg-grid{display:block;padding-top:24px;padding-bottom:72px}
  .lg-toc{margin-bottom:40px}
  .lg-toc__box{position:static;border:1px solid var(--rule);border-radius:6px;background:rgba(255,255,255,.35)}
  .lg-toc summary{margin:0;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
  .lg-toc summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .25s ease}
  .lg-toc__box[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .lg-toc ol{margin:0 16px 12px;border-left:0}
  .lg-toc a{padding:9px 0}
  .lg-toc__ink{display:none}
  body{font-size:16px}
  .lg-h2{font-size:27px}
  .lg-doc section+section{margin-top:48px}
  .lg-foot__in{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){.lg-toc__ink.is-live{transition:opacity .2s ease}}

/* Scrollbar policy: no visible scrollbars, scrolling stays native (wheel, trackpad, touch, keys, focus). */
* { scrollbar-width: none !important; }
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }