/* FDesign landing pages · shared foundation
   fdesign.com.gr

   Shared foundation for every landing page: tokens, layout, typography, buttons,
   section shells, stakes cards, numbered process, pricing block, FAQ, author block,
   testimonials, closing CTA, and the shared .case, .vectors and .console components.
   Wrap every landing page in <div class="fdsec">. Load it BEFORE the page stylesheet.

   Lilex, self hosted
   Source: Google Fonts, SIL Open Font License 1.1. Latin and Greek.

   Replaced IBM Plex Mono, which has no Greek subset at all and therefore set
   Greek text in a fallback face while leaving the digits beside it in Plex --
   two families inside one word, most visibly in the eyebrows.

   Lilex is by Mike Abbink, Paul van der Laan and Pieter van Rosmalen. Abbink
   designed IBM Plex; the other two drew it. Measured, all three metrics match
   the face it replaces exactly: x-height 0.516, cap 0.698, advance 0.600, so
   nothing reflowed and no size-adjust was needed.

   If these files are ever regenerated: Google serves Lilex as a VARIABLE font,
   and the woff2 it returns for weight 600 is byte for byte the one it returns
   for 400. Saved as static files without pinning, all three weights render at
   400 and the eyebrows lose their weight silently. These are pinned with
   fontTools; stem widths are 0.070, 0.088 and 0.108 em.

   Keep the unicode-range. It is what stops an English page fetching the Greek
   files, about 12 KB per weight most visitors never need.
   ---------------------------------------------------------------------------
*/
@font-face{
  font-family:"Lilex";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("./fonts/lilex/lilex-latin-400-normal.woff2") format("woff2"),
      url("./fonts/lilex/lilex-latin-400-normal.woff") format("woff");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Lilex";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("./fonts/lilex/lilex-greek-400-normal.woff2") format("woff2"),
      url("./fonts/lilex/lilex-greek-400-normal.woff") format("woff");
  unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face{
  font-family:"Lilex";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("./fonts/lilex/lilex-latin-500-normal.woff2") format("woff2"),
      url("./fonts/lilex/lilex-latin-500-normal.woff") format("woff");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Lilex";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("./fonts/lilex/lilex-greek-500-normal.woff2") format("woff2"),
      url("./fonts/lilex/lilex-greek-500-normal.woff") format("woff");
  unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face{
  font-family:"Lilex";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("./fonts/lilex/lilex-latin-600-normal.woff2") format("woff2"),
      url("./fonts/lilex/lilex-latin-600-normal.woff") format("woff");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Lilex";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("./fonts/lilex/lilex-greek-600-normal.woff2") format("woff2"),
      url("./fonts/lilex/lilex-greek-600-normal.woff") format("woff");
  unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

.fdsec{
  --ink:#111720; --ink-2:#19202B; --ink-3:#272F3C;
  --paper:#F4F5F6; --paper-2:#FFFFFF; --paper-line:#DBDEE2;
  --fg:#111720; --fg-soft:#4A515A; --fg-inv:#E9EBEE; --fg-inv-soft:#98A0AA;
  --brand:#ff0040; --brand-deep:#C40036;
  --caution:#EBA43B; --secure:#34A79B; --secure-deep:#1F7E74;
  --f-display:"hgfmd", system-ui, sans-serif;
  --f-body:"verdbold", system-ui, sans-serif;
  --f-mono:"Lilex", ui-monospace, monospace;
  --maxw:1330px; --pad-sec:clamp(3.5rem, 8vw, 6.5rem); --radius:4px;
  font-family:var(--f-body); color:var(--fg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.fdsec *{box-sizing:border-box}
.fdsec .reveal{opacity:1;transform:none}
.fdsec .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.fdsec h1,.fdsec h2,.fdsec h3{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0;padding-bottom: 10px;}
.fdsec h1{font-size:clamp(2.7rem,5.6vw,4.3rem)}
.fdsec h2{font-size:clamp(2.2rem,3.8vw,3rem)}
.fdsec h3{font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.01em}
.fdsec p{margin:0 0 1rem}
.fdsec a{color:inherit;text-decoration:none}
.fdsec .eyebrow{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.1rem}
.fdsec .eyebrow::before{content:"";width:26px;height:1px;background:var(--brand);display:inline-block}
.fdsec .eyebrow.on-paper{color:var(--brand-deep)}
.fdsec .lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--fg-soft);max-width:46ch}
.fdsec .btn{display:inline-flex;align-items:center;gap:.55rem;justify-content:center;font-family:var(--f-display);font-weight:600;font-size:1rem;padding:.9rem 1.5rem;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease, background .15s ease}
.fdsec .btn:hover{transform:translateY(-2px)}
.fdsec .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.fdsec .btn-primary:hover{background:#E0003A}
.fdsec .btn-ghost{background:transparent;color:var(--fg-inv);border-color:var(--ink-3)}
.fdsec .btn-ghost:hover{border-color:var(--brand);color:#fff}
.fdsec .btn-danger{background:transparent;color:var(--brand);border-color:transparent;padding-inline:.2rem}
.fdsec .btn-danger:hover{color:#fff}
.fdsec .btn-lg{padding:1.05rem 1.9rem;font-size:1.08rem}
.fdsec :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
.fdsec .hero{background:var(--ink);color:var(--fg-inv);position:relative;overflow:hidden}
.fdsec .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 82% 0%, rgba(255,0,64,.12), transparent 60%),radial-gradient(50% 50% at 0% 100%, rgba(52,167,155,.07), transparent 55%);pointer-events:none}
.fdsec .hero .wrap{position:relative;padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:var(--pad-sec);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.fdsec .hero .wrap{grid-template-columns:1fr;gap:2.5rem}}
.fdsec .hero h1{color:#fff}
.fdsec .hero .lead{color:var(--fg-inv-soft);margin-top:1.3rem;max-width:42ch}
.fdsec .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:2rem}
.fdsec .hero-note{font-family:var(--f-mono);font-size:.78rem;color:var(--fg-inv-soft);margin-top:1.8rem;border-left:2px solid var(--brand);padding-left:.9rem;max-width:40ch;line-height:1.5}
.fdsec section{padding-block:var(--pad-sec)}
.fdsec .section-ink{background:var(--ink);color:var(--fg-inv)}
.fdsec .section-ink h2{color:#fff}
.fdsec .section-ink .lead{color:var(--fg-inv-soft)}
.fdsec .sec-head{max-width:60ch;margin-bottom:clamp(2.2rem,4vw,3.2rem)}

/* ---------------------------------------------------------------------------
   Shared landing components, promoted from the page stylesheets.

   .case      dark gradient section shell for case studies, selected work and the
              author band. Page files set their own .case h2 max-width.
   .case-cols two-column layout inside .case, e.g. a before/after comparison or a
              timeline next to a narrative column. Promoted from the WordPress
              Security page once Business Process Automation needed it too.
   .vectors   four-up card grid on dark, for feature or threat blocks.
   .console   browser style frame. Page files supply the payload inside it: the
              mock users table on WordPress Security, the automation run log on
              Business Process Automation.
   --------------------------------------------------------------------------- */
.fdsec .case{background:linear-gradient(180deg,#0D131C, #111720);color:var(--fg-inv)}
.fdsec .case .badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.72rem;color:var(--brand);border:1px solid var(--brand-deep);border-radius:20px;padding:.28rem .8rem;margin-bottom:1.2rem;letter-spacing:.06em}
.fdsec .case h2{color:#fff}
.fdsec .case-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);margin-top:3.5rem;align-items:start}
@media(max-width:820px){.fdsec .case-cols{grid-template-columns:1fr}}
.fdsec .vectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin-top:1rem}
.fdsec .vector{border:1px solid var(--ink-3);border-radius:8px;padding:1.4rem;background:var(--ink-2)}
.fdsec .vector h3{color:#fff;font-size:1.08rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.fdsec .vector h3 .tag{font-family:var(--f-mono);font-size:.62rem;color:var(--brand);border:1px solid var(--brand-deep);border-radius:3px;padding:.05rem .35rem;letter-spacing:.05em}
.fdsec .vector p{color:var(--fg-inv-soft);font-size:.9rem;margin:0}
.fdsec .console{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.fdsec .console-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem .95rem;border-bottom:1px solid var(--ink-3);font-family:var(--f-mono);font-size:.74rem;color:var(--fg-inv-soft)}
.fdsec .console-bar .lights{display:flex;gap:.4rem;margin-right:.4rem}
.fdsec .console-bar .lights i{width:10px;height:10px;border-radius:50%;display:block;background:var(--ink-3)}
.fdsec .console-bar .path{margin-left:auto;opacity:.8}
@media (max-width:560px){
  .fdsec .console{max-width:100%;overflow-x:auto}
  .fdsec .console-bar{font-size:.66rem;padding:.6rem .7rem;gap:.4rem}
  .fdsec .console-bar .path{display:none}
  .fdsec .console-bar .lights i{width:8px;height:8px}
}
.fdsec .cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);border-radius:8px;overflow:hidden}
.fdsec .cost{background:var(--paper-2);padding:1.6rem 1.5rem}
.fdsec .cost .n{font-family:var(--f-mono);font-size:.72rem;color:var(--brand-deep);letter-spacing:.1em}
.fdsec .cost h3{margin:.7rem 0 .5rem}
.fdsec .cost p{color:var(--fg-soft);font-size:.94rem;margin:0}
.fdsec .proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.3rem;counter-reset:p}
.fdsec .step{counter-increment:p;background:var(--paper-2);border:1px solid var(--paper-line);border-radius:8px;padding:1.5rem 1.4rem;position:relative}
.fdsec .step .num{font-family:var(--f-mono);font-size:.8rem;color:var(--brand-deep);letter-spacing:.1em}
.fdsec .step h3{margin:.9rem 0 .5rem;font-size:1.12rem}
.fdsec .step p{color:var(--fg-soft);font-size:.9rem;margin:0}
.fdsec .step::after{content:"";position:absolute;left:1.4rem;top:1.4rem;width:24px;height:2px;background:var(--secure)}
.fdsec .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;align-items:stretch}
@media(max-width:860px){.fdsec .plans{grid-template-columns:1fr}}
.fdsec .plan{border:1px solid var(--paper-line);border-radius:10px;padding:1.8rem 1.6rem;background:var(--paper-2);display:flex;flex-direction:column}
.fdsec .plan.featured{border-color:var(--secure);box-shadow:0 20px 50px -30px rgba(31,126,116,.5);position:relative}
.fdsec .plan.urgent{border-color:var(--brand)}
.fdsec .plan .kicker{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft)}
.fdsec .plan.urgent .kicker{color:var(--brand-deep)}
.fdsec .plan.featured .kicker{color:var(--secure-deep)}
.fdsec .plan h3{margin:.7rem 0 .5rem;font-size:1.35rem}
.fdsec .plan .desc{color:var(--fg-soft);font-size:.92rem;min-height:2.4em;margin-bottom:1rem}
.fdsec .plan ul{list-style:none;padding:0;margin:0 0 1.5rem;flex:1}
.fdsec .plan li{padding:.4rem 0 .4rem 1.5rem;position:relative;font-size:.92rem;color:var(--fg)}
.fdsec .plan li::before{content:"";position:absolute;left:0;top:.72rem;width:8px;height:8px;border-radius:2px;background:var(--secure)}
.fdsec .plan.urgent li::before{background:var(--brand)}
.fdsec .ribbon{position:absolute;top:-11px;left:1.6rem;background:var(--secure);color:#fff;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .6rem;border-radius:3px}
.fdsec .plan .btn{width:100%}
.fdsec .plan.urgent .btn{background:var(--brand);color:#fff;border-color:var(--brand)}
.fdsec .btn-outline{background:transparent;border:1px solid var(--fg);color:var(--fg)}
.fdsec .btn-outline:hover{background:var(--fg);color:var(--paper)}
.fdsec .author{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:start;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px;padding:clamp(1.6rem,3vw,2.2rem)}
@media(max-width:620px){.fdsec .author{grid-template-columns:1fr}}
.fdsec .avatar{width:74px;height:74px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#B8002F);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:1.6rem;color:#fff}
.fdsec .avatar img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.fdsec .author h3{color:#fff}
.fdsec .author .role{font-family:var(--f-mono);font-size:.8rem;color:var(--secure);margin:.3rem 0 .9rem;letter-spacing:.03em}
.fdsec .author p{color:var(--fg-inv-soft);font-size:.95rem}
.fdsec .author > *{min-width:0}
.fdsec .author .links{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;margin-top:.6rem;font-family:var(--f-mono);font-size:.8rem}
.fdsec .author .links a{color:var(--fg-inv);text-decoration:none;border-bottom:1px solid var(--ink-3)}
.fdsec .author .links a:hover{color:var(--brand);border-color:var(--brand)}
.fdsec .creds{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.fdsec .creds span{font-family:var(--f-mono);font-size:.72rem;color:var(--fg-inv-soft);border:1px solid var(--ink-3);border-radius:20px;padding:.25rem .75rem}
.fdsec .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.5rem}
@media(max-width:820px){.fdsec .quotes{grid-template-columns:1fr}}
.fdsec .quote{border:1px solid var(--ink-3);border-radius:8px;padding:1.5rem;background:transparent}
.fdsec .quote p{color:var(--fg-inv);font-size:.95rem}
.fdsec .quote .who{font-family:var(--f-mono);font-size:.76rem;color:var(--secure);margin-top:1rem;letter-spacing:.04em}
.fdsec .faq{max-width:820px;margin-inline:auto}
.fdsec details{border-bottom:1px solid var(--paper-line);padding:1.15rem 0}
.fdsec summary{font-family:var(--f-display);font-weight:600;font-size:1.1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.fdsec summary::-webkit-details-marker{display:none}
.fdsec summary::after{content:"+";font-family:var(--f-mono);color:var(--brand-deep);font-size:1.3rem;transition:transform .2s}
.fdsec details[open] summary::after{transform:rotate(45deg)}
.fdsec details p{color:var(--fg-soft);margin:.9rem 0 0;font-size:.96rem}
.fdsec .final{background:var(--ink);color:var(--fg-inv);text-align:center;position:relative;overflow:hidden}
.fdsec .final::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 90% at 50% 0%, rgba(255,0,64,.14), transparent 60%)}
.fdsec .final .wrap{position:relative}
.fdsec .final h2{color:#fff;max-width:20ch;margin-inline:auto}
.fdsec .final .lead{margin:1.2rem auto 2rem;color:var(--fg-inv-soft)}
.fdsec .final .hero-cta{justify-content:center}
.fdsec .guarantee{font-family:var(--f-mono);font-size:.8rem;color:var(--secure);margin-top:1.6rem;display:inline-flex;align-items:center;gap:.5rem}
.fdsec .plan .price{font-family:var(--f-display);font-weight:700;font-size:1.65rem;color:var(--fg);line-height:1;margin:.1rem 0 .5rem}
.fdsec .plan .price span{font-family:var(--f-body);font-weight:500;font-size:.82rem;color:var(--fg-soft)}
.fdsec .plan.urgent .price{color:var(--brand-deep)}
.fdsec .plan.featured .price{color:var(--secure-deep)}
.fdsec .plan-family{margin-top:clamp(2.4rem,4vw,3.4rem)}
.fdsec .plan-family:first-of-type{margin-top:0}
.fdsec .family-head{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.3rem;flex-wrap:wrap}
.fdsec .family-head h3{color:#fff;font-size:1.7rem;padding-top: 25px;text-align: center;width: 100%;line-height: 1.15em;}
.fdsec .family-sub{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);text-align: center;width: 100%;padding-bottom: 25px;}
/* ---------------------------------------------------------------------------
   Promoted from the page stylesheets once a second page needed them.

   .steps     numbered remediation or process list, counter driven.
   .callout   bordered aside for the one thing a reader must not miss.
   .sources   the citation block that ends a case study.
   code.mono  inline code.

   Values here are the ones the WordPress Security page shipped with, so that
   page renders unchanged. It sits on dark; a page on light overrides the four
   colour declarations and the ::before offset in its own file, which is what
   the withdrawal page does. Structure lives here, context lives there.
   --------------------------------------------------------------------------- */
.fdsec .steps{list-style:none;padding:0;margin:0;counter-reset:s}
.fdsec .steps li{counter-increment:s;position:relative;padding:.55rem 0 .55rem 2.6rem;border-bottom:1px solid var(--ink-3);color:var(--fg-inv-soft);font-size:.94rem}
.fdsec .steps li:last-child{border-bottom:0}
.fdsec .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.55rem;font-family:var(--f-mono);font-size:.78rem;color:var(--secure);font-weight:600;font-variant-numeric:tabular-nums}
.fdsec .steps li strong{color:var(--fg-inv);font-weight:600}
.fdsec .callout{background:var(--ink-2);border:1px solid var(--ink-3);border-left:3px solid var(--caution);border-radius:6px;padding:1.3rem 1.4rem}
.fdsec .callout .k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--caution);margin-bottom:.6rem}
.fdsec .callout p{font-size:.95rem;color:var(--fg-inv);margin:0}
.fdsec code.mono{font-family:var(--f-mono);background:rgba(255,0,64,.12);color:var(--brand);padding:.05rem .35rem;border-radius:3px;font-size:.86em}
.fdsec .sources{margin-top:2rem;font-family:var(--f-mono);font-size:.76rem;color:var(--fg-inv-soft);line-height:1.9}
.fdsec .sources .k{display:block;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-inv-soft);margin-bottom:.4rem;font-size:.68rem}
.fdsec .sources a{color:var(--secure);text-decoration:none;border-bottom:1px solid rgba(52,167,155,.3)}
.fdsec .sources a:hover{color:#fff}

/* Tabular figures wherever core stacks digits in a column, so the numbered
   process and the stakes cards line up whatever family --f-mono resolves to.
   Page files add their own selectors for their own tables. */
.fdsec .cost .n,
.fdsec .step .num{font-variant-numeric:tabular-nums}
.fdsec .vat-note{text-align:center;font-family:var(--f-mono);font-size:.74rem;color:var(--fg-inv-soft);margin-top:2.2rem;letter-spacing:.03em}


/* ---------------------------------------------------------------------------
   Promoted from process-audit.css once Business Process Automation needed
   them too.

   section[id]    anchored sections stop below the sticky theme header.
   .money         a numbered .cost-list beside a .tally, the worked example of
                  what manual work costs. Named .tally, not .receipt, because the
                  withdrawal page already has its own .receipt.
   .step-link     a text link under a .step or a list, e.g. to book or to a
                  related page.
   .book-routes   ways to get in touch as cards inside the .final section.
   .vh            text for screen readers only.
   .nw            keeps a hyphenated word such as "20-minute" on one line.

   .section-paper stays in the page files: three pages already define their own.
   --------------------------------------------------------------------------- */
.fdsec section[id]{scroll-margin-top:6rem}
.fdsec .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fdsec .nw{white-space:nowrap}

.fdsec .step-link{display:inline-block;margin-top:.9rem;font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--brand-deep);border-bottom:1px solid currentColor}
.fdsec .step-link:hover{color:var(--brand)}

.fdsec .money{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.fdsec .money{grid-template-columns:minmax(0,1fr)}}
.fdsec .money .lead{max-width:52ch}
.fdsec .cost-list{list-style:none;counter-reset:c;margin:1.6rem 0 0;padding:0}
.fdsec .cost-list li{counter-increment:c;position:relative;margin:0;padding:.9rem 0 .9rem 2.6rem;border-bottom:1px solid var(--paper-line);font-size:.96rem;line-height:1.55;color:var(--fg-soft)}
.fdsec .cost-list li:last-child{border-bottom:0}
.fdsec .cost-list li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:.98rem;font-family:var(--f-mono);font-size:.78rem;color:var(--brand-deep);font-variant-numeric:tabular-nums}
.fdsec .cost-list strong{color:var(--fg);font-weight:600}
.fdsec .tally{margin:0;background:var(--paper-2);border:1px solid var(--paper-line);border-radius:10px;padding:clamp(1.4rem,3vw,1.9rem);box-shadow:0 24px 50px -36px rgba(17,23,32,.35)}
.fdsec .tally-head{margin-bottom:.9rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep)}
.fdsec .tally dl{margin:0;font-family:var(--f-mono);font-size:.84rem;font-variant-numeric:tabular-nums}
.fdsec .tally dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.65rem 0;border-bottom:1px dashed var(--paper-line)}
.fdsec .tally dt{color:var(--fg-soft)}
.fdsec .tally dd{margin:0;color:var(--fg);white-space:nowrap}
.fdsec .tally .total{border-bottom:0}
.fdsec .tally .total:not(.year){margin-top:-1px;border-top:1px solid var(--fg)}
.fdsec .tally .total.year{padding-top:0}
.fdsec .tally .total dt,
.fdsec .tally .total dd{color:var(--fg);font-weight:600}
.fdsec .tally-foot{margin:1rem 0 0;padding-top:1rem;border-top:1px solid var(--paper-line);font-size:.88rem;line-height:1.55;color:var(--fg-soft)}

.fdsec .book-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;max-width:1000px;margin:2.4rem auto 0;text-align:left}
@media (max-width:860px){.fdsec .book-routes{grid-template-columns:minmax(0,1fr);max-width:480px}}
.fdsec .route-card{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px;padding:1.4rem 1.4rem 1.5rem}
.fdsec .route-card p{margin:0;font-size:.92rem;color:var(--fg-inv-soft)}
.fdsec .route-card .route-k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.fdsec .route-card .btn{margin-top:auto;padding:.75rem 1.2rem}
.fdsec .route-card .route-v{margin-top:auto;padding-top:.7rem;font-family:var(--f-display);font-weight:600;font-size:1.08rem;color:#fff;border-bottom:1px solid var(--ink-3);overflow-wrap:anywhere}
.fdsec .route-card .route-v:hover{color:var(--brand);border-color:var(--brand)}
.fdsec .book-note{max-width:60ch;margin:1.8rem auto 0;font-size:.92rem;color:var(--fg-inv-soft)}

/* ---------------------------------------------------------------------------
   Promoted from process-audit.css once AI & Business Systems Consulting
   needed them too.

   .findings      a ranked table inside the shared .console: the example audit
                  summary, the example systems review. The .eff column hides
                  under 600px so the table never scrolls sideways on a phone.
   .verdict       the tag in the last column: .go teal, .ai amber, .no grey,
                  .swap red.
   .console-note  the caption under the table.
   .define        "What it is" beside a .fit card, with .fitlist and .fit-skip.
   .pricing-note  the line under the plans that points to a related service.

   .compare stays in the page files: the withdrawal page has its own .compare.
   --------------------------------------------------------------------------- */
.fdsec .findings-console{margin:0}
.fdsec .findings{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:.8rem;font-variant-numeric:tabular-nums}
.fdsec .findings th{padding:.6rem .7rem;border-bottom:1px solid var(--ink-3);text-align:left;font-size:.62rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-inv-soft)}
.fdsec .findings td{padding:.62rem .7rem;border-bottom:1px solid rgba(39,47,60,.6);color:var(--fg-inv);vertical-align:middle;line-height:1.4}
.fdsec .findings tbody tr:last-child td{border-bottom:0}
.fdsec .findings .rank{width:1.6em;color:var(--fg-inv-soft)}
.fdsec .findings .hrs{text-align:right}
.fdsec .findings .eff{color:var(--fg-inv-soft)}
.fdsec .verdict{display:inline-block;padding:.14rem .5rem;border:1px solid;border-radius:3px;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.fdsec .verdict.go{color:var(--secure);border-color:var(--secure-deep)}
.fdsec .verdict.ai{color:var(--caution);border-color:var(--caution)}
.fdsec .verdict.no{color:var(--fg-inv-soft);border-color:var(--ink-3)}
.fdsec .verdict.swap{color:var(--brand);border-color:var(--brand-deep)}
.fdsec .console-note{margin:0;padding:.65rem .95rem;border-top:1px solid var(--ink-3);font-family:var(--f-mono);font-size:.68rem;color:var(--fg-inv-soft)}
@media (max-width:600px){
  .fdsec .findings{font-size:.72rem}
  .fdsec .findings th,
  .fdsec .findings td{padding:.55rem .45rem}
  .fdsec .findings .eff{display:none}
  .fdsec .verdict{font-size:.58rem;padding:.12rem .35rem}
}

.fdsec .define{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.fdsec .define{grid-template-columns:minmax(0,1fr)}}
.fdsec .define .lead{max-width:52ch;color:var(--fg)}
.fdsec .define p{color:var(--fg-soft);max-width:62ch}
.fdsec .fit{background:var(--paper);border:1px solid var(--paper-line);border-radius:10px;padding:clamp(1.5rem,3vw,2rem)}
.fdsec .fit h3{font-size:1.25rem;margin:0 0 .8rem}
.fdsec .fitlist{list-style:none;margin:0 0 1.2rem;padding:0}
.fdsec .fitlist li{position:relative;margin:0;padding:.6rem 0 .6rem 1.5rem;border-bottom:1px solid var(--paper-line);font-size:.95rem;line-height:1.5;color:var(--fg)}
.fdsec .fitlist li:last-child{border-bottom:0}
.fdsec .fitlist li::before{content:"";position:absolute;left:0;top:1.05rem;width:8px;height:8px;border-radius:2px;background:var(--secure)}
.fdsec .fit .fit-skip{margin:0;padding-top:1rem;border-top:1px solid var(--paper-line);font-size:.9rem}

.fdsec .pricing-note{max-width:62ch;margin:2.4rem auto 0;text-align:center;font-size:.95rem;color:var(--fg-soft)}

/* ---------------------------------------------------------------------------
   Author card on single posts, in the light style of the profile page.
   Service pages keep the dark .case band. On posts the card sits inside
   running article text, so it takes the paper palette used on
   /dorothy-fiedor/: a light grey band holding a white card.
   --------------------------------------------------------------------------- */
.single-post .fdsec.fd-card .case{background:var(--paper);color:var(--fg);padding-block:clamp(2rem,4vw,3rem);margin-top:2.5rem;border-radius:var(--radius)}
.single-post .fdsec.fd-card .author{background:var(--paper-2);border-color:var(--paper-line)}
.single-post .fdsec.fd-card .author h3{color:var(--ink)}
.single-post .fdsec.fd-card .author p{color:var(--fg-soft)}
.single-post .fdsec.fd-card .author .role{color:var(--secure-deep)}
.single-post .fdsec.fd-card .creds span{color:var(--fg-soft);border-color:var(--paper-line)}
.single-post .fdsec.fd-card .author .links a{color:var(--fg);border-bottom-color:var(--paper-line)}
.single-post .fdsec.fd-card .author .links a:hover{color:var(--brand-deep);border-color:var(--brand-deep)}

/* Single posts: the author card above already names the author, so the theme's
   author box keeps only its "View all posts" link and social icons. */
.single-post .author-info .the-author{display:none}