/* WordPress Website Design landing, page specific styles
   FDesign · fdesign.com.gr

   Loads AFTER fdesign-landing-core.css, which carries the tokens, layout, typography,
   buttons, section shells, stakes cards, numbered process, pricing block, FAQ, author
   block, testimonials and closing CTA. Nothing from core is repeated here.

   Everything stays scoped under .fdsec, the shared landing wrapper.

   .case, .vectors and .console come from core and are not repeated here. The only
   core selectors this file touches are .case h2, for a page specific max-width, and
   .vat-note, which runs to two lines on this page.

   Enqueue: add to fdesign_landing_map()
     'wordpress-website-design' => 'wordpress-website-design',
*/

/* ---------------------------------------------------------------------------
   Unique to this page
   --------------------------------------------------------------------------- */

/* Narrower than core leaves it, so the dark band headings hold their shape. */
.fdsec .case h2{max-width:24ch}

/* Signature element: the Core Web Vitals target card, inside the shared console frame.
   These are Google's published "good" thresholds, measured on field data at the 75th
   percentile, not invented numbers and not a Lighthouse lab score. Framed as the target
   every build is measured against before handover. */
.fdsec .scores{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-3)}
.fdsec .sc{background:var(--ink-2);padding:1.4rem .6rem 1.25rem;text-align:center}
.fdsec .sc .lbl{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-inv-soft);display:block;line-height:1.35}
.fdsec .sc .val{font-family:var(--f-display);font-weight:700;font-size:clamp(1.45rem,3.2vw,2rem);line-height:1;color:var(--secure);margin-top:.55rem}
.fdsec .sc .sub{font-family:var(--f-mono);font-size:.62rem;color:var(--fg-inv-soft);display:block;margin-top:.4rem}
.fdsec .sc .good{display:inline-block;margin-top:.85rem;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secure);border:1px solid rgba(52,167,155,.4);border-radius:20px;padding:.15rem .6rem}
.fdsec .vitals{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;padding:.95rem 1.1rem;border-top:1px solid var(--ink-3);font-family:var(--f-mono);font-size:.74rem;color:var(--fg-inv-soft)}
.fdsec .vitals b{color:var(--fg-inv);font-weight:600}

/* Selected work band. Delete this block together with the matching section in the
   markup if the page should carry no client references at all. */
.fdsec .works{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--ink-3);border:1px solid var(--ink-3);border-radius:8px;overflow:hidden;margin-top:2.4rem}
.fdsec .work{background:var(--ink-2);padding:1.5rem 1.4rem;display:block;transition:background .15s ease}
.fdsec .work:hover{background:#1E2733}
.fdsec .work .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--secure)}
.fdsec .work h3{color:#fff;font-size:1.05rem;margin:.7rem 0 .45rem}
.fdsec .work p{color:var(--fg-inv-soft);font-size:.88rem;margin:0}
.fdsec .work-more{font-family:var(--f-mono);font-size:.78rem;color:var(--fg-inv-soft);margin-top:1.6rem}
.fdsec .work-more a{color:var(--secure);border-bottom:1px solid rgba(52,167,155,.3)}
.fdsec .work-more a:hover{color:#fff}

/* After launch: hosting, maintenance and security cross sell */
.fdsec .addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.fdsec .addon{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:10px;padding:1.7rem 1.6rem;display:flex;flex-direction:column}
.fdsec .addon .kicker{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--secure-deep)}
.fdsec .addon h3{margin:.7rem 0 .4rem;font-size:1.25rem}
.fdsec .addon .price{font-family:var(--f-display);font-weight:700;font-size:1.35rem;color:var(--fg);line-height:1;margin:.2rem 0 .8rem}
.fdsec .addon .price span{font-family:var(--f-body);font-weight:500;font-size:.8rem;color:var(--fg-soft)}
.fdsec .addon p{color:var(--fg-soft);font-size:.93rem;margin:0 0 1.2rem;flex:1}
.fdsec .addon .go{font-family:var(--f-mono);font-size:.78rem;color:var(--brand-deep);border-bottom:1px solid rgba(196,0,54,.3);align-self:flex-start}
.fdsec .addon .go:hover{color:var(--fg)}

/* The VAT note on this page runs to two lines, so it needs the looser leading. */
.fdsec .vat-note{line-height:1.9}

/* Narrow screens: three columns stay, the type tightens so the values still read. */
@media (max-width:560px){
  .fdsec .sc{padding:1.15rem .35rem 1.05rem}
  .fdsec .sc .lbl{font-size:.58rem;letter-spacing:.1em}
  .fdsec .sc .sub{font-size:.56rem}
  .fdsec .sc .good{font-size:.52rem;padding:.12rem .45rem;margin-top:.65rem}
  .fdsec .vitals{font-size:.68rem;gap:.35rem 1rem;padding:.85rem .9rem}
}
@media (max-width:380px){
  .fdsec .sc .good{display:none}
  .fdsec .vitals{font-size:.63rem;gap:.3rem .8rem}
}

/* Digits that stack in a column, same pattern as the other landing pages. */
.fdsec .sc .val,
.fdsec .vitals{font-variant-numeric:tabular-nums}