/* Composition aligned to the chosen atmospheric mockup. The phone and plinth share one coordinate system. */
@media(max-width:600px){body.page-index .product-stage{margin-top:420px}body.page-index .stage-phone{right:12%;bottom:17%}}
:root{--bg:#0c1313;--sage:#becbac}
body{font-family:Source,Arial,sans-serif}
.wrap{width:min(1280px,calc(100% - 112px))}
.bar{height:74px}.masthead{background:#0c1313f0;border-bottom:0}
.hero{min-height:0;height:min(72vw,1000px);background:#0b1111;overflow:hidden}
.hero .wrap{position:relative;z-index:2;height:100%;min-height:0;display:flex;align-items:center;pointer-events:none}
.hero-copy{width:48%;padding:0 0 35px;pointer-events:auto}
.hero h1{font-size:clamp(70px,7.5vw,110px);letter-spacing:-.05em;margin-bottom:27px}
.hero p.lead{font-size:clamp(23px,2.7vw,36px);line-height:1.42;font-weight:400}
.hero .actions{margin-top:58px}
.hero-context{font-size:15px!important;line-height:1.5;margin-top:24px!important;color:#bcc5bd}
.product-stage{position:absolute;inset:0;width:100%;height:100%}
.stage-background{width:100%;height:100%;object-fit:fill}
.stage-phone{position:absolute;height:75%;width:auto;right:22%;bottom:20%;border:5px solid #333c36;border-radius:38px;transform:rotate(7deg);transform-origin:bottom center;box-shadow:10px 20px 22px #0009}
#practice{padding:65px 0 85px}
#practice .intro{margin-bottom:45px;max-width:none}
#practice h2{font-size:clamp(30px,3.8vw,48px);letter-spacing:-.035em}
.screens{gap:55px;max-width:1100px;margin:auto}
.screens img{width:100%;max-width:285px;border-radius:34px;border:4px solid #3a443e;margin-bottom:28px}
.screens h3{font-size:27px;margin-bottom:10px}
.screens p{max-width:290px;margin:auto;line-height:1.45;font-size:18px}
.pause-section{padding:65px 0;background:#17201d}
.pause-section h2{font-size:54px}
.pause-section .split{gap:80px}
.pause-section blockquote{font-size:34px}
.privacy-scene{min-height:400px;background:#18221e url('assets/privacy-stone.png') center/cover no-repeat}
.privacy-scene .wrap>div{background:none;border-radius:0;padding:40px 0;max-width:430px}
.privacy-scene h2{font-size:50px}
.privacy-scene p{font-size:19px;max-width:390px}
.section{padding:85px 0}
.page-intro{background:#111a18;padding:95px 0 80px;border-bottom:1px solid #34413c}
.page-intro h1{font-size:clamp(48px,6vw,80px);font-weight:400;max-width:1000px}
.page-intro p{max-width:740px}
.page-app .page-intro{background:#101916 url('assets/atmosphere.png') center/cover}
.app-gallery{padding:65px 0;background:#0c1313}
.app-gallery .screens{max-width:850px}
.article{min-width:0}.article .container{width:100%}
.article .content-section{padding-bottom:32px;border-bottom:1px solid #2b3731;margin-bottom:48px}
.contents{max-height:calc(100vh - 145px);overflow-y:auto;padding-right:12px}
.contents a:hover{color:var(--sage)}
.page-privacy .page-intro,.page-terms .page-intro{background:#15201c}
.page-support .page-intro{background:#1b2822}
.article h2{letter-spacing:-.025em}
.article table{overflow-wrap:anywhere}
@media(min-width:1500px){.hero{height:1000px}.product-stage{width:1500px;left:50%;transform:translateX(-50%)}}
@media(max-width:850px){.wrap{width:calc(100% - 48px)}.hero{height:760px}.stage-phone{height:65%;right:14%;bottom:22%}.hero-copy{width:48%}.hero h1{font-size:68px}.hero .actions{margin-top:35px}.hero p.lead{font-size:23px}.screens{gap:25px}.contents{max-height:none}.pause-section .split{gap:35px}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.hero{height:auto;padding:0}.hero .wrap{height:auto;min-height:0;display:block;text-align:center}.hero-copy{width:100%;padding:55px 0 15px}.hero h1{font-size:72px}.hero p.lead{font-size:24px}.hero .actions{margin-top:28px}.hero-context{margin-bottom:10px}.product-stage{position:relative;inset:auto;aspect-ratio:1.1;width:100%;height:auto;margin-top:360px}.hero .wrap{position:absolute;top:0;left:20px;width:calc(100% - 40px)}.stage-phone{height:84%;right:35%;bottom:15%;border-radius:23px;border-width:3px}.stage-background{object-fit:fill}.screens{gap:50px}.screens img{max-width:265px}.screens h3{font-size:27px}.privacy-scene{background-position:65% center;min-height:500px;align-items:flex-start}.privacy-scene .wrap>div{max-width:100%;background:#0e1813b8;padding:25px;border-radius:16px;margin:24px 0}.privacy-scene h2{font-size:40px}.privacy-scene p{font-size:17px}.pause-section h2{font-size:45px}.pause-section blockquote{font-size:29px}.page-intro{padding:55px 0 40px}.app-gallery .screens{grid-template-columns:repeat(3,1fr);gap:12px}.app-gallery img{border-radius:13px;border-width:2px}.reading{gap:28px}.page-intro h1{font-size:48px}}

/* card-icon + list step markers (2026-09-11) */
.article .grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 24px;
  margin:28px 0 8px;
}
.article .grid-3 .card{
  border-top:1px solid var(--line);
  padding:22px 0 8px;
}
.card-icon{
  width:36px;
  height:36px;
  margin:0 0 14px;
  color:var(--sage);
}
.card-icon svg{
  width:28px;
  height:28px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.article ol{
  list-style:none;
  padding-left:0;
  counter-reset:sd-step;
  margin:18px 0 24px;
}
.article ol>li{
  position:relative;
  padding-left:1.85rem;
  margin-bottom:12px;
  counter-increment:sd-step;
}
.article ol>li::before{
  content:counter(sd-step);
  position:absolute;
  left:0;
  top:0.28em;
  width:1.15rem;
  height:1.15rem;
  border-radius:999px;
  background:color-mix(in srgb, var(--sage) 22%, transparent);
  border:1px solid var(--sage);
  color:var(--sage);
  font-size:0.62rem;
  font-weight:600;
  letter-spacing:0;
  line-height:1.15rem;
  text-align:center;
}
@media (max-width:700px){
  .article .grid-3{grid-template-columns:1fr;gap:8px}
}