:root{
    color-scheme:light dark;
    --ink:#1b1e28; --paper:#ffffff; --sand:#f4f4f6; --sand-2:#ececef;
    --line:#e4e4e7; --muted:#6f7079;
    --terra:#ff7424; --terra-deep:#e5601a;
    --green:#316d6d; --green-deep:#285a5a;
    --accent:var(--terra); --accent-deep:var(--terra-deep);
    --navy:#16213e;
    --display:'Merriweather',Georgia,serif; --sans:'Outfit',system-ui,sans-serif;
    --tr:color .5s ease, background-color .5s ease, border-color .5s ease;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
  body.path-owner{--accent:var(--terra);--accent-deep:var(--terra-deep)}
  body.path-group{--accent:var(--green);--accent-deep:var(--green-deep)}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  /* No overflow-wrap here on purpose. It breaks a word wherever the box ends
     and prints no hyphen, which is wrong in every language on this site:
     Russian and Kazakh may only break at permitted syllable points and must
     show a hyphen, Georgian avoids breaking words at all, and Arabic never
     breaks them — the script is cursive, so a split word takes initial and
     final forms on each line and reads as two different words. Measured in
     Chrome: break-word splits Arabic لاستخداماتهم across two lines, and
     hyphens:auto inserts nothing because there is no dictionary for any of
     these languages. A word too long for its column is a copy problem, and
     tools/audit-fit.mjs is what catches it. */
  h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.08;margin:0}
  a{color:inherit}

  .view{display:none}.view.active{display:block}

  .kick{display:inline-flex;align-items:center;background:var(--sand);border:1px solid var(--line);
    border-radius:7px;padding:5px 13px 5px 25px;position:relative;font-size:.64rem;font-weight:700;
    letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;
    line-height:1.45;transition:var(--tr)}
  .kick::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:7px;height:7px;
    border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.6px var(--line)}

  .bar{position:sticky;top:0;z-index:30;background:rgba(247,242,236,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .bar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
  .logo{display:inline-flex;align-items:center;cursor:pointer;background:none;border:none;padding:0;line-height:0;transition:var(--tr)}
  .logo img{height:26px;width:auto;display:block}
  .logo b{color:inherit;font-weight:inherit}
  .startbtn{font-size:.88rem;font-weight:600;text-decoration:none;padding:9px 17px;border:1px solid var(--ink);border-radius:100px;transition:var(--tr),transform .15s;cursor:pointer;background:none;font-family:inherit;color:inherit}
  .startbtn:active{transform:scale(.96)}
  .flow-nav{display:flex;align-items:center;gap:18px}
  .flow-nav .lnk{font-family:inherit;font-size:.86rem;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:var(--tr)}
  .flow-nav .lnk:hover{color:var(--ink)}
  @media(max-width:560px){.flow-nav .switch-lnk{display:none}}

  /* nav + mobile menu */
  .nav-links{display:none;gap:24px;align-items:center}
  @media(min-width:860px){.nav-links{display:flex}}
  .navlink{font-family:inherit;font-size:.94rem;font-weight:600;color:var(--ink);background:none;border:none;cursor:pointer;text-decoration:none;transition:var(--tr)}
  .navlink:hover{color:var(--accent)}
  .bar-actions{display:flex;align-items:center;gap:10px}
  .loginbtn{display:none;font-family:inherit;font-size:.88rem;font-weight:600;text-decoration:none;padding:9px 17px;border:1px solid var(--line);border-radius:100px;color:inherit;cursor:pointer;transition:var(--tr)}
  @media(min-width:640px){.loginbtn{display:inline-block}}
  /* "Book a demo" is two words in English and three in Uzbek; without this the
     header button wraps onto two lines and the whole bar grows. */
  .startbtn,.loginbtn{white-space:nowrap}

/* On a 320px screen a kick has about 272px to work with, and a translated one
   — "Для команды · Чат команды", "Команда · Тексеру парақтары" — runs 5 to
   20px past that and breaks the pill onto two lines. Slightly tighter type and
   tracking buy back more than that without changing a word. */
@media(max-width:360px){
  /* The dot is decoration and costs 14px of the 272 a kick has to work with,
     so below 360 it goes and the label keeps its line. */
  .kick{font-size:.58rem;letter-spacing:.09em;padding:5px 10px}
  .kick::before{display:none}
}

  @media(max-width:420px){.bar .startbtn{font-size:.84rem;padding-left:15px;padding-right:15px}}
  .startbtn.filled{background:var(--accent);color:#fff;border-color:var(--accent)}
  .startbtn.filled:hover{background:var(--accent-deep)}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;line-height:1;background:none;border:none;cursor:pointer;color:var(--ink);padding:2px 6px}
  @media(min-width:860px){.menu-btn{display:none}}
  .menu{position:fixed;inset:0;z-index:70;background:var(--paper);display:none;flex-direction:column;padding:82px 28px 40px;gap:2px}
  .menu.open{display:flex}
  .menu .navlink{font-family:var(--display);font-size:1.75rem;padding:16px 0;border-bottom:1px solid var(--line);text-align:left}
  .menu-close{position:absolute;top:18px;right:22px;font-size:1.4rem;background:none;border:none;cursor:pointer;color:var(--ink)}
  .menu-actions{display:flex;gap:12px;margin-top:26px}
  .menu-actions .loginbtn,.menu-actions .startbtn{display:inline-flex;justify-content:center;flex:1;text-align:center}

  /* hero (light landing) */
  .hero-grid{display:grid;gap:36px;align-items:center}
  @media(min-width:860px){.hero-grid{grid-template-columns:1.1fr .9fr}}
  .story-card{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:var(--sand);border:1px solid var(--line);border-radius:22px;padding:22px;cursor:pointer;font-family:inherit;color:inherit;transition:transform .2s,box-shadow .25s}
  .story-card:hover{transform:translateY(-3px);box-shadow:0 22px 48px -26px rgba(20,22,30,.5)}
  .story-card .story-txt{display:flex;flex-direction:column;gap:3px}
  .story-card .story-txt b{font-size:1.06rem}
  .story-card .story-txt small{font-size:.92rem;color:var(--muted);line-height:1.4}

  .hero{padding:56px 0 46px}
  .hero .grid{display:grid;gap:38px;align-items:center}
  @media(min-width:860px){.hero .grid{grid-template-columns:1.05fr .95fr}}
  .hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem);max-width:13ch}
  .hero h1 em{font-style:normal;color:var(--accent);transition:var(--tr)}
  .h1link{color:inherit;text-decoration:none;border-bottom:3px solid var(--accent);transition:var(--tr),border-color .2s}
  .h1link:hover{border-bottom-color:var(--ink)}
  .hero .lede{font-size:1.2rem;color:var(--muted);margin:22px 0 0;max-width:40ch}
  .hero .nofees{margin-top:16px;font-weight:600;font-size:.98rem}
  /* under the buttons it is a footnote, not a headline */
  .hero .hero-cta + .nofees{margin-top:14px;font-weight:500;font-size:.84rem;opacity:.85}
  .hero .sub{font-size:1.18rem;color:var(--muted);margin:22px 0 0;max-width:44ch}

  .shot{border-radius:16px;border:1px solid var(--line);background:#fff;overflow:hidden;box-shadow:0 34px 66px -34px rgba(20,22,30,.5)}
  .shot .chrome{height:34px;background:var(--sand);display:flex;align-items:center;gap:6px;padding:0 13px;border-bottom:1px solid var(--line)}
  .shot .chrome i{width:10px;height:10px;border-radius:50%;background:var(--sand-2)}
  .shot .ph{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:24px;background:linear-gradient(135deg,#fbf7f2,#efe5d8)}
  .shot .ph .ic{font-size:1.7rem;opacity:.55}
  .shot .ph .lbl{font-weight:700;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);transition:var(--tr)}
  .shot .ph small{font-size:.9rem;color:var(--muted);max-width:36ch;line-height:1.45}
  .play{flex:none;width:62px;height:62px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:1.15rem;padding-left:3px;transition:transform .2s,var(--tr)}

  .imgph{border:1.5px dashed var(--line);border-radius:16px;background:linear-gradient(135deg,var(--sand),var(--sand-2));aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);text-align:center;padding:18px}
  .imgph .ic{font-size:1.5rem;opacity:.6}.imgph small{font-size:.84rem;max-width:26ch}

  .fork{padding:26px 0 84px}
  .fork .prompt{font-family:var(--display);font-size:1.5rem;margin-bottom:20px}
  .fork .prompt span{color:var(--accent);transition:var(--tr)}
  .cards{display:grid;gap:18px}@media(min-width:680px){.cards{grid-template-columns:1fr 1fr}}
  .choice{position:relative;text-align:left;cursor:pointer;background:var(--sand);border:1px solid var(--line);border-radius:20px;padding:32px 28px;font-family:inherit;color:inherit;overflow:hidden;transition:transform .2s,box-shadow .25s}
  .choice:hover{transform:translateY(-4px);box-shadow:0 18px 44px -22px rgba(20,22,30,.5)}
  .choice:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .choice .stripe{position:absolute;left:0;top:0;bottom:0;width:6px}
  .choice.owner .stripe{background:var(--terra)}.choice.group .stripe{background:var(--green)}
  .choice .t{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
  .choice.owner .t{color:var(--terra)}.choice.group .t{color:var(--green)}
  .choice h3{font-size:1.9rem;margin:10px 0 7px}
  .choice p{margin:0;color:var(--muted);font-size:1rem}
  .choice .go{display:inline-flex;gap:8px;margin-top:22px;font-weight:600}
  .choice.owner .go{color:var(--terra-deep)}.choice.group .go{color:var(--green-deep)}
  .choice:hover .go .a{transform:translateX(5px)}.choice .go .a{transition:transform .2s}

  section.sec{padding:72px 0;border-top:1px solid var(--line)}
  .sec.dark{background:var(--ink);color:var(--paper);border-top:none}
  .sec.dark .kick{background:rgba(247,242,236,.12);border-color:rgba(247,242,236,.2)}
  .sec.dark .kick::before{background:var(--ink);box-shadow:inset 0 0 0 1.6px rgba(247,242,236,.3)}
  .sec.dark h2{color:var(--paper)} .sec.dark .body{color:rgba(247,242,236,.72)}
  h2.big{font-size:clamp(2rem,4.6vw,3.1rem);max-width:17ch}
  .body{font-size:1.16rem;color:var(--muted);margin:18px 0 0;max-width:52ch}
  .body strong{color:var(--ink);font-weight:600}
  .sec.dark .body strong{color:var(--paper)}

  .manifesto{display:grid;gap:26px;align-items:center}@media(min-width:760px){.manifesto{grid-template-columns:auto 1fr}}
  .big-stat{font-family:var(--display);font-weight:600;font-size:clamp(4.4rem,15vw,8.5rem);line-height:.85;color:var(--accent);transition:var(--tr)}

  .showcase{display:grid;gap:34px;align-items:center}
  @media(min-width:860px){.showcase{grid-template-columns:1fr 1fr}.showcase.flip .txt{order:2}}

  .lm{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-family:inherit;font-size:.85rem;font-weight:600;color:var(--accent);background:none;border:none;padding:0;cursor:pointer;transition:var(--tr)}
  .lm::after{content:"→";transition:transform .2s}.lm:hover::after{transform:translateX(4px)}

  .reserved{border:1.6px dashed var(--accent);border-radius:16px;background:rgba(255,255,255,.45);padding:26px 22px;margin-top:22px;transition:var(--tr)}
  .reserved .flag{display:inline-flex;gap:7px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);transition:var(--tr)}
  .reserved .hint{margin:10px 0 0;font-size:.92rem;color:var(--muted);font-style:italic}

  .closer{background:var(--ink);color:var(--paper);border-radius:26px;padding:52px 44px;margin-top:30px}
  .closer .kick{background:rgba(247,242,236,.14);border-color:rgba(247,242,236,.25);color:var(--paper)}
  .closer .kick::before{background:var(--ink);box-shadow:inset 0 0 0 1.6px rgba(247,242,236,.3)}
  .closer h2{color:var(--paper);max-width:20ch}.closer p{color:rgba(247,242,236,.72);margin:16px 0 0;font-size:1.1rem;max-width:46ch}
  .btn{display:inline-block;margin-top:26px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;padding:14px 26px;border-radius:100px;transition:var(--tr),transform .15s;cursor:pointer;border:none;font-family:inherit;font-size:1rem}
  .btn:active{transform:scale(.97)}

  .steps{display:grid;gap:18px;margin-top:34px}@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
  .step{border-top:2px solid var(--accent);padding-top:16px;transition:var(--tr)}
  .step .n{font-family:var(--display);font-size:2.2rem;color:var(--accent);line-height:1;transition:var(--tr)}
  .step h3{font-family:var(--sans);font-size:1.1rem;font-weight:700;margin:10px 0 6px}
  .step p{margin:0;color:var(--muted);font-size:.98rem}

  .estate{display:none}

  .ladder{margin-top:32px;display:grid;gap:18px}@media(min-width:760px){.ladder.two{grid-template-columns:1fr 1fr}}
  .rung{background:var(--sand);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column}
  .rung .t{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);transition:var(--tr)}
  .rung h3{font-size:1.45rem;margin:10px 0 7px}.rung p{margin:0;color:var(--muted);font-size:1rem}

  .proof-grid{display:grid;gap:30px;align-items:center;margin-top:14px}@media(min-width:760px){.proof-grid{grid-template-columns:.9fr 1.3fr}}
  .quote{font-family:var(--display);font-size:1.6rem;line-height:1.35}
  .byline{margin-top:16px;font-size:.94rem;color:var(--muted)}
  .logos{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:30px}
  .logos span{border:1px dashed var(--line);border-radius:10px;padding:14px 20px;color:var(--muted);font-size:.86rem}
  .logos img{height:34px;width:auto;opacity:.85}
  .proof-by{display:flex;align-items:center;gap:14px;margin-top:22px}
  .proof-avatar{flex:none;width:54px;height:54px;border-radius:50%;object-fit:cover}
  .proof-by b{display:block;font-weight:700}
  .proof-by span{font-size:.9rem;color:var(--muted)}

  .faq{margin-top:26px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--display);font-size:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--accent);font-family:var(--sans);font-weight:700;transition:var(--tr)}
  .faq details[open] summary::after{content:"\2013"}
  .faq p{margin:0 0 20px;color:var(--muted);max-width:56ch}

  .billing-toggle{display:inline-flex;gap:6px;background:var(--sand);border:1px solid var(--line);border-radius:100px;padding:5px;margin-top:26px}
  .billing-toggle .bt{font-family:inherit;font-size:.9rem;font-weight:600;color:var(--muted);background:none;border:none;padding:9px 18px;border-radius:100px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:var(--tr),background .2s}
  .billing-toggle .bt.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(20,22,30,.12)}
  .billing-toggle .badge{font-size:.68rem;font-weight:700;color:#fff;background:var(--accent);border-radius:100px;padding:2px 7px;transition:var(--tr)}
  .price{display:grid;gap:20px;margin-top:26px}@media(min-width:760px){.price{grid-template-columns:repeat(2,minmax(0,1fr))}.price.price-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
  .plan{background:var(--sand);border:1px solid var(--line);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column}
  .plan.feature{background:var(--ink);color:var(--paper)}
  .plan .name{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);transition:var(--tr)}
  .plan .amt{font-family:var(--display);font-size:2.5rem;line-height:1;margin:14px 0 2px}
  /* The Enterprise plan's price is a word, not a number. "Custom" is six
     characters; "Индивидуально" and "ინდივიდუალური" are thirteen, and a single
     unbreakable word at 2.5rem runs straight out of a quarter-width card. Set
     it smaller — a word does not need to shout the way a figure does — and
     reserve the height the figure would have taken so the four cards still
     line up. */
  .plan .amt.words{font-size:1.45rem;line-height:1.2;margin:18px 0 4px;
    text-wrap:balance}
  .plan .per{font-size:.9rem;color:var(--muted)}.plan.feature .per{color:rgba(247,242,236,.6)}
  .plan .per-add{font-size:.9rem;font-weight:600;color:var(--ink);margin-top:3px}.plan.feature .per-add{color:rgba(247,242,236,.9)}
  .plan .desc{margin:16px 0 22px;font-size:.96rem;color:var(--muted)}.plan.feature .desc{color:rgba(247,242,236,.75)}
  .plan .pick{margin-top:auto;text-align:center;text-decoration:none;font-weight:600;padding:12px;border-radius:100px;border:1px solid currentColor;cursor:pointer;transition:transform .15s}
  .plan .pick:active{transform:scale(.97)}
  .plan.feature .pick{background:var(--accent);border-color:var(--accent);color:#fff}
  .addon{margin-top:20px;font-size:.94rem;color:var(--muted)}

  .capture{background:var(--ink);color:var(--paper);border-radius:26px;padding:52px 44px;margin-top:10px}
  .capture h2{color:var(--paper);max-width:16ch}
  .capture p{color:rgba(247,242,236,.7);margin:14px 0 0;max-width:44ch}
  .cap-form{display:grid;gap:14px;margin-top:26px;max-width:460px}
  .seg{display:flex;gap:8px;background:rgba(247,242,236,.1);border-radius:100px;padding:5px}
  .seg button{flex:1;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--paper);background:none;border:none;padding:9px;border-radius:100px;cursor:pointer;transition:background .2s}
  .seg button.on{background:var(--accent);transition:var(--tr),background .2s}
  .cap-form input{font-family:inherit;font-size:1rem;padding:14px 16px;border-radius:12px;border:1px solid rgba(247,242,236,.25);background:rgba(247,242,236,.06);color:var(--paper);width:100%}
  .cap-form input::placeholder{color:rgba(247,242,236,.5)}
  .cap-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
  .err{color:#f0a582;font-size:.86rem;display:none}.err.show{display:block}
  .success{display:none;font-family:var(--display);font-size:1.4rem;margin-top:20px}.success.show{display:block}

  .final{text-align:center;padding:92px 0}
  .final h2{font-size:clamp(2.2rem,5vw,3.4rem);max-width:16ch;margin:0 auto}
  .final p{color:var(--muted);margin:16px auto 0;max-width:40ch;font-size:1.12rem}

  footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:.9rem}
  footer .wrap{display:flex;flex-direction:column;gap:24px}
  .foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:flex-start}
  .foot-brand{font-weight:600;color:var(--ink)}
  .foot-modules{margin-top:6px}
  .foot-apps{display:flex;gap:12px;flex-wrap:wrap}
  .storebadge{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border:1px solid var(--line);border-radius:12px;background:var(--sand);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
  .storebadge:hover{border-color:var(--ink);transform:translateY(-2px)}
  .storebadge svg{width:22px;height:22px;flex:none}
  .storebadge span{display:flex;flex-direction:column;line-height:1.12}
  .storebadge small{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .storebadge b{font-size:.95rem;font-weight:600}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:18px}
  .foot-legal{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
  .foot-legal a{color:var(--muted);text-decoration:none}
  .foot-legal a:hover{color:var(--ink);text-decoration:underline}

  .stamp{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:60;pointer-events:none;font-family:var(--display);font-weight:600;font-size:2.6rem;letter-spacing:.06em;color:var(--accent);border:4px solid var(--accent);border-radius:14px;padding:10px 30px;opacity:0;text-transform:uppercase;mix-blend-mode:multiply;transition:var(--tr)}
  .stamp.go{animation:stampin 1.25s ease forwards}
  @keyframes stampin{0%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(-15deg)}16%{opacity:.95}30%{transform:translate(-50%,-50%) scale(1) rotate(-9deg)}72%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(1) rotate(-9deg)}}

  .modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(20,14,11,.55);backdrop-filter:blur(4px)}
  .modal.open{display:flex}
  .modal-card{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:22px;max-width:440px;width:100%;padding:34px 30px;box-shadow:0 40px 90px -30px rgba(20,22,30,.7);transform:translateY(10px);opacity:0;transition:opacity .25s ease,transform .25s ease}
  .modal.open .modal-card{transform:none;opacity:1}
  .modal-card h3{font-size:1.5rem;margin:0 0 10px}
  .modal-card p{color:var(--muted);font-size:1.02rem;margin:0}

  .rev{opacity:0;transform:translateY(14px)}.rev.in{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
  @media (prefers-reduced-motion:reduce){
    .rev{opacity:1;transform:none}.rev.in{transition:none}
    .stamp.go{animation:none;opacity:0}
    .chip{opacity:1;transform:none}
    .modal-card{transition:none}
  }

  @media (prefers-color-scheme:dark){
    :root{
      --ink:#cfcfd4; --paper:#141417; --sand:#1e1e22; --sand-2:#27272b;
      --line:#2b2b30; --muted:#9a9aa1;
      --terra:#f0803a; --terra-deep:#d96a24; --green:#5a9a97; --green-deep:#4a8582;
      --accent:var(--terra); --accent-deep:var(--terra-deep);
      --navy:#e9e9ee;
    }
    body.path-owner{--accent:var(--terra);--accent-deep:var(--terra-deep)}
    body.path-group{--accent:var(--green);--accent-deep:var(--green-deep)}
    .bar{background:rgba(20,20,23,.86)}
    .sec.dark,.closer,.capture,.plan.feature{background:#0e0e11}
    .sec.dark h2,.closer h2,.capture h2{color:#ededf0}
    .sec.dark .body,.closer p,.capture p{color:rgba(237,237,240,.72)}
    .sec.dark .body strong,.plan.feature{color:#ededf0}
    .reserved{background:rgba(255,255,255,.05)}
    .stamp{mix-blend-mode:normal}
    .shot{background:#17171a}
    .feat{background:var(--sand);border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 26px -20px rgba(0,0,0,.6)}
    .feat:hover{border-color:rgba(90,154,151,.5)}
    .storebadge{background:var(--sand);border-color:var(--line);color:var(--ink)}
    .storebadge:hover{border-color:var(--ink)}
    .logo img{filter:brightness(0) invert(1)}
  }

/* ---- hotel digital-twin visual ---- */
.hotelmap{position:relative;padding:20px 18px 16px;background:linear-gradient(160deg,#fbfbfc,#eef2f1)}
.hm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hm-head .live{display:inline-flex;align-items:center;gap:6px;color:var(--green-deep)}
.hm-head .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(49,109,109,.5);animation:pin 2.4s infinite}
.floor{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.room{position:relative;aspect-ratio:1.4/1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;border:1px solid rgba(0,0,0,.04)}
.room.ok{background:rgba(49,109,109,.15);color:var(--green-deep)}
.room.warn{background:rgba(242,153,74,.2);color:#b56b1e}
.room.red{background:rgba(229,72,77,.16);color:#c0353a;border-color:rgba(229,72,77,.45)}
.room .pin{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 0 rgba(229,72,77,.5);animation:pin 2s infinite}
@keyframes pin{0%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}70%{box-shadow:0 0 0 9px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.callout{position:absolute;right:16px;bottom:46px;width:206px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 44px -18px rgba(20,22,30,.5);padding:12px 13px}
.callout .c-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem}
.callout .c-h .dot{width:8px;height:8px;border-radius:50%;background:#e5484d;flex:none}
.callout .c-b{margin:6px 0 0;font-size:.8rem;color:var(--muted);line-height:1.4}
.callout .c-b b{color:#c0353a}
.callout .c-a{margin-top:9px;font-size:.76rem;font-weight:600;color:var(--accent)}
.legend{display:flex;gap:15px;margin-top:13px;font-size:.7rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legend i.ok{background:rgba(49,109,109,.45)}.legend i.warn{background:rgba(242,153,74,.55)}.legend i.red{background:#e5484d}
@media(max-width:560px){.callout{position:static;width:auto;margin-top:12px}}
@media(prefers-color-scheme:dark){.hotelmap{background:linear-gradient(160deg,#191a1e,#141519)}}

/* ---- section videos (2 total: team + guest) ---- */
/* PARKED — the video blocks and their lightbox were removed from index.html
   until there is real footage to show. Styles kept so the feature can be
   restored by putting the markup back; nothing on the site uses them now. */
.videoblock{position:relative;margin-top:30px;border-radius:18px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);cursor:pointer}
.videoblock.team{background:linear-gradient(135deg,#2b5c5c 0%,#16213e 100%)}
.videoblock.guest{background:linear-gradient(135deg,#e5601a 0%,#16213e 100%)}
.videoplay{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.94);color:#16213e;border:none;font-size:1.4rem;display:grid;place-items:center;cursor:pointer;padding-left:5px;box-shadow:0 14px 32px -10px rgba(0,0,0,.55);transition:transform .2s}
.videoblock:hover .videoplay{transform:scale(1.08)}
.video-cap{position:absolute;left:20px;bottom:16px;color:#fff;font-weight:600;font-size:.94rem}
.video-tag{position:absolute;right:16px;top:14px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(255,255,255,.14);border-radius:100px;padding:5px 11px}

/* ---- feature grid (guest capabilities) ---- */
.kick-green{color:var(--green-deep)}
.featgrid{display:grid;gap:16px;margin-top:34px}
@media(min-width:640px){.featgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.featgrid.three{grid-template-columns:repeat(3,1fr)}}
.feat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px 22px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(20,22,30,.04),0 12px 26px -20px rgba(20,22,30,.28);transition:transform .22s ease,box-shadow .28s ease,border-color .2s}
.feat:hover{transform:translateY(-4px);box-shadow:0 6px 14px -6px rgba(20,22,30,.1),0 26px 52px -24px rgba(49,109,109,.4);border-color:rgba(49,109,109,.28)}
.feat .fic{font-size:1.5rem;line-height:1}
.feat h3{font-size:1.16rem;margin:13px 0 7px}
.feat p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.feat .more{margin-top:auto;padding-top:18px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:.9rem;text-decoration:none}
.feat .more svg{width:15px;height:15px;transition:transform .2s}
.feat:hover .more svg{transform:translateX(3px)}
.featgrid.team .feat .fic{color:var(--green-deep)}
.featgrid.team .feat .more{color:var(--green-deep)}

/* AI section assurance points */
.aipoints{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.aipoints li{position:relative;padding-left:26px;font-size:.98rem;font-weight:500;color:var(--ink)}
.aipoints li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:rgba(255,116,36,.16)}
.aipoints li::after{content:"";position:absolute;left:5px;top:6px;width:8px;height:4px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* ---- chat mockup (team suite) ---- */
.chatmock{padding:22px 18px;background:linear-gradient(160deg,#fbfbfc,#eef2f1);display:flex;flex-direction:column;gap:10px;min-height:220px;justify-content:center}
.chatmock .msg{max-width:80%;padding:10px 13px;border-radius:14px;font-size:.85rem;line-height:1.42}
.chatmock .msg.in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.chatmock .msg.out{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
.chatmock .who{display:block;font-size:.66rem;font-weight:700;opacity:.72;margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em}
@media(prefers-color-scheme:dark){.chatmock{background:linear-gradient(160deg,#191a1e,#141519)}.chatmock .msg.in{background:#1e1e22}}

/* ---- hero price + CTA ---- */
.hero .nofees strong{color:var(--accent);font-size:1.08em}
.hero .hero-cta + .nofees strong{font-size:1em}
.hero-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--sand)}

/* ---- pricing feature lists ---- */
.plan .feats{list-style:none;margin:16px 0 20px;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:.87rem;text-align:left}
.plan.feature .feats{border-top-color:rgba(247,242,236,.18)}
.plan .feats li{display:flex;gap:8px;align-items:flex-start;color:var(--muted)}
.plan.feature .feats li{color:rgba(247,242,236,.82)}
.plan .feats li::before{content:"✓";color:var(--green);font-weight:700;flex:none}
.plan .feats li.muted{opacity:.7}
.plan .feats li.muted::before{content:"–";color:var(--muted)}
.plan .feats li.head{font-weight:600;color:var(--ink);margin-top:2px}
.plan.feature .feats li.head{color:#fff}
.plan .feats li.head::before{content:""}

/* ---- pricing fact callout ---- */
.pricefact{display:flex;align-items:center;gap:18px;margin-top:22px;background:var(--sand);border:1px solid var(--line);border-radius:16px;padding:18px 22px;max-width:660px}
.pricefact .big-n{font-family:var(--display);font-weight:600;font-size:2.7rem;line-height:1;color:var(--accent);flex:none}
.pricefact p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.5}
.pricefact p strong{color:var(--ink)}
.pricefact cite{font-style:normal;opacity:.65;font-size:.85em}
@media(max-width:520px){.pricefact{flex-direction:column;align-items:flex-start;gap:8px}}

/* ---- UX/UI polish pass ---- */
/* fact callout: cleaner layout, citation on its own line */
.pricefact{align-items:flex-start}
.pricefact .big-n{margin-top:2px}
.pf-text{display:flex;flex-direction:column}
.pricefact cite{display:block;margin-top:9px;font-style:normal;font-size:.8rem;opacity:.6}
/* pricing grid: 1 col mobile → 2 col tablet → 4 col desktop (no cramped 4-up on tablet) */
@media(min-width:640px) and (max-width:1039px){.price.price-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* minmax(0,1fr), not 1fr: a plain 1fr floors at the content width, so the
   card with the longest feature line grew its column and left the other
   three narrower than each other. */
@media(min-width:1040px){.price.price-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* visible keyboard focus for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* comfortable tap targets + readable type on small screens */
@media(max-width:640px){
  .hero h1{font-size:clamp(2.1rem,8.5vw,3rem)}
  .pricefact{gap:14px}.pricefact .big-n{font-size:2.2rem}
  .btn,.pick,.startbtn.filled{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .sec{padding:52px 0}
}

/* ---- kill-the-stack strip ---- */
.killstrip{display:grid;gap:22px;margin-top:32px}
@media(min-width:760px){.killstrip{grid-template-columns:repeat(3,1fr)}}
.ks{border-top:2px solid var(--accent);padding-top:16px}
.ks .ks-x{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(229,72,77,.18);color:#f0714f;font-weight:700;font-size:.82rem;margin-bottom:12px}
.ks b{display:block;font-size:1.12rem;margin-bottom:6px}
.ks p{margin:0;font-size:.96rem;line-height:1.5}
.sec.dark .ks b{color:var(--paper)}
.sec.dark .ks p{color:rgba(247,242,236,.72)}

/* ---- pricing onboarding note ---- */
.priceonboard{margin-top:26px;background:var(--sand);border:1px solid var(--line);border-radius:16px;padding:20px 22px;max-width:700px}
.priceonboard b{display:block;font-size:1.05rem;margin-bottom:7px}
.priceonboard p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55}
.priceonboard strong{color:var(--ink)}

/* ---- connected flow (offer → done) ---- */
.flow{display:grid;gap:14px;margin-top:34px}
@media(min-width:860px){.flow{grid-template-columns:repeat(5,1fr);gap:12px}}
.flowstep{position:relative;background:var(--sand);border:1px solid var(--line);border-radius:16px;padding:20px 16px;text-align:center}
.flowstep .fs-ic{font-size:1.55rem;line-height:1}
.flowstep b{display:block;font-size:.97rem;margin:11px 0 5px}
.flowstep p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.4}
.flowstep.done{border-color:var(--green);background:rgba(49,109,109,.09)}
.flowstep.done b{color:var(--green-deep)}
@media(min-width:860px){
  .flowstep:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--accent);font-weight:700;font-size:1.05rem;z-index:1}
}
@media(max-width:859px){
  .flowstep:not(:last-child)::after{content:"↓";display:block;text-align:center;color:var(--accent);font-weight:700;margin:8px 0 -8px}
}

/* ---- demo section: dark green + blurred hotel photo ---- */
/* Team photo shared by the people-led CTA blocks (homepage capture + closer). */
:root{--team-photo:url('/assets/team.jpg')}
.capture{position:relative;overflow:hidden;background:linear-gradient(135deg,#1c4a44 0%,#123331 55%,#0e2825 100%);border-radius:26px;padding:52px 46px;margin-top:10px}
.capture::before{content:"";position:absolute;inset:0;background-image:var(--team-photo);background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.42;z-index:0}
.capture::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,40,37,.94) 0%,rgba(18,51,47,.80) 45%,rgba(14,40,37,.55) 100%);z-index:0}
.capture > *{position:relative;z-index:1}
.cap-grid{display:grid}
.cap-left{max-width:none}
.capture .cap-lede{font-size:1.24rem;font-weight:500;color:rgba(247,242,236,.92);margin:16px 0 0;max-width:32ch}
.capture #cap-intro{margin-top:14px}
.cap-act{margin-top:30px}
.cap-book{margin-top:26px}
/* booking popup — Google Appointment scheduler in a modal */
.book-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(10,20,18,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.book-modal.open{display:flex}
.book-card{position:relative;width:100%;max-width:480px;height:min(88vh,760px);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 34px 90px -34px rgba(0,0,0,.65)}
.book-card iframe{display:block;width:100%;height:100%;border:0}
.book-close{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border:none;border-radius:50%;background:rgba(0,0,0,.06);color:#333;font-size:15px;line-height:1;cursor:pointer;transition:background .2s}
.book-close:hover{background:rgba(0,0,0,.12)}

/* ---- clean line icons (replace emoji) + polish ---- */
.feat .fic{color:var(--accent);height:30px;display:inline-flex;align-items:center}
.feat .fic svg{width:29px;height:29px}
.flowstep .fs-ic{color:var(--accent);display:inline-flex;justify-content:center;height:28px;margin-bottom:2px}
.flowstep .fs-ic svg{width:27px;height:27px}
.flowstep.done .fs-ic{color:var(--green-deep)}
.shot{box-shadow:0 34px 70px -34px rgba(20,22,30,.5)}

/* ================= LUXURY / HOSPITALITY RETUNE =================
   Brand: primary orange #ff7424 · secondary green #316d6d.
   Dark surfaces move from near-black to deep brand-green, with a
   soft blurred hotel-photo texture for a mature, luxury feel. */
:root{--forest-hi:#1c4a44;--forest:#123331;--forest-2:#0e2825}

/* dark band (Why hotels switch) → deep green + photo texture */
.sec.dark{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--forest-hi) 0%,var(--forest) 55%,var(--forest-2) 100%);
  --band-photo:url('https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=1600&q=60')}
/* The photo behind a dark band is one variable. Override it with a bg-* preset
   below, or per section with style="--band-photo:url('/assets/your-file.jpg')".
   A local file in /assets is preferred over a hotlink — see /assets/team.jpg. */
.sec.dark::before{content:"";position:absolute;inset:0;background:var(--band-photo) center/cover no-repeat;opacity:.13;filter:blur(2px);z-index:0}
.sec.dark > .wrap{position:relative;z-index:1}
.sec.dark .ks-x{background:rgba(255,116,36,.18);color:#ff9a5e}

/* featured pricing card → deep green (was near-black) */
.plan.feature{background:linear-gradient(165deg,var(--forest-hi) 0%,var(--forest-2) 100%)}

/* group-page closer → deep green + texture */
.closer{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--forest-hi) 0%,var(--forest-2) 100%)}
.closer::before{content:"";position:absolute;inset:0;background-image:var(--team-photo);background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.40;z-index:0}
.closer::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(14,40,37,.95) 0%,rgba(18,51,47,.82) 48%,rgba(14,40,37,.55) 100%)}
.closer > *{position:relative;z-index:1}

/* a touch more air = more premium */
@media(min-width:860px){.sec{padding:84px 0}}

/* ============ MERGED LUXURY HERO ============
   Hero + "why hotels switch" folded into one deep-green,
   photo-blurred band with the value points under the headline. */
.hero.herolux{padding:72px 0 68px;border-bottom:none}
@media(min-width:860px){.hero.herolux{padding:104px 0 96px}}
.hero.herolux h1{max-width:20ch}
.hero.herolux .h1link em{color:#ff9a5e}
.hero.herolux .lede{color:rgba(247,242,236,.78);max-width:46ch}
.hero.herolux .nofees{color:rgba(247,242,236,.9)}
.hero.herolux .nofees strong{color:#ff9a5e}
.hero.herolux .btn.ghost{border-color:rgba(247,242,236,.4);color:var(--paper)}
.hero.herolux .btn.ghost:hover{background:rgba(247,242,236,.08)}
.herolist{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;max-width:44ch}
@media(min-width:640px){.herolist{grid-template-columns:1fr 1fr;gap:12px 28px;max-width:none;max-width:640px}}
.herolist li{position:relative;padding-left:30px;font-size:1.02rem;font-weight:500;color:rgba(247,242,236,.92)}
.herolist li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:rgba(255,116,36,.18)}
.herolist li::after{content:"";position:absolute;left:6px;top:8px;width:8px;height:4px;border-left:2px solid #ff9a5e;border-bottom:2px solid #ff9a5e;transform:rotate(-45deg)}

/* ============ TRUST BAR (after hero) ============ */
.trustbar{padding:30px 0 32px}
.trustbar + section.sec{border-top:none}
.trust-names{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 44px}
.trust-names span{font-family:var(--display);font-size:1.06rem;font-weight:700;color:var(--muted);opacity:.72;letter-spacing:.01em;white-space:nowrap}
@media(max-width:640px){.trust-names{gap:10px 26px}.trust-names span{font-size:.92rem}}
.trust-label{text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.logos-marquee{overflow:hidden;width:100%;margin-top:4px;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent)}
.logos-track{display:flex;align-items:center;gap:72px;width:max-content;animation:logos-scroll 34s linear infinite}
.logos-marquee:hover .logos-track{animation-play-state:paused}
.logos-track img{height:58px;width:auto;flex:none;opacity:.55;filter:grayscale(1);transition:opacity .2s}
.logos-track img:hover{opacity:.9}
@keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){.logos-track{gap:48px}.logos-track img{height:40px}}
@media(prefers-reduced-motion:reduce){.logos-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

/* ============ 80% fact as plain text ============ */
.pricefact-text{max-width:62ch;margin-top:18px}
.pf-num{color:var(--accent);font-weight:700}
.pf-src{color:var(--muted);opacity:.7;font-size:.85em;white-space:nowrap}

@media (prefers-color-scheme:dark){
  .logos-track img{filter:grayscale(1) brightness(0) invert(1);opacity:.6}
  .logos-track img:hover{opacity:.9}
}

/* Crowne Plaza is a padded square logo — scale up so its mark matches the wordmarks */
.logos-track img[src*="crowne-plaza"]{height:92px}
@media(max-width:640px){.logos-track img[src*="crowne-plaza"]{height:64px}}

/* ============ CHECKLIST MOCK (sub-page visual) ============ */
.checklist{padding:20px 18px;background:linear-gradient(160deg,#fbfbfc,#f1f4f3);font-size:.95rem}
.cl-head{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.cl-prog{color:var(--green-deep)}
.checklist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.checklist li{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:500}
.checklist .cl-box{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid var(--line);background:#fff;position:relative}
.checklist li.done{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.22)}
.checklist li.done .cl-box{background:var(--green-deep);border-color:var(--green-deep)}
.checklist li.done .cl-box::after{content:"";position:absolute;left:5px;top:2px;width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
@media(prefers-color-scheme:dark){.checklist{background:linear-gradient(160deg,#191a1e,#141519)}.checklist .cl-box{background:#1e1e22}}

/* ============ CHECKLIST BUILDER MOCK (checklists sub-page) ============ */
.clbuild{padding:18px 16px;background:linear-gradient(160deg,#fbfbfc,#f1f4f3);font-size:.92rem}
.clbuild .cb-label{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.clbuild .cb-field{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);font-weight:600;margin-bottom:18px}
.clbuild .cb-cat{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:10px}
.clbuild .cb-cat-h{display:flex;align-items:center;gap:8px;padding:10px 13px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.clbuild .cb-caret{color:var(--muted);font-size:.8em}
.clbuild .cb-item{display:flex;align-items:center;gap:11px;padding:9px 13px;color:var(--ink)}
.clbuild .cb-item + .cb-item{border-top:1px solid var(--sand)}
.clbuild .cb-add{color:var(--green-deep);font-weight:600;padding:4px 2px}
.clbuild .cl-box{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid var(--line);background:#fff;position:relative}
.clbuild .cl-box.on{background:var(--green-deep);border-color:var(--green-deep)}
.clbuild .cl-box.on::after{content:"";position:absolute;left:5px;top:2px;width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.clbuild .cb-t{flex:1;min-width:0}
.clbuild .cb-metas{display:flex;align-items:center;gap:7px;flex:none}
.clbuild .cb-av{width:22px;height:22px;border-radius:50%;background:var(--a,#316d6d);color:#fff;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em;flex:none}
.clbuild .cb-av.sm{width:18px;height:18px;font-size:.54rem}
.clbuild .cb-cc{display:inline-flex;align-items:center;gap:3px;font-size:.72rem;font-weight:600;color:var(--muted)}
.clbuild .cb-cc svg{width:14px;height:14px}
.clbuild .cb-thumb{position:relative;width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:linear-gradient(135deg,#dfeae7,#eef1f0);display:flex;align-items:center;justify-content:center;color:var(--green-deep);flex:none}
.clbuild .cb-thumb svg{width:15px;height:15px}
.clbuild .cb-thumb.two::after{content:"";position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:linear-gradient(135deg,#f0e2d6,#f6efe8);z-index:-1}
.clbuild .cb-note{display:flex;align-items:flex-start;gap:8px;padding:8px 13px 9px;background:rgba(49,109,109,.07);color:var(--muted);font-size:.8rem;border-top:1px solid var(--sand)}
.clbuild .cb-note + .cb-item{border-top:1px solid var(--sand)}
.clbuild .cb-note-t{line-height:1.35}

/* storefront — Hotel services page (guest-facing) */

/* phone frame — guests open the storefront on a phone, so mock it as one */
.shot.phone{width:288px;max-width:100%;justify-self:center;margin:0 auto;border:none;background:#1c1d22;border-radius:46px;padding:9px;
  box-shadow:0 30px 60px -26px rgba(20,22,30,.55), inset 0 0 0 1px rgba(255,255,255,.07), 0 0 0 1px rgba(20,22,30,.18)}
.shot.phone .phone-screen{position:relative;border-radius:38px;overflow:hidden;background:#fff;aspect-ratio:9/19.5}
.shot.phone .phone-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:7;
  width:72px;height:20px;border-radius:100px;background:#1c1d22}
/* status bar sits over the header photo, as it does in a real app */
.shot.phone .phone-status{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;
  justify-content:space-between;padding:10px 17px 0;color:#fff;font-size:.55rem;font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.4)}
.shot.phone .phone-status svg{width:36px;height:11px;display:block}
.shot.phone .phone-home{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);z-index:6;
  width:104px;height:4px;border-radius:100px;background:rgba(0,0,0,.32)}
/* scale the storefront down to phone proportions */
.shot.phone .sfront{font-size:.86rem}
.shot.phone .sfront{height:100%;overflow:hidden}
.shot.phone .sfront .sf-hero{height:132px}
.shot.phone .sfront .sf-titlebar{padding:11px 12px 7px}
.shot.phone .sfront .sf-name{font-size:.95rem}
.shot.phone .sfront .sf-grid{gap:9px;padding:3px 12px 22px}
.shot.phone .sfront .sf-label{left:9px;right:9px;bottom:8px;font-size:.66rem;line-height:1.18}
.shot.phone .sfront .sf-label small{font-size:.54rem;line-height:1.25;margin-top:2px}
.shot.phone .sfront .sf-card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.6))}
.shot.phone .sfront .sf-motif{width:56px;height:56px;right:-8px;bottom:0}
.shot.phone .sfront .sf-price{font-size:.66rem;padding:2px 7px;left:8px;top:8px}
.shot.phone .sfront .sf-handle{width:20px;height:20px;right:7px;top:7px;border-radius:6px}
.shot.phone .sfront .sf-handle svg{width:11px;height:11px}
.shot.phone .sfront .sf-add{font-size:.72rem}
.shot.phone .sfront .sf-badge{top:34px}
@media(prefers-color-scheme:dark){.shot.phone .phone-screen{background:#141519}}
.sfront{background:#fff;font-size:.92rem}
.sfront .sf-hero{height:118px;background:var(--sfh,linear-gradient(135deg,#5f1f2e,#8a2f45 55%,#b4485f));position:relative}
.sfront .sf-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.28))}
.sfront .sf-badge{position:absolute;top:10px;right:10px;z-index:1;font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(40,90,90,.92);padding:3px 9px;border-radius:100px}
.sfront .sf-titlebar{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 8px}
.sfront .sf-name{font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--ink)}
.sfront .sf-home{color:var(--muted)}.sfront .sf-home svg{width:17px;height:17px;display:block}
.sfront .sf-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:4px 15px 16px}
.sfront .sf-card{position:relative;aspect-ratio:1/1;border-radius:13px;overflow:hidden;background:var(--g,#ccc);box-shadow:0 2px 8px rgba(20,22,30,.13)}
.sfront .sf-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.52))}
.sfront .sf-label{position:absolute;left:11px;right:11px;bottom:9px;z-index:2;color:#fff;font-weight:700;font-size:.88rem;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.sfront .sf-label small{display:block;font-weight:500;font-size:.68rem;line-height:1.3;margin-top:2px;opacity:.88}
.sfront .sf-motif{position:absolute;right:-10px;bottom:2px;z-index:1;width:78px;height:78px;color:#fff;opacity:.26;pointer-events:none}
/* the motif is the fallback: if the photo loads it is removed, if it 404s onerror
   drops the img and the motif shows through on the gradient instead */
.sfront .sf-card:has(.sf-photo) .sf-motif{display:none}
.sfront .sf-price{position:absolute;left:10px;top:10px;z-index:1;background:rgba(255,255,255,.95);color:var(--ink);font-weight:700;font-size:.72rem;padding:3px 8px;border-radius:100px}
.sfront .sf-handle{position:absolute;right:8px;top:8px;z-index:1;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:#6f7079}
.sfront .sf-handle svg{width:13px;height:13px}
.sfront .sf-add{aspect-ratio:1/1;border:1.5px dashed var(--line);border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-weight:600;font-size:.8rem;text-align:center}
.sfront .sf-plus{font-size:1.5rem;line-height:1;color:var(--green-deep)}
@media(prefers-color-scheme:dark){.sfront{background:#141519}.sfront .sf-name{color:#ededf0}.sfront .sf-add{border-color:#2a2a30}}

/* storefront settings mock */
.sset{background:linear-gradient(160deg,#fbfbfc,#f1f4f3);padding:18px 16px;font-size:.9rem}
.sset .sset-label{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.sset .sset-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sset .schip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 13px;font-weight:700;color:var(--ink);font-size:.82rem}
.sset .schip small{color:var(--muted);font-weight:600}
.sset .sset-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sset .sset-hdr{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.82rem}
.sset .sset-thumb{position:relative;overflow:hidden;width:36px;height:27px;border-radius:6px;background:linear-gradient(135deg,#5f1f2e,#b4485f);flex:none}
.sset .sset-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sset .spub{background:var(--green-deep);color:#fff;font-weight:700;padding:9px 20px;border-radius:100px;font-size:.85rem;white-space:nowrap}
@media(prefers-color-scheme:dark){.sset{background:linear-gradient(160deg,#191a1e,#141519)}.sset .schip{background:#1e1e22;border-color:#26262b}.sset .schip{color:#ededf0}}

/* storefront orders mock — mirrors the real Orders module in HQ */
.sord{background:#fff;font-size:.9rem;--so-line:#ececed;--so-track:#f4f4f6}
.sord .sord-title{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--ink);padding:14px 15px 10px;display:block}

/* status filter tabs */
.sord .sord-tabs{display:flex;align-items:center;gap:2px;margin:0 15px 11px;padding:3px;background:var(--so-track);border-radius:9px}
.sord .sotab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;border-radius:7px;font-size:.72rem;font-weight:600;color:var(--muted);white-space:nowrap}
.sord .sotab b{font-weight:700;color:var(--muted);opacity:.75}
.sord .sotab.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,22,30,.1)}
.sord .sotab.on b{color:var(--ink)}

/* search + filters */
.sord .sord-tools{display:flex;align-items:center;gap:9px;margin:0 15px 12px}
.sord .sord-search{flex:1;min-width:0;display:flex;align-items:center;gap:7px;border:1px solid var(--so-line);border-radius:9px;padding:7px 11px;color:var(--muted);font-size:.76rem}
.sord .sord-search svg{width:13px;height:13px;flex:none}
.sord .sord-filters{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--so-line);border-radius:9px;padding:7px 12px;font-size:.76rem;font-weight:600;color:var(--ink);white-space:nowrap}
.sord .sord-filters svg{width:13px;height:13px}

/* table */
.sord .sord-cols,.sord .sord-row{display:grid;grid-template-columns:minmax(0,62px) minmax(0,1.4fr) minmax(0,.95fr) minmax(0,78px) minmax(0,46px);gap:8px;align-items:center;padding:9px 15px}
.sord .sord-cols{border-top:1px solid var(--so-line);border-bottom:1px solid var(--so-line);font-size:.63rem;font-weight:600;color:var(--muted)}
.sord .sord-cols span{display:flex;align-items:center;gap:3px;min-width:0}
.sord .sord-cols svg{width:9px;height:9px;flex:none;opacity:.5}
.sord .sord-row{border-bottom:1px solid var(--so-line);font-size:.74rem}
.sord .sord-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* date group band */
.sord .sord-day{display:flex;align-items:center;gap:8px;padding:7px 15px;background:var(--so-track);border-bottom:1px solid var(--so-line)}
.sord .sord-daypill{background:var(--ink);color:#fff;font-size:.63rem;font-weight:700;padding:3px 9px;border-radius:100px}
.sord .sord-day small{color:var(--muted);font-size:.66rem;font-weight:600}

/* cells */
.sord .sord-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;color:var(--terra-deep);font-size:.71rem}
.sord .sord-demo{margin-left:4px;background:var(--so-track);color:var(--muted);font-size:.54rem;font-weight:700;letter-spacing:.05em;padding:2px 5px;border-radius:4px;vertical-align:middle}
.sord .sord-item{font-weight:700;color:var(--ink)}
.sord .sord-cust{color:var(--muted)}
.sord .sord-total{font-weight:700;color:var(--ink);text-align:right}
.sord .sord-tag{display:inline-flex;align-items:center;gap:3px;font-size:.62rem;font-weight:600;padding:3px 7px;border-radius:100px;max-width:100%}
.sord .sord-tag svg{width:8px;height:8px;flex:none;opacity:.7}
.sord .sord-tag.new{background:var(--so-track);color:var(--muted)}
.sord .sord-tag.conf{background:rgba(59,116,196,.13);color:#3b74c4}
.sord .sord-tag.done{background:rgba(49,109,109,.14);color:var(--green-deep)}
@media(prefers-color-scheme:dark){
  .sord{background:#141519;--so-line:#26262b;--so-track:#1e1e22}
  .sord .sord-title,.sord .sord-item,.sord .sord-total,.sord .sord-filters,.sord .sotab.on,.sord .sotab.on b{color:#ededf0}
  .sord .sotab.on{background:#2a2a30}
  .sord .sord-daypill{background:#ededf0;color:#141519}
  .sord .sord-tag.done{background:rgba(127,211,198,.16);color:#7fd3c6}
  .sord .sord-tag.conf{background:rgba(122,169,235,.16);color:#7aa9eb}
  .sord .sord-id{color:#ff8f4d}
}
/* photo layers (fall back to the gradient if the image can't load) */
.sfront .sf-hero{overflow:hidden}
.sfront .sf-heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sfront .sf-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sord .sord-thumb{position:relative;overflow:hidden}
.sord .sord-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(prefers-color-scheme:dark){.clbuild{background:linear-gradient(160deg,#191a1e,#141519)}.clbuild .cb-field,.clbuild .cb-cat{background:#1e1e22}.clbuild .cl-box{background:#1e1e22}.clbuild .cb-note{background:rgba(255,255,255,.05);border-top-color:#26262b}.clbuild .cb-item+.cb-item{border-top-color:#26262b}}

/* ============ CHECKLIST ITEM PROOF MOCK ============ */
.clproof{padding:18px 16px;background:linear-gradient(160deg,#fbfbfc,#f1f4f3);font-size:.92rem}
.cp-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 13px;margin-bottom:10px}
.cp-row{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:600}
.cp-row .cl-box{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid var(--line);background:#fff;position:relative}
.cp-row .cl-box.on{background:var(--green-deep);border-color:var(--green-deep)}
.cp-row .cl-box.on::after{content:"";position:absolute;left:5px;top:2px;width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.cp-tag{margin-left:auto;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.cp-tag.pass{background:rgba(40,90,82,.14);color:var(--green-deep)}
.cp-media{display:flex;gap:8px;margin:12px 0 10px}
.cp-photo{width:56px;height:42px;border-radius:8px;background:linear-gradient(135deg,#c9a27a,#7d5a3c);flex:none}
.cp-add{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px dashed var(--line);color:var(--muted);font-size:.85rem;font-weight:500}
.cp-note{background:var(--sand);border-radius:8px;padding:9px 11px;color:var(--muted);font-size:.9rem}
@media(prefers-color-scheme:dark){.clproof{background:linear-gradient(160deg,#191a1e,#141519)}.cp-item{background:#1e1e22}.cp-note{background:#27272b}}

/* ghost button on dark closer → white text */
.closer .btn.ghost,.capture .btn.ghost{border-color:rgba(247,242,236,.45);color:#fff}
.closer .btn.ghost:hover,.capture .btn.ghost:hover{background:rgba(247,242,236,.1)}

/* front-office image behind a dark band (opt-in via .bg-fo) */
.sec.dark.bg-fo{--band-photo:url('https://images.unsplash.com/photo-1445019980597-93fa8acb246c?auto=format&fit=crop&w=1600&q=60')}

/* ============ RECURRING-TASK SCHEDULER MOCK (preventive maintenance) ============ */
.rtask{padding:22px 20px;background:#fff;font-size:.92rem}
.rt-field{margin-bottom:16px}
.rt-field > label{display:block;font-weight:700;color:var(--ink);font-size:.95rem;margin-bottom:7px}
.rt-select,.rt-input{border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);background:#fff;font-weight:500;display:flex;align-items:center;justify-content:space-between}
.rt-caret{color:var(--muted);font-size:1.1em}
.rt-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rt-days{display:flex;flex-wrap:wrap;gap:8px}
.rt-days span{font-size:.85rem;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:8px 14px;background:#fff}
.rt-days span.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rt-time-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rt-clock{gap:8px;justify-content:flex-start}
.rt-clock svg{width:16px;height:16px;color:var(--muted);flex:none}
.rt-tz{color:var(--muted);font-size:.85rem}
@media(prefers-color-scheme:dark){.rtask{background:#141417}.rt-select,.rt-input,.rt-days span{background:#1e1e22}}

/* preventive-maintenance dark band background */
.sec.dark.bg-pm{--band-photo:url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1600&q=60')}

/* safety: size any .more link icon (not only inside .feat) */
.more svg{width:15px;height:15px;flex:none}

/* ============ LEGAL / PRIVACY PAGE ============ */
.legal{padding:44px 0 64px}
.legal .wrap{max-width:760px}
.backlink{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;font-weight:600;font-size:.9rem;margin-bottom:26px}
.backlink:hover{color:var(--accent)}
.backlink svg{width:16px;height:16px}
.legal h1{font-size:clamp(2.2rem,5vw,3rem);margin:10px 0 6px}
.legal-meta{color:var(--muted);font-size:.92rem;margin:0 0 26px}
.legal-lead{font-size:1.12rem;color:var(--ink);border-left:3px solid var(--accent);padding-left:16px;margin:0 0 34px}
.legal h2{font-size:1.28rem;margin:34px 0 10px}
.legal p{color:var(--muted);margin:0 0 12px}
.legal ul{color:var(--muted);margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.legal strong{color:var(--ink)}
.legal h3{font-size:1.04rem;margin:22px 0 8px;color:var(--ink)}
.legal a[href^="mailto"],.legal p a[href^="http"],.legal li a[href^="http"]{color:var(--accent);text-decoration:none;word-break:break-word}
.legal a[href^="mailto"]:hover,.legal p a[href^="http"]:hover,.legal li a[href^="http"]:hover{text-decoration:underline}

/* ============ TEAM CHAT MOCKS ============ */
.chatui{display:grid;grid-template-columns:40% 60%;background:#fff;font-size:.85rem;min-height:330px}
.chatui.solo{grid-template-columns:1fr}
.cu-side{border-right:1px solid var(--line);padding:12px 10px;background:var(--sand);display:flex;flex-direction:column}
.cu-search{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--muted);font-size:.74rem;margin-bottom:6px}
.cu-sec{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:12px 4px 5px}
.cu-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;color:var(--ink);font-weight:500}
.cu-item.on{background:rgba(255,116,36,.1)}
.cu-ic{width:24px;height:24px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:.6rem;font-weight:700;flex:none}
.cu-ic.gr{background:var(--green)}
.cu-lock{margin-left:auto;font-size:.8em;opacity:.6}
.cu-av{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--sand);flex:none}
.cu-main{display:flex;flex-direction:column;min-height:330px}
.cu-head{padding:12px 15px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.cu-msgs{flex:1;padding:15px;display:flex;flex-direction:column;gap:11px}
.cu-msg{max-width:86%;background:var(--sand);border-radius:11px;padding:9px 12px;color:var(--ink);line-height:1.35}
.cu-msg b{display:block;font-size:.7rem;color:var(--muted);margin-bottom:3px;font-weight:600}
.cu-msg.you{align-self:flex-end;background:rgba(49,109,109,.13)}
.cu-task{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px dashed var(--accent);color:var(--accent);border-radius:11px;padding:9px 12px;font-weight:600;font-size:.82rem}
.cu-task-label{display:inline-flex;align-items:center;gap:8px}
.cu-task-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.cu-voice{display:inline-flex;align-items:center;gap:10px;background:var(--sand);border-radius:11px;padding:9px 13px;max-width:86%}
.cu-play{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:.65rem;padding-left:2px;flex:none}
.cu-wave{flex:1;height:16px;min-width:90px;background:repeating-linear-gradient(90deg,var(--green) 0 2px,transparent 2px 5px);opacity:.5;border-radius:3px}
.cu-dur{color:var(--muted);font-size:.78rem}
.cu-transcript{max-width:86%;color:var(--ink);font-size:.86rem;padding:2px 2px 0}
.cu-t-label{display:inline-block;font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);margin-right:6px}
.cu-composer{border-top:1px solid var(--line);padding:12px 15px;color:var(--muted)}
@media(max-width:520px){.chatui{grid-template-columns:1fr}.cu-side{display:none}}
@media(prefers-color-scheme:dark){.chatui,.cu-main{background:#141417}.cu-side{background:#19191d}.cu-search,.cu-msg,.cu-voice{background:#1e1e22}}

/* leak comparison mock */
.leakmock{padding:20px 18px;background:linear-gradient(160deg,#fbfbfc,#f1f4f3);display:flex;flex-direction:column;gap:11px}
.lk-row{display:flex;align-items:center;gap:11px;font-weight:500;color:var(--ink);font-size:.95rem}
.lk-x{width:22px;height:22px;border-radius:50%;background:rgba(214,69,54,.14);color:#d64536;display:grid;place-items:center;font-size:.72rem;flex:none}
.lk-v{width:22px;height:22px;border-radius:50%;background:rgba(40,90,82,.16);color:var(--green-deep);display:grid;place-items:center;font-size:.72rem;flex:none}
.lk-row.bad{color:var(--muted)}
.lk-div{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);margin:8px 0 2px;padding-top:12px;border-top:1px solid var(--line)}
@media(prefers-color-scheme:dark){.leakmock{background:linear-gradient(160deg,#191a1e,#141519)}}

/* team-chat dark band background */
.sec.dark.bg-chat{--band-photo:url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=60')}

/* task suggestion yes/no */
.cu-yn{display:inline-flex;gap:6px;margin-left:10px}
.cu-yes,.cu-no{font-size:.72rem;font-weight:700;border-radius:100px;padding:3px 12px;line-height:1.4}
.cu-yes{background:var(--accent);color:#fff}
.cu-no{border:1px solid var(--line);color:var(--muted)}

.chatui.solo .cu-side{border-right:none}

/* ============ LOCATIONS MOCKS ============ */
.loctree{padding:12px 12px;background:#fff;font-size:.9rem}
.lt-top{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:2px 6px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.lt-add{color:var(--green-deep);letter-spacing:.04em}
.lt-row{display:flex;align-items:center;gap:9px;padding:8px 8px;border-radius:8px;color:var(--ink);font-weight:500}
.lt-prop.on{background:var(--sand);font-weight:700}
.lt-ic{width:16px;height:16px;flex:none;color:var(--muted)}
.lt-tw{color:var(--muted);font-size:.72em;width:9px;flex:none}
.lt-l1{padding-left:16px}
.lt-l2{padding-left:34px}
.lt-l3{padding-left:56px}
.lt-code{font-weight:700;background:var(--sand);border-radius:6px;padding:2px 9px;font-size:.8rem}
.lt-type{color:var(--muted);font-size:.86rem}
.lt-n{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--muted);background:var(--sand);border-radius:6px;padding:1px 9px;min-width:22px;text-align:center}
.lt-prop.on .lt-n{background:#fff}
.lt-st{margin-left:auto;font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:100px}
.lt-st.clean{background:rgba(40,90,82,.14);color:var(--green-deep)}
.lt-st.dirty{background:rgba(214,150,40,.18);color:#a8710f}
.lt-st.repair{background:rgba(214,69,54,.14);color:#d64536}
.lt-virtual{color:var(--muted)}
@media(prefers-color-scheme:dark){.loctree{background:#141417}.lt-prop.on{background:#1e1e22}.lt-code,.lt-n{background:#1e1e22}.lt-prop.on .lt-n{background:#141417}}

/* new-location modal mock */
.locadd{padding:20px 18px;background:#fff;font-size:.9rem}
.la-title{font-weight:700;color:var(--ink);font-size:1.05rem;margin-bottom:14px}
.la-q{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.la-seg{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.la-seg span{font-size:.82rem;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:7px 12px;background:#fff}
.la-seg span.on{border-color:var(--accent);color:var(--accent);background:rgba(255,116,36,.07)}
.la-row{display:flex;gap:12px;margin-bottom:14px}
.la-field{display:flex;flex-direction:column;gap:6px}
.la-field.wide{flex:1}
.la-field > label{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.la-input{border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--ink);font-weight:500;background:#fff}
.la-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.la-opts{color:var(--muted);font-size:.82rem}
.la-add{background:var(--accent);color:#fff;font-weight:700;font-size:.85rem;border-radius:100px;padding:8px 20px}
@media(prefers-color-scheme:dark){.locadd{background:#141417}.la-seg span,.la-input{background:#1e1e22}}

/* location chips + task-with-location mock */
.locchips{display:flex;flex-wrap:wrap;gap:8px}
.locchips .lc{background:var(--sand);border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-weight:600;font-size:.82rem;color:var(--ink)}
.locchips .lc.alt{color:var(--green-deep)}
.locchips .lc.pin{padding-left:26px;position:relative}
.locchips .lc.pin::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50% 50% 50% 0;background:var(--accent);rotate:45deg}
.loctask{padding:20px 18px;background:#fff}
.lk-task-t{font-weight:700;color:var(--ink);font-size:1.05rem}
.lk-task-meta{color:var(--muted);font-size:.88rem;margin:4px 0 16px}
.lk-task-loclabel{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
@media(prefers-color-scheme:dark){.loctask{background:#141417}.locchips .lc{background:#1e1e22}}

/* locations dark band background */
.sec.dark.bg-loc{--band-photo:url('https://images.unsplash.com/photo-1578683010236-d716f9a3f461?auto=format&fit=crop&w=1600&q=60')}

/* ============ AI SECTION SCENARIO MOCKS ============ */
.aichat{padding:15px;display:flex;flex-direction:column;gap:10px;background:#fff;min-height:150px}
.aichat .am{max-width:88%;background:var(--sand);border-radius:12px;padding:9px 12px;font-size:.9rem;line-height:1.38;color:var(--ink)}
.aichat .am b{display:block;font-size:.66rem;color:var(--muted);margin-bottom:3px;font-weight:600}
.aichat .am.you{align-self:flex-end;background:rgba(49,109,109,.13)}
.aichat .am.agent{align-self:flex-start}
.aichat .am-file{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:.8rem;font-weight:600;margin:0 0 7px}
.aichat .am-file svg{width:14px;height:16px;color:var(--green-deep);flex:none}
.aichat .am-stat{align-self:center;margin-top:2px;font-size:.78rem;font-weight:700;color:var(--accent);background:rgba(255,116,36,.1);border-radius:100px;padding:6px 15px}
@media(prefers-color-scheme:dark){.aichat{background:#141417}.aichat .am{background:#1e1e22}.aichat .am-file{background:#141417}}

/* module modal rich body */
#modal-body p{margin:0 0 12px;color:var(--muted)}
#modal-body ul{margin:0 0 12px;padding-left:18px;display:flex;flex-direction:column;gap:8px;color:var(--muted)}
#modal-body strong{color:var(--ink)}
#modal-body .mod-src{color:var(--muted);opacity:.7;font-size:.85em}

/* ============ AI SIDEKICK BAR (platform-style) ============ */
.skbar{background:#fff;display:flex;flex-direction:column;min-height:180px}
.sk-head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink);font-size:.92rem}
.sk-ic{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--terra-deep));color:#fff;display:grid;place-items:center;flex:none}
.sk-ic svg{width:15px;height:15px}
.sk-body{flex:1;padding:14px;display:flex;flex-direction:column;gap:10px}
.sk-you{align-self:flex-end;max-width:88%;background:rgba(49,109,109,.12);border-radius:12px;padding:9px 12px;font-size:.9rem;line-height:1.38;color:var(--ink)}
.sk-reply{align-self:flex-start;max-width:92%;background:var(--sand);border-radius:12px;padding:9px 12px;font-size:.9rem;line-height:1.42;color:var(--ink)}
.sk-link{color:var(--accent);font-weight:600;white-space:nowrap}
.filechip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:.8rem;font-weight:600;margin:0 0 7px}
.filechip svg{width:14px;height:16px;color:var(--green-deep);flex:none}
.sk-input{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 12px 12px;border:1px solid var(--line);border-radius:100px;padding:7px 7px 7px 15px;color:var(--muted);font-size:.88rem}
.sk-send{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.sk-send svg{width:15px;height:15px}
@media(prefers-color-scheme:dark){.skbar{background:#141417}.sk-reply{background:#1e1e22}.filechip{background:#141417}}

@media(min-width:820px){.price.price-3{grid-template-columns:repeat(3,1fr)}}

/* ============ SMART INBOX MOCKS (guest communication) ============ */
.sinbox{background:#fff;font-size:.85rem}
.sinbox .si-top{display:flex;align-items:center;gap:9px;padding:12px 14px 9px}
.sinbox .si-title{font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--ink);margin-right:auto}
.sinbox .si-live{display:inline-flex;align-items:center;gap:5px;font-size:.64rem;font-weight:700;color:var(--green-deep)}
.sinbox .si-live i{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
.sinbox .si-tabs{display:flex;gap:5px;padding:0 14px 11px;flex-wrap:wrap}
.sinbox .sitab{display:inline-flex;align-items:center;gap:5px;border-radius:100px;padding:4px 10px;font-size:.68rem;font-weight:600;color:var(--muted);background:var(--sand)}
.sinbox .sitab.on{background:var(--accent);color:#fff}
.sinbox .si-body{display:grid;grid-template-columns:46% 54%;border-top:1px solid var(--line)}
.sinbox .si-list{border-right:1px solid var(--line)}
.sinbox .si-row{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-bottom:1px solid var(--sand)}
.sinbox .si-row.on{background:rgba(255,116,36,.07)}
.sinbox .si-av{position:relative;width:27px;height:27px;border-radius:50%;background:var(--sand-2);color:var(--muted);display:grid;place-items:center;font-size:.58rem;font-weight:700;flex:none}
.sinbox .si-ch{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1.5px solid #fff}
.sinbox .si-ch svg{width:8px;height:8px}
.sinbox .si-ch.wa{background:#25D366}.sinbox .si-ch.ig{background:#C13584}
.sinbox .si-ch.em{background:#7b7c85}.sinbox .si-ch.web{background:#3b74c4}
.sinbox .si-rmain{min-width:0;flex:1}
.sinbox .si-name{display:block;font-weight:700;color:var(--ink);font-size:.77rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sinbox .si-snip,.sinbox .si-prop{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sinbox .si-snip{font-size:.71rem}
.sinbox .si-prop{font-size:.62rem;margin-top:2px}
.sinbox .si-tag{display:inline-block;font-size:.56rem;font-weight:700;padding:2px 6px;border-radius:100px;margin-top:3px}
.sinbox .si-tag.alert{background:rgba(214,69,54,.13);color:#d64536}
.sinbox .si-tag.req{background:rgba(255,116,36,.15);color:var(--terra-deep)}
.sinbox .si-tag.book{background:rgba(59,116,196,.13);color:#3b74c4}
.sinbox .si-time{color:var(--muted);font-size:.62rem;flex:none}
.sinbox .si-thread{display:flex;flex-direction:column}
.sinbox .si-thead{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink);font-size:.8rem}
.sinbox .si-assign{margin-left:auto;font-size:.63rem;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:3px 9px;white-space:nowrap}
.sinbox .si-thead.stack{flex-wrap:wrap;row-gap:7px}
.sinbox .si-thead.stack .si-name-x{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sinbox .si-thead.stack .si-assign{margin-left:0}
.sinbox .si-msgs{flex:1;padding:12px;display:flex;flex-direction:column;gap:9px}
.sinbox .si-msg{max-width:88%;background:var(--sand);border-radius:11px;padding:8px 11px;color:var(--ink);font-size:.76rem;line-height:1.4}
.sinbox .si-msg.you{align-self:flex-end;background:rgba(49,109,109,.13)}
.sinbox .si-comp{border-top:1px solid var(--line);padding:10px 11px}
.sinbox .si-inputbox{border:1px solid var(--line);border-radius:12px;padding:9px 10px}
.sinbox .si-ph{display:block;color:var(--muted);font-size:.75rem;margin-bottom:9px}
.sinbox .si-crow{display:flex;align-items:center;gap:6px}
.sinbox .si-ic{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);flex:none}
.sinbox .si-ic svg{width:11px;height:11px}
.sinbox .si-send{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.sinbox .si-send svg{width:12px;height:12px}
/* search above the conversation list */
.sinbox .si-find{display:flex;align-items:center;gap:7px;margin:9px 10px;border:1px solid var(--line);border-radius:9px;padding:6px 9px;color:var(--muted);font-size:.69rem;white-space:nowrap;overflow:hidden}
.sinbox .si-find span{overflow:hidden;text-overflow:ellipsis}
.sinbox .si-find svg{width:11px;height:11px;flex:none}
/* unread marker + thread header bits */
.sinbox .si-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;margin-top:9px}
.sinbox .si-thav{width:23px;height:23px;border-radius:50%;background:var(--sand-2);color:var(--muted);display:grid;place-items:center;font-size:.54rem;font-weight:700;flex:none}
.sinbox .si-stamp{display:block;font-size:.59rem;color:var(--muted);margin-top:4px}
.sinbox .si-msg.you .si-stamp{text-align:right}
@media(max-width:560px){.sinbox .si-body{grid-template-columns:1fr}.sinbox .si-list{border-right:none}}
@media(prefers-color-scheme:dark){
  .sinbox{background:#141417}
  .sinbox .si-inputbox,.sinbox .si-find,.sinbox .si-ic{border-color:#26262b}
  .sinbox .si-thav{background:#26262b}
  .sinbox .si-title,.sinbox .si-name,.sinbox .si-msg,.sinbox .si-thead{color:#ededf0}
  .sinbox .sitab,.sinbox .si-msg{background:#1e1e22}
  .sinbox .si-body,.sinbox .si-list,.sinbox .si-thead,.sinbox .si-comp,.sinbox .si-row{border-color:#26262b}
  .sinbox .si-ch{border-color:#141417}
}

/* guest panel mock */
.gpanel{background:#fff;padding:16px 15px}
.gpanel .gp-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.gpanel .gp-av{width:42px;height:42px;border-radius:50%;background:var(--sand-2);color:var(--muted);display:grid;place-items:center;font-weight:700;font-size:.82rem;flex:none}
.gpanel .gp-name{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.gpanel .gp-sub{color:var(--muted);font-size:.74rem}
.gpanel .gp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.gpanel .gtag{font-size:.66rem;font-weight:700;border-radius:100px;padding:4px 10px;background:var(--sand);color:var(--muted)}
.gpanel .gtag.hot{background:rgba(255,116,36,.14);color:var(--terra-deep)}
.gpanel .gtag.book{background:rgba(59,116,196,.13);color:#3b74c4}
.gpanel .gp-rows{border-top:1px solid var(--line)}
.gpanel .gp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--sand);font-size:.8rem;color:var(--muted)}
.gpanel .gp-row b{color:var(--ink);font-weight:700}
.gpanel .gp-count{background:var(--sand);border-radius:100px;padding:2px 9px;font-size:.68rem;font-weight:700;color:var(--ink)}
.gpanel .gp-note{margin-top:13px;background:rgba(49,109,109,.07);border-radius:10px;padding:10px 12px;color:var(--muted);font-size:.76rem;line-height:1.45}
@media(prefers-color-scheme:dark){
  .gpanel{background:#141417}
  .gpanel .gp-name,.gpanel .gp-row b,.gpanel .gp-count{color:#ededf0}
  .gpanel .gtag,.gpanel .gp-count{background:#1e1e22}
  .gpanel .gp-rows,.gpanel .gp-row{border-color:#26262b}
  .gpanel .gp-note{background:rgba(255,255,255,.05)}
}

.sinbox .si-tag.own{background:rgba(49,109,109,.13);color:var(--green-deep)}
.sinbox .si-tag.free{background:var(--sand);color:var(--muted)}
@media(prefers-color-scheme:dark){.sinbox .si-tag.free{background:#1e1e22}}

/* channel chips with brand marks */
.chanrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chanchip{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:7px 15px 7px 11px;font-weight:600;font-size:.86rem;color:var(--ink)}
.chanchip svg{width:17px;height:17px;flex:none;display:block}
@media(prefers-color-scheme:dark){.chanchip{background:#1e1e22;border-color:#26262b;color:#ededf0}}

/* campaigns list mock */
.camp{background:#fff;font-size:.85rem}
.camp .cm-title{font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--ink);padding:13px 14px 9px;display:block}
.camp .cm-tabs{display:flex;gap:16px;padding:0 14px;border-bottom:1px solid var(--line)}
.camp .cm-tab{font-size:.76rem;font-weight:600;color:var(--muted);padding-bottom:8px}
.camp .cm-tab.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.camp .cm-cols,.camp .cm-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.25fr) minmax(0,70px) minmax(0,52px);gap:9px;align-items:center;padding:9px 14px}
.camp .cm-cols{font-size:.62rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
.camp .cm-row{border-bottom:1px solid var(--sand);font-size:.74rem}
.camp .cm-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp .cm-name{font-weight:700;color:var(--ink)}
.camp .cm-aud{color:var(--muted)}
.camp .cm-ok{display:inline-flex;align-items:center;gap:4px;background:rgba(49,109,109,.14);color:var(--green-deep);font-size:.6rem;font-weight:700;padding:3px 7px;border-radius:100px}
.camp .cm-on{width:26px;height:15px;border-radius:100px;background:var(--green);position:relative;display:inline-block}
.camp .cm-on::after{content:"";position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:#fff}
@media(prefers-color-scheme:dark){
  .camp{background:#141417}
  .camp .cm-title,.camp .cm-name,.camp .cm-tab.on{color:#ededf0}
  .camp .cm-cols,.camp .cm-tabs,.camp .cm-row{border-color:#26262b}
}

/* ============ BLOG ============ */
.postwrap{max-width:720px;margin:0 auto;padding:0 24px}
.postmeta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--muted);font-size:.82rem;margin-bottom:14px}
.postmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);display:inline-block}
.post h1{font-size:clamp(2rem,5vw,2.9rem);margin-bottom:18px}
.post .lede{font-size:1.14rem;line-height:1.6;color:var(--muted);margin:0 0 34px}
.post h2{font-size:clamp(1.35rem,3vw,1.7rem);margin:40px 0 12px}
.post h3{font-family:var(--sans);font-size:1.02rem;font-weight:700;margin:26px 0 8px;color:var(--ink)}
.post p{line-height:1.68;margin:0 0 17px}
.post ul{margin:0 0 18px;padding-left:20px;line-height:1.68}
.post li{margin-bottom:7px}
.post strong{font-weight:700;color:var(--ink)}
.post .pullquote{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:26px 0;font-family:var(--display);font-size:1.12rem;line-height:1.5;color:var(--ink)}
.post .note{border-top:1px solid var(--line);padding-top:12px;margin:6px 0 26px;font-size:.82rem;line-height:1.55;color:var(--muted)}
.post .pullquote b{font-weight:700;color:var(--accent)}
.post .pullquote.green{border-left-color:var(--green)}
.post .ask{border-left:3px solid var(--accent);padding-left:18px;margin:0 0 18px;line-height:1.68}
.post .ask b{font-weight:700;color:var(--ink)}
/* comparison table */
.ptable{width:100%;overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:16px}
.ptable table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:620px}
.ptable th,.ptable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.ptable .num{text-align:right;white-space:nowrap}
.ptable tbody td:first-child{font-weight:700;color:var(--ink)}
/* group header */
.ptable .grp th{font-family:var(--sans);font-size:.78rem;font-weight:700;padding-bottom:6px;border-bottom:none;color:var(--muted)}
.ptable .grp th small{display:block;font-weight:500;font-size:.7rem;color:var(--muted);margin-top:2px}
.ptable .grp th.us{color:var(--green-deep)}
.ptable .grp th.us small{color:var(--green-deep);opacity:.75}
/* column header */
.ptable .cols th{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:0}
/* green band down the Treema side */
.ptable .us{background:rgba(49,109,109,.07)}
.ptable tbody .us{font-weight:700;color:var(--green-deep)}
.ptable tbody .us.big{font-size:1.02rem}
.ptable .them{color:var(--muted)}
.ptable tbody .diff{font-weight:700;color:var(--ink)}
.ptable tbody tr:last-child td{border-bottom:none}
/* index cards */
.postgrid{display:grid;gap:18px;margin-top:8px}
@media(min-width:760px){.postgrid{grid-template-columns:1fr 1fr}}
.postcard{border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;background:var(--paper);display:flex;flex-direction:column}
.postcard .pk{font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.postcard h3{font-family:var(--display);font-size:1.22rem;line-height:1.22;margin:0 0 9px;color:var(--ink)}
.postcard p{color:var(--muted);line-height:1.55;margin:0 0 15px;font-size:.94rem}
.postcard .more{margin-top:auto}
@media(prefers-color-scheme:dark){
  .postcard{background:#141417;border-color:#26262b}
  .ptable{border-color:#26262b}
  .ptable th,.ptable td{border-color:#26262b}
  .ptable .us{background:rgba(90,154,151,.13)}
  .ptable .grp th.us,.ptable tbody .us{color:var(--green)}
  .ptable .grp th.us small{color:var(--green)}
}

/* blog headline — two-tone, serif */
.post h1.split .pay{color:var(--ink)}
.post h1.split .use{color:var(--accent)}
@media(prefers-color-scheme:dark){.post h1.split .pay{color:#ededf0}}

/* ===================== PRICING PAGE ===================== */
.pr-head{max-width:760px}
.pr-head .body{margin-top:14px}

/* module comparison table — one row per module, one column per plan */
.cmp{margin-top:30px;border:1px solid var(--line);border-radius:18px;overflow-x:auto;background:var(--paper)}
.cmp table{width:100%;border-collapse:collapse;min-width:880px;font-size:.92rem}
.cmp th,.cmp td{padding:13px 16px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line)}

/* plan header */
.cmp thead th{border-bottom:1px solid var(--line);padding:20px 16px 16px;vertical-align:top}
.cmp thead th.mod{vertical-align:bottom}
.cmp .cn{display:block;font-weight:700;font-size:.84rem;letter-spacing:.03em;color:var(--muted);line-height:1.25;min-height:2.4em}
.cmp .cp{display:block;margin-top:2px;font-family:var(--display);font-size:1.62rem;font-weight:700;color:var(--ink);line-height:1.05;white-space:nowrap}
.cmp thead th.hi .cp{color:var(--green-deep)}
.cmp .cpx{display:block;margin-top:5px;font-size:.72rem;font-weight:600;color:var(--muted);line-height:1.35;min-height:2.7em}
.cmp .cmp-lbl{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* module name column — stays put while the plans scroll sideways */
.cmp td.mod,.cmp th.mod{position:sticky;left:0;z-index:2;background:var(--paper);text-align:left;min-width:250px;font-weight:600;color:var(--ink);
  box-shadow:1px 0 0 var(--line)}
.cmp td.mod small{display:block;font-weight:400;font-size:.79rem;line-height:1.45;color:var(--muted);margin-top:3px}

/* module name + info popup */
/* the sticky module cell makes its own stacking context — lift it while a popup is open,
   otherwise later rows paint over the popup */
.cmp td.mod:hover,.cmp td.mod:focus-within{z-index:40}
.mi{position:relative;display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.mi-name{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:1px;transition:color .15s}
.mi-name:hover,.mi-name:focus-visible{color:var(--accent)}
.mi-name.plain{border-bottom:2px dotted var(--line);cursor:default}
.mi-i{flex:none;width:17px;height:17px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);
  font-family:var(--sans);font-size:.66rem;font-weight:700;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s,background .15s}
.mi-i:hover,.mi-i:focus-visible{border-color:var(--accent);color:var(--accent);background:rgba(255,116,36,.08)}
.mi-pop{position:absolute;top:calc(100% + 9px);left:0;z-index:30;width:290px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(20,20,25,.16);
  padding:13px 15px;font-size:.82rem;font-weight:400;line-height:1.5;color:var(--muted);text-align:left;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility .16s}
.mi:hover .mi-pop,.mi:focus-within .mi-pop{opacity:1;visibility:visible;transform:translateY(0)}
.mi-more{display:block;margin-top:9px;font-weight:600;font-size:.8rem;color:var(--accent);text-decoration:none}
.mi-more:hover{text-decoration:underline}
/* the popup can only escape the cell once the table no longer needs to scroll */
@media(min-width:980px){.cmp{overflow:visible}}

/* group divider rows */
.cmp tr.grp td{background:var(--sand);text-align:left;padding:11px 16px;box-shadow:none}
.cmp .grp-l{position:sticky;left:16px;display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

/* cells */
.cmp td.y{color:var(--green);font-weight:700;font-size:1.05rem}
.cmp td.n{color:var(--line-strong,#c8c8cd)}
.cmp td.v{color:var(--ink);font-weight:600;font-size:.87rem;white-space:nowrap}

/* highlighted plan column */
.cmp .hi{background:rgba(49,109,109,.06)}
.cmp thead th.hi{background:rgba(49,109,109,.11);border-radius:12px 12px 0 0}

/* footer row of buttons */
.cmp tfoot td{border-bottom:none;padding:20px 16px 24px}
.cmp tfoot .fp{display:block;font-family:var(--display);font-size:1.18rem;font-weight:700;color:var(--ink);line-height:1.15;margin-bottom:11px;white-space:nowrap}
.cmp tfoot .hi .fp{color:var(--green-deep)}
.cmp .cbtn{display:inline-block;text-decoration:none;font-weight:600;font-size:.87rem;padding:10px 20px;border-radius:100px;
  border:1px solid var(--line);color:var(--ink);white-space:nowrap;transition:transform .15s,background .2s}
.cmp .cbtn:hover{transform:translateY(-1px);background:var(--sand)}
.cmp .cbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cmp .cbtn.on:hover{background:var(--accent-deep)}
.cmp-note{margin-top:14px;font-size:.84rem;color:var(--muted);line-height:1.55}

@media(max-width:759px){
  .cmp td.mod,.cmp th.mod{min-width:190px}
  .cmp table{font-size:.87rem}
}
@media(prefers-color-scheme:dark){
  .cmp{border-color:#26262b}
  .cmp th,.cmp td{border-color:#26262b}
  .cmp td.mod,.cmp th.mod{box-shadow:1px 0 0 #26262b}
  .mi-pop{background:#1a1a1e;border-color:#33333a;box-shadow:0 14px 34px rgba(0,0,0,.5)}
  .mi-i{border-color:#33333a}
  .mi-name.plain{border-bottom-color:#33333a}
  .cmp tr.grp td{background:#1a1a1e}
  .cmp td.y{color:var(--green)}
  .cmp td.n{color:#4a4a53}
  .cmp .hi{background:rgba(90,154,151,.09)}
  .cmp thead th.hi{background:rgba(90,154,151,.15)}
  .cmp .cbtn{border-color:#33333a}
  .cmp .cbtn:hover{background:#1e1e22}
}
.cmp-swipe{display:none;margin-top:12px;font-size:.84rem;color:var(--muted)}
@media(max-width:759px){.cmp-swipe{display:block}}
.cmp .cd{display:block;margin-top:6px;font-size:.74rem;font-weight:400;line-height:1.35;color:var(--muted)}
.pr-table{padding-top:0}
.pr-table .cmp{margin-top:0}

/* savings emphasis — the "You save / year" column is the payoff, so it joins
   the Treema side of the table instead of floating off on its own */
.ptable.save .sv,.ptable.save .diff{background:rgba(49,109,109,.13);border-left:1px solid rgba(49,109,109,.22)}
.ptable.save .sv{color:var(--green-deep)}
.ptable.save .diff{color:var(--green-deep);font-family:var(--display);font-size:1.28rem;font-weight:700}
.ptable.save tbody td:first-child{width:22%}
.ptable.save .sv,.ptable.save .diff{width:19%}
.ptable.save .grp th:last-child{background:rgba(49,109,109,.13);border-left:1px solid rgba(49,109,109,.22)}
@media(prefers-color-scheme:dark){
  .ptable.save .sv,.ptable.save .diff{color:var(--green);background:rgba(90,154,151,.16);border-left-color:rgba(90,154,151,.3)}
  .ptable.save .grp th:last-child{background:rgba(90,154,151,.16);border-left-color:rgba(90,154,151,.3)}
}
@media(prefers-color-scheme:dark){
  .cmp thead th.hi .cp,.cmp tfoot .hi .fp{color:var(--green)}
}

/* ===================== GROUPS — workspace & role mocks ===================== */
.wsmock,.rolemock{background:#fff;padding:15px 15px 16px}

/* workspace switcher */
.ws-sw{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.ws-sw > span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0}
.ws-sw b{font-size:.9rem;color:var(--ink);line-height:1.2}
.ws-sw small,.ws-other small{display:block;font-size:.7rem;color:var(--muted);margin-top:2px}
.ws-key{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:.74rem;font-weight:700;
  background:rgba(49,109,109,.13);color:var(--green-deep)}
.ws-key.alt{background:var(--sand);color:var(--muted)}
.ws-caret{color:var(--muted);font-size:.9rem;flex:none}
.ws-list{margin:9px 0 0;padding-left:17px;border-left:2px solid var(--line);margin-left:17px}
.ws-item{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:.82rem}
.ws-item b{font-weight:600;color:var(--ink);flex:1}
.ws-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.ws-meta{font-size:.7rem;color:var(--muted)}
.ws-other{display:flex;align-items:center;gap:11px;margin-top:13px;padding:11px 13px;border:1px dashed var(--line);border-radius:12px;opacity:.75}
.ws-other > span:nth-child(2){display:flex;flex-direction:column}
.ws-other b{font-size:.86rem;color:var(--ink)}

/* per-property role matrix */
.rm-head{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.rm-head > span:nth-child(2){display:flex;flex-direction:column}
.rm-head b{font-size:.9rem;color:var(--ink)}
.rm-head small{font-size:.7rem;color:var(--muted);margin-top:2px}
.rm-av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.74rem;font-weight:700;
  background:var(--sand-2);color:var(--muted)}
.rm-tabs{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:4px}
.rm-tab{font-size:.7rem;font-weight:600;color:var(--muted);background:var(--sand);border-radius:100px;padding:5px 11px;white-space:nowrap}
.rm-tab.on{background:rgba(49,109,109,.13);color:var(--green-deep)}
.rm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--sand)}
.rm-row b{font-size:.81rem;font-weight:600;color:var(--ink)}
.rm-pick{display:inline-flex;gap:3px;background:var(--sand);border-radius:100px;padding:3px}
.rm-pick i{font-style:normal;font-size:.66rem;font-weight:700;color:var(--muted);padding:4px 9px;border-radius:100px;white-space:nowrap}
.rm-pick i.on{background:#fff;color:var(--green-deep);box-shadow:0 1px 3px rgba(20,20,25,.12)}
.rm-note{margin-top:13px;background:rgba(49,109,109,.07);border-radius:10px;padding:10px 12px;color:var(--muted);font-size:.75rem;line-height:1.45}

@media(prefers-color-scheme:dark){
  .wsmock,.rolemock{background:#141417}
  .ws-sw,.ws-other{border-color:#26262b}
  .ws-sw b,.ws-other b,.ws-item b,.rm-head b,.rm-row b{color:#ededf0}
  .ws-list{border-color:#26262b}
  .ws-key.alt,.rm-av,.rm-tab,.rm-pick{background:#1e1e22}
  .rm-row{border-color:#26262b}
  .rm-pick i.on{background:#2a2a30;color:var(--green);box-shadow:none}
  .rm-note{background:rgba(255,255,255,.05)}
}

/* suite intro: copy beside a smaller video, alternating side */
/* PARKED with the video blocks above — .vsplit paired copy with a video. */
.vsplit{display:grid;gap:26px;align-items:center}
.vsplit .videoblock{margin-top:0}
@media(min-width:900px){
  .vsplit{grid-template-columns:1fr 1fr;gap:46px}
  .vsplit.flip .vs-txt{order:2}
  .vsplit.flip .videoblock{order:1}
  .vsplit .vs-txt .body{max-width:46ch}
}

/* video lightbox */
.vid-modal{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(10,20,18,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.vid-modal.open{display:flex}
.vid-card{position:relative;width:100%;max-width:940px;border-radius:18px;overflow:hidden;background:#0e2825;
  box-shadow:0 34px 90px -34px rgba(0,0,0,.7)}
.vid-stage{aspect-ratio:16/9;display:grid;place-items:center}
.vid-stage video,.vid-stage iframe{display:block;width:100%;height:100%;border:0;background:#000}
.vid-close{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border:none;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:15px;line-height:1;cursor:pointer;transition:background .2s}
.vid-close:hover{background:rgba(255,255,255,.3)}
.vid-soon{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;padding:36px 30px;max-width:44ch}
.vid-soon b{font-family:var(--display);font-size:1.5rem;color:#fff;line-height:1.2}
.vid-soon span{color:rgba(247,242,236,.72);line-height:1.55;font-size:.95rem}
.vid-soon .btn{margin-top:4px}
.videoblock:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(min-width:860px){.hero .grid.one{grid-template-columns:1fr;max-width:64ch}}
/* hero: the group route, in brand orange */
.herolux h1 .h1-or{color:var(--terra);text-decoration:none;border-bottom:3px solid transparent;transition:border-color .18s,color .18s}
.herolux h1 .h1-or:hover,.herolux h1 .h1-or:focus-visible{color:#ff8f4d;border-bottom-color:currentColor}

/* payment methods */
.paygrid{display:grid;gap:18px;margin-top:28px}
@media(min-width:760px){.paygrid{grid-template-columns:repeat(3,1fr)}}
.paycard{border:1px solid var(--line);border-radius:18px;padding:24px 22px;background:var(--paper);display:flex;flex-direction:column}
.paycard.best{border-color:var(--green);background:rgba(49,109,109,.05)}
.pc-fee{font-family:var(--display);font-size:2.3rem;font-weight:700;line-height:1;color:var(--ink)}
.paycard.best .pc-fee{color:var(--green-deep)}
.paycard b{margin-top:10px;font-size:1rem;color:var(--ink)}
.paycard p{margin:8px 0 0;color:var(--muted);font-size:.9rem;line-height:1.55}
@media(prefers-color-scheme:dark){
  .paycard{background:#141417;border-color:#26262b}
  .paycard.best{border-color:var(--green);background:rgba(90,154,151,.08)}
  .paycard.best .pc-fee{color:var(--green)}
}

/* ---- mobile: the table scrolls sideways, module column pinned ---- */
@media(max-width:979px){
    border-radius:12px;padding:11px 13px;transition:border-color .15s,background .15s}

  .cmp{margin-top:12px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
  .cmp table{min-width:0;width:auto}
  .cmp th,.cmp td{padding:11px 10px}
  /* module column stays put while the plans scroll past it */
  .cmp td.mod,.cmp th.mod{position:sticky;left:0;z-index:2;width:168px;min-width:168px;
    background:var(--paper);box-shadow:1px 0 0 var(--line)}
  .cmp tr.grp td{background:var(--sand)}
  .cmp thead th:not(.mod),.cmp tbody td:not(.mod),.cmp tfoot td:not(.mod){min-width:106px}
  .cmp thead th{padding-top:14px}
  .cmp .cn{min-height:0;font-size:.76rem}
  .cmp .cd{display:none}
  .cmp .cpx{font-size:.66rem;min-height:0}
  .cmp .cp{font-size:1.18rem}
  .cmp tfoot .fp{font-size:.9rem}
  .cmp .cbtn{width:100%;text-align:center;padding:9px 8px;font-size:.78rem}
  /* the plan the tabs point at */
  .cmp .hi{background:rgba(49,109,109,.06)}
  .cmp thead th.hi{background:rgba(49,109,109,.11);border-radius:0}

  /* descriptions stay folded until the ⓘ is tapped, so rows stay short */
  .mi{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
  /* No min-width:0 — that let the 1fr track shrink below the longest word,
     which then needed breaking to fit, and words do not break here (see
     the note on h1,h2,h3). The column is a hint, so it grows instead:
     Russian "Самостоятельный" takes it from 168 to 182px and the table
     still fits. */
  .mi-i{display:inline-flex}
  .cmp tbody td.mod{width:168px}
  .mi-pop{display:none;grid-column:1/-1;position:static;width:auto;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;border-left:2px solid var(--line);border-radius:0;
    padding:2px 0 2px 11px;margin:7px 0 0;font-size:.8rem}
  .mi.open .mi-pop{display:block}
  .cmp-swipe{display:block}
}

/* savings table on small screens: drop the two Per room columns so it fits without scrolling
   (the prose above still makes the per-room point) */
.only-s{display:none}
@media(max-width:700px){
  .ptable table{min-width:0;font-size:.76rem}
  .ptable th,.ptable td{padding:9px 6px}
  /* the grouped header spans columns we hide here, so drop it and label the columns instead */
  .ptable .grp{display:none}
  .only-s{display:block;font-weight:500;text-transform:none;letter-spacing:0;font-size:.66rem;opacity:.8;margin-top:2px}
  .ptable .cols th{font-size:.6rem;padding-top:13px}
  .only-l{display:none}
  .ptable .cols th:nth-child(3),.ptable .cols th:nth-child(5),
  .ptable tbody td:nth-child(3),.ptable tbody td:nth-child(5){display:none}
  .ptable tbody td:first-child{white-space:nowrap}
  .ptable.save .diff{font-size:.95rem}
}

/* ===================== PRINT / PDF ===================== */
@media print{
  .bar,.menu,.vid-modal,.book-modal,.modal,.stamp,footer,.cmp-swipe,.mi-i,.mi-pop,
  .billing-toggle,.cbtn,.pdf-btn{display:none !important}
  body{background:#fff;font-size:12px}
  .sec{padding:14px 0 !important}
  .wrap{max-width:none;padding:0 14px}
  .hero{padding-top:0}
  h1,h2{page-break-after:avoid}
  .cmp{overflow:visible;border-color:#d8d8dc;page-break-inside:auto}
  .cmp table{min-width:0;font-size:11px}
  .cmp th,.cmp td{padding:6px 8px}
  /* the narrow-screen rules would otherwise hide three of the four plans on paper */
  .cmp th,.cmp td{display:table-cell !important}
  .cmp .cd,.cmp .cpx{display:block !important}
  .cmp td.mod,.cmp th.mod{position:static;min-width:0;box-shadow:none;width:32% !important}
  .cmp .cd{font-size:9px}
  .cmp .cpx{font-size:9px;min-height:0}
  .mi-name{border-bottom:none !important}
  .ptable .grp{display:table-row !important}
  .ptable .cols th,.ptable tbody td{display:table-cell !important}
  .only-s{display:none !important}
  .only-l{display:inline !important}
  .cmp .cp{font-size:17px}
  .cmp tr{page-break-inside:avoid}
  .cmp tfoot{display:none}
  .mi{display:inline}
  .paygrid{grid-template-columns:repeat(3,1fr);gap:10px}
  .paycard{page-break-inside:avoid;padding:14px 13px}
  .pc-fee{font-size:26px}
  .ptable{page-break-inside:avoid}
  .ptable table{min-width:0;font-size:11px}
  .rev{opacity:1 !important;transform:none !important}
  a{text-decoration:none;color:inherit}
}

/* pricing: billing toggle + PDF download side by side */
.pr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:26px}
.pr-actions .billing-toggle{margin-top:0}
.pdf-btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:.9rem;
  color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:11px 20px;background:var(--paper);
  transition:border-color .15s,color .15s,background .15s}
.pdf-btn svg{width:17px;height:17px;flex:none}
.pdf-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--sand)}
@media(prefers-color-scheme:dark){
  .pdf-btn{background:#141417;border-color:#33333a}
  .pdf-btn:hover{background:#1e1e22}
}
.cmp-note a{color:var(--accent);text-decoration:none;font-weight:600}
.cmp-note a:hover{text-decoration:underline}

/* ---- mobile: tighten the pricing page rhythm ---- */
@media(max-width:979px){
  #pricing.hero{padding:34px 0 20px}
  .pr-head .body{margin-top:11px}
  .pr-actions{margin-top:20px;gap:11px}
  .pdf-btn{padding:10px 17px;font-size:.86rem}
  .pr-table{padding-top:22px !important;padding-bottom:26px !important;border-top:none}
  .cmp-note{margin-top:11px}
  /* the remaining pricing sections do not need desktop-sized gaps */
  .paygrid{margin-top:18px;gap:12px}
  .paycard{padding:18px 17px}
  .pc-fee{font-size:2rem}
}

/* mobile: the trust bar left a large gap before the next section */
@media(max-width:760px){
  .trustbar{padding:22px 0 14px}
  .trust-label{margin-bottom:14px}
  .logos-marquee{margin-top:0}
  .trustbar + section.sec{padding-top:30px}
}

/* assignment panel (guest communication) */
.asgn{background:#fff;padding:15px 15px 16px}
.asgn-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.asgn-av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--sand-2);color:var(--muted);font-size:.72rem;font-weight:700}
.asgn-who{display:flex;flex-direction:column;flex:1;min-width:0}
.asgn-who b{font-size:.88rem;color:var(--ink);line-height:1.2}
.asgn-who small{font-size:.7rem;color:var(--muted);margin-top:2px}
.asgn-state{flex:none;font-size:.66rem;font-weight:700;border-radius:100px;padding:4px 10px;
  background:rgba(255,116,36,.13);color:var(--terra-deep)}
.asgn-msg{margin:12px 0 14px;background:var(--sand);border-radius:12px;border-bottom-left-radius:4px;
  padding:10px 12px;font-size:.82rem;line-height:1.45;color:var(--ink)}
.asgn-lbl{display:block;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.asgn-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;border:1px solid transparent}
.asgn-opt.on{border-color:var(--green);background:rgba(49,109,109,.07)}
.ao-av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--sand-2);color:var(--muted);font-size:.62rem;font-weight:700}
.ao-av.me{background:rgba(49,109,109,.16);color:var(--green-deep)}
.ao-who{display:flex;flex-direction:column;flex:1;min-width:0}
.ao-who b{font-size:.8rem;color:var(--ink);line-height:1.2}
.ao-who small{font-size:.68rem;color:var(--muted);margin-top:1px}
.ao-tick{flex:none;color:var(--green-deep);font-weight:700}
.asgn-back{margin-top:6px;padding:8px 10px;font-size:.76rem;font-weight:600;color:var(--muted);
  border-top:1px solid var(--line)}
@media(prefers-color-scheme:dark){
  .asgn{background:#141417}
  .asgn-head,.asgn-back{border-color:#26262b}
  .asgn-who b,.ao-who b,.asgn-msg{color:#ededf0}
  .asgn-av,.ao-av{background:#1e1e22}
  .asgn-msg{background:#1e1e22}
  .ao-av.me{background:rgba(90,154,151,.2);color:var(--green)}
  .asgn-opt.on{background:rgba(90,154,151,.09)}
  .ao-tick{color:var(--green)}
}

/* channels comparison: a labelled before/after card, not a fake app window */
.leakcard{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper)}
.lk-div.top{margin-top:0;padding-top:0;border-top:none}
.lk-div.bad{color:var(--muted)}
@media(prefers-color-scheme:dark){.leakcard{border-color:#26262b;background:#141417}}

/* in-article CTA */
.post .postcta{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:14px;
  padding:20px 22px;margin:26px 0}
.post .postcta b{display:block;font-family:var(--display);font-size:1.14rem;color:var(--ink);line-height:1.25}
.post .postcta p{margin:7px 0 15px;color:var(--muted);font-size:.94rem;line-height:1.55}
.post .postcta .btn{display:inline-block}
@media(prefers-color-scheme:dark){.post .postcta{border-color:#33333a;border-left-color:var(--accent)}}

/* suite CTA under the homepage feature grids */
.suite-cta{margin-top:26px}
/* placeholder suite hubs */
.hublist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;max-width:420px}
.hublist a{display:block;border:1px solid var(--line);border-radius:12px;padding:13px 16px;
  text-decoration:none;font-weight:600;color:var(--ink);transition:border-color .15s,color .15s}
.hublist a:hover{border-color:var(--accent);color:var(--accent)}
@media(prefers-color-scheme:dark){.hublist a{border-color:#33333a}}

/* ===================== BLOG MASTHEAD ===================== */
/* Green, with a ruled-paper texture drawn in CSS — a journal page rather than a
   stock photo, so it renders identically everywhere and loads nothing. */
.hero.blogtop{position:relative;overflow:hidden;padding:64px 0 58px;
  background:linear-gradient(135deg,var(--forest-hi) 0%,var(--forest) 58%,var(--forest-2) 100%)}
.hero.blogtop::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.09) 0 1px,transparent 1px 30px);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
/* the notebook's margin rule */
.hero.blogtop::after{content:"";position:absolute;top:0;bottom:0;left:max(24px,calc((100% - 1080px)/2 + 24px));
  width:1px;background:rgba(255,116,36,.42);pointer-events:none}
.hero.blogtop > .wrap{position:relative;z-index:1}
.hero.blogtop h1{color:#fff;max-width:16ch}
.hero.blogtop .sub{color:rgba(237,237,240,.76)}
.hero.blogtop .kick{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.hero.blogtop + .sec{border-top:none}
@media(min-width:860px){.hero.blogtop{padding:84px 0 76px}}

/* ===================== SUITE HUB PAGES ===================== */
.vlist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px;max-width:60ch}
.vlist li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);line-height:1.5}
.vlist li::before{content:"✓";color:var(--green);font-weight:800;flex:none}
.vlist .v-t{display:block}
.vlist li b{display:block;color:var(--ink);font-weight:700;margin-bottom:1px}

.flow{display:grid;gap:16px;margin-top:26px}
@media(min-width:820px){.flow{grid-template-columns:1fr 1fr}}
.fstep{border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;background:var(--paper);
  display:flex;flex-direction:column}
.fstep .fs-n{font-family:var(--display);font-size:.86rem;font-weight:700;color:var(--accent)}
.fstep .fs-when{display:block;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}
.fstep h3{font-family:var(--display);font-size:1.18rem;line-height:1.22;margin:10px 0 8px;color:var(--ink)}
.fstep p{margin:0 0 15px;color:var(--muted);line-height:1.55;font-size:.94rem}
.fstep .more{margin-top:auto}
@media(prefers-color-scheme:dark){.fstep{background:#141417;border-color:#26262b}}

/* suite hubs: full module blocks */
.mblocks{margin-top:0}
.mblock{border-top:1px solid var(--line);padding-top:26px;margin-top:26px}
.mblock:first-child{border-top:none;padding-top:0;margin-top:0}
.mblock .mb-n{font-family:var(--display);font-size:.9rem;font-weight:700;color:var(--accent)}
.mblock .mb-when{display:block;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}
.mblock h3{font-family:var(--display);font-size:1.45rem;line-height:1.15;margin:7px 0 5px;color:var(--ink)}
.mblock .mb-lede{margin:0;color:var(--muted);font-size:.98rem;line-height:1.5;max-width:62ch}
/* each step: what it does, and where hotels use it */
.mb-split{display:grid;gap:18px 34px;margin:16px 0 14px}
@media(min-width:900px){.mb-split{grid-template-columns:1.45fr 1fr}}
.mb-part h4{font-size:.64rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mb-feats,.mb-cases{list-style:none;margin:0;padding:0}
.mb-feats{display:grid;gap:13px 28px}
@media(min-width:620px){.mb-feats{grid-template-columns:1fr 1fr}}
.mb-feats li{font-size:.89rem;line-height:1.5;color:var(--muted);padding-left:15px;position:relative}
.mb-feats li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;
  background:var(--green)}
.mb-feats b{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}
/* use cases read as a short list of situations, not as more features */
.mb-cases{display:flex;flex-direction:column;gap:8px}
.mb-cases li{font-size:.87rem;line-height:1.45;color:var(--ink);background:var(--sand);border-radius:9px;
  padding:9px 12px}
@media(prefers-color-scheme:dark){
  .mblock{border-color:#26262b}
  .mb-part h4{border-color:#26262b}
  .mb-cases li{background:#1e1e22}
}

/* mobile: the CTA cards were spending 92px on side padding, which forced the
   button row to wrap and stack */
@media(max-width:560px){
  .capture,.closer{padding:34px 22px}
  .hero-cta{flex-wrap:nowrap;gap:9px;margin-top:22px}
  .hero-cta .btn{margin-top:0;padding:13px 16px;font-size:.92rem;white-space:nowrap;text-align:center}
  .cap-left .hero-cta,.cap-act{margin-top:22px}
  .capture h2,.closer h2{max-width:none}
}

/* suite labels on the homepage double as links to the hub pages */
a.kick.klink{text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
a.kick.klink::after{content:"→";margin-left:7px;font-size:.9em;opacity:.75}
a.kick.klink:hover{border-color:currentColor;background:var(--paper);transform:translateX(1px)}
a.kick.klink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* touch: the 17px info icon keeps its size but gets a 44px hit area */
@media(max-width:979px){
  .mi-i{position:relative}
  .mi-i::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;border-radius:50%}
}

/* suite hubs: hero and steps sit closer together */
.hero + .sec{padding-top:34px}
@media(min-width:860px){.hero + .sec{padding-top:46px}}

/* ==========================================================================
   Enterprise page — /enterprise
   Uses the site's own components. Only three additions are needed.
   ========================================================================== */

/* 2. a price line inside a feature card */
.feat .fprice{margin-top:auto;padding-top:16px;font-weight:700;font-size:.95rem;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.feat .fprice.free{color:var(--green-deep)}
.sec.dark .feat .fprice{color:#ff9a5e}
.sec.dark .feat .fprice.free{color:#7fd3c6}

/* 3. feature cards on the deep-green band — glass rather than white */
.sec.dark .featgrid .feat{background:rgba(247,242,236,.07);border-color:rgba(247,242,236,.18);
  box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sec.dark .featgrid .feat h3{color:var(--paper)}
.sec.dark .featgrid .feat p{color:rgba(247,242,236,.74)}
.sec.dark .featgrid .feat:hover{background:rgba(247,242,236,.11);border-color:rgba(127,211,198,.45);
  box-shadow:0 22px 48px -30px rgba(0,0,0,.7)}
.sec.dark .ftag{align-self:flex-start;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#7fd3c6;border:1px solid rgba(127,211,198,.4);border-radius:100px;padding:4px 11px;margin-bottom:14px}

/* Enterprise dark bands: cooler photo and a fine grid, so the band reads
   forward-looking rather than just dim. Scoped to this page only.
   The photograph itself is still the shared one — swap it here when a
   futuristic hotel shot is available. */
/* One place to change the photograph on this page. Paste any Unsplash /
   Pexels image URL here and both dark bands pick it up. */
body.path-enterprise{--ent-photo:url('https://images.unsplash.com/photo-1578683010236-d716f9a3f461?auto=format&fit=crop&w=1800&q=62')}
body.path-enterprise .sec.dark::before{background-image:var(--ent-photo);
  opacity:.2;filter:blur(2px) saturate(.7) hue-rotate(-10deg) brightness(1.1)}
body.path-enterprise .sec.dark::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(127,211,198,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,211,198,.06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(130% 85% at 72% 38%,#000,transparent 70%);
  mask-image:radial-gradient(130% 85% at 72% 38%,#000,transparent 70%)}

/* ==========================================================================
   Glass panels on the deep-green bands
   The treatment proved itself on /enterprise, and .killstrip only ever sits
   inside .sec.dark, so it carries to every dark band on the site.
   Warm edge, because orange is already the accent on these bands (.ks-x).
   ========================================================================== */
.sec.dark .featgrid .feat{border-color:rgba(255,154,94,.26)}
.sec.dark .featgrid .feat:hover{border-color:rgba(255,154,94,.55);
  box-shadow:0 0 0 1px rgba(255,154,94,.16),0 22px 48px -30px rgba(0,0,0,.7)}
.sec.dark .ftag{color:#ff9a5e;border-color:rgba(255,154,94,.42)}

/* The killstrip stays flat: glass suits the programme cards, but three short
   points read better as plain rules than as panels. */

/* Apply button inside a card on the deep-green band. margin-top:auto pins it to
   the bottom, so cards with different amounts of copy still line up. */
.sec.dark .featgrid .feat .fbtn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;
  text-decoration:none;font-weight:600;font-size:.9rem;padding:9px 19px;border-radius:100px;
  color:#ff9a5e;border:1px solid rgba(255,154,94,.45);background:rgba(255,154,94,.09);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}
.sec.dark .featgrid .feat .fbtn:hover{background:var(--terra);border-color:var(--terra);color:#fff}
.sec.dark .featgrid .feat .fbtn:active{transform:scale(.97)}
.sec.dark .featgrid .feat h3 + .fbtn,.sec.dark .featgrid .feat p + .fbtn{margin-top:20px}

/* Where the team worked before, inside the closer. Not a client list — the
   logos sit under the CTA on the dark block, so white marks show as supplied. */
.closer .fromlogos{margin-top:36px;padding-top:24px;border-top:1px solid rgba(247,242,236,.2);max-width:520px}
.closer .fromlabel{display:block;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,242,236,.62);margin-bottom:16px}
.closer .fromrow{display:flex;align-items:center;gap:46px;flex-wrap:wrap}
.closer .fromrow img{height:64px;width:auto;opacity:.9}
@media(max-width:640px){.closer .fromrow{gap:32px}.closer .fromrow img{height:50px}}

/* "In practice" — the operational case under a feature block on /groups.
   Two sentences: what it costs today, what changes. */
.gcase{margin-top:22px;padding:16px 18px;border-left:2px solid var(--accent);background:var(--sand);border-radius:0 12px 12px 0}
.gcase-l{display:block;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.gcase p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.55}

/* Groups page — industry research band.
   Sits on .sec.dark, so numbers take the warm highlight the dark bands use
   everywhere else rather than the page's green accent. */
.statrow{display:grid;gap:28px;margin-top:38px}
@media(min-width:640px){.statrow{grid-template-columns:repeat(2,1fr);gap:34px 40px}}
@media(min-width:1000px){.statrow{grid-template-columns:repeat(3,1fr);gap:0 40px}}
.stat{display:flex;flex-direction:column;border-top:2px solid rgba(255,154,94,.45);padding-top:17px}
.stat-n{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2.5rem,5.6vw,3.2rem);color:#ff9a5e;font-variant-numeric:tabular-nums}
.stat-n u{font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;margin-left:6px;vertical-align:.42em;color:rgba(255,154,94,.85)}
.stat-t{display:block;margin-top:13px;font-size:.97rem;line-height:1.5;color:rgba(247,242,236,.82)}
.stat-s{display:block;margin-top:auto;padding-top:13px;font-size:.71rem;line-height:1.45;color:rgba(247,242,236,.48)}
.statnote{margin:34px 0 0;font-size:.95rem;line-height:1.55;color:rgba(247,242,236,.72);max-width:52ch}
.statnote strong{color:var(--paper)}

/* Kick label on a dark band: the page accent (green on /groups) disappears
   into the forest gradient, so use the warm highlight the dark bands share. */
.sec.dark .kick{color:#ff9a5e}

/* Small eyebrow inside a .feat card — same type treatment as .gcase-l,
   used on /groups to label what each kind of operator is up against. */
.feat .fkey{display:block;font-size:.62rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px}

/* Photo-free dark band. Line work instead of a photograph, for while there is
   no proper shot to place. The graphic is a local file, so nothing is hotlinked
   and it never fails to load. Swap back by replacing bg-plan with a bg-* preset
   or setting --band-photo on the section. */
.sec.dark.bg-plan{--band-photo:url('/assets/estate-plan.svg')}
.sec.dark.bg-plan::before{opacity:.55;filter:none;background-size:cover;background-position:right center}
.sec.dark.bg-plan::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 90% at 82% 28%,rgba(255,154,94,.13),transparent 62%),
             radial-gradient(80% 70% at 12% 88%,rgba(127,211,198,.08),transparent 60%)}
/* On a phone the copy runs full width, so the plan drops back further. */
@media(max-width:760px){.sec.dark.bg-plan::before{opacity:.16}}

/* Feature cards spill what they do when you point at one. Decorative only:
   hover/focus, no script, off under reduced motion. The Guest Suite spills
   warm things (money, channels, travel); the Team Suite spills green ones
   (keys, tools, ticks), so the two sections read differently. */
.feat{position:relative}
.feat .fic{position:relative;z-index:2}
.fly{position:absolute;left:30px;top:34px;width:0;height:0;pointer-events:none;z-index:1}
.fly i{position:absolute;display:block;opacity:0;will-change:transform,opacity}
.fly svg{width:19px;height:19px;display:block;filter:drop-shadow(0 3px 6px rgba(20,22,30,.18))}
.fly.emo i{font-size:20px;line-height:1;filter:drop-shadow(0 3px 6px rgba(20,22,30,.22))}
.feat:hover .fly i,.feat:focus-within .fly i,.feat.spilled .fly i{
  animation:spill 1.25s cubic-bezier(.18,.72,.32,1) var(--d,0ms) both}
@keyframes spill{
  0%{opacity:0;transform:translate(0,0) scale(.5) rotate(0)}
  12%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r))}}
@media(prefers-reduced-motion:reduce){
  .feat:hover .fly i,.feat:focus-within .fly i,.feat.spilled .fly i{animation:none}}

/* Check in carries a key. Drawn as a mask so it takes the button's own colour
   in light and dark, and needs no markup on the 32 places the button appears. */
.loginbtn{align-items:center;gap:8px}
.loginbtn::before{content:"";width:16px;height:16px;flex:none;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='12' r='4.2'/%3E%3Cpath d='M11.2 12H21'/%3E%3Cpath d='M18 12v3.4'/%3E%3Cpath d='M14.8 12v2.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='12' r='4.2'/%3E%3Cpath d='M11.2 12H21'/%3E%3Cpath d='M18 12v3.4'/%3E%3Cpath d='M14.8 12v2.4'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(-20deg);transition:transform .25s ease}
.loginbtn:hover::before{transform:rotate(0)}
@media(min-width:640px){.loginbtn{display:inline-flex}}
@media(prefers-reduced-motion:reduce){.loginbtn::before,.loginbtn:hover::before{transition:none}}

/* Team Suite spills room numbers instead of icons — the one thing every
   hotel person reads without a legend. */
.fly.tags i{background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 7px;
  font-size:.62rem;font-weight:700;line-height:1;color:var(--green-deep);white-space:nowrap;
  font-variant-numeric:tabular-nums;box-shadow:0 3px 9px rgba(20,22,30,.16)}

/* Book a demo rings the desk bell. Same mask trick as the key on Check in, so
   it inherits the button's colour and touches none of the 46 places it appears.
   Scoped to [data-book] on purpose: the bell belongs only on the button that
   reaches a person, never on Start free. */
[data-book]{display:inline-flex;align-items:center;gap:9px}
[data-book]::before{content:"";width:17px;height:17px;flex:none;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='3.1' r='1.7'/%3E%3Crect x='11.1' y='4.4' width='1.8' height='2.6' rx='.9'/%3E%3Cpath d='M3.6 15.8a8.4 8.4 0 0 1 16.8 0Z'/%3E%3Crect x='1.7' y='16.6' width='20.6' height='2.9' rx='1.45'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='3.1' r='1.7'/%3E%3Crect x='11.1' y='4.4' width='1.8' height='2.6' rx='.9'/%3E%3Cpath d='M3.6 15.8a8.4 8.4 0 0 1 16.8 0Z'/%3E%3Crect x='1.7' y='16.6' width='20.6' height='2.9' rx='1.45'/%3E%3C/svg%3E") center/contain no-repeat;
  transform-origin:50% 82%}
[data-book]:hover::before{animation:ding .7s cubic-bezier(.3,.7,.4,1)}
[data-book]:active::before{transform:translateY(1.5px) scaleY(.9)}
@keyframes ding{
  0%,100%{transform:rotate(0)}
  18%{transform:rotate(13deg)}
  38%{transform:rotate(-10deg)}
  58%{transform:rotate(6deg)}
  78%{transform:rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){
  [data-book]:hover::before{animation:none}
  [data-book]:active::before{transform:none}}

/* The icons were floating alone in white space. Give them a tinted tile so the
   top of every card has weight, and let it lean when you point at the card —
   the tile tips the way the spill comes out. */
.feat .fic{width:48px;height:48px;border-radius:14px;justify-content:center;
  background:rgba(255,116,36,.10);box-shadow:inset 0 0 0 1px rgba(255,116,36,.16);
  transition:background .25s ease,box-shadow .25s ease,transform .3s cubic-bezier(.3,.7,.4,1)}
.feat .fic svg{width:25px;height:25px}
.feat h3{margin-top:15px}
.featgrid.team .feat .fic{background:rgba(49,109,109,.10);
  box-shadow:inset 0 0 0 1px rgba(49,109,109,.18)}
.feat:hover .fic,.feat:focus-within .fic{background:rgba(255,116,36,.2);
  transform:translateY(-2px) rotate(-5deg)}
.featgrid.team .feat:hover .fic,.featgrid.team .feat:focus-within .fic{
  background:rgba(49,109,109,.2)}
@media(prefers-reduced-motion:reduce){.feat .fic{transition:none}
  .feat:hover .fic,.feat:focus-within .fic{transform:none}}

/* Touch targets. A thumb needs roughly 44px; several of these were laid out for
   a mouse pointer and measured 17–30px on a phone. Only the hit area grows —
   the visible size is unchanged, so nothing about the design moves. */
@media(max-width:859px){
  .menu-btn{padding:9px 11px}
  .langrow{gap:2px 16px}
  .langrow a,.langrow b{padding:9px 0;display:inline-block}
}
@media(max-width:640px){
  .more{padding-top:10px;padding-bottom:10px}
  .feat .more{padding-bottom:2px}
  .billing-toggle .bt{padding:12px 18px}
  .mi-i{width:26px;height:26px;font-size:.72rem;position:relative}
  /* the circle stays small so the table still fits; the thumb gets a bigger
     invisible area around it */
  .mi-i::after{content:"";position:absolute;inset:-9px;border-radius:50%}
  .bar .logo{padding:7px 0}
}

/* Language row in the footer. The current language is not a link. */
.langrow{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  padding:18px 0 4px;font-size:.86rem}
.langrow a,.langrow b{color:var(--muted);text-decoration:none;font-weight:500}
.langrow a:hover{color:var(--accent)}
.langrow b{color:var(--ink);font-weight:700}

/* ===================== RIGHT-TO-LEFT (Arabic) =====================
   dir="rtl" flips the writing direction but not the rules written with a
   physical side. These are the ones the home page actually uses. */
[dir="rtl"] .plan .feats{text-align:right}
[dir="rtl"] .herolist li{padding-left:0;padding-right:30px}
[dir="rtl"] .herolist li::before{left:auto;right:0}
[dir="rtl"] .herolist li::after{left:auto;right:6px;transform:rotate(-45deg)}
[dir="rtl"] .kick{padding:5px 25px 5px 13px}
[dir="rtl"] .kick::before{left:auto;right:10px}
[dir="rtl"] .apptitle{margin-right:0;margin-left:auto}
/* arrows point the other way when the text does */
[dir="rtl"] .more svg,[dir="rtl"] .klink::after{transform:scaleX(-1)}
[dir="rtl"] a.kick.klink::after{margin-left:0;margin-right:7px}
/* the send arrow points the way the language reads */
[dir="rtl"] .sinbox .si-send{margin-left:0;margin-right:auto}
[dir="rtl"] .sinbox .si-send svg{transform:scaleX(-1)}
[dir="rtl"] .more:hover svg{transform:scaleX(-1) translateX(3px)}
/* the marquee scrolls the other way so logos still enter from the leading edge */
[dir="rtl"] .logos-track{animation-direction:reverse}

/* An order reference is a code, not a word. Left to the bidi algorithm the
   leading "#" lands on a different side depending on whether the first
   character after it is a letter or a digit, so #a7f31c02 and #4be80d19
   rendered as mirror images of each other in the same column. */
[dir="rtl"] .sord-id{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .gp-sub{direction:ltr;text-align:right;unicode-bidi:isolate}

/* Anything that aligns to one side, or hangs off one edge, has to swap sides on
   a right-to-left page — otherwise the Arabic pages read with their furniture
   against the wrong wall: the menu close button on the far side from the thumb,
   the sticky first column of the price table scrolled out of reach. */
[dir="rtl"] .menu .navlink,
[dir="rtl"] .story-card,
[dir="rtl"] .choice,
[dir="rtl"] .ptable th,
[dir="rtl"] .ptable td,
[dir="rtl"] .cmp td.mod,
[dir="rtl"] .cmp th.mod,
[dir="rtl"] .cmp tr.grp td,
[dir="rtl"] .mi-pop{text-align:right}
[dir="rtl"] .menu-close{right:auto;left:22px}
[dir="rtl"] .book-close{right:auto;left:10px}
[dir="rtl"] .sfront .sf-badge{right:auto;left:10px}
[dir="rtl"] .cmp td.mod,[dir="rtl"] .cmp th.mod{left:auto;right:0}
[dir="rtl"] .cmp .grp-l{left:auto;right:16px}
[dir="rtl"] .mi-pop{left:auto;right:0}
[dir="rtl"] .locchips .lc.pin{padding-left:11px;padding-right:26px}
[dir="rtl"] .locchips .lc.pin::before{left:auto;right:10px;border-radius:50% 50% 0 50%}

/* ---------- room for longer languages ---------------------------------- */
/* The header nav sits between the logo and the two buttons. Let it break the
   layout loudly instead of quietly wrapping every two-word link onto a second
   line, which is what Uzbek, Kazakh and Azerbaijani used to do. */
.nav-links .navlink{white-space:nowrap}

/* Four plan cards leave about 140px for the CTA. "Start free" fits; "Начать
   бесплатно" and "Demoga yozilish" do not, so the card gives up some padding
   and the button takes a slightly smaller type size. */
@media(min-width:1040px){
  .price.price-4 .plan{padding:30px 20px}
  .price.price-4 .plan .pick{padding:12px 10px;font-size:.94rem;line-height:1.3}
}

/* A price badge is one short token in every language. */
.sfront .sf-price{white-space:nowrap}

/* ---------- feature cards: a green shadow ------------------------------- */
/* The cards stay white. What they were missing was weight underneath. The
   shadow is cast in the Treema green and grows on hover.
   The colour is #143A37 — darker than the #1D4644 it replaced, and the blur
   is pulled in less (-16px rather than -24px). That second number is what
   makes the difference: at -24px the shadow was drawn back so far under the
   card that almost none of it showed, so the green read as a flat grey. */
.feat{
  box-shadow:0 3px 6px rgba(20,58,55,.18),0 22px 44px -16px rgba(20,58,55,.5);
}
.feat:hover{
  box-shadow:0 10px 20px -8px rgba(20,58,55,.28),0 34px 64px -18px rgba(20,58,55,.62);
  border-color:rgba(40,90,88,.46);
}

@media(prefers-color-scheme:dark){
  .feat{box-shadow:0 2px 4px rgba(0,0,0,.4),0 26px 56px -24px rgba(0,0,0,.8)}
  .feat:hover{box-shadow:0 10px 20px -8px rgba(0,0,0,.5),0 38px 76px -26px rgba(0,0,0,.9)}
}

/* Same width problem, one element down: a CTA on a 320px screen has 172 to
   220px for its label, and a translated one runs past that. Narrower sides
   and a notch of type keep them all on one line. */
@media(max-width:360px){
  .btn,.pick{font-size:.94rem;padding-left:20px;padding-right:20px}
}