/* Automation Build & Integration · 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 build includes and the
                  running costs.
   .compare       a ready-made connector against a build. 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.
   .callout       one override: the link inside the dark callout, which here
                  sits on a light band.
   .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 run log, .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 build 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 callout is dark wherever it sits, so the link inside it needs the bright
   brand colour, not the deep one core gives links on light sections. */
.fdsec #included .callout{margin-top:clamp(1.8rem,3vw,2.5rem)}
.fdsec .callout .step-link{color:var(--brand)}
.fdsec .callout .step-link:hover{color:#fff}

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

/* A ready-made connector against a build ------------------------------------ */
.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}
}