/* =========================================================================
   tonle.co — design system
   Palette: mint #74F5A1 · charcoal #212121 · black #111 · gray #E6E6E6 · off #F3F3F3
   ========================================================================= */

:root{
  --mint:#74F5A1;
  --mint-deep:#3fd47c;
  /* Accessible text green. --mint-deep is a bright accent (1.9:1 on white)
     and fails WCAG AA as body text, so anything that is READ uses this. */
  --mint-text:#0a7a40;
  --mint-wash:#e8fdf0;
  --charcoal:#212121;
  --black:#111111;
  --gray:#E6E6E6;
  --off:#F3F3F3;
  --white:#FFFFFF;
  --ink:#212121;
  /* Focus ring. Mint on a white page is ~1.5:1 and fails WCAG 2.4.11, so the
     default ring is ink and dark surfaces flip it back to mint. */
  --focus-ring:#212121;
  --muted:#6b6b6b;
  --muted-dark:#a3a3a3;
  --line:rgba(33,33,33,.14);
  --line-dark:rgba(243,243,243,.16);

  --font-display:'Space Grotesk','Noto Sans Khmer',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-body:'Inter','Noto Sans Khmer',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-hand:'Caveat','Bradley Hand','Segoe Script',cursive;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px; --r-pill:999px;
  --shadow-sm:0 2px 10px rgba(17,17,17,.06);
  --shadow-md:0 14px 40px -18px rgba(17,17,17,.28);
  --shadow-lg:0 40px 90px -40px rgba(17,17,17,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --pad:clamp(20px,5vw,40px);
  --sec:clamp(72px,11vw,148px);
  --maxw:1240px;
}

html[lang="km"]{
  --font-display:'Noto Sans Khmer','Khmer OS Battambang','Space Grotesk',sans-serif;
  --font-body:'Noto Sans Khmer','Khmer OS Battambang','Inter',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--off);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--mint);color:var(--black)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:.98;margin:0}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--wide{max-width:1440px}
.sec{padding-block:var(--sec);position:relative}
.sec--dark{background:var(--charcoal);color:var(--off);--focus-ring:#74f5a1}
.footer,.joinstrip,.handled,.modal__card--dark{--focus-ring:#74f5a1}
.sec--black{background:var(--black);color:var(--off)}
.sec--white{background:var(--white)}
.sec--gray{background:var(--gray)}

/* ---------- type scale ---------- */
.d1{font-size:clamp(2.85rem,10.5vw,7.5rem)}
.d2{font-size:clamp(2.35rem,7.4vw,5rem)}
.d3{font-size:clamp(1.75rem,4.2vw,3rem)}
.d4{font-size:clamp(1.3rem,2.4vw,1.85rem);letter-spacing:-.02em}
.lead{font-size:clamp(1.02rem,1.6vw,1.28rem);line-height:1.5;color:var(--muted);max-width:52ch}
.sec--dark .lead,.sec--black .lead{color:var(--muted-dark)}
.small{font-size:.86rem}
.tiny{font-size:.76rem}
html[lang="km"] h1,html[lang="km"] h2,html[lang="km"] h3{line-height:1.28;letter-spacing:0}
html[lang="km"] .d1{font-size:clamp(2rem,7.4vw,4.6rem)}
html[lang="km"] .d2{font-size:clamp(1.6rem,5vw,3.3rem)}
html[lang="km"] .d3{font-size:clamp(1.3rem,3.2vw,2.2rem)}
html[lang="km"] body{line-height:1.75}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.sec--dark .eyebrow,.sec--black .eyebrow{color:var(--muted-dark)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none}
html[lang="km"] .eyebrow{letter-spacing:.04em;text-transform:none}

/* ---------- expressive text bits ---------- */
.hl{position:relative;white-space:nowrap}
.hl::before{
  content:"";position:absolute;inset:auto -.12em .06em -.12em;height:.34em;
  background:var(--mint);z-index:-1;border-radius:2px;
  transform:scaleX(var(--hl,1));transform-origin:left;transition:transform .7s var(--ease-out);
}
.ink-underline{position:relative;display:inline-block;z-index:1}
.ink-underline svg{position:absolute;left:-5%;bottom:-.22em;width:112%;height:.44em;overflow:visible;pointer-events:none;z-index:3}
.ink-underline path{fill:none;stroke:var(--mint);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);}
.is-in .ink-underline path{animation:draw .85s var(--ease-out) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.circled{position:relative;display:inline-block;padding:0 .16em}
.circled svg{position:absolute;left:-26%;top:2%;width:154%;height:88%;overflow:visible;pointer-events:none}
.circled path{fill:none;stroke:var(--mint);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:520;stroke-dashoffset:520;animation:draw 1.1s var(--ease-out) .5s forwards}

.hand{font-family:var(--font-hand);font-size:1.35em;line-height:1;color:var(--charcoal);font-weight:600}
.sec--dark .hand,.sec--black .hand{color:var(--mint)}
.mint{color:var(--mint-text)}
.sec--dark .mint,.footer .mint{color:var(--mint-deep)}   /* bright on dark */
.sec--dark .mint,.sec--black .mint{color:var(--mint)}
.strike{position:relative;color:var(--muted);text-decoration:none}
.strike::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:3px;background:currentColor;
  transform:scaleX(var(--s,1));transform-origin:left;border-radius:2px}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--charcoal);--fg:var(--off);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:0 1.5rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  background:var(--bg);color:var(--fg);font-family:var(--font-display);font-weight:600;
  font-size:1rem;letter-spacing:-.01em;cursor:pointer;position:relative;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
  will-change:transform;text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(17,17,17,.6)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.btn--mint{--bg:var(--mint);--fg:var(--black)}
.btn--mint:hover{box-shadow:0 12px 30px -12px rgba(116,245,161,.75)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--charcoal);background:rgba(33,33,33,.04)}
.sec--dark .btn--ghost,.sec--black .btn--ghost{--fg:var(--off);border-color:var(--line-dark)}
.sec--dark .btn--ghost:hover{background:rgba(243,243,243,.08);border-color:var(--off)}
.btn--lg{min-height:60px;padding:0 2rem;font-size:1.06rem}
.btn--block{width:100%}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;padding-top:14px;transition:transform .4s var(--ease),background .3s}
.nav.is-hidden{transform:translateY(-118%)}
.nav__inner{
  display:flex;align-items:center;gap:14px;
  max-width:var(--maxw);margin-inline:auto;padding:9px 10px 9px 18px;
  border-radius:var(--r-pill);background:rgba(243,243,243,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(33,33,33,.08);box-shadow:0 10px 30px -22px rgba(17,17,17,.5);
  transition:background .3s,border-color .3s;
}
.nav.is-scrolled .nav__inner{background:rgba(243,243,243,.92)}
.nav__spacer{flex:1}
.nav__links{display:flex;gap:6px;align-items:center}
.nav__links a{padding:9px 14px;border-radius:var(--r-pill);font-size:.93rem;font-weight:500;color:var(--muted);transition:color .2s,background .2s}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--ink);background:rgba(33,33,33,.06)}
.nav .btn{min-height:44px;font-size:.94rem;padding:0 1.15rem}

/* logo */
.logo{display:inline-flex;align-items:baseline;font-family:var(--font-display);font-weight:700;
  font-size:1.4rem;letter-spacing:-.045em;color:var(--ink);position:relative}
.logo .dot-co{position:relative;display:inline-block;padding:0 .06em}
.logo .dot-co svg{position:absolute;left:-22%;top:6%;width:148%;height:84%;overflow:visible}
.logo .dot-co path{fill:none;stroke:var(--mint);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.2s var(--ease-out) .8s forwards}
.logo:hover .dot-co path{animation:draw .6s var(--ease-out) forwards}
.logo--dark{color:var(--off)}
.logo--xl{font-size:clamp(2.4rem,8vw,5rem)}

/* lang toggle — flags only */
.lang{display:inline-flex;background:rgba(33,33,33,.07);border-radius:var(--r-pill);padding:3px;gap:2px}
.lang button{width:38px;height:34px;border:0;border-radius:var(--r-pill);background:transparent;cursor:pointer;
  font-size:1.05rem;line-height:1;display:grid;place-items:center;opacity:.42;transition:opacity .2s,background .2s;padding:0}
.lang button[aria-pressed="true"]{opacity:1;background:var(--white);box-shadow:var(--shadow-sm)}
.lang button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sec--dark .lang,.footer .lang{background:rgba(243,243,243,.1)}
.footer .lang button[aria-pressed="true"]{background:rgba(243,243,243,.16)}

.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.8px;background:var(--ink);position:relative;transition:transform .3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.8px;background:var(--ink);transition:transform .3s var(--ease)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.nav.is-open .burger span{background:transparent}
.nav.is-open .burger span::before{transform:translateY(5.5px) rotate(45deg)}
.nav.is-open .burger span::after{transform:translateY(-5.5px) rotate(-45deg)}

.mobmenu{
  position:fixed;inset:0;z-index:79;background:var(--charcoal);color:var(--off);
  padding:110px var(--pad) 40px;display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.mobmenu.is-open{opacity:1;visibility:visible;transform:none}
.mobmenu a{font-family:var(--font-display);font-size:2.3rem;font-weight:700;letter-spacing:-.03em;padding:10px 0;border-bottom:1px solid var(--line-dark)}
.mobmenu .btn{margin-top:22px}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--mint);color:var(--black);padding:12px 18px;border-radius:0 0 12px 0;font-weight:600}
.skip:focus{left:0}
/* Zero-specificity fallback so every focusable thing has a visible ring. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
[data-reveal][data-delay="5"]{transition-delay:.4s}

/* ---------- decorative ---------- */
.dots{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(33,33,33,.22) 1.1px,transparent 1.1px);
  background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%)}
.sec--dark .dots{background-image:radial-gradient(rgba(243,243,243,.2) 1.1px,transparent 1.1px)}
.doodle{position:absolute;pointer-events:none;color:var(--mint)}
.doodle svg{overflow:visible}
.doodle path,.doodle circle,.doodle line{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.tape{position:absolute;width:96px;height:26px;background:rgba(116,245,161,.55);
  border-left:1px dashed rgba(255,255,255,.6);border-right:1px dashed rgba(255,255,255,.6);
  box-shadow:0 2px 6px rgba(17,17,17,.12)}
.note{
  position:relative;background:var(--white);border:1px solid var(--line);
  padding:18px 20px;border-radius:4px;box-shadow:var(--shadow-md);
  font-family:var(--font-hand);font-size:1.32rem;line-height:1.24;color:var(--charcoal);
}
.note--mint{background:var(--mint);border-color:transparent}
.clip{position:absolute;top:-16px;right:16px;width:22px;height:46px;border:3px solid var(--charcoal);border-radius:12px;border-bottom-color:transparent;opacity:.65}

.marquee{overflow:hidden;white-space:nowrap;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:inline-flex;gap:0;animation:slide 34s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,2.1vw,1.5rem);letter-spacing:-.02em}
.marquee__track i{width:8px;height:8px;border-radius:50%;background:var(--mint);display:inline-block;flex:none;font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- cards / surfaces ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.sec--dark .card{background:#292929;border-color:var(--line-dark)}
.chip{display:inline-flex;align-items:center;gap:.5em;min-height:42px;padding:0 16px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--white);font-size:.92rem;font-weight:500;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s,transform .2s}
.chip:hover{border-color:var(--charcoal);transform:translateY(-1px)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--charcoal);border-color:var(--charcoal);color:var(--off)}
.chip[aria-pressed="true"] .dot,.chip.is-active .dot{background:var(--mint)}
.chip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* ---------- footer ---------- */
.footer{background:var(--black);color:var(--off);padding-block:clamp(56px,8vw,96px) 34px}
.footer a{color:var(--muted-dark);transition:color .2s}
.footer a:hover{color:var(--mint)}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px 24px}
.footer h2,.footer h4{font-size:.74rem;font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:14px;font-weight:500}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.95rem}
/* WCAG 2.5.8 — stacked footer links are navigation, not prose, so each one
   needs a 24px target rather than the 19px a bare text line gives. */
.footer ul a,.footer__bottom a{display:inline-flex;align-items:center;min-height:24px}
.footer__bottom{margin-top:52px;padding-top:22px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:.85rem;color:var(--muted-dark)}

/* ---------- sticky mobile CTA ---------- */
.stickycta{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:none;
  transform:translateY(140%);transition:transform .45s var(--ease-out);
}
.stickycta.is-on{transform:none}
.stickycta .btn{box-shadow:0 18px 40px -14px rgba(17,17,17,.6)}

/* ---------- misc ---------- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.stack{display:grid;gap:18px}
.center{text-align:center}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}
.sec--dark hr.rule{border-color:var(--line-dark)}

@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav .btn--nav{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .stickycta{display:block}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .ink-underline path,.circled path,.logo .dot-co path{stroke-dashoffset:0}
}

/* =========================================================================
   FRAMES + MINI SITES
   ========================================================================= */
.browser{
  background:var(--white);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid rgba(33,33,33,.1);
}
.browser__bar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#ececec;border-bottom:1px solid rgba(33,33,33,.08)}
.browser__dots{display:flex;gap:5px;flex:none}
.browser__dots i{width:9px;height:9px;border-radius:50%;background:#cfcfcf;display:block}
.browser__url{
  flex:1;min-width:0;height:26px;border-radius:var(--r-pill);background:var(--white);
  display:flex;align-items:center;justify-content:center;gap:.4em;
  font-family:var(--font-mono);font-size:.72rem;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px
}
.browser__url b{color:var(--charcoal);font-weight:600}
.browser__screen{position:relative;background:var(--white)}

.phone{
  width:clamp(210px,58vw,268px);border-radius:34px;background:var(--black);padding:8px;
  box-shadow:var(--shadow-lg);border:1px solid rgba(243,243,243,.14);flex:none
}
.phone__screen{position:relative;border-radius:27px;overflow:hidden;background:var(--white);aspect-ratio:9/18.5}
.phone__notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:78px;height:19px;border-radius:12px;background:var(--black);z-index:6}

/* --- mini site base --- */
.browser__screen,.phone__screen{container-type:inline-size}
.mini{
  font-size:14px;font-family:var(--font-body);
  color:var(--charcoal);background:var(--white);height:100%;overflow:hidden;position:relative;
}
@supports (container-type:inline-size){.mini{font-size:2.9cqw}}
.phone__screen .mini{font-size:14px}
@supports (container-type:inline-size){.phone__screen .mini{font-size:5.6cqw}}
.mini *{box-sizing:border-box}
.mini__page{height:100%;display:flex;flex-direction:column}
.mini-nav{display:flex;align-items:center;justify-content:space-between;padding:1.1em 1.3em;font-size:.78em}
.mini-nav b{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:1.15em}
.mini-nav ul{display:flex;gap:1.1em;list-style:none;margin:0;padding:0;opacity:.6}
.mini-pill{display:inline-flex;align-items:center;gap:.45em;border-radius:99em;padding:.42em .85em;font-size:.72em;font-weight:600}
.mini-dot{width:.5em;height:.5em;border-radius:50%;background:var(--mint);display:inline-block;flex:none}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:99em;padding:.72em 1.1em;font-size:.76em;font-weight:600;font-family:var(--font-display)}
.mini-img{width:100%;height:100%;object-fit:cover;display:block}
.mini-grid{display:grid;gap:.5em}

/* 1. studio / freelancer */
.mini--studio .mini__page{background:#F3F3F3}
.mini--studio h3{font-family:var(--font-display);font-size:2.15em;line-height:.94;letter-spacing:-.04em;margin:.1em 1.3rem .35em;padding:0 .52em}
.mini--studio .sub{padding:0 1.3em;font-size:.8em;color:#6b6b6b;margin-bottom:1em}
.mini--studio .work{padding:0 1.1em 1.1em;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:.55em;flex:1;min-height:0}
.mini--studio .work div{border-radius:.6em;overflow:hidden;background:#e2e2e2;min-height:0;min-width:0}
.mini--studio .foot{padding:.9em 1.3em;background:#212121;color:#F3F3F3;font-size:.74em;display:flex;justify-content:space-between}

/* 2. real estate */
.mini--estate .mini__page{background:#fff}
.mini--estate .top{background:#212121;color:#F3F3F3;padding:1em 1.2em;display:flex;align-items:center;gap:.7em}
.mini--estate .top img{width:2.4em;height:2.4em;border-radius:50%;object-fit:cover;flex:none}
.mini--estate .top b{font-family:var(--font-display);font-size:.95em;display:block;letter-spacing:-.02em}
.mini--estate .top span{font-size:.7em;opacity:.62}
.mini--estate .tabs{display:flex;gap:.4em;padding:.85em 1.2em .5em}
.mini--estate .tabs span{font-size:.7em;font-weight:600;padding:.4em .85em;border-radius:99em;background:#EFEFEF;color:#6b6b6b}
.mini--estate .tabs span:first-child{background:#74F5A1;color:#111}
.mini--estate .list{padding:.3em 1.2em 1em;display:grid;gap:.6em;flex:1;min-height:0;overflow:hidden;align-content:start}
.mini--estate .lst{display:flex;gap:.7em;border:1px solid #E6E6E6;border-radius:.7em;padding:.5em;align-items:center}
.mini--estate .lst .ph{width:5.2em;height:3.8em;border-radius:.5em;overflow:hidden;background:#e6e6e6;flex:none}
.mini--estate .lst strong{font-size:.8em;font-family:var(--font-display);letter-spacing:-.02em;display:block}
.mini--estate .lst .price{font-size:.86em;font-weight:700;color:#111}
.mini--estate .lst .meta{font-size:.66em;color:#6b6b6b;display:flex;gap:.55em;margin-top:.18em}
.mini--estate .cta{margin:auto 1.2em 1.2em;background:#74F5A1;color:#111;text-align:center;border-radius:99em;padding:.85em;font-size:.78em;font-weight:700;font-family:var(--font-display)}

/* 3. photographer */
.mini--photo .mini__page{background:#111;color:#F3F3F3}
.mini--photo .mini-nav{font-size:.68em;letter-spacing:.22em;text-transform:uppercase}
.mini--photo .mini-nav b{letter-spacing:.22em;font-size:1em;font-weight:500}
.mini--photo .shot{flex:1.5;min-height:0;overflow:hidden;position:relative}
.mini--photo .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.28em;flex:1;min-height:0;padding:.28em 0}
.mini--photo .strip div{overflow:hidden;background:#222}
.mini--photo .foot{padding:1em 1.3em;font-size:.72em;display:flex;justify-content:space-between;letter-spacing:.1em;text-transform:uppercase;opacity:.75}

/* 4. trainer */
.mini--trainer .mini__page{background:#F3F3F3}
.mini--trainer .top{background:#74F5A1;color:#111;padding:1.2em 1.2em 1.4em}
.mini--trainer .top small{font-size:.68em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.mini--trainer .top h3{font-family:var(--font-display);font-size:2.05em;line-height:.94;letter-spacing:-.04em;margin:.28em 0 0}
.mini--trainer .rows{padding:1em 1.2em;display:grid;gap:.5em;flex:1;min-height:0}
.mini--trainer .rw{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:.6em;padding:.72em .85em;font-size:.78em}
.mini--trainer .rw b{font-family:var(--font-display);letter-spacing:-.02em}
.mini--trainer .rw span{font-size:.86em;color:#6b6b6b}
.mini--trainer .rw i{font-style:normal;font-weight:700}
.mini--trainer .cta{margin:auto 1.2em 1.2em;background:#111;color:#F3F3F3;text-align:center;border-radius:99em;padding:.9em;font-size:.78em;font-weight:700;font-family:var(--font-display)}

/* 5. founder / startup */
.mini--founder .mini__page{background:#fff}
.mini--founder .mini-nav b{display:flex;align-items:center;gap:.4em}
.mini--founder .sq{width:1.1em;height:1.1em;border-radius:.3em;background:#212121;display:inline-block}
.mini--founder .body{padding:1.2em 1.3em;flex:1;min-height:0;display:flex;flex-direction:column}
.mini--founder h3{font-family:var(--font-display);font-size:1.85em;line-height:1;letter-spacing:-.035em;margin-bottom:.35em}
.mini--founder p{font-size:.78em;color:#6b6b6b;line-height:1.45}
.mini--founder .field{margin-top:1em;display:flex;gap:.4em}
.mini--founder .field span{flex:1;border:1px solid #E6E6E6;border-radius:99em;padding:.6em .9em;font-size:.7em;color:#9a9a9a}
.mini--founder .field b{background:#212121;color:#fff;border-radius:99em;padding:.6em 1em;font-size:.7em;font-family:var(--font-display)}
.mini--founder .feats{margin-top:1.1em;display:grid;gap:.55em}
.mini--founder .ft{display:flex;gap:.6em;align-items:center;font-size:.74em;color:#4a4a4a}
.mini--founder .ft i{width:1.5em;height:1.5em;border-radius:.4em;background:#74F5A1;flex:none;display:block}
.mini--founder .logos{margin-top:auto;display:flex;gap:.7em;opacity:.28;padding-top:1em}
.mini--founder .logos b{height:.7em;flex:1;background:#212121;border-radius:99em;display:block}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{padding-top:clamp(112px,16vw,168px);padding-bottom:clamp(40px,7vw,72px);position:relative;overflow:clip}
.hero__bg{position:absolute;inset:-14% -10% -8%;pointer-events:none;overflow:hidden;will-change:transform,opacity;
  background:
    radial-gradient(760px 430px at 72% 16%,rgba(116,245,161,.24),transparent 64%),
    radial-gradient(520px 340px at 88% 2%,rgba(116,245,161,.16),transparent 68%);
  transform-origin:72% 18%;
  animation:mintGlowDrift 14s ease-in-out infinite alternate}
.hero__bg::after{content:"";position:absolute;width:56%;height:72%;right:2%;top:-6%;border-radius:50%;
  background:radial-gradient(circle,rgba(116,245,161,.18) 0,rgba(116,245,161,.08) 42%,transparent 72%);
  filter:blur(8px);opacity:.8;will-change:transform,opacity;
  animation:mintGlowFloat 18s ease-in-out infinite}
@keyframes mintGlowDrift{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.82}
  32%{transform:translate3d(-5%,5%,0) scale(1.08);opacity:1}
  68%{transform:translate3d(4%,10%,0) scale(.96);opacity:.88}
  100%{transform:translate3d(-2%,2%,0) scale(1.05);opacity:.96}
}
@keyframes mintGlowFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.62}
  38%{transform:translate3d(-14%,16%,0) scale(1.13);opacity:.9}
  72%{transform:translate3d(8%,28%,0) scale(.92);opacity:.72}
}
@media (max-width:700px){
  .hero__bg{inset:-6% -34% -4%;background:
    radial-gradient(560px 360px at 64% 8%,rgba(116,245,161,.27),transparent 64%),
    radial-gradient(420px 300px at 92% 28%,rgba(116,245,161,.14),transparent 68%);
    animation-duration:12s}
  .hero__bg::after{width:78%;height:58%;right:-4%;top:12%;animation-duration:15s}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg,.hero__bg::after{animation:none!important;transform:none!important}
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.34fr);gap:clamp(28px,4vw,64px);align-items:center;position:relative}
/* Three grid children: copy, the offer card, the showreel stage. On desktop the
   first two stack in column one and the reel spans both rows. On mobile the
   reel jumps ahead of the offer card so it is on screen without a long scroll. */
@media (min-width:1001px){
  .hero__grid{grid-template-rows:auto auto;align-items:center;row-gap:clamp(14px,1.6vw,24px)}
  .hero__copy{grid-column:1;grid-row:1;align-self:end}
  .hero__meta--offer{grid-column:1;grid-row:2;align-self:start;margin-top:0}
  .hero__stage{grid-column:2;grid-row:1 / span 2}
}
.hero h1{margin:.28em 0 .4em}
.hero h1 .ln{display:block}
.hero .lead{margin-bottom:26px}

.claim{
  display:flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:7px 7px 7px 20px;max-width:520px;
  transition:border-color .2s,box-shadow .25s var(--ease);box-shadow:var(--shadow-sm)
}
.claim:focus-within{border-color:var(--charcoal);box-shadow:0 0 0 4px rgba(116,245,161,.35)}
.claim__field{flex:1;min-width:0;display:flex;align-items:baseline;font-family:var(--font-display);font-weight:600;font-size:1.06rem;letter-spacing:-.02em}
.claim input{border:0;background:transparent;outline:none;width:100%;min-width:40px;padding:12px 0;font-family:inherit;font-weight:inherit;font-size:inherit}
.claim input::placeholder{color:#b4b4b4}
.claim__suffix{color:var(--charcoal);flex:none;position:relative;white-space:nowrap;opacity:.75}
.claim__suffix .circled svg path{stroke-width:2.8}
.claim .btn{flex:none}
.claim__hint{margin-top:12px;font-size:.86rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.5em;align-items:center}
.claim__hint .ok{color:#1f9c56;font-weight:600}
.claim__hint .no{color:#c2410c;font-weight:600}

/* The stage supplies the perspective; the frame does the tilting, so the
   "Watch full showreel" button underneath stays flat and square. */
.hero__stage{position:relative;min-height:0;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;padding-bottom:clamp(20px,4vw,54px);
  transform:translateY(-24px);perspective:1100px;perspective-origin:60% 50%}
/* The showreel is 16:9. The frame tops out at 680px so the screen is 383px
   tall — wide and cinematic without turning the hero into a tall column. */
.hero__browser{width:min(100%,680px);margin-left:auto;margin-right:0;transform-style:preserve-3d;
  transform:rotate(-1.1deg) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  transition:transform .5s var(--ease-out);will-change:transform}
.hero__browser.is-tilting{transition:transform .14s linear}
.hero__browser .browser__screen{aspect-ratio:16/9;background:#08080a}
.hero__browser .browser__screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- watch full showreel ---------- */
.reelBtn{margin-top:clamp(16px,2.2vw,24px);margin-right:clamp(0px,2vw,26px);display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:11px 20px 11px 14px;border:1.5px solid rgba(33,33,33,.16);border-radius:999px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(6px);color:var(--ink);cursor:pointer;
  font:600 .92rem/1 var(--font-body);letter-spacing:-.01em;
  transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.reelBtn__play{width:26px;height:26px;flex:none;border-radius:50%;background:var(--ink);color:var(--mint);
  display:grid;place-items:center;transition:transform .2s}
@media (hover:hover){
  .reelBtn:hover{border-color:rgba(33,33,33,.34);background:#fff;transform:translateY(-1px);
    box-shadow:0 12px 28px -18px rgba(17,17,17,.55)}
  .reelBtn:hover .reelBtn__play{transform:scale(1.08)}
}
.hero__sticker{
  position:absolute;right:-6%;top:-12%;z-index:4;background:var(--mint);color:var(--black);
  border-radius:50%;width:clamp(88px,11vw,116px);aspect-ratio:1;display:grid;place-items:center;text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:clamp(.68rem,1.1vw,.84rem);line-height:1.15;letter-spacing:-.01em;
  transform:rotate(-9deg);box-shadow:0 16px 34px -18px rgba(17,17,17,.5);padding:10px
}
.hero__meta{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:30px;align-items:center;font-size:.9rem;color:var(--muted)}
.hero__meta b{color:var(--ink);font-weight:600}
.hero .doodle--arrow{left:-58px;top:14px;width:64px;color:var(--charcoal);opacity:.75}

.ticker{background:var(--charcoal);color:var(--off);padding:16px 0;position:relative;z-index:2}
.ticker .marquee__track span{color:var(--off)}

/* =========================================================================
   NOT-YOUR-JOB LIST
   ========================================================================= */
.chores{position:relative}
.chores__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.chores__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(6px,1.1vw,12px)}
.chores__list li{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.45rem,3.6vw,2.6rem);line-height:1.14;color:#8a8a8a;position:relative;width:fit-content;
  transition:color .5s var(--ease)
}
.chores__list li::after{
  content:"";position:absolute;left:-1.5%;right:-1.5%;top:54%;height:.09em;background:var(--mint);border-radius:99px;
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)
}
.chores__list li.is-in::after{transform:scaleX(1)}
.chores__punch{
  margin-top:clamp(24px,4vw,40px);font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.6rem,4.2vw,3rem);line-height:1.06
}
.chores__aside{position:sticky;top:120px;display:grid;gap:20px;justify-items:start}
.chores__note{transform:rotate(2deg);max-width:330px}
.chores__note .clip{left:20px;right:auto}

/* =========================================================================
   HANDLED / TELEGRAM DEMO
   ========================================================================= */
.handled__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,72px);align-items:center;margin-top:clamp(34px,5vw,58px)}
.chatwrap{display:flex;justify-content:center;position:relative}
.chat{position:absolute;inset:0;display:flex;flex-direction:column;background:#0f1621;padding:34px 10px 12px}
.chat__top{position:absolute;top:0;left:0;right:0;height:34px;background:#17212b;display:flex;align-items:center;gap:7px;padding:0 12px;z-index:5}
.chat__top .av{width:19px;height:19px;border-radius:50%;background:var(--mint);flex:none}
.chat__top b{font-size:.62rem;color:#fff;font-weight:600}
.chat__top span{font-size:.53rem;color:#7d8b99}
.chat__body{flex:1;display:flex;flex-direction:column;gap:7px;justify-content:flex-end;padding-bottom:6px;overflow:hidden}
.bub{
  max-width:82%;padding:8px 11px;border-radius:14px;font-size:.72rem;line-height:1.32;color:#fff;
  background:#182533;align-self:flex-start;border-bottom-left-radius:5px;
  opacity:0;transform:translateY(10px) scale(.97);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)
}
.bub.is-on{opacity:1;transform:none}
.bub--me{align-self:flex-end;background:var(--mint);color:#0d1b12;border-bottom-left-radius:14px;border-bottom-right-radius:5px;font-weight:500}
.bub--img{padding:5px;width:62%}
.bub--img img{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%}
.bub time{display:block;font-size:.55rem;opacity:.55;margin-top:3px;text-align:right}
.chat__input{display:flex;align-items:center;gap:8px;background:#17212b;border-radius:99px;padding:8px 12px;font-size:.66rem;color:#93a3b2}
.chat__input .send{margin-left:auto;color:var(--mint)}

.demo__stage{position:relative}
.demo__browser .browser__screen{aspect-ratio:16/11.6}
.demo__flash{position:absolute;inset:0;background:var(--mint);opacity:0;pointer-events:none;mix-blend-mode:screen}
.demo__flash.is-flash{animation:flash .9s var(--ease-out)}
@keyframes flash{0%{opacity:.5}100%{opacity:0}}
.mini--estate .list .newcard{display:none}
.mini--estate .list .newcard.is-on{display:flex;animation:newcardIn .6s var(--ease-out) both}
@keyframes newcardIn{
  0%{opacity:0;transform:translateY(-10px) scale(.96)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
.demo__ctrl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.demo__steps{display:flex;gap:6px;align-items:center}
.demo__steps i{width:26px;height:4px;border-radius:99px;background:rgba(243,243,243,.22);display:block;transition:background .3s}
.demo__steps i.is-on{background:var(--mint)}
.demo__label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}

/* =========================================================================
   EXAMPLES
   ========================================================================= */
.ex__head{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;justify-content:space-between}
.ex__head>div{flex:1 1 420px}
.ex__head>.lead{flex:0 1 330px}
.ex__tabs{display:flex;gap:8px;overflow-x:auto;padding:26px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ex__tabs::-webkit-scrollbar{display:none}
.ex__tabs .chip{flex:none}
.ex__stage{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.72fr);gap:clamp(24px,3vw,44px);align-items:center;margin-top:14px;min-height:clamp(380px,42vw,520px)}
.ex__copy{position:relative}
.ex__copy .num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--muted)}
.ex__copy h3{margin:.35em 0 .4em;font-size:clamp(1.7rem,3.4vw,2.6rem)}
.ex__copy .url{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.86rem;
  background:var(--white);border:1px solid var(--line);border-radius:99px;padding:7px 14px;margin-top:18px}
.ex__copy .url b{color:var(--charcoal)}
.ex__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.ex__tags span{font-size:.76rem;border:1px dashed var(--line);border-radius:99px;padding:5px 11px;color:var(--muted)}
.ex__panel{display:none}
.ex__panel.is-active{display:block;animation:pop .5s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ex__frame{position:relative}
.ex__frame{width:108%;max-width:none;margin-left:-2%}
/* The frame deliberately bleeds past the text column. Between roughly 980px
   and 1080px the page gutter is too narrow to absorb that bleed, so the
   section clips it rather than letting the document scroll sideways.
   No sticky descendants live in here, so clip is safe. */
.sec.examples{overflow-x:clip}
.ex__frame .browser__screen{aspect-ratio:var(--frame-ar,16/10);background:#0a0a0b}
.ex__swipe{display:none;text-align:center;font-size:.8rem;color:var(--muted);margin-top:14px}
.ex__note{position:absolute;right:-14px;bottom:-30px;z-index:5;transform:rotate(-3deg);max-width:210px;font-size:1.12rem}

/* =========================================================================
   HOW IT WORKS
   ========================================================================= */
.steps{position:relative;margin-top:clamp(34px,5vw,60px)}
.steps__line{position:absolute;left:26px;top:8px;bottom:8px;width:2px;background:var(--line)}
.steps__line i{position:absolute;inset:0 0 auto 0;height:var(--p,0%);background:var(--mint);display:block;transition:height .2s linear;border-radius:99px}
.step{display:grid;grid-template-columns:54px 1fr;gap:clamp(16px,3vw,40px);padding-block:clamp(20px,3.4vw,38px);align-items:start;position:relative}
.step__n{width:54px;height:54px;border-radius:50%;background:var(--off);border:2px solid var(--line);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;position:relative;z-index:2;transition:background .35s,border-color .35s,color .35s}
.step.is-lit .step__n{background:var(--mint);border-color:var(--mint);color:var(--black)}
.step__body h3{font-size:clamp(1.35rem,2.9vw,2.1rem);margin-bottom:.3em}
.step__body p{color:var(--muted);max-width:56ch}
.step__extra{margin-top:16px}
.step .hand{position:absolute;right:0;top:26px;display:none}
@media (min-width:1080px){.step .hand{display:block}}

/* =========================================================================
   PRICING
   ========================================================================= */
.price__top{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between}
.toggle{display:inline-flex;background:rgba(33,33,33,.07);border-radius:99px;padding:4px;position:relative}
.toggle button{border:0;background:transparent;cursor:pointer;padding:10px 18px;border-radius:99px;font-weight:600;font-size:.92rem;color:var(--muted);transition:color .25s;position:relative;z-index:2}
.toggle button[aria-pressed="true"]{color:var(--ink)}
.toggle__pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--white);border-radius:99px;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease)}
.toggle.is-year .toggle__pill{transform:translateX(100%)}
.toggle__save{margin-left:10px;font-size:.78rem;color:var(--mint-text);font-weight:700}

.setupbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:clamp(24px,3.5vw,38px) 0 0;
  background:var(--charcoal);color:var(--off);border-radius:var(--r-lg);padding:18px 24px;position:relative;overflow:hidden
}
.setupbar .big{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.2rem);letter-spacing:-.03em;color:var(--mint)}
.setupbar .was{font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,2.6vw,1.6rem);color:#6e6e6e;position:relative}
.setupbar .was::after{content:"";position:absolute;left:-6%;right:-6%;top:50%;height:3px;background:var(--mint);border-radius:2px;transform:rotate(-6deg)}
.setupbar small{color:var(--muted-dark);font-size:.86rem}
.setupbar .pulse{margin-left:auto;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line-dark);border-radius:99px;padding:6px 12px;display:inline-flex;align-items:center;gap:.6em}
.setupbar .pulse i{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:blip 1.9s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(18px,2.6vw,28px);align-items:stretch}
.plan{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;position:relative}
.plan--pro{background:var(--charcoal);color:var(--off);border-color:var(--charcoal)}
.plan--pro .lead,.plan--pro .plan__note{color:var(--muted-dark)}
.plan__name{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.5em}
.plan__for{font-size:.9rem;color:var(--muted);margin-top:6px}
.plan--pro .plan__for{color:var(--muted-dark)}
.plan__price{display:flex;align-items:baseline;gap:.3em;margin:22px 0 4px;font-family:var(--font-display);letter-spacing:-.04em}
.plan__price .amt{font-size:clamp(3rem,6.4vw,4.2rem);font-weight:700;line-height:1}
.plan__price .per{font-size:1rem;color:var(--muted);font-weight:500;letter-spacing:0}
.plan--pro .plan__price .per{color:var(--muted-dark)}
.plan__note{font-size:.88rem;color:var(--muted);min-height:1.4em}
.plan__list{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:12px;font-size:.98rem}
.plan__list li{display:flex;gap:.7em;align-items:flex-start;line-height:1.4}
.plan__list li::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--mint);flex:none;margin-top:2px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.plan__list li.dim{color:var(--muted)}
.plan .btn{margin-top:auto}
.plan__badge{position:absolute;top:-13px;right:24px;background:var(--mint);color:var(--black);font-family:var(--font-display);
  font-weight:700;font-size:.78rem;padding:6px 14px;border-radius:99px;transform:rotate(2deg)}
.plan__badge--value{background:var(--mint);transform:rotate(-2deg)}

.plan__tier{font:inherit;font-weight:800}
.plan__tier--basic{color:#5E7CE2}
.plan__tier--care{color:#A56AD8}
.plan__tier--pro{color:var(--mint)}
.plan__tipitem{position:relative}
.plan__tipitem::before{display:block}
.tipwrap{position:relative;width:100%}
.tipwrap__trigger{display:inline-flex;align-items:center;gap:.5em;min-height:24px}
.tipwrap summary{list-style:none;display:inline-flex;align-items:center;gap:.5em;cursor:pointer;text-decoration-line:underline;text-decoration-style:dotted;text-underline-offset:4px;font-weight:600}
.tipwrap summary::-webkit-details-marker{display:none}
.info-icon{width:18px;height:18px;border:1px solid currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:.68rem;font-weight:800;line-height:1;opacity:.7;flex:none}
.tipwrap__pop{position:absolute;left:0;top:calc(100% + 10px);z-index:20;width:min(300px,78vw);padding:15px 16px;border-radius:14px;background:var(--charcoal);color:var(--off);box-shadow:var(--shadow-md);font-size:.82rem;line-height:1.45}
.tipwrap__pop b{display:block;font-family:var(--font-display);font-size:.92rem;margin-bottom:5px}
.tipwrap__pop p{color:var(--muted-dark)}
@media (hover:hover){
  .tipwrap .tipwrap__pop{display:none;background:var(--mint);color:var(--black)}
  .tipwrap .tipwrap__pop p{color:rgba(17,17,17,.72)}
  .tipwrap:hover summary{color:var(--mint);text-decoration-color:var(--mint)}
  .tipwrap:hover .info-icon{background:var(--mint);border-color:var(--mint);color:var(--black);opacity:1}
  .tipwrap:hover .tipwrap__pop{display:block}
}
@media (hover:none){.tipwrap[open] .tipwrap__pop{display:block}}

.plan__stamp{position:absolute;right:-18px;bottom:-26px;z-index:4;transform:rotate(-4deg);max-width:200px;font-size:1.1rem}
.price__foot{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px 26px;font-size:.9rem;color:var(--muted);align-items:center}
.price__foot span{display:inline-flex;gap:.5em;align-items:center}

/* =========================================================================
   EXPLORE TEASER
   ========================================================================= */
.explore__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:34px}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:grid;gap:12px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.pcard__img{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#08080a}
.pcard__img img{width:100%;height:100%;object-fit:contain}
.pcard__img--live{position:relative;background:#08080a;isolation:isolate}
.pcard__img--live video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;background:#08080a}
.pcard b{font-family:var(--font-display);letter-spacing:-.02em;font-size:1.02rem;display:block}
.pcard .cat,.pcard .u{display:block}
.pcard>span:last-child{display:block}
.pcard .cat{font-size:.8rem;color:var(--muted)}
.pcard .u{font-family:var(--font-mono);font-size:.74rem;color:var(--mint-text);margin-top:2px}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{max-width:820px;margin-inline:auto;margin-top:34px;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;background:transparent;border:0;text-align:left;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.02rem,2.1vw,1.3rem);letter-spacing:-.02em;line-height:1.3}
.faq__q:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.faq__q::after,.faq__q::before{content:"";position:absolute;right:6px;top:50%;width:16px;height:2.5px;background:var(--charcoal);border-radius:2px;transition:transform .3s var(--ease)}
.faq__q::before{transform:rotate(90deg)}
.faq__item.is-open .faq__q::before{transform:rotate(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq__a p{padding-bottom:24px;color:var(--muted);max-width:62ch}

/* =========================================================================
   TONLE SYSTEMS
   ========================================================================= */
.sys{position:relative;overflow:clip}
.sys__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.sys__list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sys__list li{border:1px solid var(--line-dark);border-radius:99px;padding:8px 16px;font-size:.92rem;color:var(--off)}
.sys__leaf{width:34px;height:34px;flex:none}
.sys__card{background:rgba(243,243,243,.05);border:1px solid var(--line-dark);border-radius:var(--r-xl);padding:clamp(24px,3vw,34px)}
.sys__card .row{gap:10px}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{order:1}
  .hero__stage{order:2}
  .hero__meta--offer{order:3;margin-top:0}
  /* Tablet/phone: the reel takes nearly the full width and the hero stays
     short, so the showreel is on screen almost immediately. */
  .hero__stage{min-height:0;margin-top:6px;align-items:center;padding-bottom:clamp(22px,6vw,40px);
    transform:translateY(-8px);--tiltX:0deg;--tiltY:0deg}
  .hero__browser{width:100%;max-width:680px;margin-inline:auto;
    transform:rotate(-.8deg)}   /* no tilt on touch */
  .reelBtn{margin-right:0}
  .chores__grid{grid-template-columns:1fr}
  .chores__aside{position:static;margin-top:8px}
  .handled__grid{grid-template-columns:1fr;gap:34px}
  .ex__stage{grid-template-columns:1fr;min-height:0}
  .ex__frame{width:100%;margin-left:0}
  .ex__copy{order:2}
  .plans{grid-template-columns:1fr}
  .sys__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .claim{flex-direction:column;align-items:stretch;border-radius:24px;padding:6px 6px 6px 6px;gap:6px}
  .claim__field{padding-inline:14px}
  .claim .btn{width:100%}
  .ex__note{position:static;margin-top:22px;transform:rotate(-1.5deg);max-width:none}
  .plan__stamp{position:static;margin-top:20px;transform:rotate(-1.5deg);max-width:none}
  .footer__grid{grid-template-columns:1fr;gap:28px}
  .steps__line{left:20px}
  .step{grid-template-columns:42px 1fr;gap:16px}
  .step__n{width:42px;height:42px;font-size:.95rem}
  .setupbar{padding:16px 18px}
  .setupbar .pulse{margin-left:0}
  .hero__sticker{width:88px;right:2%;top:-16px}
  body.has-sticky{padding-bottom:84px}
}

.circled path,.ink-underline path,.logo .dot-co path{vector-effect:non-scaling-stroke}

#heroScreen{position:relative}
.browser__screen>.mini{position:absolute;inset:0}
.hero__browser .browser__screen,.demo__browser .browser__screen,.ex__frame .browser__screen{position:relative}
.ex__frame .browser__screen>.mini,.demo__browser .browser__screen>.mini{position:absolute;inset:0}

.statcard{background:var(--charcoal);color:var(--off);border-radius:var(--r-lg);padding:22px 24px;max-width:330px;display:grid;gap:8px}
.statcard__n{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4vw,2.9rem);letter-spacing:-.04em;color:var(--mint);line-height:1}
.statcard__l{font-size:.92rem;color:var(--muted-dark);line-height:1.45}

.circled svg,.logo .dot-co svg,.ink-underline svg{max-width:none}

/* =========================================================================
   EXPLORE PAGE
   ========================================================================= */
.exhero{padding-top:clamp(118px,15vw,168px);padding-bottom:clamp(24px,4vw,44px);position:relative;overflow:clip}
.exhero__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(760px 420px at 88% -10%,rgba(116,245,161,.3),transparent 62%)}
.searchbar{display:flex;align-items:center;gap:10px;background:var(--white);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:6px 6px 6px 20px;max-width:560px;box-shadow:var(--shadow-sm);margin-top:26px}
.searchbar:focus-within{border-color:var(--charcoal);box-shadow:0 0 0 4px rgba(116,245,161,.35)}
.searchbar input{flex:1;min-width:0;border:0;background:transparent;outline:none;padding:13px 0;font-size:1rem}
.searchbar .ico{flex:none;opacity:.4}
.filters{display:flex;gap:8px;overflow-x:auto;padding:22px 0 6px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters .chip{flex:none}
.dirmeta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:6px;color:var(--muted);font-size:.9rem}
.dirgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:22px}
@media(max-width:1080px){.dirgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.dirgrid{grid-template-columns:1fr}}
.dircard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s}
.dircard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.dircard__img{aspect-ratio:16/9;background:#08080a;overflow:hidden;position:relative}
.dircard__img img,.dircard__img video{width:100%;height:100%;object-fit:contain;display:block}
.dircard__tag{position:absolute;left:10px;top:10px;background:rgba(243,243,243,.92);border-radius:99px;padding:5px 11px;
  font-size:.72rem;font-weight:600;backdrop-filter:blur(6px)}
.dircard__b{padding:16px 18px 18px;display:grid;gap:3px}
.dircard__b b{font-family:var(--font-display);font-size:1.08rem;letter-spacing:-.02em}
.dircard__b .role{font-size:.88rem;color:var(--muted)}
.dircard__b .u{font-family:var(--font-mono);font-size:.76rem;color:var(--mint-text);margin-top:8px;display:flex;align-items:center;gap:.4em}
.dirempty{padding:60px 0;text-align:center;color:var(--muted)}
.joinstrip .lead,.joinstrip .small{color:var(--muted-dark)}   /* grey-on-charcoal was 3.0:1 */
.joinstrip{margin-top:clamp(40px,6vw,70px);background:var(--charcoal);color:var(--off);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,48px);display:grid;gap:22px;grid-template-columns:1.4fr auto;align-items:center;position:relative;overflow:hidden}
.joinstrip .dots{opacity:.35}
@media (max-width:760px){.joinstrip{grid-template-columns:1fr}}

/* Khmer: mono/uppercase labels need normal spacing */
html[lang="km"] .stepno,html[lang="km"] .pv__label,html[lang="km"] .demo__label,
html[lang="km"] .footer h4,html[lang="km"] .ex__copy .num,html[lang="km"] .setupbar .pulse,
html[lang="km"] .fq .tag,html[lang="km"] .mini--photo .mini-nav{letter-spacing:.02em;text-transform:none;font-family:var(--font-body)}
html[lang="km"] .chores__list li{font-size:clamp(1.15rem,2.9vw,2rem);line-height:1.35}
html[lang="km"] .done h1{font-size:clamp(2rem,8vw,4.4rem)}
html[lang="km"] .plan__price .amt,html[lang="km"] .statcard__n{font-family:'Space Grotesk',sans-serif}

html[lang="km"] .eyebrow,html[lang="km"] .hero__meta,html[lang="km"] .price__foot,
html[lang="km"] .toggle__save,html[lang="km"] .dirmeta{letter-spacing:normal;text-transform:none}
html[lang="km"] .eyebrow{font-size:.82rem;font-family:var(--font-body)}
/* Caveat has no Khmer glyphs — use the Khmer face, kept informal with italics */
html[lang="km"] .hand,html[lang="km"] .note,html[lang="km"] .heroDeal__scribble,
html[lang="km"] .ex__sticky{font-family:var(--font-body);font-style:italic;font-size:1em;letter-spacing:normal}
html[lang="km"] .heroDeal__scribble{white-space:normal;font-size:.95rem;line-height:1.4}
html[lang="km"] .ex__sticky{font-size:.8rem;line-height:1.45}
html[lang="km"] .note{font-size:.98rem;line-height:1.6}
html[lang="km"] .chores__punch .hand{font-size:.9em}

/* 2026-09 pricing + Tonle Systems updates */
.plan__list em{font-style:italic;opacity:.78}
.referralbar{margin-top:26px;border:1.5px dashed rgba(33,33,33,.22);border-radius:var(--r-lg);
  padding:20px 24px;display:flex;align-items:center;gap:18px;background:var(--mint-wash);position:relative}
.referralbar__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--mint);font-size:1.15rem;flex:none;transform:rotate(-6deg);box-shadow:0 8px 20px -10px rgba(17,17,17,.4)}
.referralbar b{font-family:var(--font-display);display:block;font-size:1.12rem;letter-spacing:-.02em}
.referralbar>div>span{display:block;color:var(--muted);font-size:.92rem;margin-top:4px;line-height:1.45}
.referralbar .hand{margin-left:auto;flex:none;white-space:nowrap;transform:rotate(-2deg)}
@media(max-width:820px){.referralbar{align-items:flex-start;gap:14px;padding:18px}.referralbar .hand{display:none}}

/* plan card: honest note that fills the short Basic list */
.plan__hint{margin-top:14px;font-size:.88rem;color:var(--muted);line-height:1.45;
  border-top:1px dashed var(--line);padding-top:14px}
.plan__hint a{color:var(--mint-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sys__logoWrap{display:block;max-width:214px}
.sys__logo{display:block;width:100%;height:auto}
.sys__tag{display:block;color:var(--muted-dark);margin-top:12px}
.sys .wrap{position:relative;z-index:1}
.eyebrow--leaf::before{display:none}
.sys__leafmark{width:17px;height:auto;color:var(--mint);flex:none;margin-right:.15em}

@media(max-width:1023px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* v4 polish pass */
.claim__hint--status{min-height:0;margin-top:0;height:0;overflow:hidden}
.hero__meta{gap:10px 14px}
.hero__offer,.hero__speed{display:inline-flex;align-items:center;gap:.45em;flex-wrap:wrap;border:1px solid var(--line);background:rgba(255,255,255,.62);backdrop-filter:blur(10px);padding:8px 12px;border-radius:999px}
.hero__offer em{font-style:normal;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.hero__offer b{color:var(--ink)}
.hero__speed b{color:var(--ink)}
.hand.mint{white-space:nowrap}
.handled .d2 .ln{display:block}
.teamstamp{margin-top:12px;max-width:330px;border:1px solid var(--line);border-radius:16px;padding:13px 15px;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.72);box-shadow:var(--shadow-sm)}
.teamstamp__icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--mint-soft,#e8fdf0);font-size:1rem;flex:none}
.teamstamp b{font-family:var(--font-display);font-size:.88rem;display:block;letter-spacing:-.01em}
.teamstamp small{display:block;color:var(--muted);font-size:.76rem;margin-top:2px}
.ex__sticky{position:absolute;right:-14px;top:-18px;z-index:8;width:min(180px,38%);padding:14px 15px;font-family:var(--font-hand,Georgia,serif);font-size:.88rem;line-height:1.24;color:#202020;box-shadow:0 12px 24px -16px rgba(17,17,17,.45);transform:rotate(3deg);border:1px solid rgba(17,17,17,.08)}
.ex__panel:nth-child(even) .ex__sticky{transform:rotate(-3deg)}
.ex__sticky.note--cream{background:#fff4d8}.ex__sticky.note--blue{background:#e7f0ff}.ex__sticky.note--pink{background:#ffe8ef}.ex__sticky.note--yellow{background:#fff1a8}.ex__sticky.note--lavender{background:#eee9ff}
.plan__note .save-highlight{display:inline-block;margin-left:.35em;padding:.12em .48em;border-radius:999px;font-weight:800;color:var(--black);line-height:1.35}
.plan--starter .plan__note .save-highlight{background:#e9e5ff}
.plan--pick .plan__note .save-highlight{background:var(--mint)}
.plan--pro .plan__note .save-highlight{background:var(--white);color:var(--black)}

/* Entrepreneur Program: true hover/focus on desktop, tap toggle on touch */
.tipwrap{position:relative;width:100%;outline:none}
.tipwrap__trigger{list-style:none;display:inline-flex;align-items:center;gap:.5em;cursor:default;text-decoration-line:underline;text-decoration-style:dotted;text-underline-offset:4px;font-weight:600;transition:color .22s ease,text-decoration-color .22s ease,opacity .22s ease}
.tipwrap__pop{display:block!important;opacity:0;visibility:hidden;transform:translateY(7px) scale(.985);pointer-events:none;transition:opacity .2s ease,transform .28s var(--ease-out),visibility 0s linear .28s;background:#202220;color:var(--off);border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 36px -18px rgba(17,17,17,.48)}
.tipwrap__pop p{color:rgba(255,255,255,.72)}
@media (hover:hover) and (pointer:fine){
  .tipwrap:hover .tipwrap__trigger,.tipwrap:focus-visible .tipwrap__trigger{color:var(--ink);text-decoration-color:#969d97;opacity:.76}
  .tipwrap:hover .info-icon,.tipwrap:focus-visible .info-icon{background:#ecefec;border-color:#d7ddd8;color:#353a36;opacity:1;transition:all .22s ease}
  .tipwrap:hover .tipwrap__pop,.tipwrap:focus-visible .tipwrap__pop{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition-delay:0s;pointer-events:auto}
}
@media (hover:none),(pointer:coarse){
  .tipwrap__trigger{cursor:pointer}
  .tipwrap.is-open .tipwrap__pop{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;transition-delay:0s}
}
@media (max-width:600px){
  .hero .d1{font-size:clamp(2.12rem,10.5vw,2.5rem)}
  /* v14.2: the hero headline is now a full sentence — nowrap clipped it off
     the right edge on phones and blew out the grid column. Let it wrap. */
  .hero h1 .ln{white-space:normal}
  .hero__copy{min-width:0}
  .hero__meta{align-items:flex-start;flex-direction:column}
  .hero__offer,.hero__speed{font-size:.82rem}
  .ex__sticky{right:-4px;top:-14px;width:42%;font-size:.76rem;padding:11px 12px}
}

/* ===== v5 polish ===== */
.hero__meta--offer{display:block!important;margin-top:24px}
.heroDeal{position:relative;display:inline-flex;align-items:flex-end;gap:18px;max-width:100%}
.heroDeal__scribble{font-family:var(--font-hand);font-size:clamp(1.05rem,1.8vw,1.35rem);transform:rotate(-3deg);white-space:nowrap;color:var(--ink);position:relative;padding:0 76px 18px 0}
.heroDeal__arrow{position:absolute;width:76px;height:42px;right:0;bottom:-2px;overflow:visible;transform:rotate(2deg);fill:none;stroke:var(--mint-dark);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.heroDeal__main{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 11px;background:rgba(255,255,255,.64);border:1px solid rgba(33,33,33,.09);box-shadow:0 10px 30px rgba(33,33,33,.06);border-radius:18px;padding:12px 16px;backdrop-filter:blur(10px)}
.heroDeal__main b{font-size:1rem;letter-spacing:-.02em}
.heroDeal__main span{font-size:.86rem;color:var(--muted)}

.teamstamp{margin-bottom:12px}
.statcard{margin-top:0!important}


.referralbar strong{font-weight:800;letter-spacing:.04em}
.footer__systems{color:var(--mint);font-weight:700;transition:opacity .2s}
.footer__systems:hover{opacity:.75}

/* mobile menu: full-screen, no floating nav pill */
.nav.is-open .nav__inner{background:transparent!important;box-shadow:none!important;border-color:transparent!important;backdrop-filter:none!important}
.nav.is-open .logo{color:var(--off)}
.nav.is-open .lang{background:transparent;border:1px solid rgba(255,255,255,.32)}
.nav.is-open .lang button{color:#fff}
.nav.is-open .lang button[aria-pressed="true"]{background:rgba(255,255,255,.13);box-shadow:none}
.nav.is-open .burger{border-color:rgba(255,255,255,.28)}
.nav.is-open .burger span::before,.nav.is-open .burger span::after{background:#fff}
.mobmenu{padding-top:112px;gap:0;background:
 radial-gradient(circle at 78% 18%,rgba(201,255,76,.12),transparent 26%),
 radial-gradient(circle at 16% 78%,rgba(183,255,224,.09),transparent 28%),
 var(--charcoal)}
.mobmenu__eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:rgba(243,243,243,.5);margin-bottom:18px}
.mobmenu>a:not(.btn){display:grid;grid-template-columns:1fr auto;align-items:end;padding:17px 0;border-bottom:1px solid rgba(243,243,243,.12);color:var(--off)}
.mobmenu>a:not(.btn)::after{content:'↗';font-family:var(--font-body);font-size:1rem;color:var(--mint);padding-bottom:5px}
.mobmenu>a:not(.btn)>span{font-family:var(--font-display);font-size:clamp(2rem,9vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:.95}
.mobmenu>a:not(.btn)>small{grid-column:1/2;font-family:var(--font-body);font-size:.8rem;line-height:1.35;color:rgba(243,243,243,.52);padding-top:7px;max-width:31ch}
.mobmenu__foot{margin-top:auto;padding-top:24px;display:grid;gap:10px}
.mobmenu__foot .btn{margin:0}
.mobmenu__foot>span{text-align:center;font-size:.78rem;color:rgba(243,243,243,.48)}

@media (max-width:720px){
  .heroDeal{display:grid;gap:2px;padding-top:8px}
  .heroDeal__scribble{justify-self:start;padding-bottom:8px;font-size:1rem;transform:rotate(-4deg)}
  .heroDeal__arrow{width:64px;height:36px;right:0;bottom:-5px;transform:rotate(4deg)}
  .heroDeal__main{padding:11px 13px;border-radius:15px;gap:4px 8px}
  .heroDeal__main b{font-size:.94rem}
  .heroDeal__main span{font-size:.78rem;line-height:1.35}
  .ex__tabs{margin-top:26px!important}
  .ex__frame{margin-top:18px}
}


/* v10 — continuous hero swipe + uploaded handwritten arrow */
.heroWordSwipe{z-index:4}
.heroWordSwipe svg{z-index:7!important;left:-4%!important;width:109%!important;bottom:-.18em!important;transform-origin:left center;transform:scaleX(0)}
.heroWordSwipe path{stroke-dasharray:none!important;stroke-dashoffset:0!important;stroke-width:9.5!important}
.is-in .heroWordSwipe svg{animation:swipeReveal .72s var(--ease-out) .12s forwards}
@keyframes swipeReveal{to{transform:scaleX(1)}}
.heroDeal__arrow--asset{object-fit:contain;stroke:none!important;fill:none!important;width:88px;height:58px;right:-6px;bottom:-12px;transform:rotate(8deg)}
.teamstamp{background:#f2edff!important;border-color:#ded1ff!important;box-shadow:0 12px 30px rgba(92,58,171,.10)!important}
.teamstamp__icon{background:#d9c9ff!important;color:#5830a7!important;box-shadow:inset 0 0 0 1px rgba(88,48,167,.08)}
.teamstamp b{color:#5830a7}
.teamstamp small{color:#5c4a80}
@media(max-width:720px){.heroDeal__arrow--asset{width:76px;height:50px;right:-4px;bottom:-12px}}
@media(prefers-reduced-motion:reduce){.heroWordSwipe svg{transform:scaleX(1);animation:none!important}}


/* v11 — Pearl-style hero offer treatment */
.heroDeal__main{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,#fff 0%,#f8f4ef 24%,#fff 48%,#eee5dc 72%,#fff 100%);
  border:1px solid rgba(197,181,163,.9);
  box-shadow:0 10px 28px rgba(97,79,60,.10),inset 0 0 0 1px rgba(255,255,255,.8);
  animation:heroDealFloat 2.9s ease-in-out infinite,heroDealGlow 2.2s ease-in-out infinite alternate;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.heroDeal__main::before{
  content:"";position:absolute;inset:-120% -55%;pointer-events:none;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.94) 50%,transparent 58%);
  transform:translateX(-82%);animation:heroDealShine 3.1s ease-in-out infinite;
}
.heroDeal__main::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 22px rgba(209,196,182,.22);
}
.heroDeal__main:hover{transform:translateY(-4px) scale(1.015);border-color:#c9b8a6;box-shadow:0 16px 36px rgba(97,79,60,.17),inset 0 0 0 1px rgba(255,255,255,.9)}
.heroDeal__main>b,.heroDeal__main>span{position:relative;z-index:1}
@keyframes heroDealFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes heroDealGlow{from{box-shadow:0 10px 28px rgba(97,79,60,.08),inset 0 0 0 1px rgba(255,255,255,.8)}to{box-shadow:0 13px 34px rgba(97,79,60,.15),0 0 0 1px rgba(233,224,214,.75),inset 0 0 0 1px rgba(255,255,255,.9)}}
@keyframes heroDealShine{0%,18%{transform:translateX(-82%)}55%,100%{transform:translateX(82%)}}
@media(prefers-reduced-motion:reduce){.heroDeal__main,.heroDeal__main::before{animation:none!important}}


/* ---- single-plan pricing (one price, no tiers) ---- */
.price__top--single{align-items:flex-end}
.plans--one{grid-template-columns:minmax(0,560px);justify-content:center}
.plan--solo{padding-bottom:clamp(22px,3vw,30px)}
@media(max-width:1023px){.plans--one{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}


/* ---- split plan card: stacked on mobile, two columns on desktop ---- */
.plans--one{grid-template-columns:minmax(0,980px)}
.plan--solo{padding:clamp(22px,3vw,34px)}
.planSplit{display:grid;gap:clamp(18px,2.4vw,30px)}
.planSplit__left .plan__price{margin-top:18px}
.planSplit__label{display:block;font:800 .72rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.planSplit__anchor{margin:12px 0 0;font-size:.82rem;color:var(--muted);text-align:center}
.setupInline{margin:18px 0 20px;padding:16px 18px;border-radius:16px;background:rgba(116,245,161,.14);border:1px dashed rgba(16,35,24,.22)}
.setupInline .pulse{margin-bottom:8px}
.setupInline__row{display:flex;align-items:center;gap:.5em}
.setupInline .was{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:#6e6e6e;position:relative}
.setupInline .was::after{content:"";position:absolute;left:-8%;right:-8%;top:50%;height:3px;background:var(--mint);border-radius:2px;transform:rotate(-8deg)}
.setupInline .big{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em}
.setupInline small{display:block;margin-top:6px;font-size:.82rem;color:var(--muted);line-height:1.45}
@media(min-width:1024px){
  .planSplit{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,3vw,44px);align-items:start}
  .planSplit__right{border-left:1px solid rgba(16,35,24,.12);padding-left:clamp(24px,2.6vw,40px)}
  .planSplit__left .plan__price .amt{font-size:clamp(3.6rem,5vw,4.6rem)}
}
@media(max-width:1023px){.plans--one{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ---- nail studio mockup ---- */
.mini--salon .top{background:#F3C6D8;color:#2a1620}
.salonStrip{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;padding:.9em 1.2em 0}
.salonStrip img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.5em;background:#e7e7e7}
.mini--salon .rows{padding-top:.8em}


/* ---- creator program band + modal ---- */
.referralbar .creatorOpen{margin-left:auto;flex:none;white-space:nowrap}
@media(max-width:820px){
  .referralbar{flex-wrap:wrap}
  .referralbar>div{flex:1 1 200px;min-width:0}
  .referralbar .creatorOpen{margin-left:0;flex:1 0 100%;width:100%}
}
/* ---------- full showreel lightbox ---------- */
.reelModal[hidden]{display:none}
.reelModal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:clamp(12px,3vw,32px)}
.reelModal__veil{position:absolute;inset:0;background:rgba(6,10,8,.86);backdrop-filter:blur(4px)}
.reelModal__box{position:relative;width:min(1180px,100%);display:flex;flex-direction:column;gap:12px}
.reelModal__head{display:flex;align-items:center;gap:16px;justify-content:space-between}
.reelModal__title{margin:0;color:#fff;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1rem,2.2vw,1.3rem)}
.reelModal__x{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s,border-color .2s}
.reelModal__x:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.reelModal__x:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
/* The reel is 16:9; the frame is capped by height too so the controls never
   fall below the fold on a short laptop screen. No cropping either way. */
.reelModal__frame{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 160px);
  margin-inline:auto;background:#000;border-radius:var(--r-lg,16px);overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.reelModal__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
@media (max-width:640px){
  .reelModal{padding:10px}
  .reelModal__title{font-size:.95rem}
  .reelModal__frame{max-height:calc(100vh - 130px)}
}
.creatorModal[hidden]{display:none}
.creatorModal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.creatorModal__veil{position:absolute;inset:0;background:rgba(12,18,14,.55);backdrop-filter:blur(3px)}
.creatorModal__box{position:relative;width:min(520px,100%);max-height:86vh;overflow:auto;background:var(--white,#fff);
  border-radius:var(--r-lg,20px);padding:clamp(24px,4vw,34px);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.creatorModal__x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--muted)}
.creatorModal__tag{display:inline-block;font:800 .68rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:#123b24;background:var(--mint);border-radius:999px;padding:6px 10px}
.creatorModal__box h3{font-family:var(--font-display);font-size:clamp(1.35rem,3.4vw,1.75rem);letter-spacing:-.03em;line-height:1.12;margin:14px 0 10px}
.creatorModal__box p{margin:0 0 10px;color:var(--muted);line-height:1.55;font-size:.96rem}
.creatorModal__list{list-style:none;padding:0;margin:14px 0 20px;display:grid;gap:8px}
.creatorModal__list li{position:relative;padding-left:22px;font-size:.92rem;line-height:1.45}
.creatorModal__list li::before{content:"✦";position:absolute;left:0;top:0;color:#2f9f60}

/* =========================================================================
   EXAMPLES — Personal / Business grouping (2026-09)
   ========================================================================= */
.exGroups{display:inline-flex;background:rgba(33,33,33,.07);border-radius:99px;padding:4px;gap:2px;margin-top:clamp(22px,3vw,30px)}
.exGroups__btn{border:0;background:transparent;cursor:pointer;padding:11px 22px;border-radius:99px;
  font-family:var(--font-display);font-weight:600;font-size:.96rem;letter-spacing:-.01em;color:var(--muted);
  transition:color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.exGroups__btn:hover{color:var(--ink)}
.exGroups__btn.is-active{background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}
.exGroups__btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.examples .ex__tabs{padding-top:14px}
@media(max-width:640px){.exGroups{width:100%}.exGroups__btn{flex:1;padding:11px 8px}}

/* "Live site" block — every example panel uses this */
.exClient{border:1px solid rgba(16,35,24,.14);border-left:3px solid var(--mint);border-radius:14px;
  padding:14px 16px;background:rgba(116,245,161,.08)}
.exClient__tag{display:inline-flex;align-items:center;gap:.5em;font:800 .66rem/1 var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.exClient__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 3px rgba(116,245,161,.28)}
.exClient__person b{font-family:var(--font-display);font-size:1.25rem;letter-spacing:-.025em}
.exClient__person span{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}
.exClient p{margin:10px 0 0;font-size:.95rem;line-height:1.55;max-width:34ch}
html[lang="km"] .exClient__tag{letter-spacing:.02em;font-family:var(--font-body)}

/* --- business concept minis (all extend .mini--trainer) --- */
.mini--barber .mini__page{background:#EFEFEC}
.mini--barber .top{background:#171717;color:#F3F3F3}
.mini--barber .top small{opacity:.55}
.mini--barber .cta{background:var(--mint);color:#111}

.mini--pilates .mini__page{background:#FBFAF7}
.mini--pilates .top{background:#E4EDE6;color:#22302A}
.mini--pilates .top small{opacity:.62}
.mini--pilates .cta{background:#22302A;color:#F5F7F5}

.mini--boxing .mini__page{background:#131313}
.mini--boxing .top{background:var(--mint);color:#111}
.mini--boxing .rw{background:#1f1f1f;color:#F3F3F3}
.mini--boxing .rw span{color:#9d9d9d}
.mini--boxing .cta{background:#F3F3F3;color:#111}

/* --- DJ / artist mini --- */
.mini--dj .mini__page{background:#0D0D10;color:#F3F3F3}
.mini--dj .mini-nav{font-size:.7em;letter-spacing:.2em;text-transform:uppercase}
.mini--dj .mini-nav b{letter-spacing:.24em;font-size:1em;font-weight:700}
.mini--dj .mini-nav ul{opacity:.45}
.mini--dj .djHero{padding:.5em 1.3em .9em}
.mini--dj .djHero h3{font-family:var(--font-display);font-size:2.5em;line-height:.9;letter-spacing:-.045em;color:var(--mint)}
.mini--dj .djRows{padding:0 1.2em;display:grid;gap:.5em}
.mini--dj .djRow{display:flex;justify-content:space-between;align-items:center;font-size:.76em;
  background:rgba(243,243,243,.06);border:1px solid rgba(243,243,243,.09);border-radius:.6em;padding:.65em .8em}
.mini--dj .djRow b{font-family:var(--font-display);letter-spacing:-.02em}
.mini--dj .djRow>span>span{opacity:.5;font-size:.86em}
.mini--dj .djRow i{font-style:normal;color:var(--mint);font-size:1.05em}
.mini--dj .djDates{padding:.9em 1.3em 0;font-size:.7em;opacity:.45;letter-spacing:.05em}
.mini--dj .cta{margin:auto 1.2em 1.2em;background:var(--mint);color:#111;text-align:center;
  border-radius:99em;padding:.85em;font-size:.78em;font-weight:700;font-family:var(--font-display)}

/* hero swap layer — covers the video without unloading it */
.heroSwap{position:absolute;inset:0;z-index:1}
.heroSwap:empty{display:none}
.heroSwap>.mini{position:absolute;inset:0}

/* the service-list minis run tall in the wide examples frame — ease the scale
   so the last row never collides with the pinned CTA */
@supports (container-type:inline-size){
  .mini--trainer{font-size:2.6cqw}
  .mini--dj{font-size:2.75cqw}
}

/* Panharoth placeholder art reads as photography, not mint geometry.
   Delete this rule once real screenshots replace assets/img/art-*.svg here. */
.mini[data-mini="panharoth"] .mini-img{filter:grayscale(1) contrast(.92) brightness(.8)}

/* Hero headline: the new sentence is longer than the old one, so it needs a
   smaller display size to stay on its two intended lines. */
.hero h1{font-size:clamp(2.25rem,6vw,4.2rem)}
html[lang="km"] .hero h1{font-size:clamp(1.75rem,4.6vw,3.3rem);line-height:1.3}

/* ---- mobile hero rhythm: less air, product proof sooner (item 7) ---- */
@media(max-width:760px){
  .hero{padding-top:clamp(92px,22vw,124px);padding-bottom:clamp(24px,6vw,40px)}
  .hero h1{margin:.22em 0 .3em}
  .hero .lead{margin-bottom:20px}
  .hero__meta{margin-top:20px}
  .hero__stage{margin-top:14px}
  .heroDeal{gap:6px}
}
@media(max-width:430px){
  .hero h1{font-size:clamp(2.1rem,9.4vw,2.6rem)}
  html[lang="km"] .hero h1{font-size:clamp(1.55rem,6.6vw,1.95rem)}
}
@media(prefers-reduced-motion:reduce){
  .hero__stage{transform:translateY(-24px)!important}
  .hero__browser{transform:rotate(-1.1deg)!important;transition:none!important}
}

/* =========================================================================
   COST COMPARISON
   Rows, not a spreadsheet: feature / typical separate cost / what Tonle does.
   Below 760px each row becomes a small stacked card with its own labels.
   ========================================================================= */
.cmp{background:var(--off)}
.cmp__top{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(28px,4vw,46px)}
.cmp__table{background:var(--white,#fff);border:1px solid var(--line,rgba(33,33,33,.1));border-radius:var(--r-xl,26px);
  overflow:hidden;box-shadow:0 30px 60px -46px rgba(17,17,17,.4)}
.cmp__head,.cmp__row{display:grid;grid-template-columns:1.6fr .9fr 1fr;gap:clamp(12px,2vw,28px);
  align-items:center;padding:clamp(14px,1.7vw,19px) clamp(16px,2.4vw,30px)}
.cmp__head{font:600 .72rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:rgba(33,33,33,.035);border-bottom:1px solid var(--line,rgba(33,33,33,.1))}
.cmp__headTonle{color:var(--mint-text);font-weight:700}
.cmp__row+.cmp__row{border-top:1px solid rgba(33,33,33,.07)}
.cmp__feat{font-weight:500;line-height:1.35}
.cmp__cost{color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.35}
.cmp__cost small{font-size:.82em;opacity:.8}
.cmp__label{display:none}
.cmp__tonle{display:flex;align-items:center;gap:9px;font-weight:600;line-height:1.3}
.cmp__check{flex:none;width:21px;height:21px;border-radius:50%;background:var(--mint);color:var(--black);
  display:grid;place-items:center;font-size:.72rem;font-weight:800}

.cmp__totals{margin-top:clamp(22px,3vw,34px);display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(10px,1.6vw,18px)}
.cmp__total{flex:1 1 190px;background:var(--white,#fff);border:1px solid var(--line,rgba(33,33,33,.1));
  border-radius:var(--r-lg,18px);padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:4px}
.cmp__totalLabel{font:600 .72rem/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cmp__totalNum{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.03em;line-height:1.05}
.cmp__total small{color:var(--muted);font-size:.84rem}
.cmp__total--tonle{background:var(--charcoal);color:var(--off);border-color:var(--charcoal)}
.cmp__total--tonle .cmp__totalLabel{color:var(--mint)}
.cmp__total--tonle small{color:var(--muted-dark)}
.cmp__plus,.cmp__vs{flex:none;align-self:center;font-family:var(--font-display);font-size:1.5rem;color:var(--muted)}

@media (max-width:900px){
  .cmp__top{grid-template-columns:1fr;align-items:start;gap:16px}
}
@media (max-width:760px){
  .cmp__head{display:none}
  .cmp__row{grid-template-columns:1fr;gap:8px;padding:16px 18px}
  .cmp__feat{font-weight:600;font-size:1.02rem}
  .cmp__label{display:inline;font:600 .68rem/1 var(--font-mono);letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);margin-right:.6em}
  .cmp__plus,.cmp__vs{display:none}
  .cmp__total{flex:1 1 100%}
}

/* ---------- pricing: trust row + build-first block ---------- */
.planTrust{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.planTrust li{position:relative;display:inline-flex;align-items:center;min-height:24px;
  padding:6px 13px;border-radius:999px;background:rgba(33,33,33,.05);
  font-size:.84rem;font-weight:600;line-height:1.2}
.planTrust li.planTrust__guarantee{background:var(--mint);color:var(--black);padding:0}
.planTrust li.planTrust__guarantee .tipwrap{width:auto;padding:6px 13px;display:inline-flex;align-items:center;min-height:24px}
.planTrust__guarantee .info-icon{opacity:.7}
.setupInline--build{margin-top:18px}
.plan__list--tips li{padding-left:0}

/* A tooltip near the foot of the viewport opens upward instead of down.
   .is-up is set by JS from a measurement; .tipwrap--up forces it. */
.tipwrap--up .tipwrap__pop,.tipwrap.is-up .tipwrap__pop{top:auto;bottom:calc(100% + 10px)}
/* Keep the widest pops inside the card on narrow screens. */


/* ---------- Facebook links + direct contact row ---------- */
.fbLink{display:inline-flex;align-items:center;gap:8px;min-height:24px}
.fbIcon{flex:none}
.fbLink--menu{margin-top:14px;justify-content:center;min-height:44px;padding:10px 18px;
  border:1.5px solid rgba(255,255,255,.22);border-radius:999px;font-weight:600}
.contactRow{margin-top:clamp(26px,3.4vw,40px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:10px 22px}
.contactRow__label{font:600 .72rem/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.contactRow__links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px}
.contactRow__links a{display:inline-flex;align-items:center;gap:8px;min-height:32px;
  font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(33,33,33,.28);
  text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.contactRow__links a:hover{color:var(--mint-text);text-decoration-color:var(--mint-text)}
.btn--facebook{display:inline-flex;align-items:center;justify-content:center;gap:9px}

/* Between the tablet breakpoint and 1280 the hero copy column is narrow enough
   that the display size pushes "Make it easy to" onto a third line. Placed at
   the end of the file so it wins over the base .hero h1 clamp. */
@media (min-width:1001px) and (max-width:1279px){
  .hero h1{font-size:clamp(2.25rem,4.6vw,4.2rem)}
  html[lang="km"] .hero h1{font-size:clamp(1.75rem,3.6vw,3.3rem)}
}

/* Feature rows carry the same mint check as the rest of the plan list; the
   tooltip wrapper sits beside it rather than replacing it. */
.plan__list--tips li{padding-left:0}
.plan__list--tips li::before{display:block}
.plan__list--tips .tipwrap{width:auto;flex:1 1 auto}

/* The ⓘ must ride with the last word, not float to the row's far right when
   the label wraps — so the trigger flows as inline text. */
.tipwrap__trigger{display:inline;align-items:initial;gap:0}
.tipwrap__trigger .info-icon{margin-left:.45em;vertical-align:-.18em}

/* Khmer in the mono/letter-spaced UI labels: Space Mono has no Khmer glyphs and
   the tracking shatters the script, so these labels switch to the body face. */
html[lang="km"] .planSplit__label,
html[lang="km"] .cmp__head,
html[lang="km"] .cmp__totalLabel,
html[lang="km"] .contactRow__label,
html[lang="km"] .planTrust li,
html[lang="km"] .setupInline .pulse{
  font-family:var(--font-body);letter-spacing:normal;text-transform:none}
html[lang="km"] .cmp__head,html[lang="km"] .cmp__totalLabel{font-size:.8rem}

/* On phones the sticker sat on the browser bar and covered the .tonle.co in the
   fake URL — the one bit of the frame that has to stay readable. */
@media (max-width:640px){
  .hero__sticker{width:82px;right:2px;top:-30px}
}

/* Feature tooltips anchor to the whole row rather than the trigger, so a wide
   pop can never push the page sideways on a narrow screen. (They stay in the
   layout while closed — visibility:hidden, not display:none — so their width
   is real width.) */
.plan__list--tips .tipwrap{position:static;min-height:24px;display:flex;align-items:center}
.plan__list--tips .tipwrap__pop{left:0;right:0;width:auto;max-width:340px}
/* Same for the guarantee chip, which sits in a flex row of pills. */
.planTrust{position:relative}
.planTrust__guarantee .tipwrap{position:static}
.planTrust__guarantee .tipwrap__pop{left:0;right:0;width:auto;max-width:360px}

/* ---------- pricing header: lead sits beside the title on desktop ---------- */
.price__top--single{display:grid;grid-template-columns:1.25fr .95fr;
  gap:clamp(20px,4vw,60px);align-items:end;flex-wrap:nowrap}
.price__top--single .lead{margin:0}
@media (max-width:900px){
  .price__top--single{grid-template-columns:1fr;align-items:start;gap:16px}
}
/* The comparison leads straight into the price, so the two sections read as one
   argument rather than two separate blocks. */
.sec.cmp{padding-bottom:clamp(18px,2vw,26px)}
.sec.pricing{padding-top:clamp(18px,2vw,26px)}
.sec.pricing .price__top--single{margin-bottom:clamp(6px,1vw,14px)}


/* v11 — Creator / Starter / Managed pricing */
.tonlePlans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:38px;align-items:stretch;max-width:900px}
.tonlePlan{border:1px solid rgba(33,33,33,.14);border-radius:24px;padding:25px;background:#fff;display:flex;flex-direction:column;min-width:0;box-shadow:0 12px 34px rgba(33,33,33,.04)}
.tonlePlan--creator{background:#f5f0ff;border-color:rgba(108,82,180,.18)}
.tonlePlan--managed{background:#212121;color:#fff;border-color:#212121;transform:translateY(-10px);box-shadow:0 24px 54px rgba(33,33,33,.18)}
.tonlePlan__topline{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:28px}
.tonlePlan__kicker{font-family:var(--font-mono);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.tonlePlan__badge{padding:6px 9px;border-radius:999px;background:rgba(33,33,33,.08);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.tonlePlan__badge--mint{background:#baffcf;color:#16231a}
.tonlePlan h3{font-size:clamp(25px,2.6vw,38px);line-height:1;letter-spacing:-.045em;margin:30px 0 10px}
.tonlePlan__sponsor{font-size:19px;font-weight:850;line-height:1.15;margin:0 0 13px;color:#6a4bb1}
.tonlePlan__desc{font-size:13px;line-height:1.55;color:rgba(33,33,33,.68);margin-bottom:22px}
.tonlePlan__price{display:flex;align-items:baseline;gap:7px;margin:26px 0 17px}.tonlePlan__price b{font-size:52px;letter-spacing:-.065em;line-height:.9}.tonlePlan__price span{font-size:12px;opacity:.58}
.tonlePlan__preview{padding:15px;border-radius:16px;background:#ecfff2;border:1px solid rgba(45,160,85,.16);display:flex;flex-direction:column;gap:3px;margin-bottom:20px}.tonlePlan__preview strong{font-size:14px}.tonlePlan__preview span{font-size:12px;font-weight:800;color:#1f7d43}.tonlePlan__preview small{font-size:10px;line-height:1.45;color:rgba(33,33,33,.6);margin-top:4px}.tonlePlan__preview--dark{background:#303030;border-color:rgba(186,255,207,.24)}.tonlePlan__preview--dark span{color:#baffcf}.tonlePlan__preview--dark small{color:rgba(255,255,255,.6)}
.tonlePlan__features{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px}.tonlePlan__features li{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.35}.tonlePlan__features li>span:first-child{font-weight:950;flex:0 0 auto}.tonlePlan__features .is-in>span:first-child{color:#137a3a}.tonlePlan--managed .tonlePlan__features .is-in>span:first-child{color:#baffcf}.tonlePlan__features .is-out{color:rgba(33,33,33,.34)}.tonlePlan__features .is-out>span:first-child{color:#9b3535}.tonlePlan .btn{margin-top:auto}.tonlePlan--managed .tipwrap__trigger{color:#fff}.tonlePlan--managed .info-icon{border-color:rgba(255,255,255,.32);color:#fff}.tonlePlan--managed .tipwrap__pop{color:#212121}
@media(max-width:760px){.tonlePlans{grid-template-columns:1fr}.tonlePlan--managed{transform:none}.tonlePlan__price b{font-size:46px}}


/* ---------------- v13: green "View full site" link ---------------- */
.btn--linkMint{
  display:inline-flex;align-items:center;gap:.4em;
  background:none;border:0;padding:0;margin-top:16px;
  color:var(--mint-text);font-weight:600;font-size:1rem;line-height:1.3;
  text-decoration:none;cursor:pointer;
}
.btn--linkMint:hover{text-decoration:underline;text-underline-offset:3px}
.btn--linkMint .arw{transition:transform .18s ease}
.btn--linkMint:hover .arw{transform:translateX(3px)}
.sec--dark .btn--linkMint,.sec--black .btn--linkMint{color:var(--mint)}

/* ---------------- v13: Creator Program strip ---------------- */
.creatorStrip{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding:18px 22px;
  border:1px solid rgba(16,35,24,.14);border-radius:14px;background:transparent;
}
.creatorStrip__copy{flex:1 1 22rem;min-width:0}
.creatorStrip__tag{
  display:inline-block;font:800 .66rem/1 var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mint-text);margin-bottom:7px;
}
.creatorStrip__copy p{margin:0;font-size:.92rem;line-height:1.55;color:var(--muted);max-width:56ch}
.creatorStrip .btn{flex:none}
html[lang="km"] .creatorStrip__tag{letter-spacing:.02em;font-family:var(--font-body)}
@media (max-width:560px){
  .creatorStrip{padding:16px;gap:14px}
  .creatorStrip .btn{width:100%}
}

/* ---------------- v13: small lead ---------------- */
.lead--sm{font-size:.94rem;line-height:1.6;color:var(--muted)}

/* ---------------- v13: member profile pages ---------------- */
.prof{padding-block:clamp(92px,11vw,132px) clamp(28px,5vw,56px)}
.prof__browser .browser__screen{aspect-ratio:1418/746;background:#0a0a0b;position:relative}
.prof__browser .browser__screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.prof__crumb{font-size:.86rem;color:var(--muted);margin-bottom:22px;display:flex;gap:8px;align-items:center}
.prof__crumb a{color:var(--mint-text);text-decoration:none}
.prof__crumb a:hover{text-decoration:underline}
.prof__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4vw,56px);align-items:start}
.prof__role{font-size:.95rem;color:var(--muted);margin-top:6px}
.prof__about{max-width:40ch}
.prof__block{margin-top:30px}
.prof__h{font-family:var(--font-display);font-size:1.12rem;letter-spacing:-.02em;margin:0 0 12px}
.prof__tags{margin-top:0}
.prof__works{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.prof__work{margin:0;border-radius:12px;overflow:hidden;background:rgba(16,35,24,.05)}
.prof__work img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.prof__contact{display:flex;flex-wrap:wrap;gap:10px}
.prof__nocontact{font-size:.92rem;color:var(--muted);margin:0}
.prof__block--about{margin-top:28px}.prof__contact--channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.prof__contactItem{border:1px solid rgba(16,35,24,.12);border-radius:12px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;font-size:.9rem}.prof__contactItem b{font-size:.9rem}.prof__contactItem em{font-style:normal;color:var(--muted);font-size:.78rem}.prof__contactNote{margin:10px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}@media(max-width:520px){.prof__contact--channels{grid-template-columns:1fr}}

.prof__stage{position:sticky;top:96px}
.prof__browser{width:100%}
.prof__join{margin-top:clamp(40px,6vw,72px)}
@media (max-width:900px){
  .prof__grid{grid-template-columns:1fr}
  .prof__stage{position:static;order:-1}
}


/* =========================================================================
   v14.3 — mobile-first hero/menu/CTA polish
   ========================================================================= */
/* Keep the live-site action calm and fully visible on hover. */
.btn--linkMint{
  min-height:44px;
  padding:8px 2px;
  margin-top:12px;
  line-height:1.35;
  overflow:visible;
}
.btn--linkMint:hover,
.btn--linkMint:focus-visible{
  transform:none;
  box-shadow:none;
  text-decoration-thickness:1.5px;
  text-underline-offset:5px;
}

/* Facebook should read as a recognizable social action in the mobile menu. */
.fbLink--menu .fbIcon{color:#1877F2}
.fbLink--menu{font-family:var(--font-body);font-size:.95rem;letter-spacing:0}

/* The offer headline is deliberately short and should never wrap. */
.heroDeal__main>b{white-space:nowrap}

@media (max-width:900px){
  .stickycta{
    left:12px;right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    will-change:transform;
  }
  body.has-sticky{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}

@media (max-width:760px){
  /* Mobile hierarchy: message -> risk reversal -> proof. */
  .hero{padding-top:92px;padding-bottom:30px}
  .hero__grid{gap:18px}
  .hero__copy{order:1}
  .hero__meta--offer{order:2!important;margin-top:0!important}
  .hero__stage{order:3;margin-top:2px;transform:none!important;padding-bottom:16px;align-items:stretch}
  .hero__browser{width:100%;max-width:none;transform:none!important;border-radius:14px}
  .hero__browser .browser__screen{aspect-ratio:16/9}
  .hero__sticker{display:none}
  .reelBtn{width:100%;justify-content:center;margin:12px 0 0;min-height:48px}
  .hero__meta{margin-top:0}
  .heroDeal{width:100%;display:grid;gap:7px;padding-top:0}
  .heroDeal__scribble{padding:0;transform:none;font-size:.88rem;line-height:1.25;color:var(--muted);font-family:var(--font-body);font-weight:700}
  .heroDeal__arrow{display:none}
  .heroDeal__main{width:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;padding:11px 13px;border-radius:14px;animation:none}
  .heroDeal__main::before{display:none}
  .heroDeal__main>b{font-size:.93rem;line-height:1.2}
  .heroDeal__main>span{font-size:.74rem;line-height:1.3}
  .claim{max-width:none}
  .hero .lead{font-size:1rem;line-height:1.48;margin-bottom:18px}
  .hero .eyebrow{font-size:.72rem}
}

@media (max-width:600px){
  .hero .d1{font-size:clamp(2.45rem,12vw,3.15rem);line-height:.94;letter-spacing:-.055em}
  .hero h1{margin:.24em 0 .34em}
  .hero h1 .ln{white-space:normal}
  .claim{border-radius:18px;padding:5px;gap:5px}
  .claim__field{min-height:48px;padding-inline:12px;font-size:.98rem}
  .claim .btn{min-height:50px;border-radius:14px}
  .browser__bar{padding:8px 10px}
  .browser__dots i{width:7px;height:7px}
  .browser__url{font-size:.66rem;padding-inline:8px}
  .mobmenu{padding:92px 20px calc(20px + env(safe-area-inset-bottom,0px));overflow-y:auto}
  .mobmenu__eyebrow{margin-bottom:10px}
  .mobmenu>a:not(.btn){padding:13px 0}
  .mobmenu>a:not(.btn)>span{font-size:clamp(1.75rem,8.2vw,2.3rem);line-height:1}
  .mobmenu>a:not(.btn)>small{font-size:.76rem;padding-top:5px;max-width:28ch}
  .mobmenu__foot{padding-top:16px;gap:8px}
  .mobmenu__foot .btn{min-height:52px}
  .mobmenu__foot>span{font-size:.73rem}
  .fbLink--menu{margin-top:4px;min-height:42px;padding:8px 14px}
}

@media (max-width:390px){
  .hero .d1{font-size:clamp(2.25rem,11.5vw,2.75rem)}
  .heroDeal__main{grid-template-columns:1fr;gap:2px}
  .heroDeal__main>b{font-size:.9rem}
  .heroDeal__main>span{font-size:.72rem}
}

html[lang="km"] .heroDeal__main>b{white-space:nowrap}
@media(max-width:430px){
  html[lang="km"] .heroDeal__main>b{font-size:.82rem}
  html[lang="km"] .hero .d1{font-size:clamp(1.85rem,8.6vw,2.25rem);line-height:1.28;letter-spacing:-.025em}
}

/* v14.5 — public creator contact links */
.prof__contactItem--link{color:inherit;text-decoration:none;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.prof__contactItem--link span{color:var(--mint-text);font-weight:800;font-size:.8rem;overflow-wrap:anywhere;text-align:right}
.prof__contactItem--link:hover,.prof__contactItem--link:focus-visible{border-color:rgba(20,120,72,.42);background:rgba(164,255,199,.10);transform:translateY(-1px)}
.prof__contactItem--link:focus-visible{outline:2px solid var(--mint-text);outline-offset:2px}
@media(max-width:520px){.prof__contactItem--link{min-height:52px}.prof__contactItem--link span{max-width:62%}}

.tonlePlan__guarantee{margin:-4px 0 20px;padding:15px 16px;border-radius:16px;background:#baffcf;color:#16231a;display:grid;gap:5px;border:1px solid rgba(186,255,207,.55)}
.tonlePlan__guarantee b{font-size:13px;line-height:1.2}.tonlePlan__guarantee span{font-size:11px;line-height:1.45}.tonlePlan__guarantee a{font-size:10px;font-weight:850;color:#16231a;text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   v17 — 3-plan pricing + custom enquiry modal
   ========================================================================== */
.tonlePlans{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px}
.tonlePlan--custom{background:#f3f3f3;border-color:rgba(33,33,33,.18)}
.tonlePlan--custom .tonlePlan__badge{background:#e2e2e2;color:#212121}
.tonlePlan__price--talk{margin:30px 0 20px;min-height:47px}
.tonlePlan__price--talk b{font-size:clamp(34px,4vw,48px);letter-spacing:-.055em}
.customEnquiry[hidden]{display:none}
.customEnquiry{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:20px}
.customEnquiry__veil{position:absolute;inset:0;background:rgba(12,18,14,.58);backdrop-filter:blur(4px)}
.customEnquiry__box{position:relative;width:min(600px,100%);max-height:88vh;overflow:auto;background:#fff;border:1px solid rgba(33,33,33,.14);border-radius:24px;padding:26px;box-shadow:0 28px 70px rgba(0,0,0,.25)}
.customEnquiry__x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--muted);min-width:44px;min-height:44px}
.customEnquiry__box h2{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.7rem);letter-spacing:-.045em;line-height:1.02;margin:16px 36px 9px 0}
.customEnquiry__box>p{color:var(--muted);line-height:1.55}
.customEnquiry__channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0 12px}
.customEnquiry__channels .btn{min-height:46px;padding-inline:10px}
.customEnquiry__or{text-align:center;color:var(--muted);font-size:.78rem;font-weight:750;margin:13px 0}
.customEnquiry__field{display:grid;gap:6px;margin-top:12px;font-size:.78rem;font-weight:850}
.customEnquiry__field .input{font-weight:500}
.customEnquiry__contactGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.customEnquiry__message{resize:vertical;min-height:110px;padding-top:13px}
.customEnquiry__hint{font-size:.72rem!important;margin:7px 0 0!important;color:var(--muted)!important}
.customEnquiry__error{min-height:20px;margin:10px 0 0;color:#9b2828!important;font-size:.78rem!important;font-weight:750}
.customEnquiry__success{margin:15px 0 0!important;padding:12px 14px;background:#e8fdf0;color:#174b2c!important;border-radius:12px;font-weight:800}
body.has-custom-enquiry{overflow:hidden}
@media(max-width:900px){.tonlePlans{grid-template-columns:1fr 1fr}.tonlePlan--custom{grid-column:1/-1}}
@media(max-width:760px){.tonlePlans{grid-template-columns:1fr}.tonlePlan--custom{grid-column:auto}.customEnquiry__channels,.customEnquiry__contactGrid{grid-template-columns:1fr}.customEnquiry__box{padding:22px 18px}}