/*
 * The topic landing pages (/memory, /workspace). The tokens, top bar, page sheet,
 * cards and footer are the home page's own (index.html, inline there), copied
 * unchanged; the layout below them is for a longer page: a hero like the home
 * page's, then sections on the dark ground.
 */
/* Tokens are wunel's own (web/src/styles.css, "Atelier"). */
:root{
  --paper:#FBF9F5; --paper-raised:#FFFFFF;
  --ink:#1D1A17; --ink-soft:#544E47; --ink-quiet:#6F675D; --doc-ink:#2a2621;
  --wunel:#7B2D3A; --wunel-dark:#6c2733; --clay:#B08046;
  --hair:#E7E1D7; --hair-strong:#DAD2C5; --agent-wash:#FBF6EE;
  --serif:'Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,Cambria,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  /* text on the dark ground (#1a0f0a) */
  --on-dark:#F4EFE7;     /* 16:1 */
  --on-dark-2:#D8CEC0;   /* 11:1 */
  --on-dark-3:#AFA395;   /*  7:1 */
  --rule-dark:rgba(244,239,231,.14);
  /* one spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* type scale: 11 / 12.5 / 14 / 15 / 20 / 22 / h1 */
  --t1:11px; --t2:12.5px; --t3:14px; --t4:15px; --t5:20px; --t6:22px;
  --sheet-shadow:0 1px 2px rgba(0,0,0,.25), 0 12px 32px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:#1a0f0a; color:var(--on-dark-2); font-family:var(--sans); font-size:var(--t3); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
::selection{background:rgba(176,128,70,.35)}
a{color:inherit}
:focus-visible{outline:2px solid var(--on-dark); outline-offset:3px; border-radius:4px}
.on-paper :focus-visible, .topbar :focus-visible{outline-color:var(--wunel)}

#bg{position:fixed; inset:0; z-index:0; pointer-events:none}
.scrim{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(75% 95% at 22% 50%, rgba(20,11,7,.6), rgba(20,11,7,0) 72%)}

/* ---- top bar: no bar, the logo sits on the hero; links in one light pill ---- */
.topbar{position:relative; z-index:3; height:76px}
.topbar-in{max-width:1320px; height:100%; margin:0 auto; padding:0 var(--s7);
  display:flex; align-items:center; justify-content:space-between}
.brand{font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:.2px; color:var(--on-dark);
  line-height:1; text-decoration:none; text-shadow:0 1px 12px rgba(0,0,0,.25)}
.brand::after{content:"."; color:var(--clay)}
.topnav{display:flex; align-items:center; gap:var(--s2); font-size:var(--t3);
  padding:5px; background:rgba(251,249,245,.94); border-radius:999px; box-shadow:0 2px 14px rgba(0,0,0,.2)}
.topnav a{text-decoration:none; color:var(--ink-soft); padding:7px 14px; border-radius:999px; line-height:1.2}
.topnav a:hover{color:var(--ink); background:rgba(29,26,23,.06)}
.topnav a.signin-link{background:var(--wunel); color:#fff; font-weight:600}
.topnav a.signin-link:hover{background:var(--wunel-dark); color:#fff}
.topnav a:focus-visible{outline:2px solid var(--clay); outline-offset:2px}

.page{position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:0 var(--s7)}

/* ---- hero: headline across, the sub and an example page left, the cards right ---- */
main.hero{display:grid; grid-template-columns:minmax(0,1fr) 400px; column-gap:var(--s8);
  grid-template-areas:"h1 h1" "lede side" "demo side"; grid-template-rows:auto auto 1fr;
  align-items:start; padding:clamp(40px,9vh,112px) 0 var(--s8)}
.hero-h{grid-area:h1} .side{grid-area:side; display:grid; gap:var(--s4); align-content:start}
.lede{grid-area:lede; margin:0 0 var(--s6); max-width:38ch; font-size:var(--t5); line-height:1.45; color:var(--on-dark)}
.demo{grid-area:demo}
h1{margin:0 0 var(--s5); font-family:var(--serif); font-weight:600; color:var(--on-dark);
  font-size:clamp(44px, 3.6vw + 8px, 72px); line-height:1.08; letter-spacing:-.01em; text-wrap:balance}
h1 .ln{display:block}
h1 em{font-style:italic; font-weight:400; color:#E9D9C1}


/* A wunel page, drawn with the editor's own .prov-block metrics. */
.sheet{margin:0; background:var(--paper); color:var(--doc-ink); border-radius:8px; box-shadow:var(--sheet-shadow);
  padding:var(--s4) var(--s5) var(--s4) var(--s3); max-width:520px}
.sheet-meta{margin:0 0 2px 40px; font-size:var(--t2); color:var(--ink-quiet)}
.sheet-title{margin:0 0 var(--s2) 40px; font-family:var(--serif); font-weight:600; font-size:var(--t5); line-height:1.18;
  letter-spacing:-.01em; color:var(--ink)}
.prov{position:relative; margin:0; padding-left:40px; border-radius:4px; color:var(--doc-ink);
  font-family:var(--serif); font-size:var(--t4); line-height:1.6;
  background-image:linear-gradient(var(--prov-color),var(--prov-color)); background-repeat:no-repeat;
  background-position:left 0 top .5em; background-size:3px 18px}
.prov + .prov{margin-top:.35em}
.prov::before{content:attr(data-initials); position:absolute; left:10px; top:.5em;
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.3px; line-height:1.3; color:var(--ink-quiet);
  user-select:none; pointer-events:none}
.prov.human{--prov-color:var(--wunel)}
.prov.guest{--prov-color:#7C8A72}
.prov.agent{--prov-color:var(--clay);
  background-image:linear-gradient(var(--prov-color),var(--prov-color)), linear-gradient(90deg,var(--agent-wash),rgba(251,246,238,0));
  background-position:left 0 top .5em, 0 0; background-size:3px 18px, 100% 100%}
/* the editor's hover tooltip (.prov-block[data-tip]::after), shown open; the block keeps room above it */
.prov.has-tip{margin-top:2.2em}
.prov.has-tip::after{content:attr(data-tip); position:absolute; left:4px; top:-2.1em; z-index:2;
  background:var(--ink); color:#F4EFE7; font-family:var(--sans); font-size:var(--t1); line-height:1.3;
  padding:5px 9px; border-radius:8px; white-space:nowrap; box-shadow:0 10px 26px rgba(29,26,23,.22)}

.chat{display:flex; flex-direction:column; gap:var(--s3); max-width:520px}
.bubble{align-self:flex-end; font-size:var(--t3); line-height:1.4; color:var(--ink); background:rgba(244,239,231,.9);
  padding:7px 14px; border-radius:18px 18px 4px 18px}

/* ---- sign in (quiet outline on dark) ---- */
.signin{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap}
.btn-outline{display:inline-flex; align-items:center; height:40px; padding:0 var(--s5); border-radius:8px;
  background:transparent; color:var(--on-dark); border:1px solid rgba(244,239,231,.35);
  font-weight:600; font-size:var(--t3); text-decoration:none}
.btn-outline:hover{background:rgba(244,239,231,.08); border-color:rgba(244,239,231,.6)}
.note{margin:0; font-size:var(--t3); line-height:1.45; color:var(--on-dark-2); max-width:40ch}

/* ---- connect card, the app's paper card ---- */
.card{background:var(--paper-raised); color:var(--ink); border:1px solid var(--hair); border-radius:12px;
  box-shadow:var(--sheet-shadow); padding:var(--s5)}
.card h2{margin:0 0 var(--s2); font-family:var(--serif); font-weight:600; font-size:var(--t6); line-height:1.2}
.card .sub{margin:0 0 var(--s4); font-size:var(--t3); color:var(--ink-soft)}
.copyrow{display:flex; gap:var(--s2); align-items:stretch}
.copyrow code{flex:1; min-width:0; background:var(--paper); border:1px solid var(--hair-strong); border-radius:8px;
  padding:10px 12px; font-family:var(--mono); font-size:var(--t2); line-height:1.5; color:var(--ink);
  overflow-wrap:anywhere; user-select:all; -webkit-user-select:all}
.primary-btn{flex:none; min-width:88px; font:inherit; font-size:var(--t3); font-weight:600; color:#fff;
  background:var(--wunel); border:1px solid var(--wunel); border-radius:8px; padding:0 var(--s4); cursor:pointer;
  box-shadow:0 1px 2px rgba(123,45,58,.25)}
.primary-btn:hover{background:var(--wunel-dark); border-color:var(--wunel-dark)}
.hint{margin:var(--s3) 0 0; font-size:var(--t3); line-height:1.5; color:var(--ink-soft)}
.other{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--hair)}
.other p{margin:0; flex:1; min-width:0; font-size:var(--t2); line-height:1.5; color:var(--ink-soft)}
.other code{font-family:var(--mono); font-size:var(--t2); color:var(--ink); overflow-wrap:anywhere}
.btn-small{flex:none; font:inherit; font-size:var(--t2); font-weight:600; color:var(--ink-soft); background:var(--paper-raised);
  border:1px solid var(--hair-strong); border-radius:8px; padding:5px 11px; min-width:64px; cursor:pointer}
.btn-small:hover{background:var(--paper); border-color:#BFB3A2; color:var(--ink)}
.btn-small.done{color:var(--wunel); border-color:var(--wunel)}
.guide{display:inline-block; margin-top:var(--s4); font-size:var(--t3); font-weight:600; color:var(--wunel); text-decoration:none}
.guide:hover{color:var(--wunel-dark); text-decoration:underline; text-underline-offset:3px}

/* ---- connect yourself: the second path, a secondary paper button ---- */
.you .sub{margin:0}
.nw{white-space:nowrap}
.you-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s2)}
.you-head h2{margin:0}
.btn-secondary{display:inline-flex; align-items:center; flex:none; height:36px; padding:0 var(--s4); border-radius:8px;
  font-size:var(--t3); font-weight:600; color:var(--ink); background:var(--paper-raised); border:1px solid var(--hair-strong);
  text-decoration:none}
.btn-secondary:hover{background:var(--paper); border-color:#BFB3A2}

/* ---- start free: the first button for a visitor from an ad (html.paid) ---- */
.start{display:none}
html.paid .start{display:block}
html.paid .you{display:none}
.start .sub{margin:0 0 var(--s4)}
.start-btn{display:flex; align-items:center; justify-content:center; height:44px; border-radius:8px;
  background:var(--wunel); color:#fff; border:1px solid var(--wunel); font-weight:600; font-size:var(--t4);
  text-decoration:none; box-shadow:0 1px 2px rgba(123,45,58,.25)}
.start-btn:hover{background:var(--wunel-dark); border-color:var(--wunel-dark)}
.start-btn:focus-visible{outline:2px solid var(--wunel); outline-offset:2px}
/* one main button: the AI path's Copy steps back to a secondary one */
html.paid .agent .primary-btn{background:var(--paper-raised); color:var(--ink); border-color:var(--hair-strong); box-shadow:none}
html.paid .agent .primary-btn:hover{background:var(--paper); border-color:#BFB3A2}

footer{display:flex; justify-content:space-between; align-items:center; gap:var(--s4); height:48px;
  font-size:var(--t2); color:var(--on-dark-3); border-top:1px solid var(--rule-dark)}
footer nav{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5)}
footer a{text-decoration:none}
footer a:hover{color:var(--on-dark); text-decoration:underline; text-underline-offset:3px}

.sr{position:absolute; top:0; left:0; margin:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* the page-level metadata line (frontmatter) above an example page's title */
.sheet-fm{margin:0 0 2px 40px; font-family:var(--mono); font-size:var(--t1); color:var(--ink-quiet)}
.sheet-fm b{font-weight:600; color:var(--wunel)}
.sheet + .sheet{margin-top:var(--s4)}
.demo .sheet{max-width:560px}
.demo-caption{margin:var(--s3) 0 0; font-size:var(--t2); color:var(--on-dark-3); max-width:560px}

/* ---- sections on the dark ground ---- */
.sec{padding:var(--s8) 0; border-top:1px solid var(--rule-dark)}
.sec-in{max-width:1080px}
.sec h2{margin:0 0 var(--s4); font-family:var(--serif); font-weight:600; color:var(--on-dark);
  font-size:clamp(28px, 1.6vw + 14px, 38px); line-height:1.15; letter-spacing:-.005em; text-wrap:balance}
.sec .intro{margin:0 0 var(--s6); max-width:60ch; font-size:var(--t4); line-height:1.55; color:var(--on-dark-2)}
.sec h3{margin:0 0 var(--s2); font-family:var(--serif); font-weight:600; font-size:var(--t5); line-height:1.25; color:var(--on-dark)}
.sec p{font-size:var(--t4); line-height:1.55}

/* the problem: three short statements */
.pains{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); margin:0; padding:0; list-style:none}
.pains li{padding-top:var(--s4); border-top:2px solid var(--clay); font-size:var(--t4); line-height:1.5; color:var(--on-dark-2)}
.pains strong{display:block; margin-bottom:var(--s1); font-family:var(--serif); font-size:var(--t5); font-weight:600; line-height:1.25; color:var(--on-dark)}

/* how it works: three numbered steps */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); margin:0; padding:0; list-style:none; counter-reset:step}
.steps li{counter-increment:step; padding:var(--s5); border:1px solid var(--rule-dark); border-radius:12px; background:rgba(20,11,7,.55)}
.steps li::before{content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  margin-bottom:var(--s3); border-radius:999px; background:var(--clay); color:#1a0f0a; font-weight:700; font-size:var(--t3)}
.steps p{margin:0; color:var(--on-dark-2)}

/* what makes it different: four points */
.points{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s7)}
.point p{margin:0; color:var(--on-dark-2)}
.test{margin:var(--s7) 0 0; padding:var(--s5); max-width:760px; border-left:3px solid var(--clay); border-radius:0 12px 12px 0;
  background:rgba(20,11,7,.55)}
.test h3{font-size:var(--t4); font-family:var(--sans); letter-spacing:.2px}
.test p{margin:0; font-size:var(--t3); color:var(--on-dark-2)}

/* how to start: the home page's connect card, with the steps around it */
.start-grid{display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:var(--s7); align-items:start}
.howto{margin:0; padding:0; list-style:none; display:grid; gap:var(--s5)}
.howto li{display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:var(--s3); color:var(--on-dark-2); font-size:var(--t4); line-height:1.5}
.howto .n{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px;
  border:1px solid var(--clay); color:var(--on-dark); font-weight:700; font-size:var(--t3)}
.howto strong{color:var(--on-dark)}
/* the paper card keeps the home page's card type, not the section's */
.sec .card h2{margin:0 0 var(--s4); font-size:var(--t6); color:var(--ink)}
.sec .other p{font-size:var(--t2)}
.howto q{color:var(--on-dark); font-style:italic}

/* FAQ */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--rule-dark)}
.faq details:first-of-type{border-top:1px solid var(--rule-dark)}
.faq summary{cursor:pointer; list-style:none; padding:var(--s4) var(--s6) var(--s4) 0; position:relative;
  font-family:var(--serif); font-weight:600; font-size:var(--t5); line-height:1.3; color:var(--on-dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:var(--s4); font-family:var(--sans); font-weight:400; color:var(--on-dark-3)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 var(--s4); max-width:64ch; color:var(--on-dark-2)}
.faq a, .test a, .closing a.text-link{color:var(--on-dark); text-underline-offset:3px}

/* closing call to action */
.closing{text-align:center}
.closing .sec-in{margin:0 auto; max-width:640px}
.closing p{margin:0 0 var(--s5); color:var(--on-dark-2)}
.closing .start-btn{display:inline-flex; padding:0 var(--s7); height:48px}
.closing .after{margin:var(--s4) 0 0; font-size:var(--t3); color:var(--on-dark-3)}

@media (max-width:1180px) and (min-width:901px){
  main.hero{grid-template-columns:minmax(0,1fr) 360px; column-gap:var(--s7)}
  .start-grid{grid-template-columns:minmax(0,1fr) 380px}
}
@media (max-width:900px){
  .topbar-in, .page{padding:0 var(--s4)}
  main.hero{grid-template-columns:1fr; grid-template-areas:"h1" "lede" "side" "demo"; grid-template-rows:none;
    padding:var(--s6) 0 var(--s7)}
  h1{font-size:clamp(34px,9.6vw,44px); margin-bottom:var(--s4)}
  .lede{font-size:17px; margin-bottom:var(--s5)}
  .side{margin-bottom:var(--s7)}
  .card{padding:var(--s4)}
  .you{display:flex; flex-direction:column; gap:var(--s3)}
  .you-head{display:contents}
  .you h2{order:0} .you .sub{order:1} .you .btn-secondary{order:2; justify-content:center; height:44px}
  .sheet, .demo .sheet, .demo-caption{max-width:none}
  .prov.has-tip{margin-top:.35em}
  .prov.has-tip::after{display:none}
  .sec{padding:var(--s7) 0}
  .pains, .steps, .points, .start-grid{grid-template-columns:1fr}
  .pains, .steps{gap:var(--s4)}
  .points{gap:var(--s5)}
  .closing .start-btn{display:flex; padding:0}
  .scrim{background:rgba(20,11,7,.35)}
  footer{flex-direction:column; height:auto; padding:var(--s4) 0 var(--s5); gap:var(--s2)}
  footer nav{justify-content:center}
}
@media (max-width:420px){
  .copyrow{flex-direction:column}
  .primary-btn{height:42px}
  .other{flex-direction:column; align-items:stretch}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }