/* ============================================================
   honeyDue web — "Warm Software" design language
   The iOS app leads: its colors (Default/bright theme asset
   catalog), radii, shadows, and components are recreated here
   as live DOM. Light-first; navy (#141B36, the app icon) is
   punctuation only. Fraunces display + Plus Jakarta Sans body
   = the App Store screenshot pair. Honeycomb = brand signature.
   ============================================================ */
:root{
  /* app palette — from Assets.xcassets/Colors/Default */
  --blue:#007AFF; --sky:#5AC8FA; --amber:#FF9500; --red:#FF3B30;
  --ink:#111111; --ink2:#3D3D3D; --bg:#FFFFFF; --bg2:#F2F7F7;
  /* brand extras — app icon + widget */
  --navy:#141B36; --gold:#FCCE38; --cream:#FFF9EE;
  --tint-red:#FDEBEA; --tint-amber:#FFF3DC; --tint-blue:#E8F2FE;
  /* type */
  --display:"Fraunces",serif; --body:"Plus Jakarta Sans",-apple-system,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  /* app geometry */
  --r-md:12px; --r-lg:16px; --r-xl:20px; --r-xxl:24px; --r-full:9999px;
  --shadow-card:0 2px 8px rgba(17,24,51,.06),0 12px 32px rgba(17,24,51,.08);
  --shadow-float:0 6px 16px rgba(17,24,51,.08),0 24px 64px rgba(17,24,51,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:8px;justify-content:center}
.eyebrow .hex{width:12px;height:12px;flex:none}
h2.sec{font-family:var(--display);font-weight:900;font-optical-sizing:auto;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08;letter-spacing:-.015em;text-align:center;margin:14px auto 12px}
p.sec-sub{text-align:center;color:var(--ink2);max-width:52ch;margin:0 auto;font-size:1.05rem}
em.hd{font-style:normal;font-weight:900;color:inherit}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .float1,.float2,.float3{animation:none!important}
}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(17,24,51,.06)}
.nav-in{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;letter-spacing:-.01em}
.brand b{color:var(--amber);font-weight:800}
.nav-links{display:flex;gap:26px;font-size:.92rem;font-weight:600;color:var(--ink2)}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:var(--r-full);padding:11px 22px;font-size:.95rem;transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(0,122,255,.35)}
.btn-blue:hover{box-shadow:0 6px 20px rgba(0,122,255,.45)}
.btn-navy{background:var(--navy);color:#fff}
.btn-lg{padding:15px 30px;font-size:1.05rem}
@media(max-width:720px){.nav-links{display:none}}
/* nav CTA: hidden at top, revealed once the user scrolls */
.nav-in>.btn{opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease}
nav.scrolled .nav-in>.btn{opacity:1;visibility:visible;transform:none}

/* ---------- app screenshot showcase (framed phones, staircase toward center) ---------- */
.showcase{background:var(--navy);padding:80px 0 96px;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.showcase .hexfield{opacity:.07;filter:invert(1)}
.shots{display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1vw,16px);width:fit-content;min-width:100%;margin:0 auto;padding:0 24px}
.ph{flex:none;height:auto;filter:drop-shadow(0 16px 34px rgba(17,24,51,.20));transform-origin:bottom center;opacity:0}
.ph.s{width:clamp(126px,15.5vw,166px)}
.ph.m{width:clamp(154px,19vw,200px)}
.ph.l{width:clamp(188px,23vw,248px)}
@keyframes phonePopIn{from{opacity:0;transform:translateY(60px) scale(.92)}to{opacity:1;transform:none}}
.ph.popped{animation:phonePopIn .7s cubic-bezier(.34,1.56,.64,1) forwards}
.ph.done{opacity:1;transition:transform .4s cubic-bezier(.4,0,.2,1);transform:none}
.ph.done.s:hover{transform:scale(1.49);z-index:10}
.ph.done.m:hover{transform:scale(1.24);z-index:10}
.shots:has(.ph.done.s:hover) .ph.done.l,
.shots:has(.ph.done.m:hover) .ph.done.l{transform:scale(0.82)}
.shots{transition:gap .4s cubic-bezier(.4,0,.2,1)}
.shots:has(.ph.done:hover){gap:clamp(16px,3vw,32px)}

/* ---------- hero ---------- */
.hero{position:relative;padding:72px 0 40px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;background:
  radial-gradient(900px 480px at 78% -8%, #EAF4FF 0%, transparent 60%),
  radial-gradient(700px 420px at 8% 12%, #FFF6E3 0%, transparent 55%),var(--bg)}
.hexfield{position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0L0 8v16l14 8v16M14 0l14 8v16l-14 8' fill='none' stroke='%23141B36' stroke-width='1.3'/%3E%3C/svg%3E");
  background-size:56px 96px;background-attachment:fixed}
.hero-lockup{text-align:center;margin-bottom:40px}
.hero-icon{border-radius:20px;display:block;margin:0 auto 20px;box-shadow:var(--shadow-float)}
.hero-h1{font-family:var(--display);font-weight:900;font-optical-sizing:auto;font-size:clamp(2.4rem,7.5vw,4.4rem);line-height:1.04;letter-spacing:-.02em;text-align:center}
/* nav icon hidden until scrolled */
.nav-icon{opacity:0;transform:scale(.6);transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}
nav.scrolled .nav-icon{opacity:1;transform:scale(1)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero h1 em{font-style:normal;font-weight:900;color:inherit}
.hero .sub{margin:22px 0 30px;font-size:1.35rem;color:var(--ink2);max-width:46ch}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.trust{margin-top:26px;display:flex;flex-direction:column;gap:14px;font-size:1rem;color:var(--ink2);font-weight:600}
.trust span{display:inline-flex;align-items:center;gap:9px}
.trust svg{flex:none}

/* hero UI cluster — recreated app components */
.cluster{position:relative;min-height:540px}
@media(max-width:900px){.cluster{min-height:500px;max-width:430px;margin:0 auto;width:100%}}
.float1{animation:bob 7s ease-in-out infinite}
.float2{animation:bob 8.5s ease-in-out 1.2s infinite}
.float3{animation:bob 6.5s ease-in-out .6s infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--tilt,0deg))}50%{transform:translateY(-10px) rotate(var(--tilt,0deg))}}

/* widget card (home-screen widget recreation) */
.widget{--tilt:-2deg;position:absolute;left:0;top:36px;width:min(340px,88%);background:var(--cream);border-radius:var(--r-xxl);padding:16px;box-shadow:var(--shadow-float);transform:rotate(var(--tilt))}
.wrow{display:flex;align-items:center;gap:12px;border-radius:var(--r-lg);padding:11px 13px;margin-bottom:8px}
.wrow.red{background:var(--tint-red)} .wrow.amber{background:var(--tint-amber)} .wrow.plain{background:rgba(255,255,255,.75)}
.ring{width:22px;height:22px;border-radius:50%;flex:none;border:3px solid var(--amber);background:rgba(255,180,0,.12)}
.wrow.red .ring{border-color:var(--red);background:rgba(255,59,48,.10)}
.wrow .t{font-weight:800;font-size:.92rem;line-height:1.25}
.wrow .m{font-size:.74rem;color:var(--ink2);display:flex;gap:8px;align-items:center}
.wrow .m b.due-red{color:var(--red)} .wrow .m b.due-amber{color:var(--amber)}
.wstats{display:flex;gap:8px;margin-top:10px}
.wchip{flex:1;text-align:center;border-radius:var(--r-lg);padding:9px 4px}
.wchip.red{background:var(--tint-red)} .wchip.amber{background:var(--tint-amber)} .wchip.blue{background:var(--tint-blue)}
.wchip b{display:block;font-size:1.25rem;line-height:1.1}
.wchip.red b{color:var(--red)} .wchip.amber b{color:var(--amber)} .wchip.blue b{color:var(--blue)}
.wchip span{font-size:.68rem;color:var(--ink2);font-weight:600}

/* iOS push notification recreation */
.notif{--tilt:1.5deg;position:absolute;right:0;top:0;z-index:3;width:min(320px,84%);display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:var(--r-xl);padding:13px 15px;box-shadow:var(--shadow-card);transform:rotate(var(--tilt))}
.notif .txt{min-width:0}
.notif .app{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--ink2);text-transform:uppercase}
.notif .tt{font-weight:800;font-size:.9rem}
.notif .bd{font-size:.82rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appicon{width:42px;height:42px;border-radius:11px;background:var(--navy);display:grid;place-items:center;flex:none}

/* dashboard stat card recreation */
.dash{--tilt:2deg;position:absolute;right:8px;bottom:24px;width:min(300px,80%);background:#fff;border-radius:var(--r-xxl);padding:20px;box-shadow:var(--shadow-float);transform:rotate(var(--tilt))}
.dash h4{font-weight:800;font-size:1.02rem;margin-bottom:14px}
.dash .stats{display:flex;justify-content:space-around;margin-bottom:14px}
.dash .stat{text-align:center}
.dash .bubble{width:44px;height:44px;margin:0 auto 6px;border-radius:50%;background:var(--tint-blue);display:grid;place-items:center}
.dash .stat b{font-size:1.5rem;display:block;line-height:1}
.dash .stat span{font-size:.72rem;color:var(--ink2);font-weight:600}
.dash .chips{display:flex;gap:8px}

/* residence mini-card (bottom-left) */
.res{--tilt:-1deg;position:absolute;left:14px;bottom:0;width:min(280px,76%);background:#fff;border-radius:var(--r-xl);padding:14px 16px;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:12px;transform:rotate(var(--tilt))}
.res .sq{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#2E8EFF,#0063DC);display:grid;place-items:center;flex:none}
.res .nm{font-weight:800;font-size:.95rem}
.res .st{font-size:.74rem;color:var(--ink2);font-weight:600}
.res .st b.b{color:var(--blue)} .res .st b.r{color:var(--red)}
.res .star{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--tint-amber);display:grid;place-items:center;flex:none}

/* ---------- pain stat ---------- */
.pain{padding:88px 0 84px;background:var(--bg2)}
.pain .big{font-family:var(--display);font-weight:900;font-size:clamp(4rem,11vw,8rem);line-height:1;text-align:center;color:var(--navy);letter-spacing:-.03em}
.pain .big i{font-style:italic;color:var(--amber)}
.pain p{text-align:center;max-width:48ch;margin:18px auto 0;color:var(--ink2);font-size:1.12rem}

/* ---------- bento ---------- */
.bento-wrap{padding:96px 0}
.bento{margin-top:48px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.tile{background:var(--bg2);border-radius:var(--r-xxl);padding:26px;overflow:hidden;position:relative;transition:transform .25s ease,box-shadow .25s ease}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.tile h3{font-weight:800;font-size:1.16rem;letter-spacing:-.01em;margin-bottom:6px}
.tile p{color:var(--ink2);font-size:.94rem;max-width:40ch}
.tile .demo{margin-top:20px}
.t-a{grid-column:span 4}.t-b{grid-column:span 2}.t-c{grid-column:span 2}.t-d{grid-column:span 2}.t-e{grid-column:span 2}.t-f{grid-column:span 3}.t-g{grid-column:span 3}
@media(max-width:880px){.t-a,.t-b,.t-c,.t-d,.t-e,.t-f,.t-g{grid-column:span 6}}

/* toggle rows (notifications recreation) */
.togrow{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-lg);padding:12px 14px;margin-bottom:8px;box-shadow:0 1px 3px rgba(17,24,51,.05)}
.badge{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;font-weight:800;font-size:.85rem}
.badge.amber{background:var(--amber)} .badge.red{background:var(--red)} .badge.blue{background:var(--blue)}
.togrow .tt{font-weight:700;font-size:.9rem;line-height:1.2}
.togrow .sb{font-size:.74rem;color:var(--ink2)}
.switch{margin-left:auto;width:44px;height:26px;border-radius:var(--r-full);background:var(--blue);position:relative;flex:none;transition:background .35s ease}
.switch::after{content:"";position:absolute;top:3px;left:calc(100% - 23px);width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .35s cubic-bezier(.34,1.2,.64,1)}
.switch.off{background:#D2D6DB}.switch.off::after{left:3px}

/* frequency picker recreation */
.freq{background:#fff;border-radius:var(--r-xl);padding:8px 0;box-shadow:0 1px 3px rgba(17,24,51,.05);max-width:250px}
.freq div{padding:9px 18px 9px 44px;font-size:.92rem;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:10px;transition:color .3s ease,padding-left .3s ease}
.freq div.on{color:var(--ink);padding-left:18px}
.freq div.on::before{content:"✓";color:var(--blue);font-weight:800}

/* template rows */
.tplrow{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-lg);padding:11px 14px;margin-bottom:8px;box-shadow:0 1px 3px rgba(17,24,51,.05)}
.tplrow .ic{width:30px;height:30px;border-radius:50%;background:var(--tint-blue);display:grid;place-items:center;flex:none;font-size:.9rem}
.tplrow .tt{font-weight:700;font-size:.9rem}
.tplrow .sb{font-size:.74rem;color:var(--ink2)}
.plus{margin-left:auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--blue);color:var(--blue);display:grid;place-items:center;flex:none;transition:transform .15s ease,opacity .3s ease,background .3s ease,color .3s ease,border-color .3s ease}

/* bento tile animations */
.plus{transition:transform .15s ease,opacity .3s ease}
.plus.tapped{transform:scale(1.4)}
.ic.ic-done{background:var(--blue)!important;color:#fff;font-size:1rem;transition:background .3s ease}
@keyframes arrowNudge{0%,100%{transform:translateX(0)}40%{transform:translateX(7px)}70%{transform:translateX(-3px)}}
.plus.nudge{animation:arrowNudge .5s ease}
.av{transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}
.av.hidden{opacity:0;transform:scale(0)}

/* avatars / sharing */
.avrow{display:flex;align-items:center;margin-top:4px}
.av{width:38px;height:38px;border-radius:50%;border:3px solid var(--bg2);display:grid;place-items:center;font-weight:800;font-size:.82rem;color:#fff;margin-left:-8px}
.av:first-child{margin-left:0}
.av1{background:var(--blue)}.av2{background:var(--amber)}.av3{background:#34C759}.av4{background:var(--sky)}

/* tab bar recreation */
.tabbar{display:flex;gap:6px;background:#fff;border-radius:var(--r-full);padding:7px;box-shadow:0 1px 4px rgba(17,24,51,.08);width:max-content}
.tab{padding:9px 18px;border-radius:var(--r-full);font-size:.86rem;font-weight:700;color:var(--ink2);display:flex;gap:7px;align-items:center}
.tab.on{background:var(--tint-blue);color:var(--blue)}

/* ---------- steps ---------- */
.how{padding:96px 0;background:var(--bg2)}
.steps{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border-radius:var(--r-xxl);padding:30px;box-shadow:0 1px 4px rgba(17,24,51,.05)}
.step .n{font-family:var(--display);font-style:italic;font-weight:600;font-size:2.6rem;color:var(--amber);line-height:1}
.step h3{font-weight:800;font-size:1.14rem;margin:12px 0 6px}
.step p{color:var(--ink2);font-size:.95rem}

/* ---------- faq ---------- */
.faq{padding:96px 0}
.faq-list{max-width:720px;margin:44px auto 0}
.qa{border-bottom:1px solid rgba(17,24,51,.1);padding:22px 6px}
.qa:last-child{border-bottom:none}
.qa h3{font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.qa p{margin-top:10px;color:var(--ink2);font-size:.98rem;max-width:60ch}

/* ---------- final CTA / footer ---------- */
.cta-band{background:var(--navy);color:#F5F2EA;padding:96px 0;position:relative;overflow:hidden}
.cta-band .hexfield{opacity:.07;filter:invert(1)}
.cta-band h2{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;text-align:center;letter-spacing:-.02em;margin:0 auto}
.cta-band h2 em{font-style:normal;font-weight:900;color:inherit}
.cta-band .sub{text-align:center;color:#B9BDCB;margin:18px auto 34px;max-width:44ch}
.cta-band .row{display:flex;justify-content:center}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 6px 24px rgba(252,206,56,.35)}
footer{background:var(--navy);color:#8E93A8;padding:34px 0 46px;border-top:1px solid rgba(255,255,255,.08);font-size:.88rem}
.foot-in{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:#B9BDCB}
footer a:hover{color:#fff}
.foot-links{display:flex;gap:22px}

/* sticky mobile CTA */
.sticky-cta{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:none;justify-content:center;transform:translateY(90px);transition:transform .35s ease}
.sticky-cta.show{transform:none}
.sticky-cta .btn{width:100%;justify-content:center;box-shadow:0 10px 30px rgba(0,122,255,.45)}
@media(max-width:720px){.sticky-cta{display:flex}}

/* CSP-safe utility classes (no inline styles allowed by prod CSP) */
.svgdefs{position:absolute}
.brandicon{border-radius:8px}
.appicon-img{border-radius:11px;display:block}
.hexblue{color:var(--blue)}
.ic.ressq{background:linear-gradient(135deg,#2E8EFF,#0063DC);border-radius:9px}
.miniwidget{background:var(--cream);border-radius:var(--r-xl);padding:12px;max-width:320px;box-shadow:0 1px 4px rgba(17,24,51,.06)}
.wrow.tight{margin-bottom:6px}
.wstats.tight-top{margin-top:6px}
.relwrap{position:relative}
.bluelink{color:var(--blue)}