/* AI & Business Systems Consulting · 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 the decisions and the quote checklist.
   .compare       vendor advice against independent advice. Under 640px each
                  row becomes a block and the column names move into
                  data-label. Same rules as on the process audit page; they
                  stay in the page files because the withdrawal page has its
                  own .compare.
   .xp-col        the two lists inside the "Built and running" .case.
   .plans.pair    the second pricing row, two plans instead of three.
   .callout       one override: the link inside the dark callout, which here
                  sits on a light band.

   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, .define and .fit, .money
   with .cost-list and .tally, .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}

/* Decisions: six cards as two rows of three, never five and one ------------ */
.fdsec #decisions .cost-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.fdsec #decisions .cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fdsec #decisions .cost-grid{grid-template-columns:minmax(0,1fr)}}

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

/* Vendor advice against independent advice ---------------------------------- */
.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)}
}

/* 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 #decisions .callout{margin-top:clamp(1.8rem,3vw,2.5rem)}
.fdsec .callout .step-link{color:var(--brand)}
.fdsec .callout .step-link:hover{color:#fff}

/* 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)}
.fdsec .plans.pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin-inline:auto}
@media (max-width:860px){.fdsec .plans.pair{grid-template-columns:minmax(0,1fr)}}

/* 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}
}