/* mobile.css: phone/tablet layout only. Loaded after styles.css.
   Does NOT target any 3D/canvas selectors (#brain-bg, #brain3d, .hero-3d, .rv-viz*, etc.). */
.nav-mobile-only{display:none}
@media (max-width:860px){
  .nav-links.open .nav-mobile-only{display:block}
  .nav-links a{min-height:44px;display:flex;align-items:center}
  .nav-toggle{width:44px;height:44px}
  .nav-cta .btn-signin{min-height:44px}
  .cur-toggle button{min-height:40px;min-width:44px;justify-content:center}
  .btn,.btn-sm{min-height:44px}
  .site-footer a,footer li a{display:inline-flex;align-items:center;min-height:44px}
  .compare{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .clean-table{overflow-x:auto;max-width:100%}
  img,svg,video{max-width:100%}
  .container{padding-left:16px;padding-right:16px}
  h1,h2,h3,p,li{overflow-wrap:anywhere}
}
@media (max-width:560px){
  .nav-cta .btn-signin{display:none}
  .nav-cta{gap:6px}
  .logo-tag{display:none}
  .logo-mark{width:40px;height:40px}
  .nav .logo{font-size:1.25rem}
  .hero-overlay .hero-actions,.cta-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .cta-box{grid-template-columns:1fr;padding:22px}
  .promo .container,.soon-banner .container{flex-wrap:wrap}
}
@media (max-width:860px){
  .cur-toggle button{min-height:44px}
  .nav .logo,a.logo{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:400px){
  .nav .logo{font-size:1.05rem;gap:6px}
  .logo-mark{width:34px;height:34px}
  .cur-toggle button{padding:6px 6px;min-width:40px}
}
@media (max-width:560px){.pair{white-space:normal;flex-wrap:wrap;max-width:100%;height:auto}}

/* R19 hero on phones: keep everything inside the viewport */
@media (max-width:560px){
  .hero-kicker{font-size:1.12rem}
  .phase-a .mega.hero-h1{font-size:clamp(1.8rem,8vw,2.3rem);line-height:1.05}
  .hero-sub{font-size:clamp(1.3rem,6vw,1.65rem)}
  .hero-kicker .shimmer{white-space:normal}
}

/* c026-hero: stop sideways scroll on phones (owner, Oct 22) */
html,body{max-width:100%;overflow-x:clip}
@media (min-width:861px){.phase-a{top:28px;transform:translateY(16px)}.phase-a.on{transform:none}.hero-sub{font-size:clamp(1.5rem,2.4vw,2.1rem)}}
/* c026d: headline = same size as "Months of mess" (owner, Oct 22) */
.hero3d .phase-a .mega.hero-h1,.hero3d .phase-a .hero-sub{font-size:clamp(1.45rem,6.4vw,1.8rem);line-height:1.08;letter-spacing:-.035em}
@media (min-width:861px){.hero3d .phase-a .mega.hero-h1,.hero3d .phase-a .hero-sub{font-size:clamp(1.8rem,2.9vw,2.6rem)}}
.hero3d .phase-a .mega.hero-h1{margin:6px 0 14px}
/* c026h (owner, Oct 23): less empty space, no pinned hero scroll, content always visible, orange demo button, app cards, made-by line */
/* Visible at rest; hide-before-reveal only under html.js-reveal (styles.css). */
.reveal{opacity:1;transform:none}
html.js-reveal .reveal:not(.in){opacity:0;transform:translateY(22px)}
html.js-reveal .reveal.in{opacity:1;transform:none}
html.js-reveal.js-reveal-anim .reveal{transition:opacity .7s ease,transform .7s ease}
section{padding:64px 0}
.hero3d{height:auto}
.hero-sticky{position:relative;height:auto;min-height:0}
.hero-overlay{height:auto}
.hero3d .phase-a{position:relative;top:auto;bottom:auto;transform:none;opacity:1;padding:28px 0 40px}
.hero3d .phase-a.on{transform:none}
.hero3d .phase-b,.hero3d .phase-c,.hero3d .hero-hud{display:none}
.hero-demo{display:inline-flex;align-items:center;gap:8px;color:#fff;background:linear-gradient(135deg,#c2410c,#b13a0e 45%,#9a3412);border:0;box-shadow:0 8px 22px rgba(154,52,18,.28);pointer-events:auto;margin:0 0 28px}
.hero-demo:hover{filter:brightness(1.05);color:#fff}
@media (min-width:861px){
  .hero-demo{position:absolute;right:max(24px,9%);top:76px;margin:0}
}
.app-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:960px;margin:0 auto}
.app-card{display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 6px 24px rgba(15,23,42,.06)}
.app-card h3{margin:6px 0 0;font-size:1.2rem}
.app-card p{margin:0;color:var(--muted)}
.app-card .app-sub{font-weight:700;color:var(--ink);font-size:.9rem}
.app-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(8,145,178,.12),rgba(249,115,22,.14));color:#0e7490}
@media (max-width:760px){.app-cards{grid-template-columns:1fr}}
.made-by{display:flex;align-items:center;gap:14px;max-width:720px;margin:0 auto 28px;padding:14px 20px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(8,145,178,.06),rgba(249,115,22,.07));color:var(--ink);text-decoration:none;font-size:1rem;line-height:1.35}
.made-by:hover{border-color:#94a3b8}
.made-by img{flex:none}
.cur-toggle-page{margin-top:14px}
.made-by-co{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cmp-table th,.cmp-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.98rem}
.cmp-table thead th{background:#f8fafc;font-weight:800}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table .cmp-us{background:rgba(8,145,178,.07);font-weight:700;color:var(--ink)}
.founder-home{max-width:820px;text-align:center}
.explore{border-top:1px solid var(--line);background:#f8fafc;padding:22px 0}
.explore .container{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center}
.explore-t{font-weight:800;color:var(--ink);margin-right:6px}
.explore a{color:#0e7490;text-decoration:none;font-weight:600}
.explore a:hover{text-decoration:underline}
#problem,#compare,#founder-home,#faq-home{padding:56px 0}
.faq-group{max-width:860px;margin:28px auto 10px;font-size:1.05rem;color:#0e7490;letter-spacing:.02em}
/* c026p (owner Oct 23): animated pricing button, Canada/US block, professional founder card, solid cards over the animation */
.btn-price-glow{color:#fff;border:0;background:linear-gradient(90deg,#6d28d9,#7e22ce,#be185d,#6d28d9);background-size:300% 100%;animation:bk-glow 6s linear infinite;box-shadow:0 8px 22px rgba(124,58,237,.3);min-width:220px;justify-content:center}
.btn-price-glow:hover{color:#fff;filter:brightness(1.06)}
@keyframes bk-glow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@media (prefers-reduced-motion:reduce){.btn-price-glow{animation:none}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-ctas .btn{min-width:240px;justify-content:center}
.cu-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:980px;margin:0 auto}
.cu-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 6px 24px rgba(15,23,42,.06)}
.cu-card h3{margin:0 0 10px}
.cu-note{max-width:900px;margin:20px auto 0;color:var(--muted);font-size:.95rem;text-align:center}
@media (max-width:760px){.cu-grid{grid-template-columns:1fr}}
.founder-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:36px;max-width:1040px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:0 18px 40px rgba(15,23,42,.08);position:relative;z-index:1}
.founder-id{display:flex;gap:18px;align-items:flex-start}
.founder-mono{flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.5rem;color:#fff;background:linear-gradient(135deg,#0e7490,#7c3aed)}
.founder-id h2{margin:4px 0 6px}
.founder-role{color:var(--muted);margin:0}
.founder-body h3{margin:0 0 10px;font-size:1.05rem}
.founder-timeline{list-style:none;margin:0 0 16px;padding:0;border-left:2px solid #bae6fd}
.founder-timeline li{position:relative;padding:0 0 12px 18px}
.founder-timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:#0e7490}
.founder-timeline span{display:block;font-weight:800;color:#0e7490;font-size:.9rem}
.founder-fine{color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);padding-top:12px}
@media (max-width:860px){.founder-card{grid-template-columns:1fr;padding:24px}}
.trial-help{max-width:820px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 6px 24px rgba(15,23,42,.06)}
.why,.about-card{background:#fff}
.has-datafield .why,.has-datafield .about-card,section .why{position:relative;z-index:1}
/* c026q (owner Oct 23 11:10): calmer hero, medium text for headline, price and "Months of mess" */
.hero3d .phase-a .mega.hero-h1,.hero3d .phase-a .hero-sub{font-size:clamp(1.35rem,5.2vw,1.55rem)}
@media (min-width:861px){.hero3d .phase-a .mega.hero-h1,.hero3d .phase-a .hero-sub{font-size:clamp(1.6rem,2.2vw,2rem)}}
.hero3d .hero-price{font-size:clamp(1rem,1.6vw,1.2rem);margin:0 0 10px}
.hero3d .hero-price b{font-size:1.25em}
.hero3d .hero-kicker{font-size:clamp(1rem,1.5vw,1.2rem)}
.hero3d .hero-promise{font-size:.95rem}
.hero3d .phase-a .lead{font-size:1rem}
.founder-role{white-space:nowrap}
.founder-role + .founder-role{margin-top:2px}
@media (max-width:520px){.founder-role{white-space:normal}}
.founder-card{grid-template-columns:minmax(0,1.15fr) minmax(0,1.25fr);gap:44px}
.founder-id h2{font-size:clamp(1.6rem,2.4vw,2.1rem);white-space:nowrap}
@media (max-width:860px){.founder-card{grid-template-columns:1fr}.founder-id h2{white-space:normal}}
.cat-table th[scope=row]{font-weight:700;white-space:nowrap}
.cat-verify{display:inline-block;font-size:.72rem;font-weight:800;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:0 6px}
.tb-where{font-size:.95rem;color:var(--muted);margin-top:10px}
/* c095 O5: breathing room between the hero lines (headline, price line, Bukso AI box, subhead). */
.hero3d .phase-a .hero-kicker{margin:0 0 12px;line-height:1.25}
.hero3d .phase-a .mega.hero-h1{margin:4px 0 20px;line-height:1.18}
.hero3d .phase-a .hero-price{margin:0 0 18px;line-height:1.45}
.hero3d .phase-a .hero-price-note{margin-top:4px}
.hero3d .phase-a .hero-promise{margin:0 0 20px;line-height:1.5}
.hero3d .phase-a .hero-sub{margin:0 0 20px;line-height:1.2}
@media (max-width:480px){
  .hero3d .phase-a .hero-kicker{margin-bottom:8px}
  .hero3d .phase-a .mega.hero-h1{margin:2px 0 14px;line-height:1.16}
  .hero3d .phase-a .hero-price{margin-bottom:14px;line-height:1.4}
  .hero3d .phase-a .hero-promise{margin-bottom:14px;line-height:1.45}
  .hero3d .phase-a .hero-sub{margin-bottom:14px}
}
.founder-lead{font-size:1.12rem;line-height:1.6;color:var(--ink,#0f172a);margin:0 0 22px}