/* ============================================================================
   Rubydoo — public site skin.
   The homepage's paper look, lifted out so every public page shares one set of
   tokens, one piece of chrome and one footer. Page-specific layout stays in
   each page's own <style>; anything that decides what the SITE looks like
   lives here. Paired with public.js (mobile menu, auth swap, current page).

   Fonts: Instrument Serif (display) + Karla (body) — every public page loads
   the same Google Fonts link.
   ========================================================================== */

:root {
  --paper:#ffffff;
  --ink:#000000;
  --ink-2:#3a3a3a;
  --ink-3:#767676;
  --rule:#e3e3e3;
  --font-display:'Instrument Serif', Georgia, serif;
  --font-body:'Karla', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { background:var(--paper); color:var(--ink); font-family:var(--font-body);
       -webkit-font-smoothing:antialiased; }
::selection { background:var(--ink); color:var(--paper); }

/* The one horizontal measure the whole site is set to. */
.gutter { padding-left:clamp(20px,5vw,64px); padding-right:clamp(20px,5vw,64px); }

/* --- Fixed chrome ---------------------------------------------------------
   Brand top-left, links top-right, no bar: the page shows through. Identical
   on every public page — the same five items in the same order, and the brand
   is the way home. */
.rd-brand{position:fixed;top:18px;left:22px;z-index:1000;display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);font-family:var(--font-display);font-size:1.12rem;letter-spacing:.02em}
.rd-brand img{width:34px;height:34px;border-radius:50%}
.rd-links{position:fixed;top:20px;right:22px;z-index:1000;display:flex;gap:20px;align-items:center;
  font-family:var(--font-body);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.rd-links a{color:var(--ink-2);text-decoration:none}
.rd-links a:hover{color:var(--ink)}
.rd-links a[aria-current="page"]{color:var(--ink)}
.rd-links a.go{color:var(--ink);border:1px solid var(--ink);padding:7px 14px;border-radius:2px}
.rd-links a.go:hover{background:var(--ink);color:var(--paper)}
.rd-menu{display:none;position:fixed;top:18px;right:16px;z-index:1001;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;background:rgba(255,255,255,.86);border:1px solid var(--rule);border-radius:6px;cursor:pointer;padding:0}
.rd-menu span{display:block;height:2px;width:20px;background:var(--ink);transition:transform .3s,opacity .2s;margin:0 auto}
.rd-menu.m-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.rd-menu.m-open span:nth-child(2){opacity:0}
.rd-menu.m-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:640px){
  .rd-menu{display:flex}
  .rd-links{display:none}
  .rd-links.m-open{display:flex;flex-direction:column;align-items:stretch;gap:0;top:64px;right:12px;
    background:var(--paper);border:1px solid var(--rule);border-radius:10px;min-width:210px;overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.12)}
  .rd-links.m-open a{padding:14px 18px;border-top:1px solid var(--rule)}
  .rd-links.m-open a:first-child{border-top:none}
  .rd-links.m-open a.go{border:none;border-radius:0;text-align:left}
}

/* --- Type ---------------------------------------------------------------- */
.eyebrow{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}

/* The opener every interior page starts with — the homepage hero's head, one
   size down, so an interior page is recognisably the same family. */
.page-head{padding-top:clamp(96px,14vh,140px);max-width:1320px}
.page-head h1{font-family:var(--font-display);font-weight:400;letter-spacing:-.012em;
  font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.05;margin:0 0 18px}
.page-head .lede{max-width:660px;font-size:1.02rem;line-height:1.62;font-weight:300;color:var(--ink-2);margin:0}
.page-head .lede a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.page-head .lede a:hover{border-bottom-color:var(--ink)}

/* A rule-separated band, the way the homepage's closing pitch reads. */
.section{border-top:1px solid var(--rule);padding-top:clamp(48px,8vh,88px);padding-bottom:clamp(52px,9vh,104px)}
.section h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,4vw,2.6rem);
  line-height:1.1;letter-spacing:-.01em;margin:0 0 18px;max-width:760px}
.section p{color:var(--ink-2);font-size:1.02rem;line-height:1.65;font-weight:300;margin:0 0 14px;max-width:640px}

/* --- Controls ------------------------------------------------------------- */
.cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.cta a,.cta button{text-decoration:none;padding:13px 24px;border-radius:2px;border:1px solid var(--ink);
  font-family:var(--font-body);font-size:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.cta a.primary,.cta button.primary{background:var(--ink);color:var(--paper)}
.cta a.ghost,.cta button.ghost{color:var(--ink);background:transparent}
.cta a.ghost:hover,.cta button.ghost:hover{background:var(--ink);color:var(--paper)}

.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--rule);background:transparent;color:var(--ink-2);
  font-family:var(--font-body);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  padding:9px 15px;border-radius:2px;cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.badge{display:inline-block;margin-left:8px;padding:3px 7px;border-radius:2px;
  background:var(--ink);color:var(--paper);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;vertical-align:baseline}
.badge--inline{margin-left:2px;font-size:.5rem;position:relative;top:-1px}
.badge--quiet{background:transparent;color:var(--ink-3);border:1px solid var(--rule)}

/* --- Tiles: the homepage card, squared off for a grid ---------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:clamp(24px,3.4vw,38px) 0;margin-top:clamp(28px,5vh,46px)}
.tile{border-left:1px solid var(--rule);padding:0 28px 0 24px}
.tile .k{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.tile h3{font-family:var(--font-display);font-weight:400;font-size:1.32rem;line-height:1.16;
  letter-spacing:-.005em;margin:0 0 10px;color:var(--ink)}
.tile p{color:var(--ink-2);font-weight:300;font-size:.92rem;line-height:1.62;margin:0}

/* --- Long-form documents (privacy, terms, the consent script) -------------- */
/* padding-top/bottom as longhand: a `padding` shorthand here would reset the
   horizontal padding .gutter puts on the same element. */
.doc{max-width:760px;margin:0 auto;
  padding-top:clamp(104px,15vh,146px);padding-bottom:clamp(56px,9vh,96px)}
.doc h1{font-family:var(--font-display);font-weight:400;letter-spacing:-.012em;
  font-size:clamp(2.1rem,4.8vw,3rem);line-height:1.06;margin:0 0 12px}
.doc .updated{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 clamp(32px,5vh,48px);padding-bottom:22px;border-bottom:1px solid var(--rule)}
.doc h2{font-family:var(--font-display);font-weight:400;font-size:1.42rem;letter-spacing:-.005em;
  margin:38px 0 12px;color:var(--ink)}
.doc p,.doc li{color:var(--ink-2);font-weight:300;font-size:1rem;line-height:1.72}
.doc p{margin:0 0 14px}
.doc ul{margin:10px 0 18px;padding-left:20px}
.doc li{margin-bottom:8px}
.doc li::marker{color:var(--ink-3)}
.doc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.doc a:hover{border-bottom-color:var(--ink)}
.doc strong{color:var(--ink);font-weight:500}
.doc .callout{border-left:2px solid var(--ink);padding:2px 0 2px 22px;margin:24px 0}
.doc .callout p:last-child{margin-bottom:0}
.doc .script{border:1px solid var(--rule);padding:24px 26px;margin:20px 0;
  font-family:var(--font-display);font-weight:400;font-size:1.16rem;line-height:1.58;color:var(--ink)}

/* --- Standalone card pages (sign-up and friends) --------------------------- */
/* Leaves room for the footer, so a card page doesn't scroll by a hair. */
.sheet{min-height:calc(100svh - 96px);display:flex;align-items:center;justify-content:center;
  padding:clamp(96px,14vh,132px) 24px clamp(48px,8vh,80px)}
.sheet-card{width:100%;max-width:560px;border:1px solid var(--rule);padding:clamp(28px,4vw,44px)}
.sheet-card h1{font-family:var(--font-display);font-weight:400;letter-spacing:-.008em;
  font-size:clamp(1.7rem,3.4vw,2.15rem);line-height:1.1;margin:0 0 10px}
.sheet-card .sub{color:var(--ink-2);font-weight:300;font-size:1rem;line-height:1.62;margin:0 0 28px}
.field{margin-bottom:22px}
.field label{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px}
.field input{width:100%;padding:13px 14px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1rem;outline:none}
.field input:focus{border-color:var(--ink)}
.field .hint{color:var(--ink-3);font-size:.82rem;font-weight:300;line-height:1.5;margin-top:8px}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.check input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--ink)}
.check label{color:var(--ink-2);font-weight:300;font-size:.92rem;line-height:1.58}
.check a,.fine a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.check a:hover,.fine a:hover{border-bottom-color:var(--ink)}
.fine{color:var(--ink-3);font-weight:300;font-size:.82rem;line-height:1.55;margin:8px 0 26px}
.block-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 24px;border-radius:2px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:var(--font-body);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:opacity .18s}
.block-btn:hover:not(:disabled){opacity:.84}
.block-btn:disabled{opacity:.3;cursor:not-allowed}
.sheet-foot{text-align:center;margin-top:20px;color:var(--ink-3);font-weight:300;font-size:.9rem}
.sheet-foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.status{margin-top:14px;font-size:.85rem;font-weight:300;color:var(--ink-3);min-height:1em;text-align:center}

/* --- Footer --------------------------------------------------------------- */
.rd-foot{border-top:1px solid var(--rule);padding-top:26px;padding-bottom:34px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.rd-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.rd-foot a{color:var(--ink-3);text-decoration:none}
.rd-foot a:hover{color:var(--ink)}

/* --- Demo modal (mounted by PricingChrome on /pricing) --------------------- */
.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.45);
  display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}
.modal-overlay.open{display:flex;opacity:1}
.modal-box{position:relative;width:100%;max-width:460px;margin:24px;
  background:var(--paper);border:1px solid var(--ink);padding:34px}
.modal-box h2{font-family:var(--font-display);font-weight:400;font-size:1.5rem;letter-spacing:-.008em;margin:0 0 6px}
.modal-box .modal-sub{color:var(--ink-2);font-weight:300;font-size:.95rem;line-height:1.55;margin:0 0 24px}
.modal-close{display:block;width:100%;margin-top:10px;background:none;border:none;color:var(--ink-3);
  cursor:pointer;font:inherit;font-size:.9rem;padding:10px 8px}
.modal-close:hover{color:var(--ink)}
.modal-field{margin-bottom:16px}
.modal-field label{display:block;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px}
.modal-field .optional{letter-spacing:.12em}
.modal-field input,.modal-field textarea{width:100%;padding:11px 13px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:.95rem;outline:none}
.modal-field input:focus,.modal-field textarea:focus{border-color:var(--ink)}
.modal-submit{width:100%;margin-top:8px;padding:14px;border-radius:2px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);font-family:var(--font-body);font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:opacity .18s}
.modal-submit:hover{opacity:.84}
.modal-submit:disabled{opacity:.35;cursor:not-allowed}
.modal-msg{display:none;margin-top:14px;padding:11px 13px;border:1px solid var(--rule);
  font-size:.88rem;font-weight:300;text-align:center}
.modal-msg.success,.modal-msg.error{display:block}
.modal-msg.success{border-color:var(--ink);color:var(--ink)}
.modal-msg.error{border-color:var(--ink);color:var(--ink);border-style:dashed}