@font-face { font-family:IRANSans; src:url('assets/fonts/IRANSansMobile.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:IRANSans; src:url('assets/fonts/IRANSansMobile-Medium.ttf') format('truetype'); font-weight:500 600; font-display:swap; }
@font-face { font-family:IRANSans; src:url('assets/fonts/IRANSansMobile-Bold.ttf') format('truetype'); font-weight:700 900; font-display:swap; }

:root { --navy:#102a36; --navy-deep:#081c26; --ink:#17323e; --brand:#00a86b; --brand-dark:#008557; --mint:#ddfaeb; --paper:#f6f8f7; --white:#fff; --muted:#647781; --line:#dce6e2; --purple:#6c58e7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:IRANSans,Tahoma,sans-serif; font-size:16px; line-height:1.9; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } button { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; z-index:20; top:-5rem; right:1rem; color:var(--navy); background:#fff; padding:.7rem 1rem; border-radius:.8rem; box-shadow:0 8px 20px #0002; }.skip-link:focus { top:1rem; }

.site-header { position:relative; z-index:5; width:min(1240px,calc(100% - 48px)); height:82px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { display:inline-flex; align-items:center; gap:.6rem; color:var(--navy); font-size:1.2rem; font-weight:800; letter-spacing:-.04em; }.brand-mark { display:grid; place-items:center; width:40px; height:40px; overflow:hidden; background:#fff; border:1px solid #dbe5e1; border-radius:13px 13px 4px 13px; box-shadow:0 8px 14px #00a86b1c; }.brand-mark img { width:100%; height:100%; object-fit:cover; }
.main-nav { display:flex; align-items:center; gap:1.8rem; color:#50656d; font-size:.83rem; font-weight:600; }.main-nav a { transition:color .2s; }.main-nav a:hover { color:var(--brand-dark); }.menu-button { display:none; border:0; background:transparent; padding:.5rem; }

.hero { position:relative; isolation:isolate; overflow:hidden; width:min(1320px,calc(100% - 32px)); min-height:625px; margin:0 auto 42px; padding:68px clamp(30px,6vw,90px); display:grid; grid-template-columns:minmax(0,.97fr) minmax(460px,1.03fr); align-items:center; gap:2rem; color:#fff; background:radial-gradient(circle at 88% 19%,#175565 0,transparent 31%),radial-gradient(circle at 22% 100%,#0d5b50 0,transparent 38%),linear-gradient(125deg,var(--navy-deep),var(--navy)); border-radius:32px; box-shadow:0 26px 60px #0d293122; }
.hero:before { content:''; position:absolute; z-index:-1; top:-90px; right:37%; width:370px; height:370px; border:1px solid #fff1; border-radius:50%; box-shadow:0 0 0 52px #fff0,0 0 0 105px #fff0; }.hero:after { content:''; position:absolute; z-index:-1; bottom:-180px; left:-60px; width:440px; height:330px; background:linear-gradient(130deg,#00bc7533,#b7ff4130); filter:blur(5px); border-radius:50%; transform:rotate(-14deg); }
.eyebrow { display:flex; align-items:center; gap:.5rem; margin:0 0 .9rem; color:#6ef3b4; font-size:.76rem; font-weight:700; letter-spacing:.01em; }.eyebrow span { width:24px; height:1px; background:currentColor; }.hero h1 { max-width:620px; margin:0; color:#fff; font-size:clamp(2.65rem,4.1vw,4.6rem); line-height:1.34; letter-spacing:-.085em; font-weight:800; }.hero h1 em { color:#7af1b9; font-style:normal; }.hero-lede { max-width:570px; margin:1.4rem 0 1.8rem; color:#c9d8db; font-size:.98rem; line-height:2.05; }.hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; }.button { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:50px; padding:.78rem 1.18rem; border-radius:14px; font-size:.84rem; font-weight:700; transition:transform .2s,box-shadow .2s,background .2s; }.button:hover { transform:translateY(-3px); }.button-primary { color:#05261d; background:linear-gradient(135deg,#82f0bb,#26c984); box-shadow:0 12px 25px #00b57236; }.button-primary:hover { box-shadow:0 15px 32px #00b5725c; }.button-ghost { color:#eef8f4; border:1px solid #b2d6cc65; background:#ffffff0c; }.button-ghost:hover { background:#ffffff16; }.button-light { color:#073126; background:#aaf38a; }
.hero-proof { display:flex; flex-wrap:wrap; gap:.75rem 1.6rem; margin-top:2.2rem; color:#a9c4c4; font-size:.72rem; }.hero-proof span { display:flex; flex-direction:column; }.hero-proof b { color:#fff; font-size:.77rem; }

.hero-art { position:relative; align-self:stretch; min-height:485px; }.aurora { position:absolute; z-index:-1; border-radius:999px; filter:blur(2px); }.aurora-one { width:310px; height:310px; top:66px; right:20%; background:#41d89b42; }.aurora-two { width:300px; height:300px; bottom:-32px; left:0; border:1px solid #fff2; }.phone-shot { position:absolute; overflow:hidden; background:#101820; border:8px solid #101820; border-radius:31px; box-shadow:0 26px 54px #001b2052; }.phone-shot:before { content:''; position:absolute; z-index:1; top:0; right:50%; width:80px; height:18px; background:#101820; border-radius:0 0 13px 13px; transform:translateX(50%); }.phone-shot img { width:100%; height:100%; object-fit:cover; object-position:top; }.hero-phone { z-index:2; top:4px; right:19%; width:242px; height:466px; animation:phone-bob 5.5s ease-in-out infinite; }.mini-shot { z-index:3; width:135px; height:226px; bottom:20px; left:4%; border-width:6px; border-radius:23px; transform:rotate(-8deg); animation:card-bob 6.5s ease-in-out infinite .4s; }.mini-shot:before { width:50px; height:12px; } @keyframes phone-bob { 0%,100%{transform:translateY(0) rotate(2deg)} 50%{transform:translateY(-13px) rotate(0)} } @keyframes card-bob { 0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translateY(11px) rotate(-6deg)} }

.download-section { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:38px; display:grid; grid-template-columns:.82fr 1.18fr; gap:3rem; align-items:center; background:#fff; border:1px solid #dce9e3; border-radius:26px; box-shadow:0 18px 38px #143f3810; }.download-copy .eyebrow { color:var(--brand-dark); }.download-copy h2 { margin:0; color:var(--navy); font-size:clamp(1.8rem,2.6vw,2.7rem); line-height:1.55; letter-spacing:-.07em; }.download-copy p:last-child { margin:.75rem 0 0; color:var(--muted); font-size:.82rem; line-height:2; }.store-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }.store-card { min-width:0; display:grid; grid-template-columns:37px 1fr auto; align-items:center; gap:.58rem; min-height:66px; padding:.55rem .65rem; border:1px solid #dfe9e4; border-radius:15px; color:#213b43; background:#fbfdfc; transition:transform .18s,border-color .18s,box-shadow .18s; }.store-card:not(.disabled):hover { border-color:#76d5ad; transform:translateY(-2px); box-shadow:0 8px 18px #1d574216; }.store-card .store-icon { display:grid; place-items:center; width:37px; height:37px; color:#075540; background:#daf8e9; border-radius:11px; font-family:Arial,sans-serif; font-size:.88rem; font-weight:700; }.store-card.ios .store-icon { color:#2d4150; background:#e9eff3; font-size:1.2rem; }.store-card.pwa .store-icon { color:#5b459e; background:#eae5ff; }.store-card span:nth-child(2) { display:flex; min-width:0; flex-direction:column; line-height:1.35; }.store-card small { color:#7b9091; font-size:.56rem; }.store-card b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.73rem; }.store-card strong { color:var(--brand-dark); font-size:.62rem; font-weight:700; }.store-card.disabled { opacity:.62; cursor:default; }.store-card.disabled strong { color:#7a8b90; }

.section { padding:105px max(24px,calc((100% - 1180px)/2)); }.section-heading { max-width:740px; }.section-heading h2,.feature-intro h2,.faq-intro h2 { margin:0; color:var(--navy); font-size:clamp(2rem,3.1vw,3.45rem); line-height:1.45; letter-spacing:-.07em; }.section-heading>p:last-child,.feature-intro>p,.faq-intro>p { color:var(--muted); font-size:.9rem; }
.products { background:#fff; }.products .eyebrow,.guides .eyebrow,.faq .eyebrow { color:var(--brand-dark); }.product-grid { display:grid; grid-template-columns:1.25fr .875fr .875fr; gap:1rem; margin-top:3rem; }.product-card { position:relative; min-height:355px; display:flex; flex-direction:column; overflow:hidden; padding:26px; background:#eff5f2; border:1px solid #e3ece7; border-radius:24px; }.product-card.featured { color:#fff; background:linear-gradient(145deg,#113e44,#082a35); border-color:transparent; }.product-card h3 { margin:.45rem 0 .5rem; font-size:1.55rem; letter-spacing:-.04em; }.product-card p:not(.product-label) { max-width:340px; margin:0; font-size:.82rem; line-height:1.95; }.product-label { margin:0; color:#718a82; font-size:.68rem; font-weight:700; }.featured .product-label { color:#85edbb; }.product-card ul { z-index:1; padding:0; margin:1.25rem 0 auto; list-style:none; font-size:.74rem; }.product-card li { margin:.2rem 0; }.product-card li:before { content:'✓'; margin-left:.4rem; color:#79ebb4; }.text-link { z-index:1; display:inline-flex; align-items:center; gap:.35rem; margin-top:auto; color:var(--brand-dark); font-size:.78rem; font-weight:700; }.featured .text-link { color:#85edbb; }.product-card-visual { position:absolute; left:-12px; bottom:-88px; width:220px; padding:6px; background:#0b2028; border-radius:21px; box-shadow:0 20px 35px #0004; transform:rotate(-9deg); opacity:.92; }.product-card-visual img { border-radius:15px; }.product-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:17px; }.task-icon { color:#fff; background:linear-gradient(135deg,#806af8,#5945cc); font-size:1.8rem; }.idea-icon { color:#098860; background:#d8fae9; font-size:1.7rem; }.coming-soon { display:inline-flex; align-self:flex-start; margin-top:auto; padding:.36rem .64rem; color:#5a499d; background:#e1dcff; border-radius:8px; font-size:.69rem; font-weight:700; }

.factor-features { display:grid; grid-template-columns:.83fr 1.17fr; gap:5rem; background:linear-gradient(180deg,#ecf6f2,#f6f8f7); }.feature-intro { align-self:start; }.feature-intro .eyebrow { color:var(--brand-dark); }.feature-intro .button { margin-top:1.15rem; }.feature-side { min-width:0; }.feature-list { border-top:1px solid #c8dbd4; }.feature-list article { display:grid; grid-template-columns:54px 1fr; gap:.1rem 1rem; padding:1.15rem 0; border-bottom:1px solid #c8dbd4; }.feature-number { grid-row:span 2; color:var(--brand-dark); font-size:.74rem; font-weight:800; }.feature-list h3 { margin:0; color:var(--navy); font-size:.96rem; }.feature-list p { grid-column:2; margin:0; color:var(--muted); font-size:.78rem; }.feature-gallery { position:relative; height:280px; margin-top:2.5rem; background:linear-gradient(135deg,#0e3b40,#0b7070); border-radius:24px; overflow:hidden; }.feature-gallery:before { content:''; position:absolute; left:-50px; bottom:-100px; width:260px; height:260px; background:#a7f77e62; border-radius:50%; }.gallery-shot { position:absolute; overflow:hidden; border:5px solid #10272d; background:#10272d; box-shadow:0 20px 30px #061d2240; }.gallery-shot img { width:100%; height:100%; object-fit:cover; object-position:top; }.gallery-main { z-index:1; top:24px; right:16%; width:155px; height:255px; border-radius:19px; }.gallery-float { bottom:-4px; left:9%; width:130px; height:205px; border-radius:17px; transform:rotate(-9deg); animation:card-bob 7s ease-in-out infinite 1s; }

.guides { background:#fff; }.split-heading { max-width:none; display:flex; align-items:end; justify-content:space-between; gap:2rem; }.split-heading>p { max-width:390px; margin:0; }.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.8rem; }.guide-card { min-height:244px; padding:24px; border:1px solid var(--line); border-radius:18px; transition:transform .2s,box-shadow .2s,border-color .2s; }.guide-card:hover { border-color:#91d8b6; transform:translateY(-5px); box-shadow:0 18px 34px #17362d13; }.guide-card span { color:var(--brand-dark); font-size:.68rem; font-weight:700; }.guide-card h3 { margin:.65rem 0; color:var(--navy); font-size:1.02rem; line-height:1.95; }.guide-card p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.95; }.guide-card b { display:block; margin-top:1.25rem; color:var(--brand-dark); font-size:.73rem; }.guide-card-image { display:flex; flex-direction:column; overflow:hidden; padding:0 0 22px; }.guide-card-image img { width:100%; height:150px; margin-bottom:17px; object-fit:cover; }.guide-card-image span,.guide-card-image h3,.guide-card-image p,.guide-card-image b { margin-right:22px; margin-left:22px; }.guide-card-image b { margin-top:auto; padding-top:1.1rem; }.magazine-all-link { display:flex; align-items:center; justify-content:center; gap:.5rem; width:max-content; max-width:100%; margin:2rem auto 0; padding:.72rem 1rem; color:var(--brand-dark); border:1px solid #bce5d0; border-radius:12px; background:#f5fffa; font-size:.78rem; font-weight:700; }
.faq { display:grid; grid-template-columns:.72fr 1.28fr; gap:5rem; background:#eef3f1; }.faq-list { border-top:1px solid #cad8d2; }.faq-list details { border-bottom:1px solid #cad8d2; }.faq-list summary { position:relative; cursor:pointer; padding:1.1rem 1.8rem 1.1rem 0; list-style:none; color:var(--navy); font-size:.9rem; font-weight:700; }.faq-list summary:before { content:'+'; position:absolute; right:0; color:var(--brand-dark); font-size:1.35rem; font-weight:400; }.faq-list details[open] summary:before { content:'−'; }.faq-list p { margin:0 0 1.1rem; color:var(--muted); font-size:.8rem; }
.final-cta { position:relative; overflow:hidden; padding:105px 24px; color:#fff; text-align:center; background:linear-gradient(120deg,#062c31,#075342); }.final-cta:before,.final-cta:after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; border:1px solid #fff2; }.final-cta:before { top:-180px; right:10%; }.final-cta:after { bottom:-200px; left:10%; }.final-cta .eyebrow { justify-content:center; color:#92f3bc; }.final-cta h2 { position:relative; margin:0 0 1.7rem; font-size:clamp(2.25rem,4vw,4rem); line-height:1.4; letter-spacing:-.075em; }.site-footer { width:min(1180px,calc(100% - 48px)); margin:auto; padding:36px 0; display:grid; grid-template-columns:1fr 2fr auto; align-items:center; gap:1rem; color:#60747b; font-size:.76rem; }.site-footer .brand { color:var(--navy); }.site-footer p { margin:0; }.site-footer div { display:flex; gap:1rem; }.site-footer a:hover { color:var(--brand-dark); }.site-footer small { grid-column:1/-1; padding-top:1rem; border-top:1px solid var(--line); color:#93a39e; }

.article-header .main-nav { display:flex; }.article-main { padding:72px 24px 104px; background:#fff; }.article { width:min(760px,100%); margin:auto; }.article-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:.38rem; margin:0 0 1.35rem; color:#70878a; font-size:.69rem; }.article-breadcrumb a { color:var(--brand-dark); }.article-breadcrumb b { color:#697d82; font-weight:600; }.article h1 { margin:0; color:var(--navy); font-size:clamp(2.2rem,5vw,4rem); line-height:1.45; letter-spacing:-.065em; }.article h2 { margin:2.35rem 0 .55rem; color:var(--navy); font-size:1.3rem; }.article h3 { margin:1.7rem 0 .3rem; color:var(--navy); font-size:1.03rem; }.article p,.article li { color:#456159; font-size:.9rem; }.article ol { padding-right:1.2rem; }.article hr { border:0; border-top:1px solid var(--line); margin:2rem 0; }.article-lede { margin:1rem 0 0; font-size:1.02rem!important; }.article-meta { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:1rem 0 1.25rem; color:#71868a; font-size:.7rem; }.article-cover { margin:1.6rem 0 2.15rem; overflow:hidden; border-radius:20px; background:#e7f3ed; }.article-cover img { width:100%; aspect-ratio:16/8.2; object-fit:cover; }.article-cover figcaption { padding:.55rem .9rem; color:#6d8183; background:#f6fbf8; font-size:.65rem; }.article-callout { margin-top:2.2rem; padding:1.25rem; border-radius:14px; background:var(--mint); }.article-callout strong { color:var(--brand-dark); }.article-callout p { margin:.35rem 0 .75rem; }.article-sources { margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line); }.article-sources h2 { margin:0 0 .5rem; font-size:1rem; }.article-sources p { margin:.2rem 0; font-size:.73rem; }.article-sources a { color:var(--brand-dark); text-decoration:underline; text-underline-offset:3px; }.article-disclaimer { color:#71868a!important; }

.magazine-main { padding:52px 24px 104px; background:#fff; }.magazine-shell { width:min(1180px,100%); margin:auto; }.magazine-hero { position:relative; overflow:hidden; padding:clamp(30px,6vw,70px); color:#fff; background:radial-gradient(circle at 80% 20%,#1c7769 0,transparent 30%),linear-gradient(125deg,#08242e,#104652); border-radius:28px; }.magazine-hero:after { content:''; position:absolute; width:280px; height:280px; left:-70px; bottom:-150px; border:1px solid #ffffff2c; border-radius:50%; box-shadow:0 0 0 36px #ffffff0d; }.magazine-hero .eyebrow { color:#82f0bb; }.magazine-hero h1 { max-width:620px; margin:0; font-size:clamp(2.3rem,5vw,4.5rem); line-height:1.4; letter-spacing:-.075em; }.magazine-hero p:last-child { max-width:590px; margin:1rem 0 0; color:#c5ddda; font-size:.93rem; }.magazine-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.15rem; margin-top:3rem; }.magazine-card { display:grid; grid-template-columns:42% 1fr; overflow:hidden; min-height:235px; border:1px solid var(--line); border-radius:20px; background:#fff; transition:transform .2s,box-shadow .2s,border-color .2s; }.magazine-card:hover { border-color:#8ed9b4; transform:translateY(-4px); box-shadow:0 15px 32px #17362d14; }.magazine-card img { width:100%; height:100%; object-fit:cover; }.magazine-card-body { display:flex; flex-direction:column; padding:22px; }.magazine-card-body span { color:var(--brand-dark); font-size:.66rem; font-weight:700; }.magazine-card-body h2 { margin:.45rem 0 .55rem; color:var(--navy); font-size:1.08rem; line-height:1.85; }.magazine-card-body p { margin:0; color:var(--muted); font-size:.75rem; line-height:1.95; }.magazine-card-body b { margin-top:auto; padding-top:1rem; color:var(--brand-dark); font-size:.72rem; }

@media (max-width:900px) { .hero { grid-template-columns:1fr 430px; padding-right:42px; padding-left:26px; }.hero h1 { font-size:clamp(2.6rem,5.4vw,3.9rem); }.hero-art { min-height:435px; }.hero-phone { right:17%; width:215px; height:420px; }.mini-shot { width:125px; height:215px; }.download-section { grid-template-columns:1fr; gap:1.7rem; }.factor-features,.faq { gap:3.2rem; }.product-grid { grid-template-columns:1.1fr 1fr; }.product-card.featured { grid-row:span 2; }.idea-card { display:none; } }
@media (max-width:720px) { body { font-size:15px; }.site-header { width:min(100% - 32px,1180px); height:70px; }.menu-button { display:grid; gap:4px; }.menu-button span:not(.sr-only) { width:21px; height:2px; background:var(--navy); }.main-nav { display:none; position:absolute; z-index:5; top:60px; right:0; left:0; flex-direction:column; align-items:stretch; gap:0; padding:.45rem; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 30px #0001; }.main-nav.open { display:flex; }.main-nav a { padding:.65rem .8rem; }.article-header .main-nav { position:static; display:flex; flex-direction:row; gap:.35rem; padding:0; border:0; box-shadow:none; background:transparent; font-size:.67rem; }.article-header .main-nav a { padding:.25rem; }.hero { width:100%; min-height:0; margin:0; padding:48px 24px 28px; grid-template-columns:1fr; border-radius:0; gap:1rem; }.hero h1 { max-width:460px; font-size:clamp(2.35rem,10.8vw,3.45rem); line-height:1.45; }.hero-lede { margin:1.05rem 0 1.45rem; font-size:.89rem; }.hero-proof { margin-top:1.7rem; }.hero-art { min-height:420px; margin:0 -14px; }.hero-phone { top:12px; right:50%; width:206px; height:392px; transform:translateX(45%); animation:phone-bob-mobile 5.5s ease-in-out infinite; }.mini-shot { width:112px; height:192px; bottom:17px; left:2%; }.download-section { width:min(100% - 32px,1180px); margin:26px auto 0; padding:25px 18px; border-radius:20px; }.store-grid { grid-template-columns:1fr; }.section { padding:70px 16px; }.section-heading h2,.feature-intro h2,.faq-intro h2 { font-size:clamp(1.85rem,8vw,2.6rem); }.product-grid,.guide-grid,.magazine-grid { grid-template-columns:1fr; }.product-card.featured { min-height:350px; }.product-card:not(.featured) { min-height:275px; }.idea-card { display:flex; }.factor-features,.faq { grid-template-columns:1fr; gap:2.6rem; }.feature-gallery { height:240px; }.gallery-main { right:18%; width:135px; height:222px; }.gallery-float { width:112px; height:180px; }.split-heading { display:block; }.split-heading>p { margin-top:1rem; }.site-footer { width:min(100% - 32px,1180px); grid-template-columns:1fr; }.site-footer div { grid-row:2; }.site-footer small { grid-column:auto; }.final-cta { padding:75px 16px; }.magazine-main { padding:26px 16px 70px; }.magazine-hero { margin:0 -16px; border-radius:0; }.magazine-card { grid-template-columns:38% 1fr; min-height:195px; }.magazine-card-body { padding:16px; }.magazine-card-body h2 { font-size:.94rem; }.article-main { padding:42px 16px 70px; }.article-cover { margin-top:1.25rem; } }
@media (max-width:375px) { .hero { padding-right:19px; padding-left:19px; }.hero-art { transform:scale(.91); transform-origin:top center; margin-bottom:-34px; }.hero-proof { gap:.5rem 1rem; }.floating-note { font-size:.59rem; } }
@keyframes phone-bob-mobile { 0%,100%{transform:translateX(45%) translateY(0) rotate(2deg)} 50%{transform:translateX(45%) translateY(-10px) rotate(0)} }
/* Official marketplace icons are kept inside their own compact, rounded tile. */
.store-card .store-icon { overflow:hidden; }
.store-card .store-icon img { width:100%; height:100%; object-fit:cover; }

@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* NootPar has a calm paper-blue treatment while keeping the shared product-card layout. */
.note-card { background:#f1f8fb; }
.note-icon { color:#0b5e87; background:#d9f1ff; font-size:1.7rem; }
.task-icon { background:#fff; border:1px solid #dbe5e1; }
.product-card-link { cursor:pointer; transition:transform .2s,box-shadow .2s,border-color .2s; }
.product-card-link:hover { border-color:#8dd9b4; transform:translateY(-5px); box-shadow:0 18px 34px #17362d13; }
.product-icon img { width:100%; height:100%; object-fit:contain; padding:6px; }
.product-page { padding:56px 24px 104px; background:#fff; }
.product-page-shell { width:min(1040px,100%); margin:auto; }
.product-hero { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(2rem,6vw,6rem); align-items:center; padding:clamp(30px,6vw,72px); border:1px solid #dce8e3; border-radius:28px; background:linear-gradient(135deg,#f5fbf8,#edf5f2); }
.product-page-logo { display:grid; place-items:center; width:min(230px,100%); aspect-ratio:1; margin:auto; padding:25px; border:1px solid #d8e8e1; border-radius:32px; background:#fff; box-shadow:0 20px 42px #163c3217; }
.product-page-logo img { width:100%; height:100%; object-fit:contain; }
.product-page .eyebrow { color:var(--brand-dark); }
.product-page h1 { margin:0; color:var(--navy); font-size:clamp(2.3rem,4.6vw,4.2rem); line-height:1.4; letter-spacing:-.075em; }
.product-page-lede { max-width:590px; margin:1rem 0 0; color:var(--muted); font-size:.95rem; }
.product-store-grid { max-width:570px; margin-top:1.8rem; }
.product-store-grid .store-card { min-height:74px; background:#fff; }
.product-page-note { margin:1.2rem 0 0; color:#6d8183; font-size:.74rem; }
@media (max-width:720px) { .product-page { padding:26px 16px 70px; }.product-hero { grid-template-columns:1fr; gap:1.7rem; margin:0 -16px; border-right:0; border-left:0; border-radius:0; }.product-page-logo { width:150px; border-radius:25px; }.product-page h1 { font-size:2.4rem; }.product-store-grid { grid-template-columns:1fr; } }

.products .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:720px) { .products .product-grid { grid-template-columns:1fr; } }