/* Rolekeep site. Studio Board: black stage, canvas sheet, ink, one yellow accent. */
:root{
  --stage:#000;
  --canvas:#f8f8f4;
  --sheet:#fff;
  --ink:#111;
  --muted:#5c5c5c;
  --rule:rgba(0,0,0,.16);
  --focus:#151515;
  --on-focus:#fff;
  --yellow:#ffe52c;
  --blue:#bcd5ff;
  --coral:#ff8e84;
  --frag-ink:#111;
  --stage-ink:#f5f4ef;
  --stage-muted:#a3a39c;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --canvas:#151515;
    --sheet:#232323;
    --ink:#f5f4ef;
    --muted:#d0d0c8;
    --rule:rgba(255,255,255,.22);
    --focus:#2b2b2b;
    --on-focus:#f5f4ef;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--stage);
  color:var(--ink);
  font:17px/1.55 var(--sans);
  font-feature-settings:"kern";
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:#111;padding:8px 12px;font:600 14px var(--mono);text-decoration:none}
.skip:focus{left:8px;z-index:9}

/* Stage chrome */
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.wrap{padding:0 24px}}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:18px;color:var(--stage-ink)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--stage-ink);font-weight:800;font-size:19px;letter-spacing:-.01em}
.mark{display:inline-flex;align-items:center;justify-content:center;background:var(--yellow);color:#111;font:900 15px/1 var(--mono);padding:8px 8px 7px;border-radius:2px;letter-spacing:.02em}
.top nav{min-width:0}
.nav{display:flex;gap:6px 18px;flex-wrap:wrap;justify-content:flex-end;margin:0;padding:0;list-style:none}
@media (max-width:560px){.nav li:nth-child(-n+2){display:none}}
.nav a{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stage-muted);text-decoration:none;padding:10px 0}
.nav a:hover,.nav a:focus-visible{color:var(--stage-ink)}
.nav a[aria-current=page]{color:var(--stage-ink);border-bottom:2px solid var(--yellow)}

.foot{color:var(--stage-muted);padding-top:40px;padding-bottom:56px;font-size:14px}
.foot ul{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 18px;padding:0;list-style:none}
.foot a{color:var(--stage-ink);text-decoration:none;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:inline-block;padding:8px 0}
.foot a:hover,.foot a:focus-visible{text-decoration:underline}
.foot p{margin:0}

/* Canvas sheets */
.sheet{background:var(--canvas);color:var(--ink);border-radius:2px;padding:28px 20px 32px;margin:0 0 12px}
@media (min-width:640px){.sheet{padding:40px 36px 44px}}
@media (min-width:900px){.sheet{padding:56px 56px 60px}}
.eyebrow{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.eyebrow .mark{font-size:14px}
.stamp{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);padding:6px 8px;border-radius:2px}

h1,h2,h3{font-family:var(--sans);letter-spacing:-.02em;line-height:1.08;margin:0;overflow-wrap:break-word}
h1{font-size:clamp(34px,5vw,56px);font-weight:900;max-width:18ch}
h2{font-size:clamp(28px,4vw,40px);font-weight:800;max-width:20ch}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
.lede{font-size:clamp(18px,2.2vw,22px);line-height:1.45;color:var(--muted);max-width:52ch;margin-top:18px}
.copy{max-width:56ch}
.copy p+p{margin-top:12px}
ul.plain{list-style:none;margin:0;padding:0}
strong{font-weight:700}

/* Actions */
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--focus);color:var(--on-focus);border:1px solid var(--rule);font-weight:700;font-size:17px;padding:16px 20px;border-radius:2px;text-decoration:none;min-height:44px}
.cta a{color:inherit}
.cta .stamp{color:var(--yellow);border-color:rgba(255,255,255,.28)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:28px}
.actions .note{font:600 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Hero */
.hero{display:grid;gap:36px;align-items:center}
@media (min-width:820px){.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px}}
.hero .device{margin:0 auto}

/* Device frame: a simple rounded rectangle, no fake hardware */
.device{margin:0;width:min(300px,84vw);padding:9px;background:#111;border:1px solid #333;border-radius:40px;box-shadow:0 0 0 1px rgba(0,0,0,.4) inset}
.device img{border-radius:32px;width:100%;height:auto;background:#000}
.device.small{width:min(240px,70vw);border-radius:34px}
.device.small img{border-radius:26px}
.devices{display:flex;gap:16px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.devices .device.small{width:min(240px,calc(50% - 8px))}
@media (max-width:479px){.devices .device.small{width:min(240px,70vw)}}

/* Feature rows */
.row{display:grid;gap:32px;align-items:center}
@media (min-width:820px){
  .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .row.flip .visual{order:-1}
}
.row .visual{display:flex;justify-content:center}
.row h2{margin-top:12px}
.row .copy{margin-top:18px}
.row .num{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Fragments: the same meanings as in the app */
ul.frags{display:grid;gap:8px;margin:22px 0 0;padding:0;list-style:none;max-width:52ch}
.frag{padding:12px 14px;border-radius:2px;color:var(--frag-ink);font-size:15px;line-height:1.4}
.frag .k{display:block;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;opacity:.75}
.frag.y{background:var(--yellow)}
.frag.b{background:var(--blue)}
.frag.c{background:var(--coral)}
.frag.n{background:var(--sheet);border:1px solid var(--rule);color:var(--ink)}

/* Focus block (one per page) */
.focus{background:var(--focus);color:var(--on-focus);border-radius:2px;padding:32px 20px 36px;margin:0 0 12px}
@media (min-width:640px){.focus{padding:48px 36px 52px}}
@media (min-width:900px){.focus{padding:64px 56px 68px}}
.focus .eyebrow{color:var(--stage-muted)}
.focus .eyebrow .stamp{color:var(--yellow);border-color:rgba(255,255,255,.28)}
.focus h2{color:var(--on-focus);max-width:22ch}
.focus .lede{color:var(--stage-ink);opacity:.9}
.focus .grid{display:grid;gap:20px 40px;margin-top:32px}
@media (min-width:640px){.focus .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.focus .grid p{font-size:16px;line-height:1.5;color:var(--stage-ink)}
.focus .grid h3{color:var(--yellow);font-size:17px;margin-bottom:6px}
.focus a{color:var(--stage-ink)}

/* Pricing */
.tiers{display:grid;gap:12px;margin-top:32px}
@media (min-width:720px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tier{border:1px solid var(--rule);border-radius:2px;padding:22px 20px 24px;background:var(--sheet);display:flex;flex-direction:column;gap:8px}
.tier.lead{background:var(--yellow);color:#111;border-color:transparent}
.tier .k{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:inherit;opacity:.75}
.tier .price{font-size:34px;font-weight:900;letter-spacing:-.02em;line-height:1.05;margin-top:6px}
.tier .price small{font:600 13px var(--mono);letter-spacing:.06em;margin-left:6px}
.tier p{font-size:15px;line-height:1.45}
.tier ul{margin:6px 0 0;padding-left:18px;font-size:15px;line-height:1.45}
.tier li+li{margin-top:4px}
.fine{margin-top:22px;font-size:14px;line-height:1.5;color:var(--muted);max-width:70ch}

/* FAQ, native disclosure widgets, no script */
.faq{margin-top:28px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:700;font-size:18px;line-height:1.3;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--mono);color:var(--muted);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--muted)}
.faq .a{padding:0 0 20px;max-width:60ch;color:var(--ink)}
.faq .a p+p{margin-top:10px}

/* Documents (privacy, terms, support, delete) */
.doc h1{font-size:clamp(32px,5vw,48px);max-width:24ch}
.doc h2{font-size:22px;margin:36px 0 10px;max-width:none}
.meta{margin:-8px 0 16px}
.doc p,.doc li{max-width:66ch}
.doc p+p{margin-top:12px}
.doc ul{padding-left:22px;margin:8px 0 0}
.doc li+li{margin-top:6px}
.doc .lede{margin-top:16px}
.doc a{text-decoration-thickness:1px;text-underline-offset:3px}

/* Misc */
.center{text-align:center}
.center h1,.center .lede{margin-left:auto;margin-right:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .faq summary,.nav a,.foot a{transition:color .15s ease}
}
@media print{
  body{background:#fff;color:#000}
  .top,.foot,.device{display:none}
  .sheet{padding:0;margin:0}
}
/* Guide pages */
.guide .frags{margin:24px 0 0;padding:0}
.guide .frags li+li{margin-top:0}
.guide .frag{max-width:none}
.guide h3{margin:0 0 12px}
.guide h3 .k{display:block;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.tpl{border:1px solid var(--rule);border-radius:2px;padding:20px;margin:16px 0 0}
.tpl .subj{max-width:none;font-weight:700;border-bottom:1px solid var(--rule);padding-bottom:12px;margin:0 0 12px}
.tpl .subj span{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:10px}
.tpl .body p+p{margin-top:10px}
.guide-cta{margin-top:12px}
.guide-cta h2{color:var(--on-focus);font-size:clamp(28px,4vw,40px);margin:16px 0 0}
.guide-cta .lede{color:var(--stage-muted);max-width:52ch;margin-top:16px}
.cta-link{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:var(--yellow);font-weight:700;text-underline-offset:4px}