/*
Theme Name: Platipix
Description: Light-by-default theme with a dark header and footer and an optional dark mode. Replica of the approved website mockups (docs/design/website).
Version: 2.27
Text Domain: quantom
*/
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter.woff2) format("woff2")}
:root{--bg:#fff;--surface:#f6f6f8;--surface-2:#fff;--line:#e6e6eb;--line-strong:#d4d4dc;--text:#111114;--text-2:#3d3d45;--muted:#5c5c66;--accent:#ff8a3d;--accent-ink:#1a0d04;--accent-text:#c4570f;--chip-on-bg:#111114;--chip-on-text:#fff;--neon-bg:#fbf5fd;--neon-line:#eadcf0;--neon-text:#4a3a52;
--card:var(--surface);--btn:var(--accent);--accent2:var(--accent-text);
--chrome:#0a0a0c;--chrome-line:#18181c;--chrome-text:#b4b4be;--chrome-strong:#ededf2;--chrome-muted:#8b8b96;--chrome-hover:#ff9d5c;
--radius:12px;--radius-lg:16px;--danger:#e5484d;--code-bg:#f1f1f4;--font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html[data-theme=dark]{--code-bg:#18181c;--bg:#0a0a0c;--surface:#111114;--surface-2:#18181c;--line:#1f1f25;--line-strong:#2e2e36;--text:#ededf2;--text-2:#b4b4be;--muted:#8b8b96;--accent-text:#ff9d5c;--chip-on-bg:#ededf2;--chip-on-text:#111114;--neon-bg:#130d16;--neon-line:#2b1d31;--neon-text:#c9b8cf}
html{color-scheme:light}html[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/26px var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent-text);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* header and footer: dark in both modes */
.site-header{background:var(--chrome);color:var(--chrome-text);border-bottom:1px solid var(--chrome-line)}
.site-footer{background:var(--chrome);color:var(--chrome-muted);border-top:1px solid var(--chrome-line);font-size:14px;line-height:22px;margin-top:96px}
.site-header a,.site-footer a{color:var(--chrome-text);text-decoration:none}
.site-header a:hover,.site-footer a:hover{color:var(--chrome-hover);text-decoration:none}
.site-header .wrap{display:flex;align-items:center;gap:32px;height:72px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;line-height:1;color:var(--chrome-strong)!important}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.site-header nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:15px}
.site-header nav a{display:inline-block;padding:6px 0}
.spacer{flex:1}
.hd-icon,.theme-toggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--chrome-text)!important;cursor:pointer;padding:0;width:32px;height:32px;border-radius:8px}
.hd-icon:hover,.theme-toggle:hover{color:var(--chrome-hover)!important}
.hd-menu{display:none}
.hd-signin{font-size:15px}
.hd-studio .short{display:none}
.site-header .btn.pri{height:40px;color:var(--accent-ink)}
.site-header .btn.pri:hover{color:var(--accent-ink);filter:brightness(1.1)}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:32px;padding-bottom:40px}
.site-footer nav{display:flex;gap:24px;flex-wrap:wrap}

/* buttons, chips, cards, tiles */
.btn,.button,button.single_add_to_cart_button,.wp-element-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text)!important;font:600 15px var(--font);cursor:pointer;text-decoration:none!important}
.btn.pri,.button.alt,button.single_add_to_cart_button,.checkout-button,#place_order{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
.btn:hover,.button:hover,button.single_add_to_cart_button:hover{filter:brightness(1.08)}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-2);font:500 14px var(--font);text-decoration:none}
.chip.on{background:var(--chip-on-bg);border-color:var(--chip-on-bg);color:var(--chip-on-text)}
.effect-card{display:flex;flex-direction:column;gap:10px;color:var(--text)}
.effect-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;border:1px solid var(--line);display:block}
.effect-card b{font-weight:600;font-size:15px}
.effect-card span{font-size:13px;color:var(--muted)}
.cat-tile{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:15px;font-weight:500}
.cat-tile span{color:var(--muted);font-weight:400;font-size:13px}
.h2,h2{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.01em}
h1,h2,h3{color:var(--text)}
h1{font-size:44px;line-height:52px;font-weight:800;letter-spacing:-.02em;margin:0 0 .5em}
h3{font-size:19px;line-height:28px;font-weight:600}
.lead{font-size:19px;line-height:30px;color:var(--text-2)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
main{padding:72px 0 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.grid{display:grid;gap:28px 20px;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.grid h3{margin:.2em 0}
.entry-content{max-width:780px}
.readmore{font-weight:600}
.related{margin-top:72px}
.cat-sections{padding-top:96px}
.cat-sections h2{margin:0 0 24px}
.cat-sections .grid+h2{margin-top:72px}
.cat-sections section{margin:0}
.plans{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.plan{text-align:center;border-radius:18px}.plan .price{font-size:2rem;font-weight:800}.plan.featured{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.plan ul{text-align:left;list-style:none;padding:0}.plan li:before{content:"✓ ";color:var(--accent-text)}
/* pricing page: one calm row of equal cards */
.entry-content:has(.plans){max-width:none} /* the three plans use the full width */
.entry-content:has(.plans)>p:first-of-type{font-size:19px;line-height:30px;color:var(--text-2);max-width:680px;margin:0 0 40px}
.plans{align-items:stretch}
.plan{display:flex;flex-direction:column;position:relative;padding:28px 24px;text-align:left}
.plan h3{margin:0;font-size:20px}
.plan .plan-desc{margin:6px 0 0;min-height:52px}
.plan .price{margin:20px 0 0;font-size:40px;line-height:44px;letter-spacing:-.02em}
.plan .price small{font-size:15px;font-weight:500;color:var(--muted);margin-left:2px}
.plan .plan-alt{margin:4px 0 0;font-size:14px;line-height:22px}
.plan ul{margin:24px 0;flex:1}.plan li{padding:5px 0;line-height:22px;color:var(--text-2)}
.plan-cta{display:flex;flex-direction:column;gap:10px}
.plan-cta .btn{width:100%}
.plan.featured{box-shadow:none;border-width:2px}
.plan-tag{position:absolute;top:-13px;left:24px;background:var(--accent);color:var(--accent-ink);font:600 12px/24px var(--font);padding:0 12px;border-radius:999px}
.plans-note{margin:28px 0 0;font-size:14px;color:var(--muted)}
.plan-term{display:inline-flex;gap:2px;padding:4px;margin:0 0 28px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.plan-term button{height:36px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:500 14px var(--font);cursor:pointer}
.plan-term button.on{background:var(--chip-on-bg);color:var(--chip-on-text)}
.plan-term button span{font-size:12px;color:var(--accent-text);margin-left:4px}
.plan-term button.on span{color:inherit;opacity:.8}
.plans[data-term=month] .t-year,.plans[data-term=year] .t-month{display:none}

/* v1.1: contrast, spacing, phone layout, shop pages */
.muted,.card p{color:var(--muted)}
.card h2,.card h3{margin:.4em 0}
.card img{border-radius:12px;display:block;margin-bottom:8px}
.navigation.pagination{margin:32px 0}.nav-links{display:flex;gap:8px;flex-wrap:wrap}
.nav-links .page-numbers{padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);text-decoration:none}
.nav-links .page-numbers.current{background:var(--btn);border-color:var(--btn);color:var(--accent-ink)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=search],select,textarea{background:var(--surface-2);color:var(--text);border:1px solid var(--line-strong);border-radius:12px;padding:10px 14px;font:inherit;max-width:100%}
input[type=text],input[type=email],input[type=password],input[type=search]{min-height:44px}
.entry-content table,.woocommerce table.shop_table{width:100%;border-collapse:collapse;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px}
.entry-content th,.entry-content td,.woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:10px 12px;border-top:1px solid var(--line);text-align:left}
.woocommerce ul.products{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));list-style:none;margin:0 0 24px;padding:0}
.woocommerce ul.products:before,.woocommerce ul.products:after{display:none}
.woocommerce ul.products li.product{float:none;width:auto;margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1.1rem;padding:0;color:var(--text)}
.woocommerce ul.products li.product a img{margin:0 0 10px;border-radius:12px}
.woocommerce .price,.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--text);font-weight:700}
.woocommerce .price del{color:var(--muted)}
.woocommerce span.onsale{background:var(--accent);color:var(--accent-ink);min-height:0;line-height:1.6;border-radius:12px;padding:2px 10px}
.woocommerce div.product div.images,.woocommerce div.product div.summary{margin-bottom:24px}
.woocommerce-breadcrumb,.woocommerce .woocommerce-result-count{color:var(--muted)!important}
.woocommerce-breadcrumb a{color:var(--accent-text)}
.woocommerce .quantity .qty{width:5em}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:var(--card)!important;color:var(--text)!important;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;padding:14px 18px 14px 3.2em}
.woocommerce-error{border-top-color:#e5484d}
.woocommerce-message a.button,.woocommerce-info a.button{float:right;margin-left:12px}
.woocommerce form .form-row label{color:var(--text)}
.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register,.woocommerce-checkout #payment{background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--text)}
.woocommerce-checkout #payment div.payment_box{background:var(--bg);color:var(--text)}
.woocommerce-checkout #payment div.payment_box:before{border-bottom-color:var(--bg)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line)}
.woocommerce-cart table.cart img{width:64px}
.woocommerce-cart .cart-collaterals .cart_totals{float:none;width:100%;max-width:480px}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.woocommerce-MyAccount-navigation a{display:block;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);text-decoration:none}
.woocommerce-MyAccount-navigation .is-active a{background:var(--btn);border-color:var(--btn);color:var(--accent-ink)}
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto}
.woocommerce-tabs ul.tabs li{background:var(--card)!important;border-color:var(--line)!important}
.woocommerce-tabs ul.tabs li a{color:var(--text)!important}
.woocommerce-tabs ul.tabs:before,.woocommerce-tabs ul.tabs li:before,.woocommerce-tabs ul.tabs li:after{border-color:var(--line)!important}
.woocommerce-tabs .panel{color:var(--text)}
.entry-content .wp-block-button__link{background:var(--btn);color:var(--accent-ink);border-radius:12px}
@media(max-width:720px){
 body{font-size:16px}
 h1{font-size:28px;line-height:34px}
 .h2,h2{font-size:22px;line-height:30px}
 main{padding:32px 0 0}
 .wrap{padding:0 16px}
 .site-header .wrap{gap:8px;height:60px;padding:0 8px 0 16px}
 .brand{font-size:16px}.brand-mark{width:28px;height:28px}
 .site-header nav{display:none;position:absolute;left:0;right:0;top:60px;background:var(--chrome);border-bottom:1px solid var(--chrome-line);padding:8px 16px 16px;z-index:50}
 .site-header.open nav{display:block}
 .site-header nav ul{flex-direction:column;gap:0}
 .site-header nav a{padding:12px 0;width:100%}
 .hd-menu{display:inline-flex;width:44px;height:44px}
 .hd-menu .ic,.hd-search .ic{width:22px;height:22px}
 .hd-search,.hd-signin{display:none}
 .hd-studio{height:40px!important;padding:0 14px;border-radius:10px;font-size:14px}
 .hd-studio .long{display:none}.hd-studio .short{display:inline}
 .btn,.button{height:52px;padding:0 18px;border-radius:14px;font-size:16px}
 .card{padding:16px}
 .grid,.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:20px 12px}
 .cat-sections .grid{grid-template-columns:1fr}
 .related,.cat-sections{margin-top:48px;padding-top:48px}
 .site-footer{margin-top:48px}
 .site-footer .wrap{flex-direction:column-reverse;align-items:flex-start;gap:14px;padding-top:24px;padding-bottom:40px}
 .site-footer nav{gap:18px}
 .woocommerce-message a.button,.woocommerce-info a.button{float:none;display:flex;margin:0 0 10px}
 .woocommerce table.shop_table_responsive tr td{background:var(--surface)}
 .woocommerce-cart table.cart td.actions .coupon{float:none;display:flex;gap:8px;flex-wrap:wrap}
 .woocommerce-cart table.cart td.actions .coupon input{width:100%!important}
 input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=search],select,textarea{font-size:16px;width:100%}
}

/* v1.2: related blocks */
.related .card img{display:block;width:100%;height:auto;border-radius:12px;margin-bottom:10px}
.related{overflow-wrap:anywhere}

/* v2.0: listing cards use the effect-card thumbnail */
.grid>.card{padding:0;background:none;border:0;display:flex;flex-direction:column;gap:8px}
.grid>.card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;border:1px solid var(--line);margin:0}
.grid>.card h2,.grid>.card h3{font-size:15px;line-height:22px;font-weight:600;margin:0}
.grid>.card h2 a,.grid>.card h3 a{color:var(--text)}
.grid>.card p{font-size:13px;line-height:20px;margin:0;color:var(--muted)}
.cat-sections .grid>.card{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.cat-sections .grid>.card h3{font-size:19px;line-height:28px}

/* v2.1: front page (W-Home / W-Home-Phone) */
.sr{position:absolute;left:-9999px}
.m-only{display:none}
.home{display:block}
.body-home main,.home-main{padding:0}
body.home main{padding:0}
.h-hero{padding-top:72px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.eyebrow{font-size:14px;line-height:20px;font-weight:600;color:var(--accent-text)}
.h-hero h1{margin:0;font-size:64px;line-height:70px;font-weight:800;letter-spacing:-.02em;max-width:880px}
.h-lead{margin:0;font-size:19px;line-height:30px;color:var(--text-2);max-width:640px}
.h-form{display:flex;gap:8px;width:100%;max-width:560px;margin-top:8px}
.h-form input,.neon-form input{flex-grow:1;min-width:0;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);font:500 17px var(--font)}
.h-form input{height:56px;padding:0 18px;border-radius:14px}
.h-form .btn{height:56px;padding:0 24px;font-size:16px;border-radius:12px}
.h-sec{padding-top:96px}
.h-render{padding-top:48px}
.h-spin{perspective:1400px;position:relative}
.h-spin:before{content:none}
.h-card{position:relative;transform-style:preserve-3d}
.h-face{display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.h-back{position:absolute;inset:0;transform:rotateY(180deg)}
.h-card:hover{animation-play-state:paused}
@keyframes h-turn{0%,12%{transform:rotateY(0) rotateX(0)}30%{transform:rotateY(180deg) rotateX(4deg) scale(1.03)}50%,62%{transform:rotateY(360deg) rotateX(0)}81%{transform:rotateY(360deg) rotateX(-3deg) rotateY(8deg)}100%{transform:rotateY(360deg) rotateX(0)}}
@keyframes h-glow{0%,100%{opacity:.35}30%{opacity:1}60%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.h-card,.h-spin:before{animation:none}}
.h-render img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:24px;border:1px solid var(--line);display:block}
.h-pop,.h-styles{display:flex;flex-direction:column;gap:24px}
.h-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.h-head>div{display:flex;flex-direction:column;gap:8px}
.home h2{margin:0}
.h-sub{margin:0;color:var(--text-2);font-size:16px;line-height:26px}
.h-all{font-size:15px;color:var(--accent-text)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip:hover{text-decoration:none;border-color:var(--text-2)}
.h-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px 20px}
a.effect-card:hover{text-decoration:none}
.h-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.step{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.step .n{font-size:14px;font-weight:700;color:var(--accent-text)}
.step .t{display:flex;flex-direction:column;gap:10px;color:var(--text-2);font-size:15px;line-height:24px}
.step .t b{font-size:19px;line-height:26px;color:var(--text)}
.neon-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:40px;align-items:center;padding:40px;border-radius:24px;background:var(--neon-bg);border:1px solid var(--neon-line)}
.neon-text{display:flex;flex-direction:column;gap:16px}
.neon-text p{margin:0;color:var(--neon-text);font-size:16px;line-height:26px}
.neon-form{display:flex;gap:8px;max-width:460px}
.neon-form input{height:48px;padding:0 16px;border-radius:12px;font-size:16px;border-color:var(--neon-line)}
.neon-form .btn{height:48px}
.neon-band img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;display:block}
.h-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
a.cat-tile:hover{text-decoration:none;border-color:var(--line-strong)}
.h-faq details{border-bottom:1px solid var(--line);padding:18px 0}
.h-faq h2{margin-bottom:8px}
.h-faq summary{font-size:17px;line-height:26px;font-weight:600;color:var(--text);list-style:none;display:flex;justify-content:space-between;cursor:pointer}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq .pm{color:var(--muted)}.h-faq .pm:before{content:"+"}.h-faq details[open] .pm:before{content:"\2212"}
.h-faq details p{margin:10px 0 0;color:var(--text-2);font-size:15px;line-height:24px;max-width:760px}
@media(max-width:720px){
 .d-only{display:none!important}.m-only{display:inline}
 .h-hero{padding-top:32px;align-items:stretch;text-align:left;gap:16px}
 .eyebrow{font-size:13px}
 .h-hero h1{font-size:36px;line-height:42px;max-width:none}
 .h-lead{font-size:16px;line-height:25px;max-width:none}
 .h-form{flex-direction:column;max-width:none;margin-top:0}
 .h-form input{height:52px;padding:0 16px;font-size:16px}
 .h-form .btn{height:52px;padding:0 18px;border-radius:14px}
 .h-render{padding-top:24px}
 .h-render img{aspect-ratio:9/10;border-radius:18px}
 .h-sec{padding-top:48px}
 .h-pop{gap:16px}
 .h-head{flex-wrap:nowrap;align-items:baseline}
 .h-all{font-size:14px}
 .chips{flex-wrap:nowrap;overflow:hidden}
 .chip{flex:none;height:38px}
 .h-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
 .h-cards .effect-card{gap:8px}
 .h-cards .effect-card:nth-child(n+7){display:none}
 .h-cards .effect-card img{border-radius:12px}
 .h-cards .effect-card b{font-size:14px}
 .h-cards .effect-card span{display:none}
 .h-more{display:flex;width:100%}
 .h-steps{display:flex;flex-direction:column;gap:12px}
 .h-steps h2,.h-styles h2{display:block}
 .h-steps-grid{display:flex;flex-direction:column;gap:12px}
 .step{flex-direction:row;gap:14px;align-items:baseline;padding:0;border:0;background:none;border-radius:0}
 .step .n{font-size:15px;font-weight:700}
 .step .t{display:block;font-size:15px;line-height:23px;color:var(--text-2)}
 .step .t b{display:inline;font-size:inherit;line-height:inherit}
 .h-styles{gap:14px}
 .h-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .h-tiles .cat-tile{height:52px;padding:0 16px}
 .h-tiles .cat-tile:nth-child(n+9){display:none}
}

/* v2.2: effect gallery (W-Gallery): category pages and the /effects/ archive */
.g-top{padding-top:28px;display:flex;flex-direction:column;gap:14px}
.g-crumbs{font-size:14px;line-height:20px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.g-crumbs a{color:var(--text-2)}
.g-top h1{margin:0}
.g-intro{margin:0;font-size:17px;line-height:27px;color:var(--text-2);max-width:720px}
.g-bar{padding-top:28px;display:flex;flex-direction:column;align-items:stretch;gap:16px}
.g-bar .chips{gap:10px}.g-bar .chip{white-space:nowrap}.g-sort{align-self:flex-start}
.g-sort select{cursor:pointer}
.g-sort label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.g-sort select{height:36px;padding:0 10px;border-radius:10px;font:500 14px var(--font)}
.g-list{padding-top:24px}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:32px 20px}
.g-card{display:flex;flex-direction:column;gap:10px;color:var(--text)}
.g-card .im{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);transition:transform .15s,border-color .15s,box-shadow .15s}
.g-card:hover .im,.g-card .im:focus-visible{border-color:var(--accent-text);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
@media(prefers-reduced-motion:reduce){.g-card:hover .im{transform:none}}
.g-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.g-card .nm{color:var(--text)}.g-card .nm:hover{text-decoration:none;color:var(--accent-text)}
.g-card b{font-weight:600;font-size:15px}
.g-card .m{font-size:13px;color:var(--muted)}
.g-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:16/10;border-radius:14px;border:1px dashed var(--line-strong);color:var(--text-2);text-align:center;padding:16px;font-size:13px}
.g-blank:hover{text-decoration:none;border-color:var(--text-2)}
.g-blank .plus{font-size:28px;line-height:1;color:var(--accent-text)}
.g-blank b{color:var(--text);font-size:15px}
.g-more{padding-top:80px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px}
.g-more article,.g-more aside{display:flex;flex-direction:column;gap:14px}
.g-more h2{margin:0;font-size:28px;line-height:36px}
.g-more aside h2{font-size:20px;line-height:28px}
.g-more p{margin:0;color:var(--text-2);font-size:16px;line-height:26px}
.g-more .chips{align-content:flex-start}
@media(max-width:720px){
 .g-top{padding-top:16px;gap:12px}
 .g-bar{padding-top:20px}
 .g-bar .chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px}
 .g-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
 .g-card{gap:8px}.g-card .im{border-radius:12px}.g-card b{font-size:14px}.g-card .m{display:none}
 .g-blank{aspect-ratio:auto;min-height:100%}
 .g-more{padding-top:48px;gap:32px}
 .g-more h2{font-size:22px;line-height:30px}
}

/* v2.3: single effect (W-Sample, W-Sample-Phone) */
.s-crumbs{padding-top:24px}
.s-main{padding-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:40px;align-items:start}
.s-media{display:flex;flex-direction:column;gap:12px}
.s-stage{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.s-stage img{width:100%;aspect-ratio:40/21;object-fit:cover;display:block} /* the whole 1200x630 product picture, uncropped: Live 3D opens in this same shape, so it frames the text exactly like the picture and the Studio export */
.s-live{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(14,14,17,.72);border:1px solid rgba(255,255,255,.1);font-size:13px;line-height:18px;color:#d6d6de}
.s-live{cursor:pointer;font-family:inherit}
.s-live:hover{background:rgba(30,30,38,.9);color:#fff}
.s-live .ic{width:16px;height:16px}
.s-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0c0c10}
.s-embed{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--muted)}
.s-embed summary{cursor:pointer;color:var(--text-2)}
.s-embed textarea{width:100%;box-sizing:border-box;margin-top:8px;font:12px/1.5 ui-monospace,monospace;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px}
.s-note{font-size:13px;color:var(--muted)}
.s-side{display:flex;flex-direction:column;gap:22px}
.s-head{display:flex;flex-direction:column;gap:10px}
.s-chips{display:flex;gap:8px}
.s-chip{height:26px;padding:0 14px;font-size:12px}
.s-chip.free{color:#1d8a5c;border-color:#8fd3b5}.s-chip.pro{color:var(--accent-text);border-color:var(--accent-text)}
html[data-theme=dark] .s-chip.free{color:#5dd39e;border-color:#24543f}
.s-head h1{margin:0;font-size:38px;line-height:46px;font-weight:800;letter-spacing:-.01em}
.s-desc p{margin:0 0 12px}.s-desc p:last-child{margin:0}.s-desc{margin:0;color:var(--text-2);font-size:16px;line-height:26px}
.s-form{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.s-form label{font-size:15px;line-height:22px;font-weight:600;color:var(--text)}
.s-magic{display:flex;align-items:center;gap:8px;font-size:15px;line-height:22px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#fd8f4f)}
.s-words{height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:16px;width:100%;box-sizing:border-box}
.s-words:focus{outline:2px solid var(--accent,#fd8f4f);outline-offset:1px}
.s-words-l{font-size:15px;line-height:22px;font-weight:600;color:var(--text)}
.s-hint{margin:0;font-size:14px;line-height:20px;color:var(--text-2)}
.s-actions{display:flex;flex-direction:column;gap:10px}
.s-actions .btn{height:48px}
.s-actions .s-open{order:-1;height:52px;font-size:16px}
.dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 16px;margin:0;font-size:14px;line-height:20px}
.dl dt{color:var(--muted)}.dl dd{margin:0;color:var(--text)}
.s-tag:hover{text-decoration:none}
.s-more{padding-top:72px;display:flex;flex-direction:column;gap:22px}
.s-more-h{display:flex;justify-content:space-between;align-items:baseline}
.s-more h2{margin:0;font-size:26px;line-height:34px;font-weight:700}
.s-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.s-grid .effect-card:hover{text-decoration:none}
@media(max-width:720px){
 .s-crumbs{padding-top:14px}
 .s-crumbs .g-crumbs{font-size:13px;gap:6px}
 .s-home,.s-full{display:none}
 .s-main{display:flex;flex-direction:column;gap:0;padding-top:12px}
 .s-media,.s-side{display:contents}
 .s-stage{border-radius:16px;order:1}
 .s-live{left:10px;bottom:10px;padding:7px 11px;font-size:12px;background:rgba(14,14,17,.72)}
 .s-live .ic{display:none}
 .s-note{display:none}
 .s-head{order:2;gap:12px;padding-top:20px}
 .s-chip{height:24px;padding:0 12px}
 .s-head h1{font-size:28px;line-height:34px;letter-spacing:0}
 .s-desc{font-size:15px;line-height:24px}
 .s-form{order:3;margin-top:20px;padding:16px}
 .s-embed{order:4;margin-top:14px} /* phones: after Open in Studio, not above the picture */
 .dl{order:4;margin-top:24px;grid-template-columns:100px minmax(0,1fr);gap:10px 12px}
 .s-side .chips{order:5;margin-top:14px;flex-wrap:wrap;overflow:visible}
 .s-side .chips .chip{height:30px;padding:0 12px;font-size:13px}
 .s-actions{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 16px 26px;background:var(--bg);border-top:1px solid var(--line)}
 .s-actions .btn,.s-actions .s-open{height:52px;order:0;font-size:16px}
 .s-more{padding-top:36px;gap:14px}
 .s-more h2{font-size:22px;line-height:30px}
 .s-all{display:none}
 .s-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
 .s-grid .effect-card{gap:8px}.s-grid .effect-card img{border-radius:12px}.s-grid .effect-card b{font-size:14px}
 .s-more~.site-footer{padding-bottom:96px}
}

/* v2.4: phone polish at 390px (overflow, 44px tap targets, 16px inputs) */
@media(max-width:720px){
 html,body{overflow-x:hidden}
 .theme-toggle,.hd-icon{width:44px;height:44px}
 .site-header .wrap{gap:0}
 .hd-studio{margin:0 4px}
 .site-header nav a{min-height:44px;display:flex;align-items:center}
 .site-footer nav a{display:inline-flex;align-items:center;min-height:44px}
 .site-footer nav{gap:4px 20px}
 .chip{min-height:44px;height:44px}
 .s-chip{min-height:0;height:24px}
 .s-side .chips .chip{min-height:44px;height:44px}
 .g-bar .chips .chip{height:44px}
 .nav-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
 .readmore{display:inline-flex;align-items:center;min-height:44px}
 .woocommerce-MyAccount-navigation a{min-height:44px;display:flex;align-items:center}
 input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=search],input[type=url],select,textarea,.woocommerce .quantity .qty{font-size:16px;min-height:44px}
 .woocommerce .quantity .qty{width:5em}
 .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.select2-container .select2-selection--single{font-size:16px;min-height:44px}
 .woocommerce form .form-row{float:none!important;width:100%!important}
 .woocommerce table.shop_table,.entry-content table{display:block;overflow-x:auto;max-width:100%}
 .woocommerce table.shop_table_responsive{display:table}
 .woocommerce-cart table.cart td.product-remove a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
 .woocommerce-checkout #payment,.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register{padding:16px;margin-left:0;margin-right:0}
 .plans{grid-template-columns:1fr}
 .entry-content{max-width:100%}
 .entry-content img,.entry-content iframe,.entry-content video,pre{max-width:100%}
 pre,code{overflow-x:auto;word-break:break-word}
 .entry-content h1{word-break:break-word}
}

/* v2.8: one look for every page (text pages, posts, comments, tables, code, cards) */
::selection{background:var(--accent);color:var(--accent-ink)}
main>h1,.entry-content>h1{margin:0 0 .6em}
.entry-content h2{margin:1.8em 0 .5em}
.entry-content h3{margin:1.5em 0 .4em}
.entry-content p,.entry-content ul,.entry-content ol{color:var(--text-2)}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin:.3em 0}
.entry-content li::marker{color:var(--accent-text)}
.entry-content a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.entry-content a.btn,.entry-content a.button,.entry-content .wp-block-button__link,.entry-content .readmore{text-decoration:none}
.entry-content strong,.entry-content b{color:var(--text)}
.entry-content hr,.wp-block-separator{border:0;border-top:1px solid var(--line);margin:2.2em 0;opacity:1}
.entry-content blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);color:var(--text-2)}
.entry-content img{border-radius:var(--radius-lg)}
.entry-content figure{margin:1.6em 0}
code,pre,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
code{background:var(--code-bg);color:var(--text);padding:2px 6px;border-radius:6px}
pre{background:var(--code-bg);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;overflow-x:auto;line-height:22px}
pre code{background:none;padding:0}
.entry-content table{border-collapse:separate;border-spacing:0;overflow:hidden;font-size:15px}
.entry-content thead th{background:var(--surface);color:var(--text);font-weight:600;border-top:0}
.entry-content tbody tr:first-child td{border-top:1px solid var(--line)}
.entry-content tbody td{color:var(--text-2)}
.entry-content tbody tr:nth-child(even) td{background:var(--surface)}
.entry-content table{background:var(--surface-2)}
.entry-content .wp-block-button__link:hover{filter:brightness(1.08);text-decoration:none}
.card,.cat-tile,.step,.g-card .im{transition:border-color .15s}
.effect-card img{transition:border-color .15s,transform .2s ease,box-shadow .2s ease}
.card:hover,.step:hover{border-color:var(--line-strong)}
.effect-card:hover img,.effect-card:focus-visible img{border-color:var(--line-strong)}
.effect-card:hover img,.effect-card:focus-visible img{border-color:var(--accent-text);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
@media(prefers-reduced-motion:reduce){.effect-card:hover img,.effect-card:focus-visible img{transform:none}}
.effect-card:hover b,.grid>.card h2 a:hover,.grid>.card h3 a:hover{color:var(--accent-text)}
.grid>.card:hover{border-color:transparent}
.btn:not(.pri):hover,.button:not(.alt):hover{border-color:var(--text-2)}
.entry-content>.muted{margin:0 0 1.6em;font-size:14px}
.entry-content>.muted a{color:var(--text-2)}
.nav-links .page-numbers:hover{border-color:var(--line-strong);text-decoration:none}
/* comments */
#comments,.comments-area{max-width:780px;margin-top:56px}
#comments h2,#reply-title{font-size:22px;line-height:30px}
.comment-list{list-style:none;margin:0;padding:0}.comment-list .children{list-style:none;padding-left:24px}
.comment-body{padding:16px 0;border-bottom:1px solid var(--line);color:var(--text-2)}
.comment-author .fn{font-weight:600;color:var(--text)}
.comment-metadata,.comment-metadata a{font-size:13px;color:var(--muted)}
.comment-form label{display:block;margin-bottom:6px;font-weight:600;font-size:15px;color:var(--text)}
.comment-form textarea{width:100%;min-height:140px}
.comment-form .submit{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:var(--radius);border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:600 15px var(--font);cursor:pointer}
.comment-form .submit:hover{filter:brightness(1.08)}
/* forms, search, 404, errors */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.woocommerce-error,.woocommerce-error:before{color:var(--text)}
.woocommerce-error{border-top-color:var(--danger)}
.woocommerce-checkout #payment .place-order{padding:16px}
@media(max-width:720px){
 .entry-content h2{margin-top:1.5em}
 pre{padding:12px 14px}
 .comment-list .children{padding-left:12px}
}

.h-live{position:relative;aspect-ratio:2/1;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#0b0b0d}
.h-live img,.h-live video{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;object-fit:cover;display:block}
.h-load{position:absolute;right:18px;bottom:18px;width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--accent);animation:h-spin .8s linear infinite;transition:opacity .3s;pointer-events:none}
.h-live.ready .h-load{opacity:0;animation:none}
@keyframes h-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.h-load{display:none}}

/* trust badges and home pricing */
.trust{list-style:none;margin:0 0 24px;padding:0 0 24px;border-bottom:1px solid var(--line);display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.trust li{display:flex;gap:12px;align-items:flex-start;color:var(--accent-text)}
.trust span{display:flex;flex-direction:column;color:var(--text)}.trust small{color:var(--muted);font-size:13px;line-height:20px}
.plans-note+.trust{margin-top:32px;border-bottom:0}
/* in the footer (always dark): footer colours and a full-width row above the copyright and links */
.site-footer .trust{flex:1 1 100%;border-bottom-color:var(--chrome-line)}
.site-footer .trust span{color:var(--chrome-text)}.site-footer .trust small{color:var(--chrome-muted)}
.h-price .plans{margin-top:8px}

/* effect page: Load more under the related effects */
.s-grid .effect-card[hidden]{display:none}
.s-grid .effect-card.s-in{animation:s-in .45s ease both}
@keyframes s-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.s-loadwrap{display:flex;justify-content:center;padding-top:6px}
.s-spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--accent);animation:s-rot .7s linear infinite}
.s-loadmore.busy .s-spin{display:inline-block}
.s-loadmore.busy{opacity:.8;cursor:progress}
@keyframes s-rot{to{transform:rotate(360deg)}}

/* effect page: specification table */
.s-spec,.s-about{margin-top:48px}.s-spec h2,.s-about h2{display:flex;align-items:center;gap:12px;margin:0 0 12px}.s-spec h2 .ic,.s-about h2 .ic{width:28px;height:28px;color:var(--accent-text)}
.s-spec .ic,.s-about .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s-spec-lead{font-size:16px;color:var(--text-2);max-width:760px;margin:0 0 20px}
.s-tablewrap{overflow-x:auto;border:1px solid var(--line-strong);border-radius:14px}
.s-table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.s-table caption{position:absolute;left:-9999px}
.s-table thead th{text-align:left;padding:12px 16px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line-strong)}
.s-table tbody th[scope=row]{width:200px;text-align:left;font-weight:400;color:var(--muted);padding:10px 16px;border-top:1px solid var(--line-strong)}
.s-table td{padding:10px 16px;border-top:1px solid var(--line-strong);color:var(--text)}
.s-table .s-grp th{background:var(--surface);display:table-cell;text-align:left;padding:14px 16px 8px;font-weight:600;color:var(--text);border-top:1px solid var(--line-strong)}
.s-table .s-grp .ic{display:inline-block;vertical-align:-4px;margin-right:8px;color:var(--accent-text)}
.s-sw{display:inline-block;width:22px;height:22px;border-radius:6px;border:1px solid var(--line-strong);vertical-align:middle;margin-right:10px}
.s-table code{font-family:ui-monospace,Menlo,monospace}.s-rgb{color:var(--muted);margin-left:8px}
.s-spec .chips{margin-top:16px}
.s-about .s-desc{max-width:760px}.s-about h3 .ic{color:var(--accent-text)}.s-about h3{display:flex;align-items:center;gap:8px;font-size:16px;margin:20px 0 8px;color:var(--text)}
@media(max-width:720px){.s-table tbody th[scope=row]{width:44%}.s-rgb{display:block;margin:2px 0 0}}
/* effect page: About / Technical specification tabs */
.s-tabs{margin-top:48px}.s-tabs .s-spec{margin-top:0}
.s-tablist{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;overflow-y:hidden}.s-tablist button{display:inline-flex;align-items:center;gap:8px}.s-tablist button .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.s-tablist button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 18px;font:inherit;font-weight:600;font-size:16px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.s-tablist button:hover{color:var(--text)}
.s-tablist button[aria-selected=true]{color:var(--accent-text);border-bottom-color:var(--accent-text)}
.s-tablist button:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px;border-radius:6px}
.s-tabs:not(.js) .s-tablist{display:none}.s-tabs:not(.js) .s-panel+.s-panel{margin-top:48px}
.s-panel[hidden]{display:none}
.s-panel h2{display:flex;align-items:center;gap:12px;margin:0 0 12px}.s-panel h2 .ic{width:28px;height:28px;color:var(--accent-text)}
@media(max-width:640px){.s-tablist button{padding:10px 14px;font-size:15px}}
.navigation.pagination .nav-links{justify-content:center}

/* Freebie / Premium (#186) */
.g-access{display:inline-flex;align-self:flex-start;gap:2px;padding:4px;border:1px solid var(--line-strong);border-radius:999px}
.g-acc{height:34px;padding:0 20px;display:inline-flex;align-items:center;border-radius:999px;color:var(--text-2);font:600 14px var(--font);text-decoration:none}
.g-acc:hover{text-decoration:none;color:var(--text)}
.g-acc.on{background:var(--chip-on-bg);color:var(--chip-on-text)}
.g-acc.premium.on{background:#f5b83a;color:#1b1405}
.g-card .im,.effect-card{position:relative}
.effect-card .g-tier{font-size:11px;color:inherit}
.effect-card .g-tier.free{color:#fff}.effect-card .g-tier.premium{color:#1b1405}
.h-cards .effect-card span.g-tier{display:inline-block}
.g-tier{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px;font:700 11px var(--font);letter-spacing:.04em;text-transform:uppercase}
.g-tier.free{background:rgba(29,138,92,.92);color:#fff}
.g-tier.premium{background:#f5b83a;color:#1b1405}
@media(max-width:760px){.g-acc{height:40px;padding:0 16px}.g-tier{top:6px;left:6px;font-size:10px;padding:2px 8px}}

/* Pro waitlist: shown while payments are not live */
.notify-box{margin-top:20px}
.notify-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:520px;margin:0 auto}
.notify-form h3,.notify-form p{flex:1 1 100%;margin:0}
.notify-form input{flex:1 1 220px;min-width:0;padding:10px 12px;border-radius:8px;border:1px solid var(--line,#444);background:transparent;color:inherit;font:inherit}
.notify-msg{min-height:1.2em;color:var(--muted)}

/* intent landing pages (#207) */
.lp-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;padding-top:20px}
.lp-guide{padding:20px;border-radius:16px;border:1px solid var(--line)}
.lp-guide h2{margin:0 0 10px}
.lp-guide ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;line-height:24px;color:var(--text-2)}
.lp-tip{margin:14px 0 0;color:var(--text-2)}
.lp-card{display:flex;flex-direction:column;gap:10px}
.lp-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.s-more .g-intro{margin:0 0 16px}
@media(max-width:760px){.lp-main{grid-template-columns:minmax(0,1fr)}}

/* phone home: real results and a compact Free / Pro comparison instead of three tall price cards (#212) */
.h-real-list{display:grid;gap:12px;margin:12px 0 16px}
.h-real-card{display:grid;grid-template-columns:132px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none}
.h-real-card img{grid-row:1/3;width:132px;height:auto;border-radius:10px;display:block}
.h-real-card b{align-self:end;font-size:16px}.h-real-card span{align-self:start;font-size:14px;color:var(--muted)}
.h-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 16px}
.h-cmp-col{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.h-cmp-col.pro{border:2px solid var(--accent)}
.h-cmp-col h3{margin:0 0 8px;font-size:18px}.h-cmp-col h3 small{font-size:13px;font-weight:500;color:var(--muted)}
.h-cmp-col ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:20px;color:var(--text-2)}
.h-cmp-col li{padding:3px 0}.h-cmp-col li:before{content:"✓ ";color:var(--accent-text)}
@media(max-width:720px){.h-real.m-only,.h-compare.m-only{display:block}}

/* site search (header icon, /?s=, gallery box) */
.q-search{display:flex;gap:8px;width:100%;max-width:640px}
.q-search input[type=search]{flex:1 1 auto;min-width:0}
.q-search .btn{flex:0 0 auto}
.q-other{padding-top:36px}.q-other h2{margin:0 0 12px}.q-other ul{margin:0;padding-left:20px;line-height:1.9}