:root  {
  --paper:#fff;
  --ink:#151515;
  --muted:#626262;
  --line:#e2e2e2;
  --soft:#f6f6f6;
  --accent:#111111;
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',Roboto,sans-serif;
}

*  {
  box-sizing:border-box;
}

body  {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

button,select  {
  font:inherit;
}

button,a,select  {
  -webkit-tap-highlight-color:transparent;
}

button,a  {
  color:inherit;
}

button  {
  cursor:pointer;
}

a  {
  text-decoration:none;
}

button:focus-visible,a:focus-visible,select:focus-visible  {
  outline:2px solid var(--ink);
  outline-offset:5px;
}

[hidden]  {
  display:none!important;
}

button:disabled  {
  opacity:.35;
  cursor:default;
}

.sr-only  {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}

.header  {
  max-width:1200px;
  padding:32px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.brand  {
  font-size:36px;
  letter-spacing:-2.5px;
  font-weight:750;
}

.header-tools  {
  display:flex;
  align-items:center;
  gap:12px;
}

.language  {
  max-width:160px;
  height:44px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 12px;
  background:var(--paper);
  color:var(--ink);
  font-size:13px;
}

.theme  {
  height:44px;
  width:44px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:20px;
}

.hero  {
  position:relative;
  isolation:isolate;
  max-width:1200px;
  margin:auto;
  padding:48px 32px 72px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:48px;
  align-items:center;
}

.hero-copy  {
  padding-bottom:76px;
}

.eyebrow  {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.06em;
  margin:0 0 32px;
}

.eyebrow:before  {
  content:'';
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%;
}

h1  {
  font-size:clamp(48px,5.7vw,80px);
  line-height:1.02;
  letter-spacing:-.064em;
  font-weight:650;
  margin:0 0 32px;
}

h1 span  {
  color:var(--muted);
}

.intro  {
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  margin:0;
}



.motion-column  {
  min-width:0;
  display:grid;
  justify-items:center;
}
















.concept  {
  font-size:10px;
  color:var(--muted);
  line-height:1.5;
  margin:8px 0 0;
  text-align:center;
}


footer  {
  max-width:1200px;
  margin:auto;
  padding:28px 32px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:11px;
}

footer a  {
  padding:10px 0;
}

.dark  {
  --paper:#0c0c0c;
  --ink:#f3f3f3;
  --muted:#aaa;
  --line:#3b3b3b;
  --soft:#181818;
  color-scheme:dark;
}

@media(max-width:767px) {
  .header  {
    padding:24px;
  }
  .hero  {
    grid-template-columns:1fr;
    gap:40px;
    padding:28px 24px 48px;
  }
  .hero-copy  {
    text-align:center;
    padding:0;
  }
  .eyebrow  {
    justify-content:center;
    margin-bottom:24px;
  }
  h1  {
    font-size:clamp(48px,11vw,70px);
    margin-bottom:24px;
  }
  .intro  {
    font-size:14px;
  }
  .motion-column  {
    width:100%;
    max-width:500px;
    justify-self:center;
  }
  .hero-copy .eyebrow  {
    font-size:10px;
  }
  .concept  {
    max-width:320px;
    margin:12px auto 0;
  }
  .language  {
    max-width:140px;
  }
  .header-tools  {
    gap:8px;
  }
  footer  {
    padding:24px;
    flex-wrap:wrap;
    font-size:10px;
  }
}

@media(max-width:360px) {
  .header,.hero  {
    padding-inline:20px;
  }
  .brand  {
    font-size:32px;
  }
  .language  {
    max-width:116px;
    padding-inline:8px;
  }
  .header-tools  {
    gap:6px;
  }
  .hero  {
    gap:32px;
  }
  .intro  {
    font-size:13px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *  {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }
}

/* Portrait viewport and shared taat: app visual language, no identity illustrations. */
.hero  {
  grid-template-areas:"copy phone" "system phone" "privacy privacy";
  grid-template-rows:auto auto;
  column-gap:64px;
  row-gap:32px;
  align-items:center;
}

.hero-copy  {
  grid-area:copy;
  padding-bottom:0;
  align-self:end;
}

.motion-column  {
  grid-area:phone;
  width:100%;
  max-width:380px;
  justify-self:center;
}

.system-layer  {
  grid-area:system;
  align-self:start;
  width:100%;
  max-width:340px;
}

.system-card  {
  position:relative;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--soft);
  padding:20px;
  min-height:220px;
  transform:translateY(var(--lift,0px));
}

.system-heading  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:16px;
}

.system-state  {
  color:var(--accent);
  text-align:right;
}

.system-card>strong  {
  display:block;
  font-size:24px;
  letter-spacing:-.8px;
  font-weight:600;
}

.system-card>p  {
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  margin:7px 0 16px;
}

.system-other  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:14px;
  font-size:12px;
  color:var(--muted);
}

.system-presence  {
  color:var(--accent);
  font-size:11px;
  text-align:right;
  font-weight:500;
}

.system-action  {
  visibility:hidden;
  height:34px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:7px;
  margin-top:14px;
  font-size:12px;
  max-width:180px;
  margin-left:auto;
  background:var(--paper);
  color:var(--ink);
}

.system-gesture  {
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:24px;
  border:1px solid var(--accent);
  background:#ffffff80;
  border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:0;
}


.concept  {
  max-width:340px;
}

h1  {
  overflow-wrap:break-word;
  hyphens:auto;
}

@media(min-width:768px) and (max-width:1050px) {
  .hero  {
    column-gap:32px;
  }
  h1  {
    font-size:clamp(44px,5.5vw,60px);
  }
  .hero-copy .intro  {
    font-size:14px;
  }
  .system-card  {
    padding:16px;
  }
}

@media(max-width:767px) {
  .hero  {
    grid-template-areas:"copy" "system" "phone" "privacy";
    grid-template-rows:auto;
    gap:28px;
  }
  .hero-copy  {
    align-self:auto;
  }
  .system-layer  {
    justify-self:center;
    max-width:310px;
  }
  .system-card  {
    padding:14px 16px;
    min-height:0;
  }
  .system-heading  {
    margin-bottom:10px;
    font-size:10px;
  }
  .system-card>strong  {
    font-size:20px;
  }
  .system-card>p  {
    font-size:11px;
    margin-bottom:10px;
  }
  .system-other  {
    padding-top:10px;
    font-size:11px;
  }
  .system-presence  {
    font-size:10px;
  }
  .system-action  {
    margin-top:10px;
    height:32px;
    font-size:11px;
  }
  .motion-column  {
    max-width:340px;
  }
}

@media(max-width:360px) {
  .system-layer  {
    max-width:280px;
  }
  .hero  {
    gap:24px;
  }
  .system-other  {
    font-size:10px;
  }
}

.hero-copy  {
  min-width:0;
}

@media(max-width:767px) {
  .hero  {
    grid-template-columns:minmax(0,1fr);
  }
}

/* Text accents follow the page surface; phone screens remain white. */
:root  {
  --accent-text:#111111;
}

.dark  {
  --accent-text:#e5e5e5;
}


/* Plain-language promise, with concrete privacy facts beside the experience. */
.intro-follow  { margin-top:10px; }
.privacy-note  { font-size:12px; line-height:1.6; margin:18px 0 0; }
.privacy  { grid-area:privacy; min-width:0; margin-top:32px; padding-top:56px; border-top:1px solid var(--line); }
.privacy h2  { font-size:clamp(28px,3.3vw,40px); font-weight:600; letter-spacing:-.045em; line-height:1.15; margin:0 0 36px; }
.privacy-points  { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.privacy h3  { font-size:17px; font-weight:550; line-height:1.35; margin:0 0 12px; }
.privacy p  { color:var(--muted); font-size:14px; line-height:1.7; margin:0; }
.privacy h2,.privacy h3,.privacy p  { overflow-wrap:anywhere; }
@media(max-width:767px) {
  .privacy  { margin-top:24px; padding-top:36px; }
  .privacy h2  { margin-bottom:28px; }
  .privacy-points  { grid-template-columns:minmax(0,1fr); gap:28px; }
  .privacy h3  { margin-bottom:8px; }
  .privacy-note  { max-width:310px; margin:16px auto 0; }
}

/* The other participant responds through the shared taat, without a connector. */
.system-card { min-height:208px; box-shadow:none; transform:none; }
.system-action { position:absolute; left:20px; right:20px; bottom:14px; margin:0 0 0 auto; }
.system-presence { font-size:14px; color:var(--ink); font-weight:550; }
.system-card.both-present .system-presence { color:var(--accent-text); }
.system-state { color:var(--accent-text); }
.system-layer { scroll-margin-top:16px; }
@media(max-width:767px) {
  .hero { row-gap:16px; }
  .hero-copy { margin-bottom:12px; }
  .system-card { min-height:82px; padding:12px 16px; }
  .system-card>strong,.system-card>p { display:none; }
  .system-heading { margin-bottom:8px; }
  .system-other { border:0; padding:0; min-height:24px; }
  .system-action { left:auto; right:16px; bottom:10px; width:142px; height:30px; background:var(--paper); }
  .system-presence { font-size:12px; }
}