:root{--bg:#f4f1ea;--paper:#ebe7de;--ink:#151515;--muted:#67645f;--line:rgba(21,21,21,.15);--accent:#d2dbce}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #277b58;outline-offset:4px}p{line-height:1.65}
nav{height:78px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(244,241,234,.97);backdrop-filter:blur(12px);z-index:20}
.logo,.footer-logo{font-weight:900;letter-spacing:.32em;font-size:20px}.nav-right{display:flex;align-items:center;gap:28px}.navlinks{display:flex;gap:24px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.09em}.navlinks a:hover,.footer-nav a:hover{text-decoration:underline;text-underline-offset:5px}.language{display:flex;align-items:center;gap:8px;font-size:12px}.language a{opacity:.42}.language a.active{opacity:1;font-weight:900}
.hero{min-height:690px;padding:clamp(70px,9vw,145px) 7% 80px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);gap:6%;align-items:center}
.eyebrow,.section-label{font-size:11px;font-weight:900;letter-spacing:.22em;text-transform:uppercase}
.hero h1{font-size:clamp(54px,6.8vw,104px);line-height:.99;letter-spacing:-.063em;max-width:840px;margin:25px 0}
.hero-copy{font-size:clamp(17px,1.6vw,21px);color:var(--muted);max-width:560px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.button{min-height:52px;padding:17px 24px;border:1px solid var(--ink);border-radius:100px;display:inline-flex;justify-content:center;align-items:center;font-weight:800;font-size:12px;letter-spacing:.04em;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button.dark{background:var(--ink);color:#fff}.button.light{background:transparent}.button.inverse{background:white;color:#111;border-color:white}
.hero-footnote{margin-top:25px;font-size:12px;color:var(--muted)}
.visual-stage{min-height:490px;border-radius:32px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 45% 32%,#4a4c46 0%,#252624 46%,#121313 100%);overflow:hidden}
.visual-halo{width:360px;height:360px;border:1px solid rgba(255,255,255,.17);border-radius:50%;position:absolute;box-shadow:0 0 0 65px rgba(255,255,255,.025),0 0 0 130px rgba(255,255,255,.018)}
.tag-prototype{width:180px;height:290px;display:flex;flex-direction:column;align-items:center;border-radius:45px;background:linear-gradient(125deg,#272727,#090909 52%,#202020);box-shadow:30px 40px 70px rgba(0,0,0,.55),inset 0 1px 2px #555;border:1px solid #4b4b4b;position:relative;transform:rotate(-13deg)}
.tag-hole{width:25px;height:25px;border:4px solid #666;border-radius:50%;margin-top:26px}.tag-name{margin:auto 0;font-size:15px;letter-spacing:.2em;font-weight:900;color:white}.tag-tech{font-size:10px;letter-spacing:.18em;color:#bbb;margin-bottom:28px}.visual-note{position:absolute;bottom:20px;left:24px;color:#d1d1d1;font-size:11px}
section{padding:100px 7%;border-top:1px solid var(--line)}.section-head{display:flex;flex-direction:column;gap:12px;margin-bottom:43px}.section-title{font-size:clamp(36px,5.3vw,70px);line-height:1.05;letter-spacing:-.05em;margin:0;max-width:850px}.section-intro{max-width:650px;color:var(--muted);font-size:18px;margin:0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.step{background:var(--paper);border-radius:24px;min-height:245px;padding:30px;display:flex;flex-direction:column}.number{font-size:12px;font-weight:900;letter-spacing:.15em;margin-bottom:auto;color:var(--muted)}.step h3{font-size:25px;letter-spacing:-.04em;margin:28px 0 8px}.step p{font-size:15px;color:var(--muted);margin:0}
.dark-section{background:#171817;color:white}.dark-section .section-intro,.dark-section .muted{color:#b9b9b7}.feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:9%;align-items:center}.feature-card{padding:28px;border:1px solid #444;border-radius:22px;display:grid;gap:16px;background:#222321}.mini-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b9b9b7}.mini-name{font-size:30px;font-weight:900;letter-spacing:-.04em}.feature-tags{display:flex;gap:8px;flex-wrap:wrap}.feature-tags span{font-size:12px;border:1px solid #555;border-radius:25px;padding:8px 12px}.feature-card p{color:#c4c4c3;font-size:15px;margin:0}
.privacy{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center}.privacy p{font-size:18px;color:var(--muted)}.privacy-points{display:grid;gap:15px}.privacy-point{padding:22px 0;border-bottom:1px solid var(--line);font-weight:800;font-size:19px}
.launch{background:#e4e7de}.launch-inner{max-width:880px}.launch .section-title{max-width:830px}.launch p{font-size:18px;max-width:620px;color:#4f564c}
footer{padding:55px 7%;display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line)}.footer-line{color:var(--muted);font-size:13px;margin-top:15px}.footer-nav{display:flex;flex-wrap:wrap;align-items:flex-start;gap:22px;font-size:12px;font-weight:700}
@media(max-width:980px){.hero{grid-template-columns:1fr;padding-top:80px}.visual-stage{min-height:430px}.navlinks{gap:14px}.feature-grid,.privacy{grid-template-columns:1fr}.privacy{gap:24px}}
@media(max-width:700px){nav{height:68px;padding:0 5%}.logo{font-size:16px;letter-spacing:.22em}.navlinks{display:none}.nav-right{gap:12px}.hero{padding:62px 6% 55px;gap:40px;min-height:unset}.hero h1{font-size:clamp(47px,12vw,70px)}.visual-stage{min-height:360px}.visual-halo{width:240px;height:240px}.tag-prototype{transform:rotate(-12deg) scale(.83)}.actions{flex-direction:column}.actions .button{width:100%}section{padding:73px 6%}.steps{grid-template-columns:1fr}.step{min-height:180px}.step h3{margin-top:20px}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}


/* Full-viewport storytelling sections 01–04.
   min-height rather than fixed height keeps content accessible on narrow
   screens, zoomed text and small landscape viewports. */
main > section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main > section .section-head { flex-shrink: 0; }
main > section#my .feature-grid { width: 100%; }
main > section#privacy { display: grid; }
main > section#first-series .launch-inner { width: 100%; }
@supports not (min-height: 100svh) {
  main > section { min-height: 100vh; }
}
@media (max-width: 700px) {
  main > section {
    min-height: 100svh;
    padding-top: 92px;
    padding-bottom: 92px;
  }
  main > section#privacy { gap: 30px; }
}

/* Mobile public-site shell: keep primary navigation visible, instead of hiding it. */
@media (max-width:700px) {
  body > nav[aria-label="Main navigation"] {
    height:auto;
    min-height:68px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px;
    row-gap:0;
    padding:12px 5% 0;
    align-items:center;
  }
  body > nav[aria-label="Main navigation"] > .logo {
    grid-column:1;
    grid-row:1;
    min-width:0;
    overflow-wrap:anywhere;
  }
  body > nav[aria-label="Main navigation"] > .nav-right {
    display:contents;
  }
  body > nav[aria-label="Main navigation"] .language {
    grid-column:2;
    grid-row:1;
    justify-self:end;
    gap:5px;
    min-height:44px;
  }
  body > nav[aria-label="Main navigation"] .language a {
    display:inline-flex;
    min-width:28px;
    min-height:44px;
    align-items:center;
    justify-content:center;
  }
  body > nav[aria-label="Main navigation"] .navlinks {
    grid-column:1 / -1;
    grid-row:2;
    display:flex;
    flex-wrap:nowrap;
    width:calc(100% + 10vw);
    margin:0 -5vw;
    padding:4px 5vw 8px;
    gap:20px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    font-size:11px;
  }
  body > nav[aria-label="Main navigation"] .navlinks a {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    min-height:44px;
    white-space:nowrap;
  }
  .footer-nav a { min-height:44px; display:inline-flex; align-items:center; }
}


/* Public site responsive burger navigation. This overrides the earlier scroll row. */
.menu-toggle{display:none}
@media(max-width:850px){
  body > nav[aria-label="Main navigation"]{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    height:70px;
    min-height:70px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 5%;
  }
  body > nav[aria-label="Main navigation"] > .logo{flex:0 1 auto;grid-column:auto;grid-row:auto}
  body > nav[aria-label="Main navigation"] > .nav-right{
    display:flex;
    gap:12px;
    align-items:center;
    flex:0 0 auto;
  }
  body > nav[aria-label="Main navigation"] .language{
    display:flex;
    align-items:center;
    grid-column:auto;
    grid-row:auto;
    justify-self:auto;
    min-height:44px;
    gap:6px;
  }
  body > nav[aria-label="Main navigation"] .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    order:2;
    min-height:44px;
    min-width:44px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    font:inherit;
    font-weight:800;
    font-size:11px;
    letter-spacing:.09em;
  }
  .menu-toggle-icon{width:20px;display:flex;flex-direction:column;gap:4px}
  .menu-toggle-icon span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px}
  body > nav[aria-label="Main navigation"] .navlinks{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    margin:0;
    padding:12px 5% 22px;
    display:none;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:0;
    overflow:visible;
    max-height:calc(100dvh - 70px);
    overflow-y:auto;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 24px rgba(0,0,0,.09);
  }
  body > nav[aria-label="Main navigation"] .navlinks.is-open{display:flex}
  body > nav[aria-label="Main navigation"] .navlinks a{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    padding:8px 0;
    border-bottom:1px solid var(--line);
    white-space:normal;
    font-size:13px;
  }
  body > nav[aria-label="Main navigation"] .menu-toggle:focus-visible{
    outline:3px solid #277b58;outline-offset:3px;
  }
}
@media(min-width:851px){
  body > nav[aria-label="Main navigation"] .navlinks{display:flex}
}

/* Activation explainer and short FAQ: informational, not full-screen chapters. */
main > section.compact-section{min-height:auto;display:block;padding-top:85px;padding-bottom:85px}
.activation-section{background:#eeece5}
.activation-steps .step{min-height:210px}
.activation-note{margin:28px 0 0;color:var(--muted);font-size:14px}
.faq-section{background:var(--bg)}
.faq-section .section-head{margin-bottom:30px}
.faq-list{max-width:850px;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);padding:0}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:68px;padding:20px 0;font-size:clamp(17px,2vw,21px);font-weight:800;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;font-size:27px;font-weight:400}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{margin:0;padding:0 32px 22px 0;color:var(--muted);max-width:720px;font-size:16px}
.faq-list summary:focus-visible{outline:3px solid #277b58;outline-offset:3px}
@media(max-width:700px){
 main > section.compact-section{min-height:auto;padding-top:68px;padding-bottom:68px}
 .faq-list summary{min-height:60px;padding:17px 0}
 .faq-list details p{padding-right:12px}
}

/* Landingpage: realistic static examples of the existing tag overview and conversation UI.
   Demonstration content only: no customer data, API requests or live session tokens. */
.demo-previews{display:grid;gap:16px;min-width:0}
.demo-screen{background:#f4f1ea;color:#151515;padding:20px;border-radius:20px;box-shadow:0 14px 36px #0003;min-width:0}
.demo-screen-header{display:flex;gap:10px;justify-content:space-between;align-items:center;border-bottom:1px solid #dedbd3;padding-bottom:12px}
.demo-brand{font-weight:900;letter-spacing:.13em;font-size:13px}
.demo-screen-badge{font-size:9px;font-weight:800;letter-spacing:.1em;color:#555;text-align:right}
.demo-caption{display:block;font-size:10px;color:#696760;letter-spacing:.09em;font-weight:700;margin:14px 0}
.demo-item{padding:13px 12px;border:1px solid #e0ddd6;background:#fff;border-radius:12px;margin-top:9px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.demo-item-title{font-weight:800;display:block;font-size:15px}.demo-item-id{font-size:11px;color:#666;display:block;margin-top:5px}
.demo-status{font-size:10px;font-weight:800;color:#366344;background:#e2eadf;border-radius:30px;padding:7px 9px;white-space:nowrap}
.demo-footer{font-size:11px;color:#62615d;line-height:1.5;margin-top:15px}
.demo-chat{display:flex;flex-direction:column;align-items:stretch}
.demo-bubble{border-radius:15px;background:#fff;padding:11px 13px;max-width:88%;font-size:13px;line-height:1.5;margin:5px 0;overflow-wrap:anywhere}
.demo-bubble-owner{align-self:flex-end;background:#e4e9de}
.demo-sender{display:block;font-size:9px;letter-spacing:.08em;font-weight:900;color:#666;margin-bottom:4px}
.demo-chat-end{text-align:center;font-size:11px;font-weight:800;line-height:1.5;margin-top:14px;color:#52644f}
@media(min-width:981px){.feature-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:6%}}
@media(max-width:700px){.demo-screen{padding:16px}.demo-bubble{font-size:12px}}