/* YNotes — light Apple-style design system (shared across pages) */
:root{
  --white:#ffffff; --bg:#f5f5f7; --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#86868b;
  --blue:#0071e3; --blue-link:#0066cc; --line:#d2d2d7; --line-soft:#e8e8ed;
  --radius-lg:28px; --radius-md:18px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Helvetica Neue","Noto Sans SC",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --maxw:980px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
a{color:var(--blue-link);text-decoration:none;}
img,video{display:block;max-width:100%;}
::selection{background:rgba(0,113,227,.18);}

/* nav */
.nav{position:sticky;top:0;z-index:100;height:48px;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);}
.nav-inner{max-width:1024px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 22px;}
.brand{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.brand img{width:22px;height:22px;border-radius:6px;}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{font-size:13.5px;color:rgba(29,29,31,.82);font-weight:400;transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.nav-actions{display:flex;align-items:center;gap:14px;}
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:980px;overflow:hidden;}
.lang-btn{font-family:inherit;font-size:12px;line-height:1;padding:6px 11px;color:var(--ink-2);background:transparent;border:none;cursor:pointer;transition:background .2s,color .2s;}
.lang-btn.active{background:var(--ink);color:#fff;}
.nav-cta{font-size:13px;font-weight:500;color:#fff;background:var(--blue);padding:6px 14px;border-radius:980px;transition:background .2s;}
.nav-cta:hover{background:#0077ed;}

/* helpers */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.section{padding:clamp(90px,12vh,150px) 0;}
.center{text-align:center;}
.eyebrow{font-size:clamp(15px,1.6vw,21px);font-weight:600;color:var(--blue-link);letter-spacing:-.01em;margin-bottom:6px;}
h1,h2,h3{letter-spacing:-.02em;font-weight:600;line-height:1.06;color:var(--ink);}
.lead{font-size:clamp(19px,2.2vw,24px);color:var(--ink-2);font-weight:400;line-height:1.45;max-width:640px;}
.linkrow{display:flex;gap:28px;flex-wrap:wrap;}
.arrow-link{font-size:clamp(17px,1.8vw,21px);font-weight:400;color:var(--blue-link);display:inline-flex;align-items:center;gap:2px;cursor:pointer;}
.arrow-link:hover{text-decoration:underline;}
.arrow-link::after{content:"›";font-size:1.2em;line-height:1;margin-left:1px;transition:transform .25s var(--ease);}
.arrow-link:hover::after{transform:translateX(3px);}

/* reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.06s;} .d2{transition-delay:.14s;} .d3{transition-delay:.22s;}

/* hero */
.hero{padding:64px 0 0;background:var(--white);text-align:center;}
.hero .kicker{font-size:clamp(17px,2vw,21px);font-weight:600;color:var(--ink-3);letter-spacing:-.01em;margin-bottom:14px;}
.hero h1{font-size:clamp(46px,8.5vw,88px);font-weight:600;line-height:1.02;letter-spacing:-.028em;margin-bottom:2px;}
.hero .grad{background:linear-gradient(100deg,#0066cc 0%,#5e5ce6 55%,#a85cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .lead{margin:22px auto 8px;}
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px auto 8px;max-width:560px;}
.pills span{font-size:13px;font-weight:500;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:980px;padding:6px 14px;}
.hero .linkrow{justify-content:center;margin-top:24px;}
.hero-stage{margin-top:54px;}

/* media frame for real screenshots / video */
.screenframe{margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.34),0 6px 18px rgba(0,0,0,.06);}
.screenframe video,.screenframe img{width:100%;height:100%;object-fit:cover;display:block;background:#f5f5f7;}
.hero-stage .screenframe{width:min(900px,94vw);}
.hero-stage .screenframe video,.hero-stage .screenframe img{aspect-ratio:1440/1006;}

/* statement */
.statement{background:var(--white);}
.statement p{font-size:clamp(28px,4.6vw,52px);font-weight:600;line-height:1.16;letter-spacing:-.02em;max-width:880px;margin:0 auto;}
.statement .muted{color:var(--ink-3);}

/* feature blocks */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.feature.flip .feat-media{order:-1;}
.feat-text h2{font-size:clamp(30px,4.4vw,50px);margin:8px 0 18px;}
.feat-text .lead{font-size:clamp(17px,1.9vw,21px);}
.feat-text .linkrow{margin-top:24px;}
.feat-media{display:flex;justify-content:center;}
.feat-media .screenframe{width:min(460px,92vw);}
.feat-media .screenframe img{aspect-ratio:1600/1117;object-fit:cover;}
.bg-gray{background:var(--bg);}
.bg-dark{background:#000;color:#f5f5f7;}
.bg-dark h2{color:#fff;} .bg-dark .eyebrow{color:#2997ff;} .bg-dark .lead{color:#a1a1a6;}
.bg-dark .screenframe{background:#0c0c0d;border-color:#27272b;}
.bg-dark .screenframe img{background:#0c0c0d;}

/* 3-up image cards */
.more-head{text-align:center;margin-bottom:52px;}
.more-head h2{font-size:clamp(30px,4.6vw,52px);}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.icard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-md);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.icard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(0,0,0,.26);}
.icard .icard-media{background:#f5f5f7;}
.icard .icard-media img{width:100%;aspect-ratio:1600/1117;object-fit:cover;background:#f5f5f7;}
.icard .icard-text{padding:22px 22px 26px;}
.icard h3{font-size:20px;letter-spacing:-.015em;margin-bottom:6px;}
.icard p{font-size:15px;color:var(--ink-2);line-height:1.5;}

/* privacy highlight (home) */
.privacy{background:var(--bg);text-align:center;}
.privacy .lock{width:58px;height:58px;margin:0 auto 22px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line-soft);}
.privacy h2{font-size:clamp(30px,4.6vw,52px);margin-bottom:14px;}
.privacy .lead{margin:0 auto 44px;}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;margin:0 auto;text-align:left;}
.trust .ti{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:24px 24px 26px;}
.trust .ti h3{font-size:18px;letter-spacing:-.01em;margin-bottom:6px;}
.trust .ti p{font-size:14.5px;color:var(--ink-2);line-height:1.45;}

/* pricing */
.pricing{background:var(--white);text-align:center;}
.pricing h2{font-size:clamp(30px,4.6vw,52px);margin-bottom:14px;}
.pricing .sub{font-size:18px;color:var(--ink-2);margin-bottom:54px;}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left;}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;display:flex;flex-direction:column;}
.plan.feat{border-color:var(--ink);box-shadow:0 30px 60px -34px rgba(0,0,0,.3);}
.plan .pname{font-size:21px;font-weight:600;letter-spacing:-.01em;}
.plan .ptag{font-size:12px;color:var(--blue-link);font-weight:600;height:18px;margin-top:2px;}
.plan .price{font-size:34px;font-weight:600;letter-spacing:-.02em;margin:14px 0 2px;}
.plan .price small{font-size:15px;font-weight:400;color:var(--ink-2);letter-spacing:0;}
.plan .price-note{font-size:13px;color:var(--ink-3);min-height:18px;}
.plan ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:11px;}
.plan li{font-size:14.5px;color:var(--ink-2);line-height:1.45;padding-left:24px;position:relative;}
.plan li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:#e7f1ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;}
.btn{margin-top:auto;text-align:center;font-size:16px;font-weight:500;padding:11px 18px;border-radius:12px;transition:background .2s,border-color .2s;}
.btn-fill{background:var(--blue);color:#fff;} .btn-fill:hover{background:#0077ed;}
.btn-out{background:#fff;color:var(--blue-link);border:1px solid var(--line);} .btn-out:hover{border-color:var(--ink-3);}

/* download band */
.download{background:var(--bg);text-align:center;}
.download h2{font-size:clamp(30px,4.6vw,52px);margin-bottom:10px;}
.download p{font-size:18px;color:var(--ink-2);margin-bottom:30px;}
.appstore{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;padding:12px 22px;border-radius:13px;font-size:16px;font-weight:500;transition:opacity .2s;}
.appstore:hover{opacity:.85;}
.appstore small{display:block;font-size:11px;font-weight:400;opacity:.8;line-height:1.1;}
.appstore .as-lab{text-align:left;line-height:1.15;}

/* footer */
footer{background:var(--white);border-top:1px solid var(--line-soft);}
.foot-inner{max-width:1024px;margin:0 auto;padding:30px 22px 44px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:18px;}
.foot-copy{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);}
.foot-copy img{width:18px;height:18px;border-radius:5px;}
.foot-note{font-size:11px;color:var(--ink-3);margin-top:8px;max-width:440px;line-height:1.6;}
.foot-links{display:flex;gap:22px;}
.foot-links a{font-size:12px;color:var(--ink-2);}
.foot-links a:hover{color:var(--ink);text-decoration:underline;}

/* ---- inner pages (privacy / support / 404) ---- */
.page-hero{padding:clamp(80px,12vh,130px) 0 clamp(20px,4vh,40px);text-align:center;background:var(--white);}
.page-hero .eyebrow{margin-bottom:10px;}
.page-title{font-size:clamp(38px,6vw,68px);font-weight:600;letter-spacing:-.025em;line-height:1.04;}
.page-lead{font-size:clamp(18px,2.1vw,22px);color:var(--ink-2);max-width:620px;margin:18px auto 0;line-height:1.45;}

/* privacy / legal */
.doc{display:grid;grid-template-columns:240px 1fr;gap:clamp(32px,5vw,64px);align-items:start;}
.doc-side{position:sticky;top:80px;align-self:start;display:flex;flex-direction:column;gap:16px;}
.info-card{background:var(--bg);border-radius:var(--radius-md);padding:22px 22px 24px;}
.info-card h3{font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:.02em;text-transform:uppercase;margin-bottom:14px;}
.info-list>div{margin-bottom:14px;}
.info-list small{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:2px;}
.info-list strong{font-size:14px;font-weight:500;color:var(--ink);}
.info-list a{font-size:14px;}
.anchor-list a{display:block;font-size:13.5px;color:var(--ink-2);padding:6px 0;border-bottom:1px solid var(--line-soft);transition:color .2s;}
.anchor-list a:last-child{border-bottom:none;}
.anchor-list a:hover{color:var(--ink);}
.legal-stack>section{padding:34px 0;border-top:1px solid var(--line-soft);scroll-margin-top:72px;}
.legal-stack>section:first-child{border-top:none;padding-top:4px;}
.legal-stack h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:16px;letter-spacing:-.015em;}
.legal-stack p{font-size:16px;color:var(--ink-2);line-height:1.65;margin-bottom:14px;max-width:680px;}
.legal-stack ul{list-style:none;}
.legal-stack li{font-size:16px;color:var(--ink-2);line-height:1.6;padding-left:22px;position:relative;margin-bottom:12px;max-width:680px;}
.legal-stack li::before{content:"";position:absolute;left:3px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--ink-3);}

/* support */
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.support-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:28px 26px;}
.support-card h3{font-size:19px;letter-spacing:-.01em;margin-bottom:8px;}
.support-card p{font-size:15px;color:var(--ink-2);line-height:1.55;}
.section-intro{text-align:center;margin-bottom:38px;}
.section-intro h2{font-size:clamp(28px,4vw,44px);}
.faq{max-width:760px;margin:0 auto;}
.faq details{border-top:1px solid var(--line-soft);padding:20px 0;}
.faq details:last-child{border-bottom:1px solid var(--line-soft);}
.faq summary{font-size:18px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:300;font-size:24px;line-height:1;transition:transform .3s var(--ease);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq p{font-size:15.5px;color:var(--ink-2);line-height:1.65;margin-top:14px;max-width:680px;}

/* 404 */
.notfound{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 22px;}
.notfound .big{font-size:clamp(64px,12vw,120px);font-weight:600;letter-spacing:-.04em;background:linear-gradient(100deg,#0066cc,#a85cff);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;}
.notfound p{font-size:20px;color:var(--ink-2);margin:14px 0 30px;}

@media(max-width:820px){
  .nav-links{display:none;}
  .feature{grid-template-columns:1fr;gap:38px;}
  .feature.flip .feat-media{order:0;}
  .feat-text{text-align:center;}
  .feat-text .linkrow{justify-content:center;}
  .feat-text .lead{margin-left:auto;margin-right:auto;}
  .triad,.trust,.support-grid{grid-template-columns:1fr;}
  .plans{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
  .trust{max-width:420px;}
  .doc{grid-template-columns:1fr;}
  .doc-side{position:static;}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}

/* ---- admin dashboard (internal, light) ---- */
.admin-main{max-width:1200px;margin:0 auto;padding:40px 22px 80px;}
.center-card{max-width:430px;margin:56px auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 32px;text-align:center;box-shadow:0 30px 60px -40px rgba(0,0,0,.25);}
.center-card .brand{justify-content:center;margin-bottom:18px;}
.center-card h1{font-size:25px;margin-bottom:10px;}
.center-card>p{font-size:15px;color:var(--ink-2);margin-bottom:22px;line-height:1.5;}
.field{text-align:left;margin-bottom:18px;}
.field label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px;}
.field input,.search-input{width:100%;font-family:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);}
.field input:focus,.search-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.15);}
.login-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.primary-btn{background:var(--blue);color:#fff;font-size:15px;font-weight:500;padding:11px 20px;border-radius:12px;border:none;cursor:pointer;text-align:center;transition:background .2s;}
.primary-btn:hover{background:#0077ed;}
.secondary-btn,.ghost-btn{background:#fff;color:var(--blue-link);border:1px solid var(--line);font-size:15px;font-weight:500;padding:11px 20px;border-radius:12px;cursor:pointer;text-align:center;transition:border-color .2s;}
.secondary-btn:hover,.ghost-btn:hover{border-color:var(--ink-3);}
.dashboard{display:none;}
.toolbar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:28px;}
.toolbar h1{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;}
.toolbar p{font-size:14px;color:var(--ink-3);margin-top:4px;}
.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:24px;}
.stat-card{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:18px;}
.stat-label{font-size:12px;color:var(--ink-3);margin-bottom:8px;}
.stat-value{font-size:26px;font-weight:600;letter-spacing:-.02em;}
.stat-sub{font-size:11px;color:var(--ink-3);margin-top:6px;}
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px;}
.chart-card,.table-card{background:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:22px;margin-bottom:18px;}
.chart-card h3,.table-card h3{font-size:16px;margin-bottom:14px;}
.chart-wrap{height:200px;position:relative;}
.table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.table-toolbar .search-input{width:auto;min-width:240px;}
.table-wrap{overflow-x:auto;}
.table{width:100%;border-collapse:collapse;font-size:14px;}
.table th{text-align:left;font-weight:600;color:var(--ink-3);font-size:12px;padding:10px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap;}
.table td{padding:12px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);}
.table .tiny{font-size:12px;color:var(--ink-3);}
.empty{text-align:center;color:var(--ink-3);padding:24px;font-size:14px;}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:980px;background:var(--bg);color:var(--ink-2);}
.badge.free{background:#f0f0f2;color:#6e6e73;}
.badge.pro{background:#e7f1ff;color:#0066cc;}
.badge.proplus{background:#f0ecff;color:#5e3cc4;}
.badge.admin{background:#ffeceb;color:#c0362c;}
.feedback-grid{display:flex;flex-direction:column;gap:14px;}
.feedback-card{border:1px solid var(--line-soft);border-radius:14px;padding:16px;}
.feedback-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-3);margin-bottom:8px;}
.feedback-body{font-size:14px;color:var(--ink);line-height:1.5;white-space:pre-wrap;}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);}.dashboard-grid{grid-template-columns:1fr;}}