/* Inosc site: shared look for every page.
   Brand: the app's cream paper, deep green ink, Lora. Text is always ink or green, never grey. */

:root{
  --paper:#F6F0E4;
  --paper-2:#EEE5D2;
  --card:#FBF7EF;
  --ink:#232B23;
  --green:#2F7A4D;
  --green-deep:#235E3B;
  --on-green:#FBF7EF;
  --soil:#6B4A2B;
  --line:#DCD1BA;
  --mark:#CFE6C6;
  --shadow:0 1px 2px rgba(35,43,35,.06), 0 12px 32px rgba(35,43,35,.10);
  --shadow-lg:0 2px 4px rgba(35,43,35,.06), 0 28px 64px rgba(35,43,35,.18);
  --radius:18px;
  --measure:40rem;
  --gutter:clamp(1.1rem, 4vw, 2rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .33  0 0 0 0 .2  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14130F; --paper-2:#1C1A15; --card:#222019; --ink:#EFE9DC;
    --green:#8BCB9F; --green-deep:#A9DDB9; --on-green:#14130F; --soil:#D2A274;
    --line:#35311F; --mark:rgba(139,203,159,.28);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
    --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 28px 64px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#14130F; --paper-2:#1C1A15; --card:#222019; --ink:#EFE9DC;
  --green:#8BCB9F; --green-deep:#A9DDB9; --on-green:#14130F; --soil:#D2A274;
  --line:#35311F; --mark:rgba(139,203,159,.28);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 28px 64px rgba(0,0,0,.5);
  color-scheme:dark;
}
/* Older pages still name --ink-soft; it is ink now, so nothing reads grey. */
:root{ --ink-soft:var(--ink); --rule:var(--line); --paper-deep:var(--paper-2); }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem}
body{
  margin:0; background:var(--paper); background-image:var(--grain); color:var(--ink);
  font-family:Lora, Georgia, 'Times New Roman', serif;
  font-size:1.0625rem; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--green); text-underline-offset:.18em; text-decoration-thickness:.07em}
a:hover{color:var(--green-deep)}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:6px}
p{margin:0 0 1.05rem}
strong,b{font-weight:600}

.wrap{width:min(100% - 2*var(--gutter), 72rem); margin-inline:auto}
.narrow{width:min(100% - 2*var(--gutter), var(--measure)); margin-inline:auto}

/* ── Top bar ───────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:50;
  padding-top:env(safe-area-inset-top, 0px);
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.topbar.scrolled{
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.topbar .wrap{display:flex; align-items:center; gap:1rem; height:4.25rem}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--ink); text-decoration:none; font-weight:600; font-size:1.3rem; letter-spacing:.01em}
.brand img{width:2.1rem; height:2.1rem; border-radius:.6rem; box-shadow:0 1px 3px rgba(35,43,35,.2)}
.brand:hover{color:var(--ink)}
.topnav{display:flex; align-items:center; gap:1.4rem; margin-left:auto}
.topnav a{color:var(--ink); text-decoration:none; font-size:.98rem; position:relative; padding:.4rem 0}
.topnav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:.15rem; height:1.5px; background:var(--green);
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.topnav a:not(.btn):hover::after{transform:scaleX(1)}
.topnav .hide-sm{display:none}
@media (min-width:760px){ .topnav .hide-sm{display:inline-block} }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:600;
  background:var(--green); color:var(--on-green); border-radius:999px;
  padding:.72rem 1.25rem; min-height:44px; font-size:1rem; line-height:1.2;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 6px 16px rgba(47,122,77,.28);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.btn:hover{color:var(--on-green); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 10px 24px rgba(47,122,77,.34)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.small{padding:.5rem 1rem; font-size:.94rem; min-height:40px}
.btn svg{width:1.15rem; height:1.15rem; flex:none}
.btn .two{display:flex; flex-direction:column; align-items:flex-start}
.btn .two small{font-weight:500; font-size:.78rem; letter-spacing:.02em}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent)}

/* ── Small type helpers ────────────────────────────────────────────────── */
.eyebrow{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--green); margin:0 0 .9rem;
}
.mark-text{background:linear-gradient(var(--mark), var(--mark)) no-repeat 0 85% / 100% .55em; padding:0 .1em}

/* ── Reveal on scroll (only once JS is running; without it everything simply shows) ── */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .7s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.js .reveal.d1{transition-delay:.08s} .js .reveal.d2{transition-delay:.16s} .js .reveal.d3{transition-delay:.24s} .js .reveal.d4{transition-delay:.32s}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-foot{margin-top:5rem; border-top:1px solid var(--line); padding:3rem 0 calc(3rem + env(safe-area-inset-bottom, 0px))}
.site-foot .wrap{display:grid; gap:1.6rem}
.site-foot .brand{font-size:1.15rem}
.site-foot nav{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}
.site-foot nav a{color:var(--ink); text-decoration:none; padding:.3rem 0}
.site-foot nav a:hover{color:var(--green)}
.fine{font-size:.9rem; margin:0}
@media (min-width:760px){ .site-foot .wrap{grid-template-columns:1fr auto; align-items:center} .site-foot .fine{grid-column:1 / -1} }

/* ── Document pages: privacy, terms, support ───────────────────────────── */
.progress{position:fixed; left:0; top:0; height:3px; width:100%; z-index:55; background:var(--green); transform-origin:0 50%; transform:scaleX(0)}

.page-hero{position:relative; padding:3.2rem 0 2.4rem}
.page-hero .wrap{display:grid; gap:1.6rem; align-items:center}
.page-hero h1{font-size:clamp(2.3rem, 7vw, 3.6rem); line-height:1.05; letter-spacing:-.02em; font-weight:600; margin:0 0 .7rem; text-wrap:balance}
.page-hero .updated{font-style:italic; color:var(--green); margin:0; font-size:1rem}
.page-hero .lede{font-size:1.15rem; max-width:34rem; margin:.9rem 0 0}
.page-hero .art{display:none}
@media (min-width:860px){
  .page-hero .wrap{grid-template-columns:1fr 15rem}
  .page-hero .art{display:block; width:15rem; aspect-ratio:1; border-radius:2.4rem; overflow:hidden; box-shadow:var(--shadow-lg); transform:rotate(3deg); animation:sway 9s ease-in-out infinite}
  .page-hero .art img{width:100%; height:100%; object-fit:cover}
}
@keyframes sway{0%,100%{transform:rotate(3deg) translateY(0)} 50%{transform:rotate(1deg) translateY(-8px)}}

.doc{display:block; padding-bottom:2rem}
.toc{display:none}
@media (min-width:1000px){
  .doc{display:grid; grid-template-columns:14rem minmax(0, 1fr); gap:4rem; align-items:start}
  .toc{display:block; position:sticky; top:6rem; font-size:.92rem; max-height:calc(100vh - 8rem); overflow:auto; padding-right:.5rem}
  .toc p{margin:0 0 .8rem}
  .toc ol{list-style:none; margin:0; padding:0; border-left:1.5px solid var(--line)}
  .toc a{display:block; color:var(--ink); text-decoration:none; padding:.32rem 0 .32rem 1rem; margin-left:-1.5px; border-left:1.5px solid transparent; transition:color .2s, border-color .2s}
  .toc a:hover{color:var(--green)}
  .toc a.on{color:var(--green); border-left-color:var(--green); font-weight:600}
}

.prose{max-width:var(--measure)}
.prose h2{font-size:1.55rem; line-height:1.25; font-weight:600; letter-spacing:-.01em; margin:3.2rem 0 1rem; scroll-margin-top:6rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem; font-weight:600; margin:1.8rem 0 .5rem}
.prose ul{margin:0 0 1.2rem; padding-left:0; list-style:none}
.prose li{position:relative; padding-left:1.5rem; margin:0 0 .55rem}
.prose li::before{content:""; position:absolute; left:.2rem; top:.62em; width:.5rem; height:.5rem; border-radius:50% 0 50% 0; background:var(--green); transform:rotate(-45deg)}
.prose .rule, hr.rule{height:1px; background:var(--line); border:0; margin:3rem 0 0}

.note{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.4rem 4.1rem; margin:1.8rem 0 2.4rem; box-shadow:var(--shadow);
}
.note::before{
  content:""; position:absolute; left:1.4rem; top:1.6rem; width:1.7rem; height:1.7rem;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4C11 4 5 8.5 5 15c0 1.6.4 3 1 4.2C7.5 14 11 10.5 15 9c-3.4 2.3-6 5.6-7.4 9.8.9.4 2 .7 3.2.7C17 19.5 20 13 20 4z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4C11 4 5 8.5 5 15c0 1.6.4 3 1 4.2C7.5 14 11 10.5 15 9c-3.4 2.3-6 5.6-7.4 9.8.9.4 2 .7 3.2.7C17 19.5 20 13 20 4z'/></svg>") center/contain no-repeat;
}
.note p:last-child{margin-bottom:0}

/* The privacy table becomes a stack of cards; the markup stays a table. */
.scroll{overflow-x:visible}
.prose table{width:100%; border-collapse:separate; border-spacing:0; margin:0 0 1.6rem; font-size:.98rem; display:block}
.prose tbody{display:grid; gap:.75rem}
.prose tr{display:grid; gap:.35rem; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1rem 1.2rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.prose tr:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.prose th,.prose td{display:block; padding:0; border:0; text-align:left}
.prose th{font-weight:600; color:var(--green); font-size:1.02rem}
@media (min-width:700px){ .prose tr{grid-template-columns:12rem 1fr; gap:1.4rem; padding:1.15rem 1.4rem} }

/* Support: questions open and close in place. */
.faq{display:grid; gap:.7rem; margin:1rem 0 0}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:box-shadow .25s var(--ease)}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:1rem; padding:1.05rem 1.25rem; min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0; font-size:1.06rem; font-weight:600; flex:1}
.faq summary .plus{flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--paper-2); position:relative; transition:transform .35s var(--spring), background-color .2s}
.faq summary .plus::before,.faq summary .plus::after{content:""; position:absolute; left:50%; top:50%; width:.7rem; height:1.5px; background:var(--green); transform:translate(-50%,-50%)}
.faq summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .plus{transform:rotate(45deg); background:var(--mark)}
.faq .answer{padding:0 1.25rem 1.15rem}
.faq .answer p:last-child{margin:0}
.js .faq .answer{animation:open .35s var(--ease)}
@keyframes open{from{opacity:0; transform:translateY(-6px)}}

/* Simple pages: invite, confirm, confirmed */
header.wrap{padding:1.6rem 0 0}
.mark{font-size:1.4rem; letter-spacing:.01em; font-weight:600; margin:0}
.mark a{color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.6rem}
.mark a::before{content:""; width:2rem; height:2rem; border-radius:.55rem; background:url(/assets/mark-small.webp) center/cover; box-shadow:0 1px 3px rgba(35,43,35,.2)}
main.wrap{width:min(100% - 2*var(--gutter), var(--measure))}
main.wrap h1{font-size:clamp(2rem, 6vw, 2.8rem); line-height:1.12; letter-spacing:-.015em; font-weight:600; text-wrap:balance}
footer.wrap{width:min(100% - 2*var(--gutter), var(--measure)); padding:2.6rem 0 4rem; font-size:.94rem}
footer.wrap nav{display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; margin:0 0 1rem}
footer.wrap nav a{color:var(--ink); text-decoration:none}
footer.wrap nav a:hover{color:var(--green)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js .reveal{opacity:1; transform:none}
}

@keyframes fadeup{from{opacity:0; transform:translateY(16px)}}
.page-hero .hero-words{animation:fadeup .8s var(--ease) both}
.page-hero .art{animation:fadeup .9s .15s var(--ease) both, sway 9s 1s ease-in-out infinite}