/* Marketing layout. Tokens, type, and components come from ui.css.
   ui.css also styles .wrap, .hero, .bar, and .c-kanban for the app.
   Landing rules below are more specific so those app rules do not
   stack the header or widen the page on a phone. */
.skip{
  position:absolute;
  left:max(12px,env(safe-area-inset-left));
  top:calc(12px + env(safe-area-inset-top));
  z-index:30;
  transform:translateY(-160%);
  background:var(--ink);
  color:var(--paper);
  border-radius:999px;
  padding:10px 14px;
  font:600 14px var(--f-body);
  text-decoration:none;
}
.skip:focus{transform:none}
html:has(body.landing){overflow-x:auto}
body.landing{
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.5 var(--f-body);
  letter-spacing:-.011em;
  overflow-wrap:break-word;
}
.landing a{color:inherit}
.landing a.primary,
.landing a.btn,
.landing a.mark,
.landing a.bm{text-decoration:none}
.landing a:focus-visible,
.landing summary:focus-visible,
.landing .scroll:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
.landing .wrap{
  display:block;
  box-sizing:border-box;
  width:min(1120px,100%);
  max-width:100%;
  margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  min-width:0;
}
.landing > header.bar{
  display:block;
  position:sticky;
  top:0;
  z-index:10;
  padding-top:env(safe-area-inset-top);
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.landing .bar-in{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:68px;
  min-width:0;
}
.landing .mark{flex:0 0 auto;text-decoration:none;min-width:0}
.landing .nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
.landing .nav a.quiet{font:500 14px var(--f-body);padding:8px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.landing .nav a.quiet:hover{background:var(--surface-2)}
.landing .mob{display:none;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
.landing .bar-cta{
  white-space:nowrap;
  padding:8px 12px;
  font-size:13px;
  min-height:44px;
}
.landing .menu{position:relative}
.landing .menu summary{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  list-style:none;
  cursor:pointer;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
}
.landing .menu summary::-webkit-details-marker{display:none}
.landing .menu summary:hover{background:var(--surface-2)}
.landing .burger,
.landing .burger::before,
.landing .burger::after{
  display:block;
  width:16px;
  height:2px;
  border-radius:1px;
  background:var(--ink);
  position:relative;
}
.landing .burger::before,
.landing .burger::after{content:"";position:absolute;left:0}
.landing .burger::before{top:-5px}
.landing .burger::after{top:5px}
.landing .menu[open] .burger{background:transparent}
.landing .menu[open] .burger::before{top:0;transform:rotate(45deg)}
.landing .menu[open] .burger::after{top:0;transform:rotate(-45deg)}
.landing .menu nav{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:20;
  min-width:min(220px,calc(100vw - 32px));
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-soft);
}
.landing .menu a{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  font:500 15px var(--f-body);
}
.landing .menu a:hover{background:var(--surface-2)}
.landing a.primary,
.landing a.btn,
.landing a.cta{
  min-height:44px;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  white-space:normal;
  text-align:center;
}
.landing a.cta{font-size:15px}
.landing a.bar-cta{font-size:13px;padding:8px 12px;white-space:nowrap}
.landing .hero{
  display:block;
  position:static;
  width:100%;
  min-width:0;
  padding:48px 0 24px;
  overflow:visible;
}
.landing .hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:36px;
  align-items:center;
}
.landing .hero-grid > *,
.landing .compare > *,
.landing .steps > *,
.landing .views .pair > *,
.landing .feats > *,
.landing .safes > *,
.landing figure,
.landing .view,
.landing .scroll,
.landing .pane,
.landing .price,
.landing .band,
.landing .step,
.landing .feat,
.landing .safe{
  min-width:0;
  max-width:100%;
}
.landing figure{margin:0}
.landing h1{
  margin:10px 0 12px;
  font:500 clamp(32px,8vw,68px)/1.02 var(--f-display);
  letter-spacing:-.04em;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.landing h1 .em{color:var(--accent-text)}
.landing h2,.landing h3,.landing p,.landing li,.landing figcaption,.landing td,.landing th{overflow-wrap:anywhere}
.lede{
  margin:0;
  max-width:min(46ch,100%);
  color:var(--muted);
  font-size:clamp(16px,2.8vw,17.5px);
  line-height:1.45;
  text-wrap:pretty;
}
.hero .lede{font-size:clamp(16px,4.2vw,18px)}
.landing .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;min-width:0}
.fine{margin:10px 0 0;color:var(--muted);font-size:13.5px}
.fine a{color:var(--ink)}
.landing .ask{display:flex;flex-direction:column;gap:12px;min-width:0}
.landing .umsg{max-width:100%;overflow-wrap:anywhere}
.landing .vt{font:600 1.05rem/1.2 var(--f-display);margin:0;letter-spacing:-.02em}
.landing .vhead .q{opacity:1;color:var(--muted)}
.cap{margin:8px 0 0;font:12px var(--f-mono);letter-spacing:.04em;color:var(--muted)}
.sec{padding:64px 0}
.sec-h{max-width:70ch;margin-bottom:22px;min-width:0}
.sec-h h2,.band h2{
  margin:8px 0 10px;
  font:500 clamp(26px,4vw,44px)/1.08 var(--f-display);
  letter-spacing:-.035em;
  text-wrap:balance;
}
.landing .compare,.landing .steps{display:grid;gap:16px;min-width:0}
.landing .compare{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.landing .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.pane,.step,.feat,.safe,.price{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-soft);
}
.pane,.step,.feat,.safe{padding:18px}
.pane h3,.step h3,.feat h3,.safe h3{
  margin:8px 0;
  font:600 clamp(1.05rem,2.4vw,1.15rem)/1.25 var(--f-display);
  letter-spacing:-.02em;
}
.pane ul,.plain-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pane li,.plain-list li{position:relative;padding-left:18px}
.pane li::before,.plain-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:8px;
  height:8px;
  border-radius:2px;
  transform:rotate(45deg);
  background:var(--line-strong);
}
.pane.ours{background:var(--paper);outline:1px solid color-mix(in srgb,var(--filament) 55%,var(--line))}
.pane.ours li::before,.plain-list.ours li::before{background:var(--filament)}
.wall{
  margin-top:8px;
  background:var(--surface-2);
  border-radius:18px;
  padding:14px 16px;
  color:var(--muted);
  font-size:14.5px;
}
.wall p{margin:0 0 8px}
.wall p:last-child{margin:0}
.step .n{font:600 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.views{display:grid;gap:16px;margin-top:22px;min-width:0}
.views .pair{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.landing .bm{max-width:100%}
.after{margin-top:18px}
.landing .c-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.landing .stat .v{font-size:clamp(1rem,4.2vw,1.45rem);overflow-wrap:anywhere}
.landing .stat .k{overflow-wrap:anywhere}
.landing .scroll{overflow-x:hidden;max-width:100%}
.landing table{width:100%;table-layout:fixed}
.landing th,.landing td{white-space:normal}
.landing .pill{white-space:normal}
.landing .c-kanban{
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-width:0;
  width:100%;
}
.landing .tl{grid-template-columns:minmax(0,4.2rem) 14px minmax(0,1fr)}
.landing .tl .x,.landing .tl .x small,.landing .msg,.landing .kcard{overflow-wrap:anywhere;min-width:0}
.landing .bm{cursor:default}
.landing .bm:hover{transform:none}
.feats,.safes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.feat p,.safe p,.step p,.pane p{margin:0;color:var(--muted)}
.feat h3,.safe h3{margin-top:6px}
.price-wrap{display:grid;justify-items:center}
.price{width:min(560px,100%);padding:28px 28px 24px;text-align:left}
.amount{
  margin:8px 0 4px;
  font:600 clamp(44px,12vw,76px)/.95 var(--f-display);
  letter-spacing:-.045em;
  overflow-wrap:anywhere;
}
.amount small{font:500 clamp(15px,3vw,18px)/1 var(--f-body);letter-spacing:0;color:var(--muted);margin-left:4px}
.price .lede{max-width:none}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{
  cursor:pointer;
  font:600 clamp(1rem,2.8vw,1.05rem)/1.35 var(--f-display);
  letter-spacing:-.02em;
  padding:14px 28px 14px 0;
  list-style:none;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:12px;
  font:500 22px var(--f-mono);
  color:var(--accent-text);
}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;max-width:min(68ch,100%);color:var(--muted)}
.band{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
  padding:28px;
}
.foot{
  padding:28px 0 calc(48px + env(safe-area-inset-bottom));
  color:var(--muted);
  font-size:14px;
}
.foot-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start;border-top:1px solid var(--line);padding-top:22px}
.foot nav{display:flex;gap:14px;flex-wrap:wrap}
.foot a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.foot .col{display:flex;flex-direction:column;gap:6px;min-width:0}
.embed{margin-top:14px;min-width:0;max-width:100%}
.embed summary{cursor:pointer;font:600 14px var(--f-body);color:var(--ink)}
.embed iframe{
  display:block;
  width:100%;
  max-width:100%;
  height:min(720px,78vh);
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper);
}
.landing .c-confirm p{color:var(--ink)}
.landing .msg small{opacity:1;color:var(--muted)}
.landing .msg.me small{color:var(--ink)}
@media (max-width:900px){
  .landing .hero{padding-top:28px}
  .landing .hero-grid,
  .landing .compare,
  .landing .steps,
  .landing .views .pair{grid-template-columns:minmax(0,1fr)}
  .sec{padding:48px 0}
  .price{padding:22px}
  .landing .c-kanban{grid-template-columns:minmax(0,1fr)}
  .landing .c-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:760px){
  .landing .c-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
}
@media (max-width:759px){
  .landing .nav{display:none}
  .landing .mob{display:flex}
  .band,.price{padding:20px 16px}
}
@media (prefers-reduced-motion:reduce){
  .landing .view{animation:none}
}