/* Clickaroo product pages on aigovmap.com: landing, support and privacy (EN / 中文 / FR).
   Same page skeleton as quitapp.css (site header with the panda mark, wrap width, footer), Clickaroo's own palette:
   cream ground, coral accent, ink text, green only for success marks. Display and body: Nunito; Chinese: Noto Sans SC. */
/* Self-hosted OFL fonts (licences: /assets/clickaroo-fonts-OFL.txt). Nunito is a variable subset (Latin + French);
   Noto Sans SC is two static subsets holding only the characters on the Clickaroo pages. */
@font-face{font-family:'Nunito';src:url('/assets/clickaroo-nunito.woff') format('woff');font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('/assets/clickaroo-notosanssc-500.woff') format('woff');font-weight:400 650;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('/assets/clickaroo-notosanssc-800.woff') format('woff');font-weight:651 1000;font-style:normal;font-display:swap}
:root{
  --cream:#FFF8F2;--sand:#FBEFE6;--tint:#FDE7DF;--ink:#2A1F1B;--muted:#76665E;--line:#EADBCF;
  --coral:#EC4C34;--coral-ink:#C23A22;--coral-deep:#B8321B;--green:#2F7D55;--gtint:#E2F2E8;--night:#2A1F1B;
  --font:'Nunito','Noto Sans SC',ui-rounded,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','PingFang SC','Microsoft YaHei',Arial,sans-serif;
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.6;font-weight:500;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
main{overflow-x:hidden;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,ul,ol,dl{margin:0}
h1,h2,h3{font-weight:900;text-wrap:balance}
h1,h2{letter-spacing:-.025em;line-height:1.06}
.nb{white-space:nowrap}
:lang(zh) h1,:lang(zh) h2{letter-spacing:0;line-height:1.22}
:lang(zh) .hero h1{font-size:clamp(40px,5.2vw,64px);line-height:1.25}
h2{font-size:clamp(34px,4.2vw,54px)}
p+p{margin-top:16px}
a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid var(--coral-ink);outline-offset:5px;border-radius:6px}
::selection{background:#FFD7C9;color:var(--ink)}
.wrap{width:min(1160px,calc(100% - 96px));margin-inline:auto}
.section-space{padding-block:104px}
.eyebrow{text-transform:uppercase;font-size:12px;line-height:1.5;letter-spacing:.14em;font-weight:800;color:var(--coral-ink);margin-bottom:18px}
:lang(zh) .eyebrow{letter-spacing:.08em}
.lead{font-size:20px;color:var(--muted);max-width:560px;margin-top:22px}
.skip-link{position:absolute;left:20px;top:-80px;padding:10px 20px;background:var(--ink);color:var(--cream);z-index:20;border-radius:10px}
.skip-link:focus{top:10px}

/* header and footer: the site's skeleton */
.site-header{height:100px;display:flex;align-items:center;gap:44px;border-bottom:1px solid var(--line)}
.site-brand{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted);font-weight:600}
.site-brand img{width:40px;height:40px;object-fit:contain}
.site-header nav.page-nav{display:flex;gap:28px;margin-left:auto;font-size:14px;font-weight:700}
.site-header nav.page-nav a{padding:12px 0;transition:color .2s}
.site-header nav.page-nav a:hover{color:var(--coral-ink)}
.lang-switch{display:flex;gap:2px;border-left:1px solid var(--line);padding-left:22px;font-size:12px;letter-spacing:.06em;font-weight:800}
.lang-switch a{padding:8px 8px;border-radius:999px;color:var(--muted);min-width:34px;text-align:center}
.lang-switch a[aria-current="page"]{background:var(--ink);color:var(--cream)}
.lang-switch a:not([aria-current]):hover{color:var(--coral-ink)}
.site-footer{display:flex;align-items:center;flex-wrap:wrap;gap:24px;padding:26px 0 34px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);font-weight:600}
.site-footer>div{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap}
.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer small{font-size:11px}
.footer-brand{color:var(--ink)}

/* buttons and the store state: <html data-store="soon|live"> picks one of the two CTAs */
.button{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;font-weight:800;font-size:16px;transition:transform .15s,background .2s}
.button.primary{background:var(--coral);color:#fff;box-shadow:0 10px 22px -12px rgba(184,50,27,.7)}
.button.primary:hover{background:var(--coral-deep);transform:translateY(-1px)}
.button.soon{background:var(--ink);color:var(--cream);cursor:default}
.button.soon .dot{width:8px;height:8px;border-radius:50%;background:#7FD3A3;box-shadow:0 0 0 4px rgba(127,211,163,.25)}
html[data-store="soon"] .cta-live,html[data-store="live"] .cta-soon{display:none!important}
.text-link{font-weight:800;color:var(--ink);border-bottom:2px solid var(--line);padding-bottom:2px;transition:border-color .2s}
.text-link:hover{border-color:var(--coral)}

/* hero */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:6%;align-items:center;padding-block:72px 56px}
.product-line{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:800;color:var(--muted)}
.product-line img{width:46px;height:46px;border-radius:11px;box-shadow:0 6px 14px -8px rgba(60,30,15,.45)}
.hero h1{font-size:clamp(48px,6vw,80px);margin:26px 0 0}
.hero h1 span{color:var(--coral-ink)}
.hero .lead{margin-top:24px}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:34px}
.availability{font-size:13px;color:var(--muted);margin-top:18px;font-weight:600}
.hero-visual{position:relative;display:flex;justify-content:center;isolation:isolate}
.hero-visual::before{content:'';position:absolute;z-index:-1;width:min(520px,120%);aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#FDE3D8 0%,rgba(253,227,216,.55) 42%,rgba(253,227,216,0) 70%)}
.phone{width:290px;border-radius:46px;padding:10px;background:#1F1A18;box-shadow:0 30px 60px -30px rgba(60,30,15,.55)}
.phone img{border-radius:37px;width:100%;aspect-ratio:600/1237;object-fit:cover;background:var(--cream)}
.hero-chip{position:absolute;left:4%;bottom:15%;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 16px;box-shadow:0 18px 30px -20px rgba(60,30,15,.5);font-size:13px;font-weight:800;display:flex;flex-direction:column;gap:8px}


/* the try dots used in the hero chip and the session section */
.dots{display:flex;flex-wrap:wrap;gap:5px}
.dots i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;color:#fff;background:var(--green)}
.dots i.x{background:#F6D9D1;color:#B9452F}
.dots i.e{background:transparent;border:1.5px dashed #D9C8BC}

/* the Mochi stage: full-width loop */
.stage{padding-bottom:36px}
.stage-frame{position:relative;border-radius:28px;overflow:hidden;background:#FFF8F0;border:1px solid var(--line);aspect-ratio:1280/548}
.stage-frame video,.stage-frame img{width:100%;height:100%;object-fit:cover}
.stage-frame .play{position:absolute;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px 0 8px;border:0;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 12px 26px -16px rgba(60,30,15,.55);font:inherit;font-weight:800;font-size:15px;color:var(--ink);cursor:pointer}
.stage-frame .play .icon{width:38px;height:38px;border-radius:50%;background:var(--coral);display:grid;place-items:center}
.stage-frame .play .icon svg{width:14px;height:14px;margin-left:2px}
.stage-frame .play small{font-size:12px;font-weight:700;color:var(--muted)}
.stage-frame .play:hover .icon{background:var(--coral-deep)}
.stage-frame.playing .play{display:none}
.stage-caption{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:14px;font-weight:600}
.stage-toggle{border:0;background:none;font:inherit;font-weight:800;color:var(--ink);cursor:pointer;padding:6px 0;min-height:44px}

/* promise rail */
.promise-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding-block:26px;border-block:1px solid var(--line)}
.promise-rail p{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;margin:0}
.promise-rail span{width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--coral-ink);display:grid;place-items:center;font-size:13px;flex-shrink:0}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.pillar .tag{font-size:13px;font-weight:900;color:var(--coral-ink);letter-spacing:.06em;text-transform:uppercase}
.pillar h3{font-size:26px;line-height:1.15}
:lang(zh) .pillar h3{line-height:1.35}
.pillar p{color:var(--muted);font-size:16px}

/* session */
.session{display:grid;grid-template-columns:1fr .8fr;gap:8%;align-items:center}
.steps{list-style:none;padding:0;margin-top:40px;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.steps b{width:36px;height:36px;border-radius:50%;background:var(--tint);color:var(--coral-ink);display:grid;place-items:center;font-size:15px}
.steps strong{display:block;font-size:21px;line-height:1.3;font-weight:900}
.steps p{color:var(--muted);font-size:16px;margin-top:6px}
.tally{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:inline-flex;flex-direction:column;gap:10px;max-width:100%}
.tally .top{display:flex;justify-content:space-between;gap:20px;font-size:14px;font-weight:800}
.tally .top span{color:var(--coral-ink)}
.tally small{font-size:12px;color:var(--muted);font-weight:600}
.session-visual{display:flex;justify-content:center}

/* skills */
.skills-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.skills-head .lead{margin-top:0;max-width:440px}
.skills-band{background:var(--sand)}
.skill-group-label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin:44px 0 14px}
.skill-group-label::after{content:'';flex:1;height:1px;background:var(--line)}
.skill-group-label+.skill-grid{margin-top:0}
.strip-hint{display:none}
.skill-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px}
.skill{box-shadow:0 14px 26px -22px rgba(60,30,15,.45);transition:transform .2s}
.skill:hover{transform:translateY(-2px)}
.skill picture,.skill img{display:block}
.skill{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.skill img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#FFF8F0}
.skill div{padding:12px 14px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.skill h3{font-size:15px;line-height:1.25;font-weight:800}
.badge{font-size:11px;font-weight:900;padding:3px 9px;border-radius:999px;white-space:nowrap}
.badge.free{background:var(--gtint);color:var(--green)}
.badge.pro{background:var(--coral);color:#fff}
.skill.more{background:var(--ink);color:var(--cream);border-color:var(--ink);padding:20px 18px;justify-content:space-between}
.skill.more strong{font-size:30px;font-weight:900;line-height:1}
.skill.more p{font-size:13px;color:#E8D9CF;margin-top:10px;line-height:1.5}
.groups{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.groups span{font-size:13px;font-weight:800;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:#fff}

/* privacy */
.privacy-band{background:var(--sand);padding-block:90px}
.privacy-inner{display:grid;grid-template-columns:1fr 1fr;gap:8%}
.privacy-copy{font-size:17px;color:var(--muted)}
.privacy-copy .large-copy{color:var(--ink);font-size:26px;line-height:1.4;font-weight:800;margin-bottom:22px}
.privacy-copy .text-link{display:inline-block;margin-top:24px}

/* pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.plan{border-radius:var(--radius);padding:34px 32px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:16px}
.plan.pro{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.plan h3{font-size:28px;line-height:1.15}
.plan .kicker{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.plan.pro .kicker{color:#FF9C85}
.plan ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;font-size:16px}
.plan li{display:grid;grid-template-columns:22px 1fr;gap:10px}
.plan li::before{content:'✓';font-weight:900;color:var(--green)}
.plan.pro li::before{color:#7FD3A3}
.plan .note{font-size:14px;color:var(--muted);margin-top:auto}
.plan.pro .note{color:#D9C7BC}

/* faq */
.faq-section{display:grid;grid-template-columns:.85fr 1.2fr;gap:7%}
.faq-aside{color:var(--muted);font-size:17px;margin-top:22px}
.faq-aside .text-link{display:inline-block;margin-top:18px}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:18px;line-height:1.4;padding:22px 0;font-weight:800}
summary::-webkit-details-marker{display:none}
summary>span{min-width:0}
summary::after{content:'+';color:var(--coral-ink);font-size:24px;line-height:1;flex-shrink:0}
details[open] summary::after{content:'−'}
details p{font-size:16px;color:var(--muted);padding:0 30px 24px 0;line-height:1.8}

/* closing */
.closing{border-top:1px solid var(--line);text-align:center;padding-block:80px 88px}
.closing-brand{display:flex;align-items:center;justify-content:center;gap:13px;font-weight:900;font-size:20px;margin-bottom:28px}
.closing-brand img{width:48px;height:48px;border-radius:12px}
.closing h2{font-size:clamp(46px,5.4vw,74px)}
.closing>p{font-size:18px;color:var(--muted);margin-top:22px}
.closing .actions{justify-content:center}
.closing .closing-footnote{font-size:13px;margin-top:22px}
.closing .care{font-size:13px;max-width:560px;margin:14px auto 0}

/* support and privacy documents */
.doc{max-width:760px;padding-block:64px 90px}
.doc h1{font-size:clamp(40px,5vw,60px);margin:22px 0 0}
.doc .lead{max-width:none}
.doc h2{font-size:26px;margin:48px 0 12px;letter-spacing:-.01em}
/* FR/ZH titles are H2 (one H1 per page) but look like the H1 */
.doc h2.doc-title{font-size:clamp(40px,5vw,60px);margin:22px 0 0;letter-spacing:-.025em}
:lang(zh) .doc h2.doc-title{letter-spacing:0}
.doc p,.doc li{font-size:17px;color:#4E423C}
.doc ul{padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.doc ul+p{margin-top:16px}
.doc strong{color:var(--ink)}
.contact-card{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.contact-card a{font-weight:900;color:var(--coral-ink);font-size:18px;word-break:break-all}
.doc .faq-list{margin-top:18px}
.doc details p{color:var(--muted)}
.doc-meta{font-size:14px;color:var(--muted);margin-top:14px;font-weight:600}

@media (max-width:1050px){
  .wrap{width:calc(100% - 64px)}
  .site-header{gap:24px}.site-brand span{display:none}.site-header nav.page-nav{margin-left:0;gap:22px}.lang-switch{margin-left:auto}
  .hero{gap:28px}.phone{width:250px}
  .promise-rail{grid-template-columns:repeat(3,1fr)}
  .skill-grid{grid-template-columns:repeat(3,1fr)}
  .skill-grid.pro .skill.more{grid-column:span 2}
  .pillars{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:17px}
  .wrap{width:calc(100% - 40px)}
  .section-space{padding-block:68px}
  .site-header{height:76px;gap:16px}.site-brand img{width:32px;height:32px}
  .site-header nav.page-nav{gap:16px;font-size:13px;margin-left:auto}
  .site-header nav.page-nav a:not(:first-child){display:none}
  .lang-switch{padding-left:12px;margin-left:0}.lang-switch a{min-width:30px;padding:7px 6px}
  .hero{grid-template-columns:1fr;padding-block:40px 36px;gap:40px}
  .hero h1{font-size:clamp(42px,12vw,58px)}
  :lang(zh) .hero h1{font-size:clamp(30px,9.4vw,44px)}
  .lead{font-size:18px}
  .actions{gap:18px;margin-top:28px}
  .phone{width:236px}
  .hero-visual::before{width:100%}
  .hero-chip{left:0;bottom:12%}
  .stage-frame{aspect-ratio:4/3;border-radius:22px}
  .stage-frame video{object-position:74% 50%}
  .stage-frame.playing video{object-fit:contain;object-position:50% 50%}
  .promise-rail{grid-template-columns:1fr 1fr;row-gap:14px}
  .promise-rail p{font-size:14px}
  .session{grid-template-columns:1fr;gap:44px}
  .steps strong{font-size:19px}
  .skill-grid,.skill-grid.pro{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:46%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:2px 20px 14px;scroll-padding-inline:20px;scrollbar-width:none}
  .skill-grid::-webkit-scrollbar{display:none}
  .skill{scroll-snap-align:start}
  .skill-grid.pro .skill.more{grid-column:auto}
  .skill div{flex-direction:column;align-items:flex-start;gap:6px}
  .strip-hint{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}
  .skill-group-label{margin-top:34px}
  .stage-frame .play{left:14px;bottom:14px;min-height:46px;font-size:14px}
  .privacy-band{padding-block:64px}.privacy-inner{grid-template-columns:1fr;gap:26px}
  .privacy-copy .large-copy{font-size:23px}
  .plans{grid-template-columns:1fr}.plan{padding:28px 24px}
  .faq-section{grid-template-columns:1fr;gap:30px}
  summary{font-size:17px;padding:20px 0}details p{padding-right:8px}
  .closing{padding-block:58px 64px}.closing h2{font-size:clamp(40px,11vw,52px)}
  .site-footer{gap:18px;font-size:12px}.site-footer>div{margin-left:0;gap:20px;flex-basis:100%}
  .doc{padding-block:40px 64px}.doc h2{font-size:23px}
}
@media (max-width:360px){.wrap{width:calc(100% - 32px)}.lang-switch a{min-width:26px;padding:6px 4px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.skill,.skill:hover{transition:none;transform:none}.button,.text-link,.site-header nav a{transition:none}.button.primary:hover{transform:none}}