/* Product pages (crm.html, learning-platform.html, websites.html). Built from the Oct 28 product page mockups.
   Every rule is scoped to :is(main.pp,div.pp) so nothing leaks into the rest of the site. */
:is(main.pp,div.pp){--teal:var(--accent);--teal-l:var(--accent-soft);--muted:var(--ink-soft);font-size:16px;line-height:1.5;color:var(--ink);overflow-x:clip}
:is(main.pp,div.pp) h1,:is(main.pp,div.pp) h2,:is(main.pp,div.pp) h3,:is(main.pp,div.pp) h4{color:var(--navy);line-height:1.15;letter-spacing:-.01em}
:is(main.pp,div.pp) p{margin:0 0 10px}
:is(main.pp,div.pp) .rd-btn.pp-lg{height:auto;min-height:52px;padding:14px 24px;font-size:16px;line-height:1.3}
:is(main.pp,div.pp) .rd-btn{transition:transform .15s,box-shadow .15s,background .15s}
:is(main.pp,div.pp) .rd-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,117,104,.35)}
:is(main.pp,div.pp) .pp-ghost{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.45)}
:is(main.pp,div.pp) .pp-ghost:hover{background:rgba(255,255,255,.08)}
:is(main.pp,div.pp) .cta2 .ctas{margin-top:28px}
:is(main.pp,div.pp) .hero2 .ctas{margin-top:4px}
:is(main.pp,div.pp) h1,:is(main.pp,div.pp) h2,:is(main.pp,div.pp) h3,:is(main.pp,div.pp) h4{font-family:var(--f-head);color:var(--navy);margin:0;line-height:1.15}
:is(main.pp,div.pp) .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
:is(main.pp,div.pp) .price{font:800 44px/1 var(--f-head);color:var(--navy)}
:is(main.pp,div.pp) .price small{font:500 16px var(--f-body);color:var(--muted)}
:is(main.pp,div.pp) .fee{margin-top:10px;background:var(--teal-l);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--navy)}
:is(main.pp,div.pp) .fee b{font-weight:700}
:is(main.pp,div.pp) .muted{color:var(--muted)}
:is(main.pp,div.pp) ul.ticks{list-style:none;padding:0;margin:18px 0 0}
:is(main.pp,div.pp) ul.ticks li{padding:6px 0 6px 26px;position:relative;font-size:15px}
:is(main.pp,div.pp) ul.ticks li:before{content:"";position:absolute;left:2px;top:12px;width:12px;height:7px;border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);transform:rotate(-45deg)}
:is(main.pp,div.pp) section{padding:56px 0}
:is(main.pp,div.pp) .sec-h{text-align:center;margin-bottom:28px}
:is(main.pp,div.pp) .sec-h h2{font-size:30px}
:is(main.pp,div.pp) .sec-h p{color:var(--muted);margin:8px 0 0}
:is(main.pp,div.pp) .fine{font-size:13px;color:var(--muted);text-align:center;margin-top:18px}
:is(main.pp,div.pp) .hero2{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 500px at 85% 20%,rgba(10,117,104,.45),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(60,198,174,.18),transparent 60%),linear-gradient(180deg,#14263F 0%,#1C3354 100%);padding:72px 0 96px}
:is(main.pp,div.pp) .hero2:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
:is(main.pp,div.pp) .hero2 .rd-wrap{position:relative;display:grid;grid-template-columns:5fr 6fr;gap:48px;align-items:center}
:is(main.pp,div.pp) .hero2 h1{color:#fff;font-size:48px;font-weight:800;letter-spacing:-.01em;margin:0 0 16px}
:is(main.pp,div.pp) .hero2 p.sub{color:#c9d4e3;font-size:18px;margin:0 0 18px}
:is(main.pp,div.pp) .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(60,198,174,.12);border:1px solid rgba(60,198,174,.35);color:#A6E8DC;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:18px}
:is(main.pp,div.pp) .pill i{width:7px;height:7px;border-radius:50%;background:#3CC6AE;box-shadow:0 0 0 4px rgba(60,198,174,.2)}
:is(main.pp,div.pp) .pl{font-size:15px;color:#dbe4ef;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;margin:0 0 24px}
:is(main.pp,div.pp) .pl b{color:#3CC6AE}
:is(main.pp,div.pp) .ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
:is(main.pp,div.pp) .tlink{color:#A6E8DC;font-weight:600;font-size:15px;text-decoration:none}
:is(main.pp,div.pp) .tlink:after{content:" \2192"}
:is(main.pp,div.pp) .stage{position:relative;perspective:1800px}
:is(main.pp,div.pp) .stage:before{content:"";position:absolute;inset:8% 4% -6% 8%;background:radial-gradient(closest-side,rgba(60,198,174,.55),transparent);filter:blur(30px);z-index:0}
:is(main.pp,div.pp) .tilt{position:relative;z-index:1;transform:rotateY(-9deg) rotateX(4deg) rotate(.5deg);transform-origin:left center;transition:transform .5s}
:is(main.pp,div.pp) .stage:hover .tilt{transform:rotateY(-4deg) rotateX(2deg)}
:is(main.pp,div.pp) .float{position:absolute;z-index:2;right:-10px;bottom:-34px;width:46%}
:is(main.pp,div.pp) .float.phone{width:22%;right:-6px;bottom:-30px}
:is(main.pp,div.pp) .shot{background:#fff;border:1px solid rgba(20,38,63,.12);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(20,38,63,.35),0 12px 24px -12px rgba(20,38,63,.2)}
:is(main.pp,div.pp) .shot .bar{height:30px;background:linear-gradient(180deg,#F4F6F9,#EBEFF4);border-bottom:1px solid var(--line);display:flex;gap:6px;align-items:center;padding:0 12px}
:is(main.pp,div.pp) .shot .bar i{width:10px;height:10px;border-radius:50%;display:block;background:#d5dbe3}
:is(main.pp,div.pp) .shot .bar i:nth-child(1){background:#F3A0A0}
:is(main.pp,div.pp) .shot .bar i:nth-child(2){background:#F4D58D}
:is(main.pp,div.pp) .shot .bar i:nth-child(3){background:#9FD8B5}
:is(main.pp,div.pp) .shot .bar span{margin-left:10px;flex:1;max-width:260px;height:16px;border-radius:6px;background:#fff;border:1px solid var(--line);font-size:10px;color:#8a97a8;line-height:15px;padding:0 8px;overflow:hidden;white-space:nowrap}
:is(main.pp,div.pp) .shot img{display:block;width:100%;height:auto}
:is(main.pp,div.pp) .shot a{display:block}
:is(main.pp,div.pp) .phonef{border:6px solid #14263F;border-radius:22px;overflow:hidden;background:#14263F;box-shadow:0 24px 40px -12px rgba(20,38,63,.5)}
:is(main.pp,div.pp) .phonef img{display:block;width:100%;aspect-ratio:780/1688;object-fit:cover;object-position:top;border-radius:15px}
:is(main.pp,div.pp) .strip{background:#fff;border-bottom:1px solid var(--line)}
:is(main.pp,div.pp) .strip .rd-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
:is(main.pp,div.pp) .strip .s{display:flex;gap:12px;align-items:center;padding:22px 18px;font-size:14px;color:var(--muted);border-left:1px solid var(--line)}
:is(main.pp,div.pp) .strip .s:first-child{border-left:0}
:is(main.pp,div.pp) .strip b{display:block;color:var(--navy);font-family:var(--f-head);font-size:15px}
:is(main.pp,div.pp) .ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#E7F1F0,#D3E8E5);color:var(--teal)}
:is(main.pp,div.pp) .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(main.pp,div.pp) section{padding:88px 0}
:is(main.pp,div.pp) .band{background:linear-gradient(180deg,#F6F8FA,#EEF3F7)}
:is(main.pp,div.pp) .band2{background:radial-gradient(800px 300px at 100% 0%,rgba(10,117,104,.08),transparent 70%),#F6F8FA}
:is(main.pp,div.pp) .kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
:is(main.pp,div.pp) .sec-h{max-width:720px;margin:0 auto 44px;text-align:center}
:is(main.pp,div.pp) .sec-h h2{font-size:36px;letter-spacing:-.01em}
:is(main.pp,div.pp) .sec-h p{font-size:17px}
:is(main.pp,div.pp) .row2{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:center}
:is(main.pp,div.pp) .row2+.row2{margin-top:96px}
:is(main.pp,div.pp) .row2.rev .txt{order:2}
:is(main.pp,div.pp) .row2 h2{font-size:32px;margin-bottom:14px;letter-spacing:-.01em}
:is(main.pp,div.pp) .row2 p{color:#3b4a5e;font-size:16.5px;margin:0 0 14px}
:is(main.pp,div.pp) .row2 .vis{position:relative}
:is(main.pp,div.pp) .row2 .vis:before{content:"";position:absolute;inset:10% -3% -5% 6%;border-radius:24px;background:linear-gradient(135deg,rgba(10,117,104,.18),rgba(20,38,63,.06));z-index:0}
:is(main.pp,div.pp) .row2.rev .vis:before{inset:10% 6% -5% -3%}
:is(main.pp,div.pp) .row2 .vis>*{position:relative;z-index:1}
:is(main.pp,div.pp) ul.mini{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
:is(main.pp,div.pp) ul.mini li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
:is(main.pp,div.pp) ul.mini li .ic{width:30px;height:30px;border-radius:8px}
:is(main.pp,div.pp) ul.mini li .ic svg{width:16px;height:16px}
:is(main.pp,div.pp) .tabs>input{position:absolute;opacity:0;pointer-events:none}
:is(main.pp,div.pp) .tablist{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}
:is(main.pp,div.pp) .tablist label{cursor:pointer;display:inline-flex;gap:8px;align-items:center;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--navy);transition:all .15s}
:is(main.pp,div.pp) .tablist label svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:is(main.pp,div.pp) .tablist label:hover{border-color:var(--teal)}
:is(main.pp,div.pp) .panel{display:none;grid-template-columns:1fr 1.5fr;gap:48px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:0 20px 50px -30px rgba(20,38,63,.35)}
:is(main.pp,div.pp) .panel h3{font-size:24px;margin-bottom:10px}
:is(main.pp,div.pp) .panel p{color:#3b4a5e;margin:0 0 12px}
:is(main.pp,div.pp) .tabs>input:nth-of-type(1):checked~.panels>.panel:nth-child(1){display:grid}
:is(main.pp,div.pp) .tabs>input:nth-of-type(1):checked~.tablist>label:nth-child(1){background:var(--navy);color:#fff;border-color:var(--navy)}
:is(main.pp,div.pp) .tabs>input:nth-of-type(1):focus-visible~.tablist>label:nth-child(1){outline:2px solid var(--teal);outline-offset:2px}
:is(main.pp,div.pp) .tabs>input:nth-of-type(2):checked~.panels>.panel:nth-child(2){display:grid}
:is(main.pp,div.pp) .tabs>input:nth-of-type(2):checked~.tablist>label:nth-child(2){background:var(--navy);color:#fff;border-color:var(--navy)}
:is(main.pp,div.pp) .tabs>input:nth-of-type(2):focus-visible~.tablist>label:nth-child(2){outline:2px solid var(--teal);outline-offset:2px}
:is(main.pp,div.pp) .tabs>input:nth-of-type(3):checked~.panels>.panel:nth-child(3){display:grid}
:is(main.pp,div.pp) .tabs>input:nth-of-type(3):checked~.tablist>label:nth-child(3){background:var(--navy);color:#fff;border-color:var(--navy)}
:is(main.pp,div.pp) .tabs>input:nth-of-type(3):focus-visible~.tablist>label:nth-child(3){outline:2px solid var(--teal);outline-offset:2px}
:is(main.pp,div.pp) .tabs>input:nth-of-type(4):checked~.panels>.panel:nth-child(4){display:grid}
:is(main.pp,div.pp) .tabs>input:nth-of-type(4):checked~.tablist>label:nth-child(4){background:var(--navy);color:#fff;border-color:var(--navy)}
:is(main.pp,div.pp) .tabs>input:nth-of-type(4):focus-visible~.tablist>label:nth-child(4){outline:2px solid var(--teal);outline-offset:2px}
:is(main.pp,div.pp) .tabs>input:nth-of-type(5):checked~.panels>.panel:nth-child(5){display:grid}
:is(main.pp,div.pp) .tabs>input:nth-of-type(5):checked~.tablist>label:nth-child(5){background:var(--navy);color:#fff;border-color:var(--navy)}
:is(main.pp,div.pp) .tabs>input:nth-of-type(5):focus-visible~.tablist>label:nth-child(5){outline:2px solid var(--teal);outline-offset:2px}
:is(main.pp,div.pp) .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
:is(main.pp,div.pp) .fcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .2s,box-shadow .2s,border-color .2s}
:is(main.pp,div.pp) .fcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(20,38,63,.35);border-color:#B5D9D3}
:is(main.pp,div.pp) .fcard h3{font-size:18px;margin:16px 0 8px}
:is(main.pp,div.pp) .fcard p{margin:0;color:#3b4a5e;font-size:15px}
:is(main.pp,div.pp) .fcard p+p{margin-top:8px}
:is(main.pp,div.pp) .steps2{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s;position:relative}
:is(main.pp,div.pp) .steps2.five{grid-template-columns:repeat(5,1fr)}
:is(main.pp,div.pp) .steps2:before{content:"";position:absolute;left:8%;right:8%;top:22px;height:2px;background:linear-gradient(90deg,var(--teal),rgba(10,117,104,.15))}
:is(main.pp,div.pp) .step{position:relative;text-align:center;padding:0 6px}
:is(main.pp,div.pp) .step .n{counter-increment:s;width:46px;height:46px;margin:0 auto 14px;border-radius:50%;background:#fff;border:2px solid var(--teal);color:var(--navy);display:grid;place-items:center;font:800 17px var(--f-head);box-shadow:0 0 0 6px #fff}
:is(main.pp,div.pp) .band .step .n{box-shadow:0 0 0 6px #F1F5F8}
:is(main.pp,div.pp) .step .n:before{content:counter(s)}
:is(main.pp,div.pp) .step b{display:block;font-family:var(--f-head);color:var(--navy);font-size:17px;margin-bottom:6px}
:is(main.pp,div.pp) .step p{margin:0;font-size:14.5px;color:#3b4a5e}
:is(main.pp,div.pp) .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
:is(main.pp,div.pp) .pgrid.two{grid-template-columns:repeat(2,1fr);max-width:860px;margin:0 auto}
:is(main.pp,div.pp) .pcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-direction:column}
:is(main.pp,div.pp) .pcard h3{font-size:19px}
:is(main.pp,div.pp) .pcard .price{font-size:42px;margin:14px 0 6px}
:is(main.pp,div.pp) .pcard.feat{background:linear-gradient(180deg,#14263F,#1C3354);color:#dbe4ef;border:0;box-shadow:0 30px 60px -25px rgba(20,38,63,.6);position:relative}
:is(main.pp,div.pp) .pcard.feat:before{content:"";position:absolute;inset:0;border-radius:18px;padding:1.5px;background:linear-gradient(135deg,#3CC6AE,rgba(60,198,174,0) 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
:is(main.pp,div.pp) .pcard.feat h3,:is(main.pp,div.pp) .pcard.feat .price{color:#fff}
:is(main.pp,div.pp) .pcard.feat .price small{color:#9fb0c6}
:is(main.pp,div.pp) .pcard.feat .fee{background:rgba(60,198,174,.14);color:#dff6f6}
:is(main.pp,div.pp) .pcard.feat ul.ticks li:before{border-color:#3CC6AE}
:is(main.pp,div.pp) .pcard .sm{font-size:14px;color:var(--muted);margin-top:auto;padding-top:14px}
:is(main.pp,div.pp) .pcard.feat .sm{color:#9fb0c6}
:is(main.pp,div.pp) .fine{font-size:14px}
:is(main.pp,div.pp) .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
:is(main.pp,div.pp) .help2{background:linear-gradient(160deg,#E7F1F0,#F3F9F8);border:1px solid #C6E2DD;border-radius:18px;padding:28px}
:is(main.pp,div.pp) .help2 h3{font-size:19px;margin:14px 0 10px}
:is(main.pp,div.pp) .help2 p{margin:6px 0;font-size:15px}
:is(main.pp,div.pp) .help2 .no{color:#B42318;font-weight:600}
:is(main.pp,div.pp) .note2{margin-top:24px;display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:14px;padding:22px 24px;font-size:15px}
:is(main.pp,div.pp) .note2 h3{font-size:17px;margin-bottom:4px}
:is(main.pp,div.pp) .cta2{position:relative;overflow:hidden;text-align:center;color:#fff;padding:88px 0;background:radial-gradient(600px 300px at 50% 0%,rgba(60,198,174,.35),transparent 70%),linear-gradient(135deg,#14263F,#163a4a 60%,#0A7568)}
:is(main.pp,div.pp) .cta2 h2{color:#fff;font-size:38px;letter-spacing:-.01em}
:is(main.pp,div.pp) .cta2 p{color:#c9d4e3;font-size:17px;margin:12px 0 0}
:is(main.pp,div.pp) .cta2 .ctas{justify-content:center;margin-top:28px}
:is(main.pp,div.pp) .devices2{position:relative;padding-right:14%}
:is(main.pp,div.pp) .devices2 .phonef{position:absolute;right:0;bottom:-28px;width:24%;z-index:2}
:is(main.pp,div.pp) .sgrid2{display:grid;grid-template-columns:repeat(6,1fr);gap:28px}
:is(main.pp,div.pp) .sgrid2>.dcard{grid-column:span 2}
:is(main.pp,div.pp) .sgrid2>.dcard:nth-child(4){grid-column:2/span 2}
:is(main.pp,div.pp) .sgrid2>.dcard:nth-child(5){grid-column:4/span 2}
:is(main.pp,div.pp) .dcard{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 22px 20px;transition:transform .25s,box-shadow .25s}
:is(main.pp,div.pp) .dcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(20,38,63,.45)}
:is(main.pp,div.pp) .dcard .devs{position:relative;padding:0 16% 22px 0}
:is(main.pp,div.pp) .dcard .shot{box-shadow:0 18px 36px -18px rgba(20,38,63,.35)}
:is(main.pp,div.pp) .dcard .shot img{aspect-ratio:1600/1000;object-fit:cover;object-position:top}
:is(main.pp,div.pp) .dcard .phonef{position:absolute;right:0;bottom:0;width:22%;border-width:4px;border-radius:16px}
:is(main.pp,div.pp) .dcard .phonef img{border-radius:11px}
:is(main.pp,div.pp) .dcard h3{font-size:18px;margin-top:6px}
:is(main.pp,div.pp) .dcard .dom{font-size:14px;color:var(--teal);font-weight:600}
:is(main.pp,div.pp) .cap{font-size:13px;color:#9fb0c6;margin-top:44px;text-align:center}
:is(main.pp,div.pp) .bcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;position:relative;overflow:hidden}
:is(main.pp,div.pp) .bcard.alt{background:linear-gradient(160deg,#fff,#EEF6F5)}
:is(main.pp,div.pp) .bcard .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:var(--teal-l);border-radius:999px;padding:4px 10px}
:is(main.pp,div.pp) .bcard h3{font-size:24px;margin:12px 0 4px}
:is(main.pp,div.pp) .bcard .price{font-size:44px;margin:6px 0 10px}
:is(main.pp,div.pp) .bcard p{color:#3b4a5e;font-size:15px}
:is(main.pp,div.pp) .hostline{margin:28px auto 0;max-width:860px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;background:#fff;border:1px dashed #9CCBC3;border-radius:14px;padding:16px 20px;font-size:15px;text-align:center}
:is(main.pp,div.pp) .hostline a{font-weight:600}
@media (max-width:1000px){:is(main.pp,div.pp) .hero2 h1{font-size:40px}
:is(main.pp,div.pp) .steps2.five{grid-template-columns:repeat(3,1fr)}
:is(main.pp,div.pp) .steps2.five:before{display:none}}
@media (max-width:900px){:is(main.pp,div.pp) .hero2{padding:48px 0 72px}
:is(main.pp,div.pp) .hero2 .rd-wrap{grid-template-columns:1fr;gap:40px}
:is(main.pp,div.pp) .hero2 h1{font-size:34px}
:is(main.pp,div.pp) .tilt{transform:none}
:is(main.pp,div.pp) .stage:hover .tilt{transform:none}
:is(main.pp,div.pp) .strip .rd-wrap{grid-template-columns:1fr 1fr}
:is(main.pp,div.pp) .strip .s{border-left:0;border-top:1px solid var(--line)}
:is(main.pp,div.pp) .strip .s:nth-child(-n+2){border-top:0}
:is(main.pp,div.pp) section{padding:64px 0}
:is(main.pp,div.pp) .sec-h h2,:is(main.pp,div.pp) .row2 h2{font-size:27px}
:is(main.pp,div.pp) .row2,:is(main.pp,div.pp) .row2.rev{grid-template-columns:1fr;gap:28px}
:is(main.pp,div.pp) .row2.rev .txt{order:0}
:is(main.pp,div.pp) .row2+.row2{margin-top:64px}
:is(main.pp,div.pp) .panel{grid-template-columns:1fr;padding:22px;gap:22px}
:is(main.pp,div.pp) .fgrid,:is(main.pp,div.pp) .pgrid,:is(main.pp,div.pp) .pgrid.two,:is(main.pp,div.pp) .sgrid,:is(main.pp,div.pp) .sgrid2{grid-template-columns:1fr}
:is(main.pp,div.pp) .sgrid2>.dcard,:is(main.pp,div.pp) .sgrid2>.dcard:nth-child(4),:is(main.pp,div.pp) .sgrid2>.dcard:nth-child(5){grid-column:auto}
:is(main.pp,div.pp) .steps2,:is(main.pp,div.pp) .steps2.five{grid-template-columns:1fr;gap:22px}
:is(main.pp,div.pp) .steps2:before{left:22px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(180deg,var(--teal),rgba(10,117,104,.15));display:block!important}
:is(main.pp,div.pp) .step{display:grid;grid-template-columns:46px 1fr;gap:16px;text-align:left;padding:0}
:is(main.pp,div.pp) .step .n{margin:0}
:is(main.pp,div.pp) .cta2 h2{font-size:28px}}
@media (max-width:480px){:is(main.pp,div.pp) .strip .rd-wrap{grid-template-columns:1fr}
:is(main.pp,div.pp) .strip .s{border-top:1px solid var(--line)!important}
:is(main.pp,div.pp) .strip .s:first-child{border-top:0!important}
:is(main.pp,div.pp) .ctas .rd-btn{display:block;width:100%}
:is(main.pp,div.pp) .hero2 h1{font-size:31px}
:is(main.pp,div.pp) .tablist label{padding:8px 12px;font-size:13px}
:is(main.pp,div.pp) .pcard,:is(main.pp,div.pp) .bcard{padding:24px}
:is(main.pp,div.pp) .help2{padding:22px}}
:is(main.pp,div.pp) .step .n{position:relative}
:is(main.pp,div.pp) .step .n:after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--teal);opacity:0;pointer-events:none}
.anim :is(main.pp,div.pp) .steps2:before{transform:scaleX(0);transform-origin:left center;transition:transform 1.2s cubic-bezier(.65,0,.35,1) .1s}
.anim :is(main.pp,div.pp) .steps2.in:before{transform:scaleX(1)}
.anim :is(main.pp,div.pp) .steps2 .step{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.15s + var(--i,0)*.2s)}
.anim :is(main.pp,div.pp) .steps2.in .step{opacity:1;transform:none}
.anim :is(main.pp,div.pp) .steps2 .step .n{transition:background-color .4s ease;transition-delay:calc(.35s + var(--i,0)*.2s)}
.anim :is(main.pp,div.pp) .steps2.in .step .n{background-color:#E7F1F0}
.anim :is(main.pp,div.pp) .steps2.in .step .n:after{animation:k52ring 1.1s ease-out 1 both;animation-delay:calc(.35s + var(--i,0)*.2s)}
@keyframes k52ring{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@media (max-width:900px){.anim :is(main.pp,div.pp) .steps2:before{transform:scaleY(0);transform-origin:center top}
.anim :is(main.pp,div.pp) .steps2.in:before{transform:scaleY(1)}
.anim :is(main.pp,div.pp) .steps2 .step{transform:translateX(-14px)}}
@media (prefers-reduced-motion:reduce){.anim :is(main.pp,div.pp) .steps2:before,.anim :is(main.pp,div.pp) .steps2 .step{transform:none!important;opacity:1!important;transition:none!important}
.anim :is(main.pp,div.pp) .steps2 .step .n:after{animation:none!important}}

:is(main.pp,div.pp) .help2 .ic,:is(main.pp,div.pp) .note2 .ic{margin:0}
:is(main.pp,div.pp) ul.ticks{margin:18px 0 0}
:is(main.pp,div.pp) .fine a,:is(main.pp,div.pp) .hostline a,:is(main.pp,div.pp) .tlink{text-decoration:none}
:is(main.pp,div.pp) .fine a{color:var(--accent);font-weight:600}
:is(main.pp,div.pp) .dcard,:is(main.pp,div.pp) .dcard:hover{color:inherit}
@media (max-width:980px){:is(main.pp,div.pp) .hero2 .rd-wrap{grid-template-columns:1fr;gap:40px}}
@media (max-width:600px){:is(main.pp,div.pp) .ctas{flex-direction:column;align-items:stretch}:is(main.pp,div.pp) .ctas .rd-btn{width:100%;white-space:normal;text-align:center}:is(main.pp,div.pp) .tlink{text-align:center;padding:6px 0}:is(main.pp,div.pp) .float{right:0}:is(main.pp,div.pp) .devices2{padding-right:10%}}
@media (prefers-reduced-motion:no-preference){html:has(main.pp){scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){:is(main.pp,div.pp) .tilt,:is(main.pp,div.pp) .stage:hover .tilt,:is(main.pp,div.pp) .fcard,:is(main.pp,div.pp) .fcard:hover,:is(main.pp,div.pp) .dcard,:is(main.pp,div.pp) .dcard:hover,:is(main.pp,div.pp) .rd-btn,:is(main.pp,div.pp) .rd-btn:hover,:is(main.pp,div.pp) .tablist label{transition:none!important;transform:none!important}}
:is(main.pp,div.pp) .phonef img{height:auto}
/* Light hero, matching index.html's .rd-hero (Oct 28 follow-up): white to paper, navy type, soft shadow on the shots */
:is(main.pp,div.pp) .hero2{color:var(--ink);background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);padding:88px 0 96px}
:is(main.pp,div.pp) .hero2:before{content:"";position:absolute;inset:-200px -200px auto auto;width:720px;height:720px;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 12%,transparent),transparent);background-size:auto;mask-image:none;-webkit-mask-image:none;pointer-events:none}
:is(main.pp,div.pp) .hero2 .rd-hero-band{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
:is(main.pp,div.pp) .hero2 .rd-eyebrow{margin-bottom:18px}
:is(main.pp,div.pp) .hero2 h1.rd-h1{color:var(--navy);font-size:clamp(38px,4.1vw,56px);line-height:1.06;font-weight:800;margin:0 0 20px}
:is(main.pp,div.pp) .hero2 p.rd-lede{color:var(--ink-soft);margin:0 0 22px}
:is(main.pp,div.pp) .hero2 .pl{color:var(--ink);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}
:is(main.pp,div.pp) .hero2 .pl b{color:var(--accent)}
:is(main.pp,div.pp) .hero2 .ctas{margin-top:10px}
:is(main.pp,div.pp) .hero2 .tlink{color:var(--accent)}
:is(main.pp,div.pp) .hero2 .stage:before{inset:10% 6% -4% 10%;background:radial-gradient(closest-side,rgba(20,38,63,.16),transparent);filter:blur(36px)}
:is(main.pp,div.pp) .hero2 .shot{box-shadow:var(--shadow-shot)}
:is(main.pp,div.pp) .hero2 .phonef{box-shadow:0 24px 48px -16px rgba(20,38,63,.35)}
:is(main.pp,div.pp) .hero2 .cap{color:var(--faint)}
@media (max-width:980px){:is(main.pp,div.pp) .hero2{padding:52px 0 64px}}
@media (max-width:760px){:is(main.pp,div.pp) .grid2{grid-template-columns:1fr}}

/* Home and About (Oct 28, 2026): blocks reuse the product-page components inside <div class="pp"> */
div.pp .hero2 .rd-facts{justify-content:flex-start;margin-top:22px}
div.pp .hero2 .rd-hero-note{text-align:left;margin:12px 0 0}
div.pp .hero2 .devices2{padding-right:12%}
div.pp .hero2 .devices2 .phonef{width:23%;bottom:-36px}
div.pp .sites5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
div.pp .sc{display:block;text-decoration:none;color:inherit;min-width:0;transition:transform .25s}
div.pp .sc:hover{transform:translateY(-4px)}
div.pp .sc .shot{border-radius:10px;box-shadow:0 18px 36px -18px rgba(20,38,63,.35)}
div.pp .sc .shot .bar{height:20px;padding:0 8px;gap:4px}
div.pp .sc .shot .bar i{width:7px;height:7px}
div.pp .sc .shot .bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
div.pp .sc .shot img{aspect-ratio:1600/1000;object-fit:cover;object-position:top}
div.pp .sc b{display:block;font-family:var(--f-head);color:var(--navy);font-size:15px;margin-top:12px}
div.pp .sc span.dom{font-size:13px;color:var(--accent);font-weight:600;overflow-wrap:anywhere}
div.pp .steps2 .step p a{color:var(--accent);font-weight:600}
@media (max-width:1000px){div.pp .sites5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){div.pp .sites5{grid-template-columns:repeat(2,minmax(0,1fr))}div.pp .sites5>.sc:last-child{grid-column:1/-1;max-width:50%;justify-self:center}}
@media (max-width:480px){div.pp .sites5>.sc:last-child{max-width:100%}}