:root{
  --red:#ff375f; --blue:#0a84ff; --green:#34c759; --purple:#5e5ce6; --purple2:#bf5af2; --orange:#ff9f0a;
  --ink:#1d1d1f; --gray1:#515154; --gray2:#86868b; --gray3:#a1a1a6;
  --line:#e1e1e4; --soft:#f5f5f7; --soft2:#f0f0f2;
  --grad-brand: linear-gradient(135deg,var(--red),var(--blue));
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{margin:0;background:#fff;font-family:-apple-system,'SF Pro Display','SF Pro Text',system-ui,sans-serif;color:var(--ink);}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 56px;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* Page-wide cap so every section balances the same way the design intended:
   content never exceeds 1280px, and stays centered on wide screens. */
.nav,.hero-inner,.features,.pricing,.footer-top,.footer-bottom{max-width:1280px;margin-left:auto;margin-right:auto;}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 56px;position:relative;z-index:20;}
.logo{display:flex;align-items:center;gap:11px;}
.logo-mark{width:32px;height:32px;border-radius:9px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;flex:none;}
.logo-text{font-size:17px;font-weight:600;letter-spacing:-.02em;}
.logo-text .amp{color:var(--red);}
.nav-links{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:500;color:var(--gray1);}
.btn-download{padding:9px 20px;border-radius:12px;background:var(--grad-brand);color:#fff;font-weight:600;cursor:pointer;border:none;font-size:14px;}
.btn-download:hover{text-decoration:none;filter:brightness(1.05);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;}

/* Hero */
.hero{width:100%;background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);}
.hero-inner{display:flex;align-items:center;gap:40px;padding:60px 0 90px 56px;}
.hero-copy{flex:1;display:flex;flex-direction:column;gap:22px;max-width:520px;}
.badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:13px;font-weight:600;color:var(--red);background:rgba(255,55,95,.09);padding:7px 14px;border-radius:20px;}
.hero-copy h1{margin:0;font-size:56px;line-height:1.05;font-weight:700;letter-spacing:-.045em;}
.hero-copy p.lead{margin:0;font-size:20px;line-height:1.55;color:var(--gray1);}
.store-row{display:flex;gap:14px;padding-top:8px;flex-wrap:wrap;}
.store-btn{display:flex;align-items:center;gap:10px;padding:15px 26px;border-radius:15px;font-size:16px;font-weight:600;cursor:pointer;}
.store-btn.dark{background:var(--ink);color:#fff;}
.store-btn.dark:hover{background:#000;text-decoration:none;}
.store-btn.light{background:#fff;border:1px solid var(--line);color:var(--ink);}
.store-btn.light:hover{background:var(--soft);text-decoration:none;}
/* Until each store publishes. Remove this rule and the two `data-pending`
   attributes in index.html on launch day — the hrefs behind them are already
   the real ones. `pointer-events:none` stops the click; the tooltip explains
   why to anyone who hovers. */
.store-btn[data-pending]{opacity:.5;pointer-events:none;}
.store-pending{font-size:14px;color:var(--gray2);margin:-8px 0 0;}
.social-row{display:flex;align-items:center;gap:12px;padding-top:10px;}
.avatars{display:flex;}
.avatar{width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin-left:-10px;}
.avatar:first-child{margin-left:0;}
.social-row .note{font-size:14px;color:var(--gray2);}

.hero-art{flex:none;position:relative;width:660px;height:640px;}
.hero-art .glow{position:absolute;right:120px;top:30px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,55,95,.22), rgba(10,132,255,.18) 55%, transparent 72%);filter:blur(10px);}
.hero-art .phone-left{position:absolute;left:40px;top:70px;transform:scale(.86) rotate(-6deg);transform-origin:top left;opacity:.96;}
.hero-art .phone-right{position:absolute;left:250px;top:0;animation:floaty 8s ease-in-out infinite;}

/* Phone mockup */
.phone{width:280px;height:580px;background:var(--soft);border-radius:44px;box-shadow:0 40px 80px -30px rgba(0,0,0,.35), 0 0 0 9px var(--ink), 0 0 0 10px #3a3a3c;overflow:hidden;position:relative;display:flex;flex-direction:column;flex:none;}
.phone-shot{width:100%;height:100%;object-fit:cover;}
.phone.no-shot .phone-shot{display:none;}
.phone-mock{display:none;flex-direction:column;height:100%;}
.phone.no-shot .phone-mock{display:flex;}
.phone-status{height:40px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 6px;}
.phone-status .time{font-size:12px;font-weight:600;}
.phone-head{flex:none;padding:4px 18px 10px;display:flex;align-items:center;justify-content:space-between;}
.phone-head .brand{display:flex;align-items:center;gap:9px;}
.phone-head .mark{width:28px;height:28px;border-radius:8px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;}
.phone-head .brand-text{font-size:12px;font-weight:600;color:var(--gray2);}
.phone-head .brand-text .amp{color:var(--red);}
.phone-members{display:flex;align-items:center;}
.phone-members span{width:24px;height:24px;border-radius:50%;border:2px solid var(--soft);margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;}
.phone-members span:first-child{margin-left:0;}
.phone-title{flex:none;padding:0 18px 10px;}
.phone-title h3{margin:0 0 2px;font-size:22px;font-weight:700;letter-spacing:-.03em;}
.phone-title p{margin:0;font-size:12px;color:var(--gray2);}
.phone-body{flex:1;overflow:hidden;padding:2px 14px 16px;display:flex;flex-direction:column;gap:9px;}
.phone-row{background:#fff;border-radius:18px;padding:10px 12px;box-shadow:0 8px 22px -16px rgba(0,0,0,.3);display:flex;align-items:center;gap:11px;}
.phone-row .emoji{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none;}
.phone-row .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.phone-row .name{font-size:13px;font-weight:600;letter-spacing:-.01em;}
.phone-row .tags{display:flex;align-items:center;gap:6px;}
.tag-blue{font-size:10px;font-weight:500;color:var(--blue);background:rgba(10,132,255,.1);padding:2px 7px;border-radius:20px;}
.tag-gray{font-size:10px;font-weight:500;color:var(--gray2);background:var(--soft2);padding:2px 7px;border-radius:20px;}
.phone-cal{background:#fff;border-radius:20px;padding:14px 12px;box-shadow:0 8px 22px -16px rgba(0,0,0,.3);display:grid;grid-template-columns:repeat(7,1fr);gap:6px 2px;}
.phone-cal span.dlabel{font-size:9px;font-weight:600;color:var(--gray3);text-align:center;}
.phone-cal span.day{height:22px;display:flex;align-items:center;justify-content:center;font-size:11px;border-radius:8px;}
.phone-event{background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 8px 22px -16px rgba(0,0,0,.3);display:flex;align-items:center;gap:10px;}
.phone-event .bar{width:4px;height:28px;border-radius:3px;flex:none;}
.phone-event .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.phone-event .name{font-size:12px;font-weight:600;}
.phone-event .time{font-size:10px;color:var(--gray2);}
.phone-cta{position:absolute;left:0;right:0;bottom:0;padding:10px 16px 18px;background:linear-gradient(to top,var(--soft) 62%,rgba(245,245,247,0));display:flex;align-items:center;gap:9px;}
.phone-cta .btn{flex:1;height:40px;border-radius:13px;background:var(--grad-brand);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 12px 26px -12px rgba(255,55,95,.65);}

/* Features */
.features{padding:104px 56px 0;display:flex;flex-direction:column;gap:44px;}
.features-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.features-head h2{margin:0;font-size:42px;font-weight:700;letter-spacing:-.04em;max-width:560px;line-height:1.08;}
.features-head p{margin:0;font-size:17px;line-height:1.55;color:var(--gray2);max-width:360px;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card{background:var(--soft);border-radius:28px;padding:40px;display:flex;flex-direction:column;gap:14px;}
.card:hover{background:var(--soft2);}
.card.wide{grid-column:span 2;flex-direction:row;align-items:center;overflow:hidden;}
.card.wide .card-copy{flex:1;display:flex;flex-direction:column;gap:14px;}
.card.wide .card-phone{flex:none;margin-bottom:-200px;transform:scale(.92);transform-origin:bottom;}
.icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;}
.card h3{margin:0;font-size:24px;font-weight:700;letter-spacing:-.03em;}
.card.wide h3{font-size:28px;}
.card p{margin:0;font-size:16px;line-height:1.55;color:var(--gray1);}
.card.brand{background:var(--grad-brand);color:#fff;}
.card.brand p{color:rgba(255,255,255,.92);}
.card.brand .icon{background:rgba(255,255,255,.2);}
.invite-code{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:10px;}
.invite-code .code{font-size:13px;font-weight:600;letter-spacing:.06em;padding:8px 14px;border-radius:11px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);}
.invite-code .label{font-size:13px;opacity:.85;}
.cal-mini{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:10px;}
.cal-mini .days{display:flex;gap:8px;}
.cal-mini .d{flex:1;height:56px;border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;color:var(--gray3);}
.cal-mini .d span{font-size:15px;font-weight:600;color:var(--ink);}
.cal-mini .d.active{background:var(--grad-brand);color:rgba(255,255,255,.75);}
.cal-mini .d.active span{color:#fff;}
.cal-mini .ev{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:11px 14px;}
.cal-mini .ev .bar{width:4px;height:26px;border-radius:3px;background:var(--red);flex:none;}
.cal-mini .ev .name{font-size:13.5px;font-weight:600;}
.cal-mini .ev .time{font-size:12px;color:var(--gray2);}

/* Pricing */
.pricing{padding:120px 56px 0;display:flex;gap:56px;align-items:center;flex-wrap:wrap;}
.pricing-copy{flex:1;display:flex;flex-direction:column;gap:14px;min-width:280px;}
.pricing-copy h2{margin:0;font-size:42px;font-weight:700;letter-spacing:-.04em;line-height:1.08;}
.pricing-copy p{margin:0;font-size:18px;line-height:1.55;color:var(--gray1);max-width:420px;}
.plans{flex:none;display:flex;gap:24px;width:700px;max-width:100%;flex-wrap:wrap;}
.plan{flex:1;min-width:260px;background:var(--soft);border-radius:24px;padding:34px;display:flex;flex-direction:column;gap:16px;}
.plan:hover{transform:translateY(-4px);}
.plan.premium{background:var(--grad-brand);color:#fff;}
.plan-label{font-size:15px;font-weight:600;color:var(--gray2);}
.plan.premium .plan-label{color:rgba(255,255,255,.8);}
.plan-price{display:flex;align-items:baseline;gap:6px;}
.plan-price .amount{font-size:44px;font-weight:700;letter-spacing:-.04em;}
.plan-price .period{font-size:15px;color:var(--gray2);}
.plan.premium .plan-price .period{color:rgba(255,255,255,.8);}
.plan-list{display:flex;flex-direction:column;gap:11px;font-size:15px;color:var(--gray1);}
.plan.premium .plan-list{color:rgba(255,255,255,.92);}
.plan-cta{margin-top:auto;text-align:center;padding:13px;border-radius:14px;background:#fff;font-size:15px;font-weight:600;cursor:pointer;}
.plan.premium .plan-cta{color:var(--ink);}

/* Footer */
.site-footer{margin-top:120px;background:var(--soft);padding:64px 56px 40px;display:flex;flex-direction:column;gap:44px;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:60px;flex-wrap:wrap;}
.footer-brand{display:flex;flex-direction:column;gap:12px;max-width:300px;}
.footer-brand .logo{gap:10px;}
.footer-brand .logo-mark{width:28px;height:28px;}
.footer-brand p{margin:0;font-size:13px;line-height:1.6;color:var(--gray2);}
.footer-links{display:flex;gap:72px;font-size:13px;flex-wrap:wrap;}
.footer-links .col{display:flex;flex-direction:column;gap:10px;}
.footer-links .col strong{font-weight:600;}
.footer-links .col span,.footer-links .col a{color:var(--gray2);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:22px;font-size:13px;color:var(--gray3);flex-wrap:wrap;gap:12px;}
.footer-bottom .social{display:flex;gap:18px;}
.footer-bottom .social svg{fill:var(--gray3);}

/* Legal pages (privacy, terms, data deletion) */
.legal-header{border-bottom:1px solid var(--line);}
.legal-back{margin-left:auto;font-size:14px;font-weight:500;color:var(--gray1);}
.legal{padding:56px 0 40px;max-width:760px;}
.legal.narrow{max-width:680px;}
.legal h1{margin:0 0 8px;font-size:36px;font-weight:700;letter-spacing:-.03em;}
.legal .meta{color:var(--gray3);font-size:14px;margin:0 0 40px;}
.legal h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:44px 0 14px;}
.legal h3{font-size:17px;font-weight:700;margin:28px 0 10px;}
.legal p,.legal li{font-size:15.5px;line-height:1.65;color:var(--gray1);}
.legal ul,.legal ol{padding-left:22px;}
.legal li{margin-bottom:8px;}
.legal a{color:var(--blue);}
.legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;}
.legal th,.legal td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--gray1);}
.legal th{font-weight:700;color:var(--ink);background:var(--soft);}
.legal .notice{background:#fff8e6;border:1px solid #f5dfa8;border-radius:14px;padding:16px 18px;margin:20px 0;}
.legal .notice p{margin:0;color:#8a6100;font-size:14.5px;}
.legal .notice strong{color:#6b4e00;}
.legal .todo{background:#fdecea;border:1px solid #f5c4be;border-radius:14px;padding:16px 18px;margin:20px 0;}
.legal .todo p{margin:0 0 8px;color:#8c2a1c;font-size:14.5px;}
.legal .todo p:last-child{margin-bottom:0;}
.legal .todo strong{color:#6e1d12;}
.legal .steps{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin:20px 0;}
.legal .steps ol{margin:0;}
.legal code{background:var(--soft2);padding:2px 6px;border-radius:4px;font-size:13.5px;}
.legal-footer-note{border-top:1px solid var(--line);margin-top:40px;padding:24px 0 40px;font-size:13px;color:var(--gray3);}

/* Responsive */
@media (max-width:960px){
  .wrap,.nav,.hero-inner,.features,.pricing,.site-footer{padding-left:24px;padding-right:24px;}
  .nav-links{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:16px 24px 24px;gap:16px;border-bottom:1px solid var(--line);display:none;}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .hero-inner{flex-direction:column;padding-top:40px;}
  .hero-copy{max-width:100%;}
  .hero-copy h1{font-size:40px;}
  .hero-art{width:100%;height:460px;}
  .hero-art .glow{right:auto;left:50%;transform:translateX(-50%);}
  .hero-art .phone-left{display:none;}
  .hero-art .phone-right{left:50%;transform:translateX(-50%);}
  .features-grid{grid-template-columns:1fr;}
  .card.wide{grid-column:span 1;flex-direction:column;}
  .card.wide .card-phone{display:none;}
  .pricing{flex-direction:column;align-items:stretch;}
  .plans{width:100%;}
}


/* ============================================================
   FEATURE ROWS  —  added for the alternating full-width rows
   Nothing above this line is modified.
   ============================================================ */

/* The screenshots are 1320x2868 (ratio .4603); the frame was 280x580
   (.4828). With object-fit:cover the image filled the width and 28px of
   height was cropped — 14px off the top and 14px off the bottom, that bottom
   band being the tab bar. Matching the ratio crops nothing. */
.phone{height:608px;}

/* A row that spans the whole grid instead of two of three columns. */
.features-grid .card.full{grid-column:span 3;gap:56px;padding:44px 48px;}

/* Phone on the left. .card.wide is already flex-direction:row, so this is
   the whole of it. */
.features-grid .card.wide.flip{flex-direction:row-reverse;}

/* Halo behind the phone.
   On .card-phone rather than .phone, because .phone carries overflow:hidden
   — that is what crops the screenshot — and a glow inside it would be
   clipped to the frame, i.e. invisible.
   It reaches past the frame but stays centred ON the phone rather than
   spreading sideways into the copy; the card's own overflow:hidden crops the
   overspill, which is what makes it read as light rather than as a shape.
   Blurred as well as soft-stopped: a radial gradient alone bands visibly at
   these sizes. */
.features-grid .card.full .card-phone{position:relative;z-index:1;}
.features-grid .card.full .card-phone::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:-40%;right:-40%;top:-26%;bottom:-20%;
  background:
    radial-gradient(54% 46% at 46% 28%, var(--halo-a), transparent 72%),
    radial-gradient(56% 50% at 56% 72%, var(--halo-b), transparent 74%);
  filter:blur(44px);
}
.features-grid .card.full .phone{position:relative;z-index:1;}

/* Icon beside the heading rather than above it. .icon is 46px and the
   heading is 28px with tight leading, so centring on the cross-axis lines
   the icon up with the middle of a single-line title. */
.row-title{display:flex;align-items:center;gap:16px;}
.row-title h3{margin:0;}

.row-points{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:4px;}
.row-points li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--gray1);}
.row-points i{width:7px;height:7px;border-radius:50%;flex:none;margin-top:8px;}
.row-badge{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#7C3AED;background:#f4eafe;padding:6px 12px;border-radius:999px;}

@media (max-width:900px){
  .features-grid .card.full,
  .features-grid .card.wide.flip{flex-direction:column;gap:26px;padding:32px 26px 0;}

  /* The base stylesheet hides .card-phone below 900px. That was right when
     the phone was decoration on one card in a grid; it is wrong now that
     every row is built around its screenshot — hiding them would strip the
     visuals from the device most visitors are on. Restored, and the halo
     with them. A 280px frame fits a 390px viewport with room to spare. */
  .features-grid .card.full .card-phone{display:flex;justify-content:center;}
  .features-grid .card.full .card-phone::before{left:-22%;right:-22%;}

  /* The icon keeps its place beside the title, but the title now wraps to two
     lines at this width, so it aligns to the first line rather than to the
     middle of the block. */
  .row-title{gap:13px;align-items:flex-start;}
  .row-title h3{font-size:22px;}
  .row-title .icon{margin-top:1px;}
}

/* The subscription fine print sat as a third flex item in .pricing, so it
   wrapped to its own line but kept the narrow width of the heading column —
   a short paragraph boxed into a quarter of the page. flex-basis:100% makes
   it span the row instead. It cannot be done by styling .pricing-copy,
   because that class is on the heading block too. */
.pricing .pricing-note{
  flex:0 0 100%;
  max-width:none;
  padding-top:8px;
  text-align:center;
}
.pricing .pricing-note p{
  /* Full width, but not a single 1200px line — that is unreadable. Capped at
     a comfortable measure and centred within the row. */
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:900px){
  .pricing .pricing-note{text-align:left;}
  .pricing .pricing-note p{margin-left:0;margin-right:0;}
}

/* ============================================================
   MOBILE FIXES
   ============================================================ */

@media (max-width:900px){
  /* Both phones on mobile, in the same overlapping arrangement as desktop.
     The base stylesheet hides .phone-left below 900px and re-centres
     .phone-right, which loses the composition entirely.
     Scaling the whole 660px hero-art was tried first and did not work: the
     parent centres that box, so at 660 wide in a 390 viewport it lands at
     left:-135 and the composition drifts off the left edge. The phones are
     positioned and scaled individually instead.
     Note the `animation:none` — .phone-right carries `animation:floaty`,
     whose transform would override the scale here, exactly as it overrode
     the centring before. The float is decoration; losing it on a phone is
     cheaper than losing the second device. */
  .hero-art{ width:100%; height:384px; }

  .hero-art .phone-left{
    display:block;
    left:24px; top:56px;
    transform:scale(.52) rotate(-6deg);
    transform-origin:top left;
  }
  .hero-art .phone-right{
    left:150px; top:0;
    margin-left:0;
    animation:none;
    transform:scale(.60);
    transform-origin:top left;
  }
  .hero-art .glow{
    width:300px; height:300px;
    left:46px; top:10px; right:auto;
    transform:none;
  }

  /* The frame is 608px tall (see the feature-rows block) inside a 460px
     hero-art, so it spills into the section below. Cropping it at the hero
     boundary is the intended look — the phone reads as continuing past the
     fold rather than as a cut-off image. */
  .hero{overflow:hidden;}

  /* Footer columns were left-aligned in a row, which reads as off-centre
     once the brand block above them is centred. */
  .footer-links{justify-content:center;gap:56px;width:100%;}
  .footer-top{text-align:center;}
  .footer-brand{align-items:center;}
  .footer-brand .logo{justify-content:center;}
  .footer-links .col{align-items:center;text-align:center;}
}