/* Aya marketing site v2 — tokens + base, mirroring the claude.ai/design project
   (design system 45ab313e). Pages keep the design's inline styles verbatim;
   this file only supplies what the design runtime provided: tokens, base
   rules, hover states (style-hover), and the PhoneFrame component. */

/* ---------- tokens (from _ds tokens/*.css) ---------- */
:root{
  --ink-black:#000;
  --deep-ink:#0B0F11;
  --paper-white:#FFF;

  --accent:#F2FE80;
  --accent-deep:#B5C94F;
  --accent-gradient:linear-gradient(135deg,#F2FE80,#B5C94F);
  --accent-wash:rgba(242,254,128,.12);
  --accent-hairline:rgba(242,254,128,.35);
  --accent-tint-glow:radial-gradient(circle at 50% 0%,rgba(242,254,128,0) 35%,rgba(242,254,128,.1) 80%,rgba(242,254,128,.25) 100%);

  --text-on-dark:#fff;
  --text-on-dark-lead:rgba(255,255,255,.85);
  --text-on-dark-body:rgba(255,255,255,.65);
  --text-on-dark-muted:rgba(255,255,255,.55);
  --text-on-light:#000;
  --text-on-light-body:rgba(0,0,0,.65);
  --text-on-light-muted:rgba(0,0,0,.55);
  --text-on-light-faint:rgba(0,0,0,.45);

  --hairline-dark:rgba(255,255,255,.18);
  --hairline-light:rgba(0,0,0,.1);
  --hairline-light-soft:rgba(0,0,0,.06);

  --wash-lavender:rgba(238,228,250,.55);
  --wash-blue:rgba(218,232,248,.6);
  --wash-ambient:radial-gradient(ellipse 80% 75% at 18% 28%,rgba(238,228,250,.55),transparent 72%),radial-gradient(ellipse 90% 85% at 82% 70%,rgba(218,232,248,.6),transparent 72%);

  --photo-warm:linear-gradient(160deg,#3a2415 0%,#6b4526 45%,#2a1a0f 100%);
  --photo-sage:linear-gradient(180deg,#5b636a 0%,#454e4c 55%,#242b26 100%);
  --photo-shade:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.88) 100%);
  --card-top-shade:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.3),transparent);

  --surface-subpage-card:#fafaf8;

  --shadow-card-dark:0 24px 60px -30px rgba(0,0,0,.55);
  --shadow-card-light:0 -4px 32px -12px rgba(0,0,0,.035),0 1px 2px rgba(0,0,0,.025),0 12px 36px -14px rgba(0,0,0,.05),0 28px 60px -24px rgba(0,0,0,.045);
  --shadow-cta:0 10px 30px -12px rgba(0,0,0,.45);
  --shadow-phone-frame:inset 0 0 0 2px #2a2a2e,inset 0 0 0 5px #101013,0 0 0 1.5px #3a3a40;

  --ease-signature:cubic-bezier(.22,1,.36,1);
  --dur-hover:.3s;
  --dur-reveal:.9s;

  /* WhatsApp light palette — real WhatsApp colours, never brand colours */
  --wa-light-bg:#EFE7DE;
  --wa-light-chrome:#FDFBF7;
  --wa-light-in:#FFFFFF;
  --wa-light-out:#D8FDD2;
  --wa-light-text:#0B141A;
  --wa-light-muted:rgba(11,20,26,.45);
  --wa-light-line:rgba(11,20,26,.08);
  --wa-green:#25D366;
  --wa-tick-read:#34B7F1;
  --wa-light-doodle:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'><g fill='none' stroke='%230B141A' stroke-opacity='.055' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='36' cy='34' r='11'/><path d='M28 62h20v14H36l-8 6z'/><path d='M96 26l7 14 15 2-11 11 3 15-14-7-14 7 3-15-11-11 15-2z'/><rect x='150' y='24' width='26' height='20' rx='4'/><path d='M158 44v8h10v-8'/><path d='M212 30c6-8 18-8 18 2 0 8-9 12-18 20-9-8-18-12-18-20 0-10 12-10 18-2z'/><circle cx='104' cy='130' r='14'/><path d='M104 116v-8M104 152v-8M118 130h8M82 130h8'/><rect x='152' y='114' width='30' height='30' rx='6'/><path d='M160 132l6 6 10-12'/><path d='M212 118v26M204 144h16M206 118h14'/><path d='M28 210c8-10 22-10 30 0-4 12-26 12-30 0z'/><circle cx='43' cy='206' r='3'/><path d='M96 198h26v22H108l-10 8z'/><path d='M166 194l10 20-20 0z'/><path d='M156 220h30'/><circle cx='218' cy='208' r='12'/><path d='M218 200v8l6 4'/><path d='M62 96c6-6 14-6 20 0'/><path d='M186 76c6-6 14-6 20 0'/><path d='M136 170c6-6 14-6 20 0'/><path d='M64 250c6-6 14-6 20 0'/><path d='M244 160c6-6 14-6 20 0'/></g></svg>");
}

/* ---------- base (from the design pages' own <style>) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* White page base: rounded sections (64px corners on dark insets and photo
   closings) are transparent outside the curve — the backdrop must match the
   white sections around them, like the design viewer's canvas. Hero and
   footer paint their own black. */
body{margin:0;background:#fff;font-family:'Inter',system-ui,sans-serif;font-weight:300;color:#000;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:opacity .3s}
a:hover{opacity:.8}
h1,h2,h3,p{margin:0}
img{border:0}
section{scroll-margin-top:96px}

/* ---------- hover states (the design's style-hover attributes) ---------- */
.hv-btn:hover{transform:translateY(-1px);opacity:.9}
.hv-card:hover{transform:translateY(-4px);opacity:1}

/* ---------- PhoneFrame (AyaDesignSystem PhoneFrame component) ---------- */
.phone-frame{position:relative;width:310px;height:640px;max-width:100%;border-radius:44px;background:#000;box-shadow:var(--shadow-phone-frame),var(--shadow-card-dark);overflow:hidden;container-type:inline-size}
.phone-screen{position:absolute;inset:5px;border-radius:39px;overflow:hidden}

/* ---------- FAQ accordion (+ rotates to ×) ---------- */
.faq-item{border-top:1px solid rgba(0,0,0,.1)}
.faq-item:last-child{border-bottom:1px solid rgba(0,0,0,.1)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:24px 0;margin:0;border:0;background:none;text-align:left;font:inherit;font-size:19px;color:#000;cursor:pointer}
.faq-icon{position:relative;flex:none;width:18px;height:18px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;background:rgba(0,0,0,.6)}
.faq-icon::before{width:18px;height:1.5px;transform:translate(-50%,-50%)}
.faq-icon::after{width:1.5px;height:18px;transform:translate(-50%,-50%)}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 40px 24px 0;font-size:16px;line-height:1.65;color:rgba(0,0,0,.55)}
.faq-item.open .faq-a{grid-template-rows:1fr}

/* ---------- keyframes + reduced motion (tokens/keyframes.css) ---------- */
@keyframes ayaRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes ayaKenBurns{0%{transform:scale(1)}100%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- mobile nav: one sliding row, short labels, no Visione ---------- */
.nav-short{display:none}
@media (max-width:640px){
  .nav-mobile-hide{display:none!important}
  .nav-full{display:none}
  .nav-short{display:inline}
  nav>div{flex-wrap:nowrap!important;justify-content:flex-start!important;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  nav>div::-webkit-scrollbar{display:none}
  nav>div>a{flex:0 0 auto;white-space:nowrap;padding:9px 11px!important}
  nav>div>a:first-child{margin-right:6px!important;padding-left:0!important}
  nav>div>a.hv-btn{padding:10px 16px!important;margin-left:2px!important}
}

/* ---------- mobile: choice cards slide horizontally ---------- */
@media (max-width:640px){
  .card-row{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px!important;margin:0 -40px;padding:0 40px 8px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  .card-row::-webkit-scrollbar{display:none}
  .card-row>*{flex:0 0 86%;scroll-snap-align:center}
  .card-row>a{min-height:500px!important}
  .card-row>div{padding:28px!important}
}