/* ============================================================
   Repwise marketing site
   Same tokens as the product, wider type, more air.
   ============================================================ */

.site{overflow-x:hidden}

/* soft violet aurora behind the fold, painted with gradients only */
.glow{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(680px 460px at 78% -6%, rgba(139,92,246,.22), transparent 68%),
    radial-gradient(520px 420px at 8% 8%, rgba(59,130,246,.13), transparent 70%),
    radial-gradient(900px 600px at 50% 108%, rgba(139,92,246,.10), transparent 70%);
}
/* lift the content above the glow — but never touch the fixed nav's positioning */
.site > main,
.site > .footer{position:relative;z-index:1}

.shell{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
@media (min-width:768px){.shell{padding:0 32px}}

/* ---------------- nav ---------------- */

.nav{
  position:fixed;top:12px;left:12px;right:12px;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1180px;margin:0 auto;
  padding:9px 9px 9px 18px;
  border-radius:var(--r-full);
  background:rgba(14,14,18,.72);
  border:1px solid var(--line-2);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.nav.stuck{background:rgba(12,12,16,.9);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.nav .brand{display:inline-flex;align-items:center;min-height:44px;font-size:22px;letter-spacing:-.03em}
.nav-links{display:none;align-items:center;gap:4px}
.nav-links a{
  padding:9px 14px;border-radius:var(--r-full);
  font-size:14px;font-weight:600;color:var(--muted);
  transition:color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-cta{display:flex;align-items:center;gap:8px}
.navtoggle{display:inline-flex}
@media (min-width:900px){
  .nav-links{display:flex}
  .navtoggle{display:none}
}
.mobile-menu{
  position:fixed;top:76px;left:12px;right:12px;z-index:var(--z-nav);
  padding:10px;border-radius:var(--r-lg);
  background:rgba(16,16,21,.96);border:1px solid var(--line-2);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--sh-3);
  display:none;flex-direction:column;gap:2px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  padding:14px 16px;border-radius:var(--r-sm);font-size:16px;font-weight:600;color:var(--text);
}
.mobile-menu a:hover{background:var(--surface-2)}

/* ---------------- sections ---------------- */

section{padding:76px 0}
@media (min-width:900px){section{padding:110px 0}}
/* clear the floating nav when jumping to an anchor */
section[id]{scroll-margin-top:96px}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:var(--r-full);
  background:var(--violet-dim);border:1px solid rgba(139,92,246,.28);
  color:var(--violet-3);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  margin-bottom:20px;
}
.eyebrow svg{width:15px;height:15px}

h1.display{
  font-size:clamp(38px,8.4vw,74px);
  line-height:1.02;letter-spacing:-.042em;font-weight:800;
}
h2.title{
  font-size:clamp(29px,5vw,46px);
  line-height:1.08;letter-spacing:-.035em;
}
h3.sub{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.025em}
.lead{
  font-size:clamp(16px,2vw,19px);line-height:1.62;color:var(--muted);
  max-width:62ch;
}
.grad{
  background:linear-gradient(100deg,#A78BFA 0%,#C4B5FD 45%,#8B5CF6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.sec-head{max-width:720px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .lead{margin-top:16px}
.sec-head.center .lead{margin-left:auto;margin-right:auto}

/* Reveal on scroll. Content is visible by default and only hidden once JS has
   taken over, so a script failure can never leave the page blank. */
.js-reveal [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .62s var(--ease-out),transform .62s var(--ease-out);
}
.js-reveal [data-reveal].shown{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.07s}
[data-reveal][data-d="2"]{transition-delay:.14s}
[data-reveal][data-d="3"]{transition-delay:.21s}
[data-reveal][data-d="4"]{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
}

/* ---------------- hero ---------------- */

.hero{padding-top:132px;padding-bottom:56px}
@media (min-width:900px){.hero{padding-top:168px;padding-bottom:90px}}
/* grid items default to min-width:auto and refuse to shrink below their
   content — which the phone mockup would happily blow past on a small screen */
.hero-grid > *,.split > *,.steps > *,.bento > *,.stats > *,.footer-grid > *{min-width:0}

.hero-grid{display:grid;gap:48px;align-items:center}
@media (min-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}
}
.hero p.lead{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{
  display:flex;align-items:center;gap:9px;margin-top:22px;
  font-size:13.5px;color:var(--dim);
}
.hero-note svg{width:16px;height:16px;color:var(--green-2)}
.hero-note + .hero-note{margin-top:8px}

/* stat band */
.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin-top:56px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
@media (min-width:720px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--bg);padding:22px 18px;text-align:center}
.stat b{display:block;font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.4}

/* ---------------- device mockup ---------------- */

.device{
  position:relative;width:100%;max-width:352px;margin:0 auto;
  border-radius:46px;padding:11px;
  background:linear-gradient(160deg,#26262e,#111116 40%,#1d1d24);
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.07),
             inset 0 1px 0 rgba(255,255,255,.09);
}
.device::after{
  content:"";position:absolute;left:50%;top:20px;transform:translateX(-50%);
  width:98px;height:24px;border-radius:99px;background:#000;z-index:3;
}
.device-screen{
  position:relative;border-radius:36px;overflow:hidden;background:var(--bg);
  height:min(686px,74vh);
}
@media (max-width:900px){.device-screen{height:600px}}
.device-screen::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:96px;z-index:2;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 12%,rgba(8,8,10,0));
}
.screen-scroll{height:100%;overflow:hidden;padding:52px 14px 16px}
.device-tilt{
  transform:perspective(1500px) rotateY(-11deg) rotateX(3deg) translateZ(0);
  transition:transform .8s var(--ease-out);
}
@media (max-width:980px){.device-tilt{transform:none}}
.device-glow{
  position:absolute;inset:-14%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(139,92,246,.32),transparent 72%);
  filter:blur(28px);
}
.device-wrap{position:relative}

/* second, smaller device used in feature sections */
.device.sm{max-width:280px;border-radius:38px;padding:9px}
.device.sm .device-screen{border-radius:30px;height:520px}
.device.sm::after{width:80px;height:20px;top:17px}

/* fake status bar so the mockup reads as a phone */
.statusbar{
  position:absolute;top:0;left:0;right:0;height:48px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px 0;font-size:13.5px;font-weight:700;color:#fff;
  pointer-events:none;
}
.statusbar .sb-r{display:flex;align-items:center;gap:5px;opacity:.9}
.statusbar svg{width:15px;height:15px}

/* ---------------- bento features ---------------- */

.bento{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.bento{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}}
.bento .cell{
  grid-column:span 2;
  padding:24px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(26,26,32,.9),rgba(18,18,23,.9));
  border:1px solid var(--line);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),background-color var(--t) var(--ease);
}
.bento .cell:hover{border-color:rgba(255,255,255,.17)}
@media (min-width:900px){
  .bento .cell{grid-column:span 2}
  .bento .cell.wide{grid-column:span 3}
  .bento .cell.full{grid-column:span 6}
  .bento .cell.half{grid-column:span 3}
}
.cell-ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--violet-dim);color:var(--violet-2);margin-bottom:18px;
}
.cell-ico svg{width:23px;height:23px}
.cell-ico.green{background:var(--green-dim);color:var(--green-2)}
.cell-ico.blue{background:rgba(59,130,246,.14);color:var(--blue-2)}
.cell-ico.orange{background:rgba(251,146,60,.14);color:var(--orange)}
.cell h3{font-size:19px;letter-spacing:-.025em;margin-bottom:9px}
.cell p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.cell .mini{
  margin-top:20px;padding:16px;border-radius:var(--r);
  background:rgba(0,0,0,.32);border:1px solid var(--line);
}

/* ---------------- alternating feature rows ---------------- */

.split{display:grid;gap:44px;align-items:center}
@media (min-width:980px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .split.flip .split-media{order:-1}
}
.split + .split{margin-top:96px}
.split h3{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.03em;margin-bottom:16px}
.split p{font-size:16px;line-height:1.65;color:var(--muted)}
.ticks{margin-top:26px;display:flex;flex-direction:column;gap:13px}
.tick{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.tick i{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;margin-top:1px;
  display:grid;place-items:center;background:var(--green-dim);color:var(--green-2);
}
.tick i svg{width:13px;height:13px;stroke-width:3}
.tick b{font-weight:700}
.tick span{color:var(--muted)}

/* ---------------- steps ---------------- */

.steps{display:grid;gap:18px}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
.step{
  position:relative;padding:28px 24px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(26,26,32,.85),rgba(17,17,22,.85));
  border:1px solid var(--line);
}
.step-n{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-weight:800;font-size:16px;margin-bottom:18px;
  box-shadow:0 6px 18px rgba(139,92,246,.35);
}
.step h3{font-size:18px;letter-spacing:-.02em;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------------- maths panel ---------------- */

.maths{
  padding:28px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(24,24,30,.92),rgba(15,15,20,.92));
  border:1px solid var(--line-2);
}
@media (min-width:900px){.maths{padding:38px}}
.formula{
  display:block;padding:20px;margin:20px 0;border-radius:var(--r);
  background:#0A0A0E;border:1px solid rgba(139,92,246,.25);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(12.5px,2.4vw,15.5px);line-height:1.7;color:var(--violet-3);
  overflow-x:auto;white-space:pre;
}
.calc-rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:22px}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--bg-2);padding:14px 16px;font-size:14.5px}
.calc-row span{color:var(--muted)}
.calc-row b{font-variant-numeric:tabular-nums;font-weight:700}
.calc-row.total{background:var(--violet-dim)}
.calc-row.total b{color:var(--violet-2);font-size:17px}

/* ---------------- comparison ---------------- */

.compare{
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);
}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare table{min-width:560px}
.compare th,.compare td{padding:16px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line)}
.compare thead th{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:var(--bg-2);
}
.compare thead th.us{color:var(--violet-2)}
.compare tbody td:first-child{color:var(--muted)}
.compare tbody td.us{background:rgba(139,92,246,.07);font-weight:600}
.compare tr:last-child td{border-bottom:0}
.compare .yes{color:var(--green-2);display:inline-flex;align-items:center;gap:7px}
.compare .no{color:var(--dim);display:inline-flex;align-items:center;gap:7px}
.compare .yes svg,.compare .no svg{width:16px;height:16px}

/* ---------------- faq ---------------- */

.faq{display:flex;flex-direction:column;gap:10px;max-width:820px;margin:0 auto}
.qa{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;font-size:16px;font-weight:700;letter-spacing:-.015em;
  transition:background-color var(--t) var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:var(--surface-2)}
.qa summary svg{width:20px;height:20px;color:var(--muted);flex:0 0 auto;
  transition:transform var(--t) var(--ease)}
.qa[open] summary svg{transform:rotate(180deg)}
.qa .qa-body{padding:0 22px 22px;font-size:15px;line-height:1.68;color:var(--muted)}
.qa .qa-body a{color:var(--violet-2);text-decoration:underline;text-underline-offset:3px}

/* ---------------- cta + footer ---------------- */

.cta-panel{
  position:relative;overflow:hidden;
  padding:56px 28px;border-radius:var(--r-xl);text-align:center;
  background:linear-gradient(160deg,rgba(139,92,246,.20),rgba(139,92,246,.05) 55%,rgba(20,20,26,.6));
  border:1px solid rgba(139,92,246,.3);
}
@media (min-width:900px){.cta-panel{padding:84px 48px}}
.cta-panel h2{margin-bottom:18px}
.cta-panel .lead{margin:0 auto}
.cta-panel .hero-cta{justify-content:center}

.footer{padding:52px 0 40px;border-top:1px solid var(--line);margin-top:20px}
.footer-grid{display:grid;gap:32px}
@media (min-width:820px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer h4{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.footer ul{display:flex;flex-direction:column;gap:10px}
.footer a{font-size:14.5px;color:var(--muted);transition:color var(--t) var(--ease)}
.footer a:hover{color:var(--text)}
.footer .brand{font-size:24px;margin-bottom:12px}
.footer p{font-size:14px;color:var(--dim);line-height:1.6;max-width:34ch}
.footer-base{
  margin-top:38px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--dim);
}

/* screens inside mockups reuse the app's own components, so keep them tight */
.device .card{margin-bottom:12px}
.device .weekstrip{margin-bottom:4px}
.device .dash{padding-top:8px}