/* Botple Education — shared site styles (nav, footer, buttons, cards,
   prose, layout primitives). Loaded after tokens.css by every page.
   Deliberately a separate file from tokens.css: tokens rarely change,
   layout/component rules do — keeping them apart makes future edits
   easier to scope. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  /* Belt-and-suspenders on top of the near-zero durations above: the
     inline pre-paint script already skips adding html.js-motion when
     reduced motion is on, so [data-reveal] elements are never hidden
     in the first place — this rule just guarantees it explicitly, in
     case that class ends up present some other way. */
  [data-reveal]{opacity:1!important;transform:none!important;}
  .card:hover,.card:active{transform:none!important;}
  .btn:hover,.btn:active,.nav-cta:hover{transform:none!important;}
  .device-frame:hover,.principle:hover,.principle:focus-within{transform:none!important;}
}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-ui);
  line-height:1.5;-webkit-font-smoothing:antialiased;
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* Skip link — visually hidden until focused, standard accessibility pattern */
.skip-link{
  position:absolute;left:8px;top:-48px;background:var(--accent);color:var(--accent-tx);
  padding:10px 16px;border-radius:var(--radius-sm);font-family:var(--font-ui);font-weight:600;
  font-size:14px;z-index:100;transition:top .15s ease;text-decoration:none;
}
.skip-link:focus{top:8px;}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

.container{max-width:var(--container-max);margin:0 auto;padding:0 20px;}

/* NAV */
.site-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;border-bottom:1px solid var(--divider);
}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;position:relative;padding-bottom:4px;transition:opacity var(--dur-fast) var(--ease-standard);}
.wordmark:hover{opacity:.72;}
.wm-icon{width:30px;height:30px;flex-shrink:0;border-radius:8px;}
.wm-text{display:flex;flex-direction:column;}
.wordmark .wm-name{font-family:var(--font-ui);font-weight:700;font-size:18px;letter-spacing:.3px;color:var(--text);}
.wordmark .wm-sub{font-family:var(--font-mono);font-size:9.5px;color:var(--text-3);letter-spacing:1px;margin-top:1px;}
.wordmark::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent 75%);opacity:.5;
}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.nav-links a{
  font-family:var(--font-ui);font-size:14px;font-weight:500;color:var(--text-2);
  text-decoration:none;padding:8px 12px;border-radius:var(--radius-sm);
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.nav-links a:hover{background:var(--surface-2);color:var(--text);}
.nav-links a.nav-cta{background:var(--accent);color:var(--accent-tx);font-weight:600;transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
.nav-links a.nav-cta:hover{background:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.nav-links a.nav-cta:active{transform:translateY(0);box-shadow:none;}

/* MAIN / SECTIONS */
main{display:block;}
.section{padding:var(--space-section) 0;}
.section-tight{padding:calc(var(--space-section) * .55) 0;}
h1,h2,h3{font-family:var(--font-ui);font-weight:700;color:var(--text);line-height:1.15;letter-spacing:-.01em;}
h1{font-size:clamp(32px,6vw,52px);}
h2{font-size:clamp(22px,3.4vw,30px);margin-bottom:16px;}
h3{font-size:18px;margin-bottom:8px;}
p{color:var(--text-2);font-size:16px;max-width:62ch;}
p+p{margin-top:12px;}
.eyebrow{
  display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:1.2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;
}
.lede{font-size:19px;color:var(--text-2);max-width:60ch;}

/* HERO */
.hero{text-align:left;}
.hero h1{margin-bottom:16px;max-width:16ch;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
.hero-split{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;}
.hero-visual{display:flex;justify-content:center;}
.hero-visual .device-frame{width:300px;max-width:300px;}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;}
  .hero-visual{margin-top:8px;}
  .hero-visual .device-frame{width:230px;max-width:230px;margin:0 auto;}
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:15px;
  font-weight:600;padding:12px 20px;border-radius:var(--radius-sm);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard);
}
.btn-primary{background:var(--accent);color:var(--accent-tx);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-primary:active{transform:translateY(0);box-shadow:none;}
.btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--border);}
.btn-secondary:hover{background:var(--surface-3);transform:translateY(-2px);}
.btn-secondary:active{transform:translateY(0);}

/* PRODUCT CARDS */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:36px;}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.card:active{transform:translateY(-2px);}
/* Cards also carry [data-reveal] (see reveal system below), and the
   generic reveal rule's own `transition` shorthand would otherwise
   fully replace — not merge with — this one (CSS doesn't combine
   `transition` across rules), silently dropping the box-shadow
   transition above. This higher-specificity override folds both sets
   of properties into one declaration so hover/press and reveal timing
   coexist correctly. */
html.js-motion [data-reveal].card{
  transition:opacity var(--dur-slow) var(--ease-out-smooth),transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
}
/* The reveal system's own .is-visible rule pins transform:none at a
   specificity that would otherwise silently block the hover/active
   lift below once a card has been revealed — these repeat the same
   values at matching specificity so hover/press keeps working after
   reveal, not just before it. */
html.js-motion [data-reveal].card:hover{transform:translateY(-6px);}
html.js-motion [data-reveal].card:active{transform:translateY(-2px);}
.card-icon{width:48px;height:48px;border-radius:var(--radius-sm);margin-bottom:16px;box-shadow:var(--shadow-sm);}
.status-pill{
  display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.4px;padding:4px 10px;border-radius:999px;margin-bottom:12px;align-self:flex-start;
}
.status-live{background:var(--success-bg);color:var(--success);}
.status-soon{background:var(--info-bg);color:var(--info);}
.status-dev{background:var(--warn-bg);color:var(--warn);}
.card p{font-size:14.5px;flex:1;}
.card a{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:14px;
  font-weight:600;color:var(--accent);text-decoration:none;margin-top:16px;
  transition:transform var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}
.card a:hover{opacity:.8;transform:translateX(3px);}

/* PRINCIPLES GRID */
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:32px;}
.principle{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--radius-md);transition:background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);}
.principle:hover,.principle:focus-within{background:var(--surface);transform:translateY(-3px);}
.principle-icon{width:46px;height:46px;border-radius:12px;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color var(--dur-fast) var(--ease-standard);}
.principle-icon svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--dur-fast) var(--ease-standard);}
.principle:hover .principle-icon,.principle:focus-within .principle-icon{background:var(--accent);}
.principle:hover .principle-icon svg,.principle:focus-within .principle-icon svg{stroke:var(--accent-tx);}
.principle h3{color:var(--text);margin-bottom:0;}
.principle p{font-size:14.5px;}

/* PRODUCT SCREENSHOT SHOWCASE (device frames) — max-width on the frame
   itself (not just the grid track) is deliberate: without it, a track
   that grows wide at 2-3 column breakpoints stretches these portrait
   phone screenshots to disproportionate heights. Capping + centering
   the frame keeps every image the same sane size at any column count. */
.showcase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;margin-top:36px;align-items:start;justify-items:center;}
.device-frame{width:100%;max-width:240px;margin:0;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:10px 10px 18px;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);}
.device-frame:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.device-frame img{width:100%;height:auto;display:block;border-radius:15px;}
.device-frame figcaption{margin-top:14px;padding:0 4px;font-size:13.5px;color:var(--text-2);text-align:center;line-height:1.5;}
.showcase-note{font-size:13px;color:var(--text-3);margin-top:32px;text-align:center;}

/* Callout overlays for annotated Help Center screenshots — positioned
   as percentages over the (unmodified) real screenshot rather than
   drawn into the image pixels, so they stay crisp at any size and are
   trivial to reposition if the underlying UI changes; see /help/. */
.shot-frame{position:relative;display:block;margin:0 auto;max-width:280px;}
.shot-frame img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.callout-box{position:absolute;border:2px solid var(--accent);border-radius:8px;box-shadow:0 0 0 4px var(--accent-bg);pointer-events:none;}
.callout-num{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-tx);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-family:var(--font-ui);box-shadow:var(--shadow-sm);pointer-events:none;}

/* Numbered step list (Help Center) — the number is structural (a real
   sequence the reader follows in order), not decorative. */
.step-list{display:flex;flex-direction:column;gap:28px;margin-top:20px;}
.step-row{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:center;}
.step-row.reverse .step-row-text{order:-1;}
.step-num-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent-bg);color:var(--accent);font-family:var(--font-mono);font-size:12px;font-weight:700;margin-right:8px;}
.step-row-text h3{display:flex;align-items:center;margin-bottom:6px;}
@media (max-width:760px){
  .step-row,.step-row.reverse{grid-template-columns:1fr;}
  .step-row.reverse .step-row-text{order:0;}
}

/* MINDSIGHT/NOTES concept motif — deliberately NOT screenshot-styled
   (no device frame, no border mimicking app chrome) so it can never
   read as a real product shot: these apps have no UI to show yet. */
.concept-motif{width:64px;height:64px;border-radius:16px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.concept-motif svg{width:30px;height:30px;stroke:var(--text-3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* Install guide (Help Center) — same hand-illustrated phone-frame SVGs
   Botple Calc's own in-app install guide uses, since native iOS/Android
   share-sheet and menu chrome can't honestly be screenshotted from here. */
.install-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:20px;}
.install-col h4{font-family:var(--font-ui);font-size:15px;color:var(--text);margin-bottom:16px;}
.install-step{display:flex;gap:14px;margin-bottom:16px;align-items:flex-start;}
.install-step:last-child{margin-bottom:0;}
.install-step-num{width:20px;height:20px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);font-family:var(--font-ui);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.install-phone{flex-shrink:0;}
.install-step-text{flex:1;padding-top:1px;font-family:var(--font-ui);font-size:14px;line-height:1.55;color:var(--text);}

/* PROSE (about / privacy / terms / support) */
.prose{max-width:68ch;}
.prose h2{margin-top:40px;}
.prose h2:first-child{margin-top:0;}
.prose p{max-width:none;color:var(--text-2);}
.prose .legal-note{
  margin-top:40px;padding:16px 18px;background:var(--surface-2);border-radius:var(--radius-md);
  font-size:13.5px;color:var(--text-3);
}

/* FOOTER */
.site-footer{border-top:1px solid var(--divider);padding:32px 0;margin-top:var(--space-section);}
.footer-inner{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;}
.footer-copy{font-family:var(--font-mono);font-size:12px;color:var(--text-3);}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 4px;}
.footer-links a{
  font-family:var(--font-ui);font-size:13px;color:var(--text-2);text-decoration:none;padding:6px 10px;border-radius:var(--radius-sm);
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.footer-links a:hover{background:var(--surface-2);color:var(--text);}

/* COMING-SOON PAGES */
.status-hero .status-pill{margin-bottom:18px;}

/* HELP PAGE */
.help-jumpnav{font-size:14px;color:var(--text-3);margin-top:8px;}
.help-jumpnav a{color:var(--accent);text-decoration:none;}
.help-jumpnav a:hover{text-decoration:underline;}
.changelog-list{list-style:none;margin:16px 0 0;padding:0;}
.changelog-list li{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--divider);font-size:14.5px;color:var(--text-2);}
.changelog-list li:last-child{border-bottom:none;}
.changelog-list li::before{content:'—';color:var(--accent);flex-shrink:0;}

/* FEEDBACK FORM */
.visually-hidden{position:absolute;left:-9999px;}
.feedback-form{display:flex;flex-direction:column;gap:6px;max-width:480px;margin-top:28px;}
.field-label{font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--text-2);margin-top:12px;}
.field-label:first-of-type{margin-top:0;}
.field-input{font-family:var(--font-ui);font-size:15px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;width:100%;box-sizing:border-box;}
.field-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.feedback-textarea{min-height:120px;resize:vertical;font-family:var(--font-ui);}
.feedback-form .btn{margin-top:16px;align-self:flex-start;}
.feedback-status{margin-top:28px;padding:14px 18px;border-radius:var(--radius-md);font-family:var(--font-ui);font-size:14.5px;max-width:480px;}
.feedback-success{background:var(--success-bg);color:var(--success);}
.feedback-error{background:var(--danger);color:var(--danger-tx);}

@media (max-width:640px){
  .site-nav{flex-direction:column;align-items:flex-start;}
  .nav-links{gap:2px;}
  .footer-inner{flex-direction:column;align-items:flex-start;}
}

/* SCROLL/LOAD REVEAL SYSTEM
   [data-reveal] is a plain attribute with zero effect on its own — an
   element wearing only it is fully visible by default. The pre-paint
   inline script in <head> (see every page's <head>) adds html.js-motion
   synchronously, BEFORE first paint, only when JS is enabled AND
   reduced-motion is off AND IntersectionObserver exists — so the
   "start hidden" rule below only ever activates from the very first
   frame, never partway through (no flash-of-visible-then-hidden), and
   degrades to "just show everything, always" for no-JS / reduced-
   motion / old-browser cases without any extra fallback code needed.
   A deferred (DOMContentLoaded) observer in the same inline script
   then adds .is-visible once each element scrolls into view — or,
   for already-in-viewport elements like the hero, fires almost
   immediately after load, giving a brief "settling in" entrance. */
html.js-motion [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out-smooth),transform var(--dur-slow) var(--ease-out-smooth);
}
html.js-motion [data-reveal].is-visible{opacity:1;transform:none;}

/* Stagger for grouped reveals (product cards, principle list) — a
   fixed, small set of nth-child delays covers every group on the site
   (3 cards, 6 principles, 4 showcase screenshots) without needing
   per-element JS math. */
.cards>[data-reveal]:nth-child(1),.principles>[data-reveal]:nth-child(1),.showcase-grid>[data-reveal]:nth-child(1){transition-delay:0ms;}
.cards>[data-reveal]:nth-child(2),.principles>[data-reveal]:nth-child(2),.showcase-grid>[data-reveal]:nth-child(2){transition-delay:80ms;}
.cards>[data-reveal]:nth-child(3),.principles>[data-reveal]:nth-child(3),.showcase-grid>[data-reveal]:nth-child(3){transition-delay:160ms;}
.principles>[data-reveal]:nth-child(4),.showcase-grid>[data-reveal]:nth-child(4){transition-delay:240ms;}
.principles>[data-reveal]:nth-child(5){transition-delay:320ms;}
.principles>[data-reveal]:nth-child(6){transition-delay:400ms;}