.sp-hero[data-astro-cid-e2q3ud5a]{padding-block:var(--size-10);background:#e6e7ea;& .breadcrumb{font-size:var(--fs-300);color:var(--clr-primary-700);align-items:center;gap:.6rem;margin-block-end:var(--size-5);display:flex;& a{color:var(--clr-secondary-900);text-decoration:none;&:hover{text-decoration:underline}}}& .hero-grid{gap:var(--size-10);grid-template-columns:1fr 46rem;align-items:center;display:grid}& .hero-left{gap:var(--size-3);flex-direction:column;display:flex}& .hero-cat{color:var(--clr-secondary-900);font-size:var(--fs-300);font-weight:var(--fw-semi-bold);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:.6rem;display:flex}& h1{color:var(--clr-primary-900);font-family:var(--ff-header);font-size:var(--fs-800);font-weight:var(--fw-bold);line-height:1.15;& em{color:var(--clr-secondary-900);font-style:italic}}& .hero-desc{color:var(--clr-primary-700);font-size:var(--fs-500);line-height:var(--lh-400);max-width:56ch}& .trust-strip{gap:var(--size-4);flex-wrap:wrap;margin-block-start:var(--size-1);display:flex;& .trust-item{align-items:center;gap:.8rem;display:flex;& .trust-icon{width:3.2rem;min-width:3.2rem;height:3.2rem;color:var(--clr-primary-900);background:#07133314;border-radius:50%;justify-content:center;align-items:center;display:flex}& .trust-label{color:var(--clr-primary-900);font-size:var(--fs-400);font-weight:var(--fw-semi-bold);line-height:1.3}& .trust-sub{color:var(--clr-primary-700);font-size:var(--fs-300);line-height:1.4}}}& .hero-right{& .hero-preview-card{border-radius:var(--border-radius-card);padding:var(--size-4);gap:var(--size-2);background:#fff;flex-direction:column;display:flex;box-shadow:0 4px 24px #0713331a;& .hpc-label{color:var(--clr-primary-700);font-size:var(--fs-300);font-weight:var(--fw-semi-bold);text-transform:uppercase;letter-spacing:.08em}& .hpc-result{padding:var(--size-2);background:var(--clr-primary-100);border-radius:.8rem;flex-direction:column;gap:.4rem;display:flex;& .hpc-url-row{align-items:center;gap:.5rem;display:flex;& .hpc-favicon{color:#5f6368;background:#e8eaed;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.8rem;height:1.8rem;display:flex}& .hpc-url{color:#4d5156;font-family:Arial,sans-serif;font-size:1.2rem;line-height:1.4}}& .hpc-title{color:#1a0dab;font-size:var(--fs-500);font-family:Arial,sans-serif;font-weight:400;line-height:1.3}& .hpc-desc{color:#4d5156;font-family:Arial,sans-serif;font-size:1.3rem;line-height:1.58}}& .hpc-stats{gap:var(--size-3);border-top:1px solid #0000000f;padding-block-start:var(--size-1);display:flex;& .hpc-stat{color:var(--clr-primary-700);font-size:var(--fs-300);align-items:center;gap:.5rem;display:flex;& .hpc-stat-dot{border-radius:50%;flex-shrink:0;width:.8rem;height:.8rem;&.hpc-stat-dot--good{background:#34a853}&.hpc-stat-dot--warning{background:#fbbc04}&.hpc-stat-dot--over{background:#ea4335}}}}}}@media (width<=1100px){& .hero-grid{gap:var(--size-6);grid-template-columns:1fr}& h1{font-size:var(--fs-700)}& .hero-right{max-width:52rem}}@media (width<=768px){padding-block:var(--size-8);& .trust-strip{gap:var(--size-3)}}}.sp-tool[data-astro-cid-jryg4aib]{background:var(--clr-primary-100);padding-block:var(--size-10);& .tool-grid{gap:var(--size-8);grid-template-columns:1fr 1fr;align-items:start;display:grid}& .tool-form{border-radius:var(--border-radius-card);padding:var(--size-5);gap:var(--size-4);background:#fff;flex-direction:column;display:flex;& .form-title{color:var(--clr-primary-900);font-family:var(--ff-header);font-size:var(--fs-600);font-weight:var(--fw-bold);line-height:1.3}}& .field-group{flex-direction:column;gap:.6rem;display:flex;& .field-header{justify-content:space-between;align-items:center;gap:var(--size-2);display:flex;& label{color:var(--clr-primary-900);font-size:var(--fs-400);font-weight:var(--fw-semi-bold);line-height:1.4}& .char-counter{color:var(--clr-primary-700);font-size:var(--fs-300);font-weight:var(--fw-semi-bold);white-space:nowrap;transition:color .2s}& .field-tag{color:var(--clr-primary-700);font-size:var(--fs-300);background:#0000000f;border-radius:99px;padding-block:.2rem;padding-inline:.8rem}}& input,& textarea{background:var(--clr-primary-100);border-radius:var(--border-radius-btn);width:100%;color:var(--clr-primary-900);font-family:var(--ff-base);font-size:var(--fs-400);line-height:var(--lh-400);resize:none;border:1.5px solid #0000001f;padding:1rem 1.2rem;transition:border-color .2s;&::placeholder{color:#07133359}&:focus{border-color:var(--clr-primary-900);background:#fff;outline:none}}& .url-wrap{background:var(--clr-primary-100);border-radius:var(--border-radius-btn);border:1.5px solid #0000001f;align-items:center;transition:border-color .2s;display:flex;overflow:hidden;&:focus-within{border-color:var(--clr-primary-900);background:#fff}& .url-prefix{color:var(--clr-primary-700);font-size:var(--fs-400);white-space:nowrap;background:#00000008;border-right:1px solid #0000001a;padding-inline:1.2rem}& input{background:0 0;border:none;border-radius:0;flex:1;&:focus{background:0 0}}}& .field-sub{color:var(--clr-primary-700);font-size:var(--fs-300);line-height:var(--lh-400)}& .counter-bar{align-items:center;gap:var(--size-2);display:flex;& .bar-track{background:#00000014;border-radius:99px;flex:1;height:.4rem;overflow:hidden;& .bar-fill{background:#0003;border-radius:99px;width:0;height:100%;transition:width .15s,background-color .2s}}& .field-hint{color:var(--clr-primary-700);font-size:var(--fs-300);white-space:nowrap;text-align:right;min-width:18ch;transition:color .2s}}&[data-state=good]{& .char-counter{color:#1e7e34}& .bar-fill{background:#34a853}& .field-hint{color:#1e7e34}}&[data-state=warning]{& .char-counter{color:#a06800}& .bar-fill{background:#fbbc04}& .field-hint{color:#a06800}}&[data-state=over]{& .char-counter{color:#c62828}& .bar-fill{background:#ea4335}& .field-hint{color:#c62828}& input,& textarea{border-color:#ea433566}}}& .copy-wrap{border-top:1px solid #0000000f;flex-direction:column;gap:.6rem;padding-block-start:var(--size-1);display:flex;& .copy-btn{background:var(--clr-primary-100);border-radius:var(--border-radius-btn);color:var(--clr-primary-900);cursor:pointer;font-family:var(--ff-base);font-size:var(--fs-400);font-weight:var(--fw-semi-bold);border:1.5px solid #0000001f;align-items:center;gap:.7rem;padding:1rem 1.6rem;transition:border-color .2s,color .2s;display:inline-flex;&:hover{border-color:var(--clr-secondary-900);color:var(--clr-secondary-900)}}& .copy-feedback{font-size:var(--fs-300);min-height:1.6rem;&[data-state=success]{color:#1e7e34}&[data-state=error]{color:#c62828}}}& .tool-preview{gap:var(--size-3);flex-direction:column;display:flex;& .preview-header{justify-content:space-between;align-items:center;gap:var(--size-3);display:flex;& .preview-label{color:var(--clr-primary-900);font-family:var(--ff-header);font-size:var(--fs-600);font-weight:var(--fw-bold);line-height:1.3}}}& .preview-block{flex-direction:column;gap:.8rem;display:flex}& .preview-device-label{color:var(--clr-primary-700);font-size:var(--fs-300);font-weight:var(--fw-semi-bold);text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:.5rem;display:flex}& .preview-frame{border-radius:var(--border-radius-card);background:#fff;border:1px solid #0000001a;overflow:hidden;& .search-bar-mock{background:#f8f9fa;border-bottom:1px solid #00000014;align-items:center;gap:.8rem;padding:1.2rem 1.6rem;display:flex;& .search-icon{color:#5f6368;flex-shrink:0}& .mic-icon{color:#5f6368;flex-shrink:0;margin-inline-start:auto}& .search-text{color:var(--clr-primary-900);font-size:var(--fs-400);white-space:nowrap;text-overflow:ellipsis;flex:1;font-family:Arial,sans-serif;overflow:hidden}}& .serp-result{padding:var(--size-3) var(--size-4);flex-direction:column;gap:.3rem;display:flex;& .serp-url-row{align-items:center;gap:.6rem;display:flex;& .serp-favicon{color:#5f6368;background:#e8eaed;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.8rem;height:1.8rem;display:flex}& .serp-url-info{color:#4d5156;white-space:nowrap;text-overflow:ellipsis;font-family:Arial,sans-serif;font-size:1.2rem;line-height:1.4;overflow:hidden}}& .serp-title{color:#1a0dab;cursor:pointer;font-family:Arial,sans-serif;font-size:2rem;font-weight:400;line-height:1.3;&:hover{text-decoration:underline}& strong{font-weight:700}}& .serp-desc{color:#4d5156;font-family:Arial,sans-serif;font-size:1.4rem;line-height:1.58;& strong{color:#202124;font-weight:700}}}}& .preview-frame--mobile{padding:var(--size-3);background:var(--clr-primary-100);align-items:center;gap:var(--size-2);flex-direction:column;display:flex;& .phone-frame{background:#fff;border:2px solid #00000026;border-radius:2.4rem;width:28rem;max-width:100%;overflow:hidden;box-shadow:0 4px 20px #0000001a;& .phone-status{color:var(--clr-primary-900);background:#f8f9fa;justify-content:space-between;align-items:center;padding:.8rem 1.6rem .4rem;font-family:Arial,sans-serif;font-size:1.1rem;font-weight:600;display:flex}& .phone-search{color:#5f6368;background:#f8f9fa;border-bottom:1px solid #00000014;align-items:center;gap:.8rem;padding:.8rem 1.2rem;display:flex;& .phone-search-text{color:var(--clr-primary-900);white-space:nowrap;text-overflow:ellipsis;font-family:Arial,sans-serif;font-size:1.3rem;overflow:hidden}}& .phone-result{flex-direction:column;gap:.3rem;padding:1.2rem;display:flex;& .serp-url-row{align-items:center;gap:.6rem;display:flex;& .serp-favicon{color:#5f6368;background:#e8eaed;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.6rem;height:1.6rem;display:flex}& .serp-url-info{color:#4d5156;white-space:nowrap;text-overflow:ellipsis;font-family:Arial,sans-serif;font-size:1.1rem;line-height:1.4;overflow:hidden}}& .serp-title{color:#1558d6;font-family:Arial,sans-serif;font-size:1.7rem;font-weight:400;line-height:1.3;& strong{font-weight:700}}& .serp-desc{color:#4d5156;font-family:Arial,sans-serif;font-size:1.3rem;line-height:1.58;& strong{color:#202124;font-weight:700}}}}& .mobile-note{color:var(--clr-primary-700);font-size:var(--fs-300);text-align:center;line-height:var(--lh-400)}}& .status-row{gap:var(--size-2) var(--size-4);padding:var(--size-2) var(--size-3);border-radius:var(--border-radius-btn);background:#fff;border:1px solid #00000014;flex-wrap:wrap;display:flex;& .status-item{align-items:center;gap:.6rem;display:flex;& .status-dot{background:#0003;border-radius:50%;flex-shrink:0;width:.8rem;height:.8rem;transition:background .2s;&[data-state=good]{background:#34a853}&[data-state=short]{background:#0000004d}&[data-state=warning]{background:#fbbc04}&[data-state=over]{background:#ea4335}}& .status-lbl{color:var(--clr-primary-700);font-size:var(--fs-300);font-weight:var(--fw-semi-bold)}& .status-txt{color:var(--clr-primary-900);font-size:var(--fs-300)}}}@media (width<=1100px){& .tool-grid{grid-template-columns:1fr}}@media (width<=768px){padding-block:var(--size-8);& .tool-form{padding:var(--size-3)}& .field-group .counter-bar{flex-direction:column;align-items:flex-start;gap:.4rem;& .field-hint{text-align:left;white-space:normal}}}}.serp-explained[data-astro-cid-5sevwr23]{background:var(--clr-primary-100);padding-block:var(--size-8);& .container{gap:var(--size-2);flex-direction:column;max-width:80ch;display:flex}& h2{color:var(--clr-primary-900);font-family:var(--ff-header);font-size:var(--fs-700);font-weight:var(--fw-bold);line-height:1.2}& p{color:var(--clr-primary-700);font-size:var(--fs-500);line-height:var(--lh-400)}}.cross-link[data-astro-cid-5sevwr23]{color:var(--clr-primary-700);font-size:var(--fs-400);max-width:none;text-align:center;background:#fff;padding-block-end:var(--size-8);& a{color:var(--clr-secondary-900);text-underline-offset:3px;text-decoration:underline;&:hover{text-decoration-thickness:2px}}}
