/* Lotta — shared styles for the inner pages (Privacy, Terms, Journal).
   Same tokens, menu and footer as the home page (option-b.html). */
/* Typefaces: files on this site (assets/fonts), no longer fetched from Google. "latin-ext" is only fetched when a page needs it. */
@font-face{font-family:"Instrument Sans"; font-style:normal; font-weight:400 600; font-stretch:100%; font-display:swap; src:url(assets/fonts/instrument-sans-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap; src:url(assets/fonts/manrope-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans"; font-style:normal; font-weight:400 600; font-stretch:100%; font-display:swap; src:url(assets/fonts/instrument-sans-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap; src:url(assets/fonts/manrope-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{
  --dark:#241D19; --lift:#EEEBE6; --ww:#F9F5EF; --bg:#F9F5EF; --ink:#241D19; --muted:#6E645B;
  --blue-ink:#2F68B8; --orange-ink:#B5470F; --line:rgba(36,29,25,.12);   /* orange-ink: the deeper orange, for small orange words (the bright one was too faint for them: audit D2, 6 Oct) */
  --blue:#8EBFFB; --blue-hi:#A9CFFC; --sky:#6993EB; --orange:#FF6416; --almond:#FEE8CB; --matcha:#75873C;
  --gut:20px; --nav:64px;
  --f-display:"Instrument Sans","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (min-width:700px){:root{--gut:32px}}
@media (min-width:1100px){:root{--gut:48px; --nav:72px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg); scroll-behavior:smooth; scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol{margin:0}
a{color:inherit}
button,input{font:inherit; color:inherit}
svg{display:block}
::selection{background:var(--blue); color:var(--dark)}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:8px}
.nw{white-space:nowrap}
.skip{position:fixed; left:12px; top:12px; z-index:200; padding:12px 18px; border-radius:999px; background:var(--ink); color:#fff; font-size:15px; font-weight:600; text-decoration:none; transform:translateY(-200%)}
.skip:focus{transform:none; outline:2px solid #fff; outline-offset:2px}
.wrap{width:100%; max-width:1440px; margin:0 auto; padding:0 var(--gut)}
.kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-ink); line-height:1.2}
.kicker::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 12px 1px currentColor}
html.show-ph .ph{background:rgba(255,150,36,.30); box-shadow:0 0 0 2px rgba(255,150,36,.30); border-radius:3px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border:0; border-radius:999px; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; transition:background-color .3s, transform .3s var(--ease)}
.btn svg{width:18px; height:18px}
.btn-primary{background:var(--orange); color:#fff}
.btn-primary:hover{background:#EE5710}
.btn[disabled]{opacity:.72; cursor:default}
.btn-sm{min-height:44px; padding:0 18px; font-size:15px}

/* Menu: the floating frosted pill, as on the home page once scrolled */
.logo{display:block; background:currentColor; -webkit-mask:url(assets/lotta-logo-sm.png) center/contain no-repeat; mask:url(assets/lotta-logo-sm.png) center/contain no-repeat; aspect-ratio:1000/318}   /* a 600px copy of the logo */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; padding:10px 10px 0}
.nav-in{position:relative; max-width:1000px; height:58px; margin:0 auto; padding:0 8px 0 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-radius:999px; background:rgba(249,245,239,.8); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 10px 34px -14px rgba(36,29,25,.22)}
.nav-logo{display:flex; align-items:center; min-height:44px; color:var(--orange); border-radius:8px}
.nav-logo .logo{width:80px; height:25px}
.nav-links{display:none}
/* phones: the two-line menu button and the full-screen menu, as on the home page (audit D6: these pages had no menu on a phone) */
.nav-cta{display:flex; align-items:center; gap:8px}
.nav-menu{width:44px; height:44px; border:0; border-radius:50%; background:rgba(36,29,25,.07); display:grid; place-content:center; gap:5px; cursor:pointer; transition:background-color .3s}
.nav-menu:hover{background:rgba(36,29,25,.14)}
.nav-menu i{display:block; width:18px; height:1.5px; border-radius:2px; background:var(--ink)}
.sheet{position:fixed; inset:0; z-index:60; background:var(--bg); display:flex; flex-direction:column; padding:0 var(--gut) calc(28px + env(safe-area-inset-bottom, 0px)); overflow:hidden}
.sheet[hidden]{display:none}
.sheet::after{content:""; position:absolute; left:50%; bottom:-60vw; width:140vw; height:140vw; margin-left:-70vw; border-radius:50%; background:radial-gradient(closest-side, rgba(255,100,22,.38), rgba(255,150,36,.12) 50%, rgba(142,191,251,0)); pointer-events:none}
.sheet-top{height:var(--nav); display:flex; align-items:center; justify-content:space-between}
.sheet .nav-logo{color:var(--ink)}
.sheet-close{width:44px; height:44px; border:0; border-radius:50%; background:rgba(36,29,25,.1); position:relative; cursor:pointer}
.sheet-close::before,.sheet-close::after{content:""; position:absolute; left:50%; top:50%; width:18px; height:1.5px; margin:-.75px 0 0 -9px; background:var(--ink); border-radius:2px; transform:rotate(45deg)}
.sheet-close::after{transform:rotate(-45deg)}
.sheet-links{position:relative; z-index:1; margin-top:32px; display:flex; flex-direction:column}
.sheet-links a{display:flex; align-items:center; justify-content:space-between; min-height:64px; font-family:var(--f-display); font-size:40px; letter-spacing:-.035em; line-height:1; text-decoration:none; border-bottom:1px solid var(--line)}
.sheet-links a svg{width:22px; height:22px; color:var(--muted)}
.sheet .btn{position:relative; z-index:1; margin-top:auto; width:100%; background:var(--blue); color:var(--dark)}
.sheet .btn:hover{background:var(--blue-hi)}
@media (min-width:900px){
  .nav-menu{display:none}
  .nav{padding-top:12px}
  .nav-links{display:flex; gap:2px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
  .nav-links a{position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; font-size:15px; font-weight:500; text-decoration:none; color:rgba(36,29,25,.78); transition:color .4s var(--ease)}
  .nav-links a::after{content:""; position:absolute; left:16px; right:16px; bottom:9px; height:1.5px; border-radius:2px; background:currentColor; transform:scaleX(0); transform-origin:100% 50%; transition:transform .55s var(--ease)}
  .nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--ink)}
  .nav-links a:hover::after, .nav-links a[aria-current="page"]::after{transform:scaleX(1); transform-origin:0 50%}
}

/* Page head */
.page{padding:calc(var(--nav) + 72px) 0 104px}
.page-head{max-width:880px}
.page-title{margin-top:18px; font-family:var(--f-display); font-weight:400; font-size:clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height:1.02; letter-spacing:-.04em; text-wrap:balance}
.page-sub{margin-top:18px; max-width:46ch; font-size:19px; color:var(--muted); text-wrap:pretty}
.page-meta{margin-top:20px; font-size:14px; color:var(--muted)}
.draft-note{margin-top:28px; max-width:720px; padding:16px 20px; border-radius:16px; background:rgba(255,150,36,.14); box-shadow:inset 0 0 0 1px rgba(255,150,36,.35); font-size:15px; line-height:1.55}
.draft-note b{font-weight:700}

/* Long-form legal text with a table of contents */
.doc{margin-top:56px; display:grid; gap:40px}
.doc-body{max-width:68ch}
.doc-body section{padding-top:36px; margin-top:36px; border-top:1px solid var(--line)}
.doc-body section:first-child{padding-top:0; margin-top:0; border-top:0}
.doc-body h2{font-family:var(--f-display); font-weight:500; font-size:clamp(1.4rem, 1.2rem + .7vw, 1.75rem); line-height:1.15; letter-spacing:-.02em}
.doc-body p, .doc-body ul{margin-top:14px}
.doc-body ul{padding-left:0; list-style:none; display:grid; gap:10px}
.doc-body li{position:relative; padding-left:22px}
.doc-body li::before{content:""; position:absolute; left:4px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--orange)}
.doc-body a{color:var(--blue-ink); text-underline-offset:3px}
.doc-body b{font-weight:700}
@media (min-width:1000px){
  .doc{grid-template-columns:290px minmax(0,1fr); gap:72px}
}

/* Journal */
.jr-grid{margin-top:56px; display:grid; gap:20px}
@media (min-width:760px){ .jr-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1100px){ .jr-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
.jr-empty{position:relative; overflow:hidden; margin-top:56px; padding:40px 24px; border-radius:32px; background:linear-gradient(180deg,#8EBFFB 0%,#C9DDF7 46%,#FEE8CB 78%,#FFC49B 100%); text-align:center}
.jr-empty::after{content:""; position:absolute; left:50%; top:58%; width:min(760px, 90%); aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(255,100,22,.55), rgba(255,150,36,.25) 55%, rgba(255,150,36,0)); pointer-events:none}
.jr-empty > *{position:relative; z-index:1}
.jr-empty h2, .jr-empty h1{margin:0 auto; max-width:18ch; font-family:var(--f-display); font-weight:400; font-size:clamp(1.8rem, 1.3rem + 2vw, 3rem); line-height:1.05; letter-spacing:-.035em; text-wrap:balance}
.jr-empty p{margin:14px auto 0; max-width:40ch; font-size:17px; color:rgba(36,29,25,.8)}
.nl-form{margin:26px auto 0; max-width:460px; display:flex; gap:8px; padding:6px; border-radius:999px; background:rgba(249,245,239,.7); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.nl-form input{flex:1; min-width:0; height:48px; padding:0 18px; border:0; border-radius:999px; background:transparent; font-size:16px}
.nl-form input:focus{outline:none}
.nl-form:focus-within{box-shadow:inset 0 0 0 1.5px var(--blue-ink)}
.nl-form .btn{min-height:48px}
.nl-err{margin-top:10px; font-size:14px; color:var(--orange-ink)}
.nl-thanks{margin-top:22px; font-weight:600}
[hidden]{display:none!important}
@media (min-width:900px){ .jr-empty{padding:72px 48px} }
/* the "page not found" page (404.html): the same panel, with two buttons */
.nf{margin-top:0}
.nf > p{max-width:52ch}
.nf-go{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px !important; max-width:none !important}
.nf-quiet{background:rgba(249,245,239,.82); color:var(--ink)}
.nf-quiet:hover{background:#F9F5EF}

/* Footer: the same card as on the home page (option-b.html), chosen on 5 Oct 2026 ("2, the rising card").
   Behind it, on every page since 5 Oct (night): the "Colour glow", her choice in place of the sunrise picture. No picture:
   a sun of orange, saffron and almond drawn with colour, centred a little below the card's top edge. */
.foot{--band:clamp(150px, 17vw, 240px); position:relative; isolation:isolate; padding:var(--band) clamp(10px, 1.4vw, 20px) clamp(10px, 1.4vw, 20px);
  background:
    radial-gradient(ellipse max(72vw, 430px) 560px at 50% calc(var(--band) + 300px), #FF6416 0, #FF6416 30%, #FF9624 50%, #FEE8CB 74%, rgba(254,232,203,0) 100%),
    linear-gradient(180deg, rgba(255,150,36,0) var(--band), #FF9624 calc(var(--band) + 280px), #FF6416 100%),
    var(--bg)}
.foot::before{content:""; position:absolute; inset:0 0 auto; height:clamp(120px, 13vw, 190px); z-index:-1; background:linear-gradient(180deg, var(--bg) 0, rgba(249,245,239,.5) 45%, rgba(249,245,239,0))}
.foot-card{padding:clamp(28px, 4vw, 60px) clamp(22px, 3.4vw, 52px) 0; border-radius:28px; background:var(--ww); box-shadow:0 -30px 80px -50px rgba(36,29,25,.4)}
.foot-top{display:grid; gap:44px}
.foot-brand{display:grid; gap:18px; align-content:start; max-width:460px; min-width:0}
.foot-brand > *{min-width:0}
.foot-logo{display:block; width:150px; color:var(--orange); border-radius:8px}
.foot-say{font-size:15px; line-height:1.5; color:var(--muted)}
.foot-say b{color:var(--ink); font-weight:600}
.foot-nl{display:flex; align-items:center; min-height:56px; padding:5px 5px 5px 22px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px rgba(36,29,25,.22); transition:box-shadow .25s}
.foot-nl:focus-within{box-shadow:inset 0 0 0 2px var(--blue-ink)}
.foot-nl.is-bad{box-shadow:inset 0 0 0 2px #B5470F}
.foot-nl input{flex:1; min-width:0; height:46px; padding:0; border:0; border-radius:0; background:transparent; font-size:16px; color:var(--ink); outline:0; -webkit-appearance:none; appearance:none}
.foot-nl input::placeholder{color:rgba(36,29,25,.62)}
.foot-nl .btn{flex:none; background:var(--orange); color:#fff}
.foot-nl .btn:hover{background:#EE5710}
.foot-err{display:flex; align-items:center; gap:8px; margin-top:-6px; font-size:14px; color:#B5470F}
.foot-err::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor}
.foot-thanks{display:flex; align-items:center; gap:12px; min-height:56px; font-size:16px; font-weight:600}
.foot-thanks .ok{flex:none; width:36px; height:36px; border-radius:50%; background:var(--blue); color:var(--dark); display:grid; place-items:center}
.foot-thanks .ok svg{width:18px; height:18px}
.foot-cols{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 24px}
.foot-col{display:grid; gap:10px; align-content:start; min-width:0}
.foot-col:last-child{grid-column:1 / -1}
.foot-lab{font-family:var(--f-display); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.2; color:var(--orange-ink)}
.foot-links{padding:0; list-style:none; display:grid; gap:0; align-content:start}
.foot-links a{display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:16px; color:rgba(36,29,25,.86); text-decoration:none; transition:color .3s; border-radius:6px}
.foot-links a:hover{color:var(--ink)}
.foot-links a[aria-current="page"]{color:var(--ink); font-weight:600}
.foot-links a span{padding-bottom:1px; background:linear-gradient(currentColor, currentColor) 100% 100%/0 1.5px no-repeat; transition:background-size .55s var(--ease)}
@media (hover:hover){ .foot-links a:hover span{background-position:0 100%; background-size:100% 1.5px} }
.foot-links svg{flex:none; width:18px; height:18px; opacity:.8}
.foot-mail{display:flex; align-items:center; min-height:40px; font-size:16px; font-weight:600; -webkit-user-select:all; user-select:all}
.foot-links .foot-mail a{color:inherit; font-weight:inherit}
.foot-links a, .foot-mail a{position:relative}
.foot-links a::after{content:""; position:absolute; inset:-2px 0}   /* the area that answers a finger: 44px tall; the words stay where they are */
.foot-base{margin-top:48px; padding:22px 0 26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 32px; font-size:13px; line-height:1.5; color:var(--muted)}
@media (min-width:1000px){
  .foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:72px}
  .foot-cols{grid-template-columns:repeat(3, minmax(0,1fr))}
  .foot-col:last-child{grid-column:auto}
}

/* Legal pages built from the Notion texts (make-pages.py, legal/*.md) */
.page-intro{margin-top:26px; max-width:62ch; display:grid; gap:12px; font-size:18px; color:rgba(36,29,25,.86)}
.page-intro b{color:var(--ink)}
.doc-body h3{margin-top:28px; font-family:var(--f-display); font-weight:600; font-size:18px; line-height:1.3; letter-spacing:-.01em}
.doc-body ol{margin-top:14px; padding-left:22px; display:grid; gap:10px}
.doc-body ol li{padding-left:4px}
.doc-body ol li::before{content:none}
.doc-body blockquote{margin:16px 0 0; padding:16px 20px; border-left:3px solid var(--orange); border-radius:0 12px 12px 0; background:rgba(36,29,25,.04); font-size:16px; line-height:1.8}
.tbl{margin-top:16px; overflow-x:auto; border-radius:14px; box-shadow:inset 0 0 0 1px var(--line)}
.tbl table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.5}
.tbl th{padding:12px 14px; text-align:left; vertical-align:bottom; font-family:var(--f-display); font-weight:600; font-size:13px; letter-spacing:.02em; background:rgba(36,29,25,.04); border-bottom:1px solid var(--line)}
.tbl td{padding:12px 14px; vertical-align:top; border-top:1px solid var(--line)}
.tbl tbody tr:first-child td{border-top:0}
.doc-close{margin-top:48px; padding-top:28px; border-top:1px solid var(--line); color:var(--muted)}
.doc-close p{margin:0}
@media (max-width:640px){
  .tbl{box-shadow:none; border-radius:0}
  .tbl table, .tbl tbody, .tbl tr, .tbl td{display:block; width:100%}
  .tbl thead{display:none}
  .tbl tr{padding:12px 0; border-top:1px solid var(--line)}
  .tbl td{padding:4px 0; border:0}
  .tbl td::before{content:attr(data-label); display:block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
}

/* ---- Contents panel (redesign 1 Oct) ---- */
.toc-card{padding:18px 14px 14px; border-radius:22px; background:rgba(255,255,255,.62); box-shadow:inset 0 0 0 1px rgba(36,29,25,.07), 0 24px 48px -32px rgba(36,29,25,.4)}
.toc-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:0 8px}
.toc-title{font-family:var(--f-display); font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.toc-count{font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.toc-cur{color:var(--orange-ink)}
.toc-prog{height:3px; margin:12px 8px 10px; border-radius:3px; background:rgba(36,29,25,.08); overflow:hidden}
.toc-prog i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #FF9624, var(--orange)); transform-origin:0 50%; transform:scaleX(0)}
.toc-list{margin:0; padding:0 2px 0 0; list-style:none; display:grid; gap:2px}
.toc-list a{display:grid; grid-template-columns:26px minmax(0,1fr); align-items:baseline; gap:6px; padding:8px 10px; border-radius:12px; font-size:14.5px; line-height:1.35; color:rgba(36,29,25,.66); text-decoration:none; transition:background-color .25s, color .25s, box-shadow .25s}
.toc-list .n{font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; color:rgba(36,29,25,.38); transition:color .25s}
.toc-list a:hover{background:rgba(36,29,25,.045); color:var(--ink)}
.toc-list a{position:relative}
.toc-list a::after{content:""; position:absolute; inset:-3px 0}
.toc-list a.on{background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(36,29,25,.08), inset 3px 0 0 var(--orange)}
.toc-list a.on .n{color:var(--orange-ink)}
.toc-group{margin:12px 10px 4px; font-family:var(--f-display); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.toc-top{display:inline-flex; margin:10px 10px 2px; font-size:13px; font-weight:600; color:var(--blue-ink); text-decoration:none}
.toc-top:hover{text-decoration:underline; text-underline-offset:3px}
@media (max-width:999.98px){
  .toc-prog, .toc-count, .toc-top{display:none}
}
@media (min-width:1000px){
  /* sticky on its own layer: steadier while scrolling (also inside the scaled preview) */
  .toc{position:sticky; top:calc(var(--nav) + 36px); align-self:start; transform:translateZ(0); will-change:transform}
  .toc-list{max-height:calc(100vh - var(--nav) - 190px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin}
}

/* ---- Section headings and "Short version" (redesign 1 Oct) ---- */
.doc-body h2{display:flex; align-items:baseline; gap:12px; font-size:clamp(1.5rem, 1.25rem + .8vw, 1.9rem)}
.h-num{flex:none; font-size:.62em; font-weight:600; letter-spacing:.02em; color:var(--orange-ink); font-variant-numeric:tabular-nums}
.short{position:relative; margin-top:18px; padding:18px 22px 20px; border-radius:18px; background:linear-gradient(135deg, rgba(254,232,203,.85) 0%, rgba(255,241,224,.6) 55%, rgba(249,245,239,.5) 100%); box-shadow:inset 0 0 0 1px rgba(255,150,36,.22)}
.short::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:0 3px 3px 0; background:var(--orange)}
.doc-body .short-l{margin:0; font-family:var(--f-display); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-ink)}
.doc-body .short-t{margin-top:6px; font-family:var(--f-display); font-size:19px; line-height:1.45; letter-spacing:-.01em; color:var(--ink)}
.doc-body section{scroll-margin-top:calc(var(--nav) + 32px)}

/* ---- One legal page: Privacy, Terms and US Consumer Health Data (1 Oct, after Octo Health) ---- */
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
mark.pending{padding:1px 5px; border-radius:5px; background:rgba(255,150,36,.24); color:var(--ink)}
.lg{padding:calc(var(--nav) + 44px) 0 120px}
.lg-main{min-width:0; margin-top:28px}
.lg-label{font-family:var(--f-display); font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.lg-docs{margin:0; padding:0; list-style:none}
.lg-doc-a{display:flex; align-items:center; text-decoration:none; color:rgba(36,29,25,.55); transition:color .3s, padding .5s var(--ease)}
.lg-doc-a:hover{color:var(--ink)}
.lg-doc.on .lg-doc-a{color:var(--ink)}
.lg-dash{flex:none; width:0; height:1.5px; border-radius:2px; background:var(--orange); transition:width .5s var(--ease), margin .5s var(--ease)}
.lg-n-s{display:none}

/* the documents */
.lg-article{scroll-margin-top:calc(var(--nav) + 40px)}
.lg-article + .lg-article{margin-top:120px; padding-top:112px; border-top:1px solid var(--line)}
html.lg-tabs .lg-article{margin-top:0; padding-top:0; border-top:0}
.lg-title:focus{outline:none}
.lg-title{margin-top:16px; font-family:var(--f-display); font-weight:400; font-size:clamp(2.4rem, 1.6rem + 2.6vw, 3.9rem); line-height:1.02; letter-spacing:-.04em; text-wrap:balance}
.lg-intro{margin-top:28px; display:grid; gap:16px; font-size:20px; line-height:1.6; color:rgba(36,29,25,.66); text-wrap:pretty}
.lg-intro b{font-weight:600; color:var(--ink)}
.lg-meta{margin-top:26px; font-size:14px; color:var(--muted)}
.lg-article section{margin-top:72px; scroll-margin-top:calc(var(--nav) + 32px)}
.lg-article h3{display:flex; align-items:baseline; gap:12px; color:var(--ink); font-family:var(--f-display); font-weight:500; font-size:clamp(1.5rem, 1.25rem + .8vw, 1.9rem); line-height:1.15; letter-spacing:-.02em; text-wrap:balance}
.lg-article h4{margin-top:32px; font-family:var(--f-display); font-weight:600; font-size:18px; line-height:1.3; letter-spacing:-.01em}
.lg-article section > p, .lg-article section > ul, .lg-article section > ol, .lg-close p{margin-top:14px; color:rgba(36,29,25,.8)}
.lg-article b{font-weight:700; color:var(--ink)}
.lg-article a{color:var(--ink); text-decoration:underline; text-decoration-color:rgba(255,100,22,.6); text-decoration-thickness:1.5px; text-underline-offset:3px; transition:text-decoration-color .25s}
.lg-article a:hover{text-decoration-color:var(--orange)}
.lg-article ul{padding-left:0; list-style:none; display:grid; gap:10px}
.lg-article ul li{position:relative; padding-left:22px}
.lg-article ul li::before{content:""; position:absolute; left:4px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--sky)}
.lg-head .kicker{color:var(--orange-ink)}
.lg-article .tbl th{background:rgba(105,147,235,.14)}
.lg-article ol{padding-left:22px; display:grid; gap:10px}
.lg-article ol li{padding-left:4px}
.lg-article blockquote{margin:16px 0 0; padding:16px 20px; border-left:2px solid var(--orange); background:rgba(36,29,25,.035); font-size:16px; line-height:1.8}
.lg-article .tbl{color:rgba(36,29,25,.85)}
/* "Short version": a quiet lead-in, not a box */
.lg-article .short{margin-top:20px; padding:18px 22px 20px; border-radius:18px; border:0; background:var(--sky); box-shadow:none; color:#fff; text-shadow:0 1px 2px rgba(36,29,25,.14)}
.lg-article .short::before{content:none}
.lg-article .short-l{font-family:var(--f-display); font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#fff}
.lg-article .short-t{margin-top:6px; font-family:var(--f-display); font-size:19.5px; font-weight:500; line-height:1.45; letter-spacing:-.01em; color:#fff; text-wrap:pretty}
.lg-article .short b{color:#fff}
.lg-close{margin-top:64px; padding-top:28px; border-top:1px solid var(--line)}
.lg-close p{margin:0; color:var(--muted)}

/* phone and tablet: the three documents as a row of tabs that stays under the menu */
@media (max-width:999.98px){
  .lg{padding-top:0}
  .lg-side{position:sticky; top:0; z-index:20; margin:0 calc(var(--gut) * -1); padding:calc(var(--nav) + 18px) var(--gut) 10px; background:rgba(249,245,239,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
  .lg-label, .lg-dash, .lg-n{display:none}
  .lg-n-s{display:inline}
  .lg-docs{position:relative; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none}
  .lg-docs::-webkit-scrollbar{display:none}
  .lg-doc{flex:none}
  .lg-doc-a{position:relative; min-height:40px; padding:0 16px; border-radius:999px; font-size:15px; font-weight:500; background:rgba(36,29,25,.06)}
  .lg-doc-a::after{content:""; position:absolute; inset:-2px 0}
  .lg-doc.on .lg-doc-a{background:var(--sky); color:var(--ink)}
  .lg-article, .lg-article section{scroll-margin-top:calc(var(--nav) + 90px)}
  .lg-article + .lg-article{margin-top:88px; padding-top:72px}
  .lg-intro{font-size:18px}
}

/* desktop: the side menu, as on Octo Health */
@media (min-width:1000px){
  .lg{padding:calc(var(--nav) + 104px) 0 140px}
  .lg-wrap{display:grid; grid-template-columns:292px minmax(0,720px); column-gap:clamp(56px, 7vw, 120px); justify-content:center}
  .lg-main{margin-top:0}
  .lg-side{position:sticky; top:calc(var(--nav) + 40px); align-self:start; transform:translateZ(0)}
  .lg-label{margin-bottom:22px}
  .lg-docs{display:grid; gap:2px}
  .lg-doc-a{min-height:44px; padding:6px 0 6px 18px; font-size:17px; line-height:1.3}
  .lg-doc.on .lg-doc-a{padding-left:0; font-weight:500}
  .lg-doc.on .lg-dash{width:18px; margin-right:14px}
}
@media (prefers-reduced-motion:reduce){ .lg-doc-a, .lg-dash{transition:none} }
.lg-article .h-num{color:var(--orange-ink)}

/* ============ Blog (5 Oct 2026) ============
   Built by build-blog.mjs from the articles published in Ghost; the cards themselves are drawn by blog.js.
   Layout Margarida chose: the title, line and topic buttons of "Filter and grid" (after Function's "All articles"),
   over the cover, tiles and cards of "Cover story" (after Oura's The Pulse). The five layouts are in blog-layouts/. */
.blog > .wrap, .art > .wrap{max-width:1336px}
.bl-head{text-align:center}
.bl-title{font-family:var(--f-display); font-weight:400; font-size:clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height:1.02; letter-spacing:-.04em; text-wrap:balance}
.bl-sub{margin:18px auto 0; max-width:40ch; font-size:19px; color:var(--muted); text-wrap:pretty}
@media (min-width:900px){ .bl-title{white-space:nowrap} }   /* "Between Appointments" on one line on a computer */
.bl-pills{margin-top:36px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center}
.bl-pills span{margin-right:6px; font-size:14px; font-weight:600}
.bl-pills button{min-height:40px; padding:0 16px; border:0; border-radius:999px; background:transparent; box-shadow:inset 0 0 0 1px rgba(36,29,25,.4); font-size:14px; font-weight:500; cursor:pointer; transition:background-color .3s, color .3s}
.bl-pills button:hover{background:rgba(36,29,25,.06)}
.bl-pills button[aria-pressed="true"]{background:var(--ink); color:var(--ww); box-shadow:none}
.bl-main{margin-top:48px}
.bl-mosaic{display:grid; gap:16px}
/* a picture with words on it: the cover, the tiles, and the top of an article */
.bl-ph{position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; min-width:0; border-radius:28px; background:var(--sky); color:#fff}
.bl-img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover}
.bl-ph::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(36,29,25,0) 30%, rgba(36,29,25,.3) 60%, rgba(36,29,25,.66) 100%)}
.bl-in{width:100%; padding:clamp(20px, 3.4vw, 44px); display:grid; gap:12px; text-shadow:0 1px 24px rgba(36,29,25,.25)}
.bl-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:15px; line-height:1.3; color:rgba(255,255,255,.94)}
.bl-new{padding:6px 10px; border-radius:999px; background:var(--ww); color:var(--ink); font-family:var(--f-display); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-shadow:none}
.bl-t{font-family:var(--f-display); font-weight:500; text-wrap:balance}
.bl-hook{max-width:46ch; font-size:17px; line-height:1.5; color:rgba(255,255,255,.94); text-wrap:pretty}
.bl-go{color:inherit; text-decoration:none}
.bl-go::after{content:""; position:absolute; inset:0; z-index:1}
.bl-go:focus-visible{outline:none}
.bl-go:focus-visible::after{outline:3px solid var(--blue); outline-offset:-4px; border-radius:inherit}
.bl-cover{min-height:440px}
.bl-cover .bl-t{max-width:15ch; font-size:clamp(2.1rem, 1.2rem + 3.4vw, 4rem); line-height:1.02; letter-spacing:-.04em}
.bl-one .bl-cover{min-height:clamp(460px, 44vw, 600px)}
.bl-tiles{display:grid; gap:16px}
.bl-tile{min-height:170px; border-radius:22px}
.bl-tile .bl-in{padding:20px 22px}
.bl-tile .bl-t{font-size:1.3rem; line-height:1.15; letter-spacing:-.02em}
.bl-latest{margin-top:80px}
.bl-h{font-family:var(--f-display); font-weight:400; font-size:clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height:1.06; letter-spacing:-.03em}
.bl-grid{margin-top:28px; padding:0; list-style:none; display:grid; gap:40px 24px}
.bl-card{position:relative; min-width:0}
.bl-pic{position:relative; overflow:hidden; aspect-ratio:4/3; border-radius:20px; background:var(--lift)}
.bl-pic .bl-img{z-index:0}
.bl-cmeta{margin-top:16px; font-size:14px; line-height:1.3; color:var(--muted)}
.bl-cmeta b{font-weight:600; color:var(--ink)}
.bl-ct{margin-top:8px; font-family:var(--f-display); font-weight:500; font-size:1.4rem; line-height:1.1; letter-spacing:-.03em; text-wrap:balance}
.bl-chook{margin-top:8px; font-size:16px; line-height:1.5; color:rgba(36,29,25,.78); text-wrap:pretty}
/* Pointing at an article card (Margarida, 5 Oct): its title is underlined with the same moving line as the links in the top menu,
   and on the highlighted articles (the cover and the tiles beside it) a round ">" in white slides forward. */
.bl-go{padding-bottom:.05em; background:linear-gradient(currentColor, currentColor) 100% 100% / 0 1.5px no-repeat; transition:background-size .55s var(--ease)}
/* the cover's title is large and its lines sit close together, so its line is drawn a little higher, just under the letters */
.bl-cover .bl-go{padding-bottom:0; background-position:100% calc(100% - .1em); background-size:0 2px}
@media (hover:hover){
  .bl-ph:hover .bl-go, .bl-card:hover .bl-go{background-position:0 100%; background-size:100% 1.5px}
  .bl-cover:hover .bl-go{background-position:0 calc(100% - .1em); background-size:100% 2px}
}
.bl-cover:focus-within .bl-go{background-position:0 calc(100% - .1em); background-size:100% 2px}
.bl-ph:focus-within .bl-go, .bl-card:focus-within .bl-go{background-position:0 100%; background-size:100% 1.5px}
@media (prefers-reduced-motion:reduce){ .bl-go{transition:none} }
.bl-arrow{position:absolute; right:clamp(16px, 2.4vw, 28px); bottom:clamp(16px, 2.4vw, 28px); width:48px; height:48px; border-radius:50%; display:grid; place-items:center; pointer-events:none;
  color:#fff; background:rgba(36,29,25,.24); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.88);   /* a faint dark tint, so the white ring and ">" also read on a pale picture */
  transition:transform .55s var(--ease), background-color .45s var(--ease)}
.bl-arrow svg{width:20px; height:20px}
.bl-tile .bl-arrow{right:16px; bottom:16px; width:38px; height:38px}
.bl-tile .bl-arrow svg{width:17px; height:17px}
/* the words keep clear of it */
.bl-cover .bl-in > :last-child{margin-right:64px}
.bl-tile .bl-in{padding-right:66px}
@media (hover:hover){ .bl-ph:hover .bl-arrow{transform:translateX(7px); background:rgba(36,29,25,.4)} }
.bl-ph:focus-within .bl-arrow{transform:translateX(7px)}
@media (prefers-reduced-motion:reduce){ .bl-arrow{transition:none} }
@media (min-width:700px){ .bl-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1000px){
  .bl-mosaic{grid-template-columns:minmax(0,2.05fr) minmax(0,1fr); min-height:600px}
  .bl-mosaic.bl-one{grid-template-columns:minmax(0,1fr); min-height:0}
  .bl-tiles{grid-auto-rows:minmax(0,1fr)}
  .bl-grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px 28px}
}
/* the newsletter band under the articles */

/* ---- One article ---- */
.art{padding:calc(var(--nav) + 28px) 0 104px}
.art-cover{min-height:clamp(340px, 34vw, 460px)}   /* shortened on 5 Oct (was 440 to 600px), so the text starts on the first screen; it still grows for a long title */
.art-cover .bl-t{max-width:16ch; font-size:clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem); line-height:1.02; letter-spacing:-.04em}
.art-credit{margin:10px auto 0; max-width:680px; font-size:13px; color:var(--muted); text-align:right}
.art-under{margin:28px auto 0; max-width:680px; display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between}
.art-back{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:15px; font-weight:600; color:var(--muted); text-decoration:none}
.art-back:hover{color:var(--ink)}
.art-back svg{width:16px; height:16px}
.art-by{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--muted)}
.art-by i{flex:none; width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--orange) center/cover no-repeat; display:grid; place-items:center; color:#fff}
.art-by i .logo{width:24px}
.art-by b{font-weight:600; color:var(--ink)}
.art-end{margin:64px auto 0; padding-top:28px; max-width:680px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between}
.art-share{min-height:44px; padding:0 18px; border:0; border-radius:999px; background:rgba(36,29,25,.07); font-size:15px; font-weight:600; cursor:pointer}
.art-share:hover{background:rgba(36,29,25,.12)}
.art-more{margin-top:88px}
.art-more .bl-h{font-size:1.5rem; font-weight:500; letter-spacing:-.02em}
/* the words of the article, as they come from Ghost */
.art-prose{margin:44px auto 0; max-width:680px; font-size:19px; line-height:1.7; color:rgba(36,29,25,.9); overflow-wrap:break-word}
.art-prose > *{margin:0}
.art-prose > * + *{margin-top:22px}
.art-prose h2, .art-prose h3, .art-prose h4{font-family:var(--f-display); color:var(--ink); text-wrap:balance; scroll-margin-top:110px}
.art-prose h2{margin-top:48px; font-weight:500; font-size:1.75rem; line-height:1.15; letter-spacing:-.02em}
.art-prose h3{margin-top:36px; font-weight:600; font-size:1.35rem; line-height:1.2; letter-spacing:-.01em}
.art-prose h4{margin-top:28px; font-weight:600; font-size:1.1rem; line-height:1.3}
.art-prose a{color:var(--blue-ink); text-underline-offset:3px}
.art-prose strong, .art-prose b{font-weight:700; color:var(--ink)}
.art-prose ul, .art-prose ol{padding-left:26px}
.art-prose ul{list-style:disc} .art-prose ol{list-style:decimal}
.art-prose li + li{margin-top:8px}
.art-prose li::marker{color:var(--orange)}
.art-prose blockquote{margin-top:44px; margin-bottom:44px; padding-left:24px; border-left:3px solid var(--orange); font-family:var(--f-display); font-size:1.9rem; line-height:1.2; letter-spacing:-.025em; color:var(--ink); text-wrap:balance}
.art-prose blockquote.kg-blockquote-alt{padding-left:0; border-left:0; text-align:center}
.art-prose hr{margin:44px 0; border:0; border-top:1px solid var(--line)}
.art-prose img, .art-prose video{display:block; max-width:100%; height:auto; border-radius:20px}
.art-prose figure{margin-top:36px; margin-bottom:36px}
.art-prose figcaption{margin-top:10px; font-size:14px; line-height:1.5; color:var(--muted); text-align:center}
.art-prose pre{padding:16px 18px; border-radius:14px; background:var(--lift); font-size:15px; line-height:1.5; overflow-x:auto}
.art-prose table{display:block; overflow-x:auto; border-collapse:collapse; font-size:16px}
.art-prose th, .art-prose td{padding:10px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.art-prose iframe{max-width:100%}
/* Ghost's own blocks ("cards") */
.art-prose .kg-card{margin-top:36px; margin-bottom:36px}
@media (min-width:1000px){ .art-prose .kg-width-wide, .art-prose .kg-width-full{width:980px; max-width:calc(100vw - 2 * var(--gut)); margin-left:50%; transform:translateX(-50%)} }
.art-prose .kg-width-wide img, .art-prose .kg-width-full img{width:100%}
.art-prose .kg-gallery-container{display:grid; gap:10px}
.art-prose .kg-gallery-row{display:flex; gap:10px}
.art-prose .kg-gallery-image{flex:1 1 0; min-width:0}
.art-prose .kg-gallery-image img{width:100%; height:100%; object-fit:cover; border-radius:14px}
.art-prose .kg-callout-card{display:flex; gap:12px; padding:20px 22px; border-radius:18px; background:var(--lift)}
.art-prose .kg-callout-card-accent{background:var(--almond)}
.art-prose .kg-bookmark-container{display:flex; overflow:hidden; border-radius:18px; box-shadow:inset 0 0 0 1px var(--line); color:inherit; text-decoration:none}
.art-prose .kg-bookmark-content{flex:1; min-width:0; padding:18px 20px}
.art-prose .kg-bookmark-title{font-weight:600; color:var(--ink); line-height:1.3}
.art-prose .kg-bookmark-description{margin-top:6px; font-size:15px; line-height:1.45; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.art-prose .kg-bookmark-metadata{margin-top:12px; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.art-prose .kg-bookmark-icon{width:18px; height:18px; border-radius:4px}
.art-prose .kg-bookmark-thumbnail{position:relative; flex:none; width:32%}
.art-prose .kg-bookmark-thumbnail img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0}
.art-prose .kg-button-card{display:flex}
.art-prose .kg-button-card.kg-align-center{justify-content:center}
.art-prose .kg-btn{display:inline-flex; align-items:center; min-height:52px; padding:0 24px; border-radius:999px; background:var(--orange); color:#fff; font-size:16px; font-weight:600; text-decoration:none}
.art-prose .kg-embed-card{display:flex; flex-direction:column; align-items:center}
.art-prose .kg-toggle-card{padding:18px 20px; border-radius:18px; box-shadow:inset 0 0 0 1px var(--line)}
.art-prose .kg-toggle-heading-text{font-family:var(--f-display); font-size:1.15rem; font-weight:600}
.art-prose .kg-toggle-card-icon{display:none}
.art-prose .kg-toggle-content{margin-top:10px}
.art-prose .kg-signup-card{display:none}   /* Ghost's own sign-up box does not work outside Ghost; the newsletter band below does the job */
/* a note shown only on the preview pages built from sample articles */
.bl-sample{position:fixed; left:50%; bottom:14px; z-index:60; transform:translateX(-50%); padding:9px 14px; border-radius:999px; background:var(--ink); color:var(--ww); font-size:13px; font-weight:600; white-space:nowrap; box-shadow:0 10px 30px -12px rgba(36,29,25,.5)}