/* Managed Automation · page specific
   fdesign.com.gr

   Load AFTER fdesign-landing-core.css. Holds only what this page adds on top
   of the shared foundation:

   .section-paper light grey band behind what every plan includes and the
                  takeover of automations built elsewhere.
   .compare       hourly support against a managed plan. Under 640px each row
                  becomes a block and the column names move into data-label.
                  Same rules as on the other service pages; they stay in the
                  page files because one page has its own .compare.
   .xp-col        the two lists inside the "Built and running" .case.

   Also here: a visible style for links inside paragraphs, because core resets
   every link, the light background overrides for the plan family heading and
   the VAT note, which core colours for dark sections, and the FAQ heading
   centred as on the other service pages.

   From core: .findings and .verdict in the hero report, .define and .fit,
   .money with .cost-list and .tally, .step-link, .book-routes, .pricing-note.

   Author: Doeri, https://fdesign.com.gr
*/

.fdsec .section-paper{background:var(--paper)}

/* Links inside running text ------------------------------------------------ */
.fdsec p > a:not(.btn){color:var(--brand-deep);border-bottom:1px solid currentColor;transition:color .15s ease}
.fdsec p > a:not(.btn):hover{color:var(--brand)}
.fdsec .case p > a:not(.btn),
.fdsec .section-ink p > a:not(.btn){color:#fff;border-bottom-color:var(--brand)}
.fdsec .case p > a:not(.btn):hover,
.fdsec .section-ink p > a:not(.btn):hover{color:var(--brand)}
/* The source links keep the teal core gives them. */
.fdsec .section-ink p.sources > a:not(.btn){color:var(--secure);border-bottom-color:rgba(52,167,155,.3)}
.fdsec .section-ink p.sources > a:not(.btn):hover{color:#fff}

/* What every plan includes: six cards as two rows of three ----------------- */
.fdsec #included .cost-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.fdsec #included .cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fdsec #included .cost-grid{grid-template-columns:minmax(0,1fr)}}

/* The honest callout sits under the cards, with room to breathe. */
.fdsec #included .callout{margin-top:clamp(1.8rem,3vw,2.5rem)}

/* What changes underneath: four text-heavy cards read better two by two ---- */
.fdsec #changes .vectors{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.fdsec #changes .vectors{grid-template-columns:minmax(0,1fr)}}
.fdsec #changes .sources{max-width:78ch;margin:2.2rem 0 0}

/* Hourly support against a managed plan ------------------------------------ */
.fdsec .compare-wrap{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:10px;overflow:hidden}
.fdsec .compare{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.fdsec .compare th,
.fdsec .compare td{padding:1rem 1.2rem;border-bottom:1px solid var(--paper-line);text-align:left;vertical-align:top}
.fdsec .compare tbody tr:last-child th,
.fdsec .compare tbody tr:last-child td{border-bottom:0}
.fdsec .compare thead th{background:var(--paper);font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft)}
.fdsec .compare thead th.ours{color:var(--secure-deep)}
.fdsec .compare tbody th{width:19%;font-family:var(--f-display);font-weight:600;color:var(--fg)}
.fdsec .compare td{width:40.5%;color:var(--fg-soft)}
.fdsec .compare td.ours{background:rgba(52,167,155,.07);color:var(--fg)}
.fdsec .compare-note{max-width:64ch;margin:1.6rem 0 0;color:var(--fg-soft)}
@media (max-width:640px){
  .fdsec .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fdsec .compare,
  .fdsec .compare tbody,
  .fdsec .compare tr,
  .fdsec .compare th,
  .fdsec .compare td{display:block;width:100%}
  .fdsec .compare tr{padding:1.1rem 1.1rem 1.2rem;border-bottom:1px solid var(--paper-line)}
  .fdsec .compare tbody tr:last-child{border-bottom:0}
  .fdsec .compare th,
  .fdsec .compare td{padding:0;border:0}
  .fdsec .compare tbody th{width:100%;margin-bottom:.6rem}
  .fdsec .compare td + td{margin-top:.6rem}
  .fdsec .compare td.ours{background:transparent}
  .fdsec .compare td::before{content:attr(data-label);display:block;margin-bottom:.15rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft)}
  .fdsec .compare td.ours::before{color:var(--secure-deep)}
}

/* Built and running: two lists inside the shared .case ---------------------- */
.fdsec .case h2{max-width:22ch}
.fdsec .case .lead{max-width:62ch;color:var(--fg-inv-soft)}
.fdsec .xp-col h3{color:#fff;font-size:1.05rem;margin-bottom:.9rem}
.fdsec .case .callout{margin-top:2.5rem}

/* Pricing sits on white: core colours these two for dark sections ----------- */
.fdsec #pricing .family-head h3{color:var(--ink)}
.fdsec #pricing .vat-note{color:var(--fg-soft)}

/* FAQ heading centred, as on the other service pages ------------------------ */
.fdsec .faq .sec-head{margin-inline:auto;text-align:center}
.fdsec .faq .sec-head .eyebrow{justify-content:center}

@media (prefers-reduced-motion:reduce){
  .fdsec p > a:not(.btn){transition:none}
}