/* ================================================================
   POMONET site-wide stylesheet — shared by home + product pages
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#dc2626;
  --red-dark:#b91c1c;
  --ink:#1d1d1f;
  --ink-soft:#424245;
  --gray:#6e6e73;
  --hairline:#d2d2d7;
  --bg:#ffffff;
  --bg-soft:#f5f5f7;
  --bg-dark:#0b0b0e;
  --radius:22px;
  --pay:#059669;
  --time:#2563eb;
  --sign:#7c3aed;
  --max:1080px;
  --wide:1240px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);
  line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ============ TYPOGRAPHY ============ */
h1,h2,h3{letter-spacing:-.022em;line-height:1.08;font-weight:700}
.display{font-size:clamp(2.6rem,7vw,4.6rem)}
.headline{font-size:clamp(2rem,4.6vw,3.3rem)}
.subhead{font-size:clamp(1.1rem,2.2vw,1.45rem);color:var(--gray);font-weight:400;line-height:1.45}
.eyebrow{font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;display:block}

/* ============ NAV (placeholder for the WordPress menu) ============ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav-inner{width:100%;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand img{width:190px;height:auto}
.nav ul{display:flex;gap:24px;font-size:.86rem;color:var(--ink-soft)}
.nav ul a:hover{color:var(--ink)}
.nav ul a[aria-current="page"]{color:#2563eb;font-weight:600}

.nav-toggle{display:none;width:40px;height:40px;background:none;border:none;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.nav-toggle span{position:relative;display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:background .2s ease}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,top .2s ease}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav.nav-open .nav-toggle span{background:transparent}
.nav.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
.nav.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

@media(max-width:760px){
  .nav-inner{position:relative}
  .nav-toggle{display:flex}
  .nav ul{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--bg);
    border-bottom:1px solid var(--hairline);
    box-shadow:0 16px 32px rgba(0,0,0,.1);
    padding:6px 20px 16px;
  }
  .nav ul li{width:100%}
  .nav ul a{display:block;padding:13px 0;border-bottom:1px solid var(--bg-soft)}
  .nav ul li:last-child a{border-bottom:none}
  .nav.nav-open ul{display:flex}
}

/* ============ FREE BADGE ============ */
.badge-free{display:inline-block;color:#ea580c;font-size:2rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.15}
.card .badge-free{font-size:1.6rem;margin:2px 0 8px}

/* ============ BUTTONS ============ */
.btn{display:inline-block;border-radius:980px;padding:13px 28px;font-size:1.02rem;font-weight:600;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;cursor:pointer;border:0}
.btn:hover{transform:translateY(-1px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 24px rgba(220,38,38,.28)}
.btn-red:hover{background:var(--red-dark)}
.btn-pay{background:var(--pay);color:#fff;box-shadow:0 8px 24px rgba(5,150,105,.28)}
.btn-time{background:var(--time);color:#fff;box-shadow:0 8px 24px rgba(37,99,235,.28)}
.btn-sign{background:var(--sign);color:#fff;box-shadow:0 8px 24px rgba(124,58,237,.28)}
.btn-ghost{border:1.5px solid var(--hairline);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.link-arrow{color:var(--red);font-weight:600;font-size:1.05rem}
.link-arrow::after{content:" \203A";font-weight:700}
.link-arrow:hover{text-decoration:underline}

/* ============ LAYOUT ============ */
section{padding:96px 22px}
section[id],div[id]{scroll-margin-top:76px}
.wrap{max-width:var(--max);margin:0 auto}
.wrap-wide{max-width:var(--wide);margin:0 auto}
.center{text-align:center}
.alt{background:var(--bg-soft)}

/* ============ HERO ============ */
.hero{padding:110px 22px 90px;text-align:center;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.hero .display em{font-style:normal;color:var(--red)}
.hero .subhead{max-width:640px;margin:22px auto 0}
.hero-ctas{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:.9rem;color:var(--gray)}
.hero.h-pay{background:linear-gradient(180deg,#fff 0%,#ecfdf5 100%)}
.hero.h-time{background:linear-gradient(180deg,#fff 0%,#eff6ff 100%)}
.hero.h-sign{background:linear-gradient(180deg,#fff 0%,#f5f3ff 100%)}
.hero.h-red{background:linear-gradient(180deg,#fff 0%,#fef2f2 100%)}

/* ============ PRODUCT STRIP CARDS ============ */
.strip{padding:26px 22px 90px;background:var(--bg-soft)}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:var(--wide);margin:0 auto}
@media(max-width:960px){.strip-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.strip-grid{grid-template-columns:1fr}}
.card{
  background:#fff;border-radius:var(--radius);padding:34px 28px;text-align:center;
  box-shadow:0 4px 22px rgba(0,0,0,.05);transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.10)}
.card .icon{width:58px;height:58px;margin:0 auto 18px;border-radius:16px;display:grid;place-items:center;background:#fff;border:1.5px solid var(--hairline)}
.card h3{font-size:1.28rem;margin-bottom:8px}
.card p{color:var(--gray);font-size:.95rem;margin-bottom:16px}
.card .icon svg{width:28px;height:28px;stroke:var(--gray)}

/* ============ DARK SECTION (PomoVoice flagship) ============ */
.voice{background:var(--bg-dark);color:#f5f5f7}
.voice .eyebrow{color:var(--red)}
.voice .subhead{color:#a1a1a6}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:58px}
@media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feature-grid{grid-template-columns:1fr}}
.feature{
  background:#161619;border:1px solid #26262b;border-radius:18px;padding:28px 24px;
  transition:border-color .2s ease,transform .2s ease;
}
.feature:hover{border-color:#3f3f46;transform:translateY(-3px)}
.feature svg{width:26px;height:26px;stroke:var(--red);margin-bottom:14px}
.feature h3{font-size:1.05rem;margin-bottom:6px;color:#fff}
.feature p{font-size:.92rem;color:#a1a1a6}

/* Light feature grid (product pages) */
.feature-grid.light .feature{background:#fff;border-color:#ececf0;box-shadow:0 3px 16px rgba(0,0,0,.04)}
.feature-grid.light .feature h3{color:var(--ink)}
.feature-grid.light .feature p{color:var(--gray)}
.feature-grid.light .feature:hover{border-color:var(--hairline)}
.feature.f-pay svg{stroke:var(--pay)}
.feature.f-time svg{stroke:var(--time)}
.feature.f-sign svg{stroke:var(--sign)}

/* ============ PRICING BOX ============ */
.pricing-box{
  margin-top:64px;background:#161619;border:1px solid #26262b;border-radius:28px;
  display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;
}
@media(max-width:820px){.pricing-box{grid-template-columns:1fr}}
.pricing-left{padding:44px 40px}
.pricing-left h3{font-size:1.8rem;color:#fff;margin-bottom:6px}
.pricing-left .tagline{color:var(--red);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem}
.pricing-left ul{margin:26px 0 30px;columns:2;column-gap:28px;font-size:.95rem;color:#d1d1d6}
@media(max-width:560px){.pricing-left ul{columns:1}}
.pricing-left li{margin-bottom:10px;break-inside:avoid;padding-left:24px;position:relative}
.pricing-left li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.pricing-right{background:#1d1d21;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.addon h4{color:#fff;font-size:1rem;margin-bottom:4px}
.addon p{color:#a1a1a6;font-size:.9rem}

/* ============ SPLIT PRODUCT SECTIONS ============ */
.product{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:860px){.product{grid-template-columns:1fr;gap:40px}}
.product .visual{border-radius:28px;min-height:380px;display:grid;place-items:center;padding:40px}
.product .visual svg{width:100%;max-width:360px;height:auto}
.v-pay{background:linear-gradient(135deg,#ecfdf5,#d1fae5)}
.v-time{background:linear-gradient(135deg,#eff6ff,#dbeafe)}
.v-sign{background:linear-gradient(135deg,#f5f3ff,#ede9fe)}
.v-red{background:linear-gradient(135deg,#fef2f2,#fee2e2)}
.product .eyebrow.pay,.eyebrow.pay{color:var(--pay)}
.product .eyebrow.time,.eyebrow.time{color:var(--time)}
.product .eyebrow.sign,.eyebrow.sign{color:var(--sign)}
.eyebrow.red{color:var(--red)}
.product ul{margin:26px 0 30px}
.product li{margin-bottom:12px;padding-left:30px;position:relative;color:var(--ink-soft)}
.product li::before{content:"";position:absolute;left:2px;top:8px;width:13px;height:7px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);opacity:.55}

/* ============ STEPS (How it works) ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border-radius:var(--radius);padding:36px 30px;box-shadow:0 4px 22px rgba(0,0,0,.05)}
.step .num{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.15rem;margin-bottom:18px}
.step h3{font-size:1.12rem;margin-bottom:8px}
.step p{color:var(--gray);font-size:.95rem}
.num-red{background:var(--red)}
.num-pay{background:var(--pay)}
.num-time{background:var(--time)}
.num-sign{background:var(--sign)}

/* ============ GOODIES ============ */
.goodies-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
@media(max-width:900px){.goodies-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.goodies-grid{grid-template-columns:1fr}}
.goodie{background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 3px 16px rgba(0,0,0,.05)}
.goodie h3{font-size:1.02rem;margin-bottom:8px}
.goodie p{font-size:.92rem;color:var(--gray)}

/* ============ TESTIMONIALS ============ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}
.quote{background:#fff;border-radius:var(--radius);padding:34px 30px;box-shadow:0 4px 22px rgba(0,0,0,.05);display:flex;flex-direction:column}
.quote .stars{color:var(--red);letter-spacing:3px;font-size:.95rem;margin-bottom:16px}
.quote blockquote{font-size:1.05rem;line-height:1.55;font-weight:500;flex:1}
.quote cite{display:block;margin-top:20px;font-style:normal;color:var(--gray);font-size:.9rem}

/* ============ GUARANTEES ============ */
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
@media(max-width:860px){.promise-grid{grid-template-columns:1fr}}
.promise{border:1.5px solid var(--hairline);border-radius:var(--radius);padding:36px 30px;text-align:center}
.promise .big{font-size:2.4rem;font-weight:800;color:var(--red);letter-spacing:-.02em}
.promise h3{font-size:1.15rem;margin:10px 0 8px}
.promise p{color:var(--gray);font-size:.94rem}

/* ============ FINAL CTA ============ */
.final{background:var(--bg-dark);color:#fff;text-align:center}
.final .subhead{color:#a1a1a6;max-width:560px;margin:18px auto 0}

/* ============ FOOTER ============ */
footer{background:var(--bg-soft);border-top:1px solid var(--hairline);padding:36px 20px;font-size:.85rem;color:var(--gray)}
.foot{width:100%;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot ul{display:flex;gap:22px;flex-wrap:wrap}
.foot a:hover{color:var(--ink)}

/* ============ REVEAL ANIMATION ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card,.feature{transition:none}
}

/* ============ COMPETITOR COMPARISON PAGES (vs-* pages + product-page modals) ============ */
.cmp-table{width:100%;border-collapse:collapse;margin:40px 0;font-size:.96rem}
.cmp-table th,.cmp-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--hairline)}
.cmp-table thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);font-weight:700}
.cmp-table td.cmp-no::before{content:"— ";color:var(--gray)}
.cmp-wrap-scroll{overflow-x:auto}
.cmp-source{font-size:.8rem;color:var(--gray);margin-top:10px}
.cmp-table.cmp-sign th.cmp-us,.cmp-table.cmp-sign td.cmp-us{background:#f5f3ff;font-weight:600}
.cmp-table.cmp-sign td.cmp-yes::before{content:"✓ ";color:var(--sign);font-weight:800}
.cmp-table.cmp-pay th.cmp-us,.cmp-table.cmp-pay td.cmp-us{background:#ecfdf5;font-weight:600}
.cmp-table.cmp-pay td.cmp-yes::before{content:"✓ ";color:var(--pay);font-weight:800}
.cmp-table.cmp-time th.cmp-us,.cmp-table.cmp-time td.cmp-us{background:#eff6ff;font-weight:600}
.cmp-table.cmp-time td.cmp-yes::before{content:"✓ ";color:var(--time);font-weight:800}
.cmp-table.cmp-voice th.cmp-us,.cmp-table.cmp-voice td.cmp-us{background:#fef2f2;font-weight:600}
.cmp-table.cmp-voice td.cmp-yes::before{content:"✓ ";color:var(--red);font-weight:800}

.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.why-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.why-grid{grid-template-columns:1fr}}
.why-card{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:0 4px 22px rgba(0,0,0,.05)}
.why-card h3{font-size:1.1rem;margin-bottom:8px}
.why-card p{font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.why-card.cmp-sign h3{color:var(--sign)}
.why-card.cmp-pay h3{color:var(--pay)}
.why-card.cmp-time h3{color:var(--time)}
.why-card.cmp-voice h3{color:var(--red)}

.faq-item{max-width:760px;margin:0 auto 22px}
.faq-item h3{font-size:1.05rem;margin-bottom:6px}
.faq-item p{color:var(--ink-soft);line-height:1.55}

/* ============ COMPARISON TEASER + MODAL ============ */
.cmp-cta .subhead{max-width:520px;margin:18px auto 0}
.cmp-cta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;max-width:820px;margin:40px auto 0}
@media(max-width:700px){.cmp-cta-grid{grid-template-columns:1fr;max-width:420px}}
.cmp-cta-col{text-align:center;display:flex;flex-direction:column}
.cmp-cta-col .subhead{max-width:none;margin:0 0 20px;min-height:3em;display:flex;align-items:center;justify-content:center}
.cmp-teasers{margin-top:28px;display:flex;flex-direction:column;gap:10px;align-items:center}
.cmp-teaser-link{font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}
.cmp-teaser-link:hover{opacity:.75}
.cmp-teaser-label{font-weight:400;opacity:.7;margin-right:4px}
.cmp-modal-overlay{display:none;position:fixed;inset:0;background:rgba(11,11,14,.6);z-index:999;align-items:center;justify-content:center;padding:24px}
.cmp-modal-overlay.open{display:flex}
.cmp-modal-box{background:#fff;border-radius:var(--radius);max-width:860px;width:100%;max-height:85vh;overflow-y:auto;padding:36px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.cmp-modal-close{position:absolute;top:18px;right:18px;background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--gray);padding:4px 8px}
.cmp-modal-close:hover{color:var(--ink)}
.cmp-modal-box h3{font-size:1.5rem;margin-bottom:6px;padding-right:32px}
.cmp-modal-box .cmp-modal-subhead{color:var(--gray);font-size:.95rem;margin-bottom:22px}
.cmp-modal-box .cmp-table{margin:0 0 24px}
.cmp-modal-cta{display:inline-block;margin-top:4px}
@media(max-width:600px){
  .cmp-modal-box{padding:24px;max-height:90vh}
}