/* ==========================================================================
   Page: Website Design (Build 35.6)
   Second implementation of Internal Hero System v1.0. This file controls
   only the Website Design hero motif, hero interface object, and this
   page's own content-layout sections. Shared behavior (hero geometry,
   buttons, trust bar, timeline/process, FAQ, CTA, blog cards) lives in
   their existing component files and is intentionally not duplicated here.
   ========================================================================== */

/* --------------------------------------------------------------------
   Hero background motif: browser-frame / wireframe-grid treatment.
   CSS-only (no image dependency), per spec - reliable on IIS, no reliance
   on a faint SVG background. A subtle repeating grid evokes a wireframe
   layout guide; two soft diagonal "connection line" gradients suggest a
   responsive/interface system without competing with the hero copy.
   -------------------------------------------------------------------- */
.internal-hero--website-design{
    --internal-hero-bg-image:
        repeating-linear-gradient(90deg, rgba(111,217,224,.10) 0, rgba(111,217,224,.10) 1px, transparent 1px, transparent 64px),
        repeating-linear-gradient(0deg, rgba(111,217,224,.10) 0, rgba(111,217,224,.10) 1px, transparent 1px, transparent 64px),
        linear-gradient(135deg, rgba(19,167,179,.16) 0%, transparent 46%),
        linear-gradient(315deg, rgba(19,167,179,.12) 0%, transparent 40%);
}
.internal-hero--website-design .internal-hero__bg{background-size:64px 64px,64px 64px,100% 100%,100% 100%;background-position:center;}
.internal-hero--website-design .internal-hero__overlay{
    background:
        radial-gradient(circle at 74% 40%,rgba(19,167,179,.10),transparent 36%),
        linear-gradient(90deg,rgba(0,31,49,.92) 0%,rgba(0,31,49,.80) 52%,rgba(0,31,49,.58) 100%);
}

/* --------------------------------------------------------------------
   Hero object: a single unified interface showing the website + rental
   system, not a collage. A "desktop browser" frame with a simplified
   unit-availability grid, overlapped by a "mobile" frame with a stacked
   rental list - illustrating the responsive viewport transition. No
   stock photography, no invented metrics, no 3D/AI-style rendering.
   -------------------------------------------------------------------- */
.wd-hero-visual{position:relative;max-width:420px;min-height:330px;margin-left:auto;}

.wd-browser{
    position:relative;z-index:1;
    background:var(--white);border-radius:12px;overflow:hidden;
    box-shadow:0 24px 54px rgba(0,10,18,.42);
}
.wd-browser__chrome{
    display:flex;align-items:center;gap:6px;
    padding:10px 14px;background:var(--gray-100);border-bottom:1px solid var(--gray-300);
}
.wd-browser__chrome span{width:9px;height:9px;border-radius:50%;background:var(--gray-300);display:block;}
.wd-browser__chrome span:nth-child(1){background:#F58D1D;}
.wd-browser__chrome span:nth-child(2){background:#6FD9E0;}
.wd-browser__bar{
    margin-left:10px;flex:1;height:18px;border-radius:5px;background:var(--white);
    border:1px solid var(--gray-300);
}
.wd-browser__body{padding:16px;}
.wd-browser__title{width:62%;height:10px;border-radius:3px;background:var(--gray-300);margin-bottom:8px;}
.wd-browser__sub{width:40%;height:8px;border-radius:3px;background:var(--gray-300);opacity:.7;margin-bottom:16px;}

.wd-unit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.wd-unit-card{
    border:1px solid var(--gray-300);border-radius:8px;padding:10px 8px;
    display:flex;flex-direction:column;gap:6px;
}
.wd-unit-card__size{width:70%;height:8px;border-radius:2px;background:var(--navy-950);opacity:.75;}
.wd-unit-card__dot{display:flex;align-items:center;gap:5px;}
.wd-unit-card__dot::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--teal-500);flex-shrink:0;}
.wd-unit-card__dot span{width:60%;height:6px;border-radius:2px;background:var(--gray-300);}
.wd-unit-card--full .wd-unit-card__dot::before{background:var(--cta-500);}
.wd-unit-card__btn{margin-top:2px;width:100%;height:16px;border-radius:4px;background:var(--teal-500);opacity:.9;}

.wd-mobile{
    position:absolute;right:-18px;bottom:-26px;z-index:2;width:118px;
    background:var(--navy-950);border-radius:16px;padding:8px 7px;
    box-shadow:0 18px 40px rgba(0,10,18,.5);border:1px solid rgba(255,255,255,.08);
}
.wd-mobile__notch{width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:0 auto 8px;}
.wd-mobile__row{
    display:flex;align-items:center;gap:6px;padding:6px 6px;border-radius:6px;
    background:rgba(255,255,255,.06);margin-bottom:6px;
}
.wd-mobile__row:last-child{margin-bottom:0;}
.wd-mobile__row-dot{width:6px;height:6px;border-radius:50%;background:var(--teal-300);flex-shrink:0;}
.wd-mobile__row-lines{flex:1;display:flex;flex-direction:column;gap:3px;}
.wd-mobile__row-lines span{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.28);}
.wd-mobile__row-lines span:last-child{width:55%;}

.wd-signal{
    position:absolute;left:-6px;top:-14px;z-index:3;
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(0,31,49,.72);border:1px solid rgba(111,217,224,.35);
    color:var(--teal-300);font-size:.72rem;font-weight:600;
    padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px);
}

@media (max-width:1200px){
    .wd-mobile{right:-8px;}
}
@media (max-width:1024px){
    .internal-hero--website-design .internal-hero__bg{background-size:56px 56px,56px 56px,100% 100%,100% 100%;}
}

/* --------------------------------------------------------------------
   Section: Why Most Self-Storage Websites Underperform
   -------------------------------------------------------------------- */
.wd-problem{padding:90px 0;background:var(--white);}
.wd-problem-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;}
.wd-problem-copy h2{margin-bottom:16px;}
.wd-problem-copy p{color:var(--gray-700);font-size:1rem;line-height:1.65;margin-bottom:16px;}
.wd-problem-list{display:grid;gap:14px;}
.wd-problem-item{
    display:flex;gap:12px;align-items:flex-start;
    background:var(--gray-100);border:1px solid var(--gray-300);border-radius:10px;
    padding:14px 16px;
}
.wd-problem-item svg{flex-shrink:0;color:var(--cta-500);margin-top:2px;}
.wd-problem-item p{margin:0;color:var(--gray-700);font-size:.92rem;line-height:1.5;}
.wd-problem-item strong{color:var(--navy-950);}

@media (max-width:1024px){
    .wd-problem-layout{grid-template-columns:1fr;gap:32px;}
}

/* --------------------------------------------------------------------
   Section: What StorageRankers Builds (hierarchy - one featured
   capability block, five supporting capabilities, not a flat card wall)
   -------------------------------------------------------------------- */
.wd-capabilities{padding:90px 0;background:var(--navy-950);}
.wd-cap-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:22px;margin-top:36px;}
.wd-cap-card{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;
    padding:26px 24px;
}
.wd-cap-card--featured{
    grid-row:span 2;background:rgba(19,167,179,.10);border-color:rgba(111,217,224,.3);
    padding:32px 28px;display:flex;flex-direction:column;
}
.wd-cap-card--featured .wd-cap-ribbon{
    display:inline-block;background:var(--teal-500);color:var(--white);
    font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
    padding:4px 12px;border-radius:999px;margin-bottom:14px;align-self:flex-start;
}
.wd-cap-card h3{color:var(--white);font-size:1.05rem;font-weight:700;margin-bottom:8px;}
.wd-cap-card--featured h3{font-size:1.3rem;}
.wd-cap-card p{color:var(--gray-300);font-size:.88rem;line-height:1.6;margin:0;}
.wd-cap-card--featured p{font-size:.95rem;margin-bottom:16px;}
.wd-cap-card ul{margin-top:14px;display:grid;gap:8px;}
.wd-cap-card ul li{color:var(--gray-300);font-size:.85rem;display:flex;gap:8px;align-items:flex-start;}
.wd-cap-card ul li::before{content:'\2713';color:var(--teal-300);flex-shrink:0;}

@media (max-width:1024px){
    .wd-cap-grid{grid-template-columns:1fr 1fr;}
    .wd-cap-card--featured{grid-column:1/-1;grid-row:auto;}
}
@media (max-width:640px){
    .wd-cap-grid{grid-template-columns:1fr;}
}

/* --------------------------------------------------------------------
   Section: Software and CMS Compatibility (supports, does not duplicate,
   the homepage integration-section hub diagram)
   -------------------------------------------------------------------- */
.wd-cms{padding:80px 0;background:var(--gray-100);}
.wd-cms-strip{
    display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:32px;
}
.wd-cms-badge{
    display:flex;align-items:center;gap:10px;background:var(--white);
    border:1px solid var(--gray-300);border-radius:10px;padding:12px 20px;
    box-shadow:0 4px 14px rgba(0,31,49,.05);
}
.wd-cms-badge img{height:26px;width:auto;display:block;}
.wd-cms-badge span{font-size:.88rem;font-weight:600;color:var(--navy-950);}
.wd-cms-badge--text-only span{font-size:.85rem;color:var(--gray-700);font-weight:600;}
.wd-cms-note{max-width:680px;margin:28px auto 0;text-align:center;color:var(--gray-700);font-size:.92rem;line-height:1.6;}

/* --------------------------------------------------------------------
   Section: Conversion and Rental Experience
   -------------------------------------------------------------------- */
.wd-conversion{padding:90px 0;background:var(--white);}
.wd-conversion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;}
.wd-conv-card{padding:4px;}
.wd-conv-card svg{color:var(--teal-500);margin-bottom:12px;}
.wd-conv-card h3{color:var(--navy-950);font-size:1rem;font-weight:700;margin-bottom:8px;}
.wd-conv-card p{color:var(--gray-700);font-size:.9rem;line-height:1.55;margin:0;}

@media (max-width:1024px){.wd-conversion-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.wd-conversion-grid{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------
   Section: Relevant Insights (reuses .blog-grid / .blog-card verbatim)
   -------------------------------------------------------------------- */
.wd-insights{padding:80px 0;background:var(--gray-100);}
.wd-insights .blog-grid{margin-top:32px;grid-template-columns:repeat(2,1fr);}
@media (max-width:768px){.wd-insights .blog-grid{grid-template-columns:1fr;}}