/*
Theme Name: Nella
Theme URI: https://nellafinance.co.uk/
Author: Nella Finance AI Limited
Description: Bespoke, builder-free theme for Nella Finance. Native PHP templates, no page builder.
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: nella
*/

:root{
  --navy:#0D1B2E;      /* headings + dark sections */
  --navy2:#13253D;
  --teal:#00B4A6;      /* primary accent */
  --teal-d:#009688;    /* accent hover / links */
  --ink:#333333;       /* body text */
  --mut:#5A6774;       /* secondary text */
  --mint:#F2FBF6;      /* alt section background */
  --paper:#ffffff;
  --card:#ffffff;    /* alias of --paper; .ig-card and inner cards use this */
  --line:#E4ECE8;      /* hairlines */
  --gold:#D9A441;      /* minor accent only */
  --shell:1120px;
  --prose:720px;
  --r:16px;
  --sh:0 10px 30px rgba(13,27,46,.10);
  --sh-lg:0 24px 60px rgba(13,27,46,.18);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font:400 18px/1.65 'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--navy);line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.5vw,3.1rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700}
h3{font-size:1.3rem;font-weight:700}
p{margin:0 0 1em}
a{color:var(--teal-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}
.section{padding:72px 0;background:var(--paper)}
.section--alt{background:var(--mint)}
.prose{max-width:var(--prose)}
.eyebrow{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);font-weight:700;margin:0 0 .6em}

.btn{display:inline-block;padding:14px 28px;border-radius:999px;font-weight:700;line-height:1;
  background:var(--teal);color:#fff;border:1.5px solid var(--teal);transition:.15s;box-shadow:0 6px 18px rgba(0,180,166,.22)}
.btn:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn--ghost{background:#fff;color:var(--navy);border-color:#D1D5DB;box-shadow:none}
.btn--ghost:hover{background:#fff;color:var(--navy);border-color:var(--navy);transform:none}

/* ---------- header (solid navy sticky nav) ---------- */
.wrap{max-width:var(--shell);margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;z-index:60;background:var(--navy);padding:12px 0;box-shadow:0 4px 16px rgba(13,27,46,.18)}
.nav .wrap{display:flex;align-items:center}
.nv-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:19px;text-decoration:none}
.nv-brand .dot{color:var(--gold)}
.nv-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nv-links a{color:rgba(255,255,255,.82);font-weight:600;font-size:14.5px;text-decoration:none}
.nv-links a:hover{color:#fff;text-decoration:none}
.nv-cta{background:var(--teal);color:#fff!important;padding:9px 20px;border-radius:10px}
.nv-cta:hover{background:var(--teal-d)}
@media(max-width:820px){.nv-links a:not(.nv-cta){display:none}}

/* ---------- footer (dark, matches homepage) ---------- */
.site-footer{background:#0A1524;color:rgba(255,255,255,.7);padding:56px 0 40px;font-size:14px}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.site-footer .fb{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:18px;margin-bottom:14px}
.site-footer .fb .dot{color:var(--gold)}
.site-footer h5{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.site-footer a{color:rgba(255,255,255,.7);text-decoration:none;display:block;padding:4px 0}
.site-footer a:hover{color:#fff}
.site-footer p{color:rgba(255,255,255,.55);max-width:34ch}
.site-footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);margin-top:14px;padding-top:22px;font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.7}
@media(max-width:720px){.site-footer .wrap{grid-template-columns:1fr;gap:26px}}

/* ---------- content ---------- */
.entry{padding:56px 0}
.entry .shell{max-width:var(--prose)}
.entry-meta{color:var(--mut);font-size:.9rem;margin-bottom:1.4rem}
.hero{padding:88px 0 72px;background:linear-gradient(180deg,#fff 0%,var(--mint) 100%)}
.hero .lead{font-size:1.25rem;color:var(--mut);max-width:52ch}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;align-items:center}
.skeleton-note{margin-top:40px;padding:14px 18px;border:1px dashed var(--line);border-radius:var(--r);
  color:var(--mut);font-size:.9rem;background:#fff}

/* ---------- shared layout utilities ---------- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh)}
.card h3{font-size:1.1rem;margin-bottom:.4rem}
.card p{color:var(--mut);margin:0;font-size:.98rem}
.steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:s}
.step{position:relative;padding-left:56px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;
  border-radius:50%;background:var(--teal);color:#fff;font-weight:700;display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(0,180,166,.28)}
.step h3{margin:.2rem 0 .4rem}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.pill{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.92rem;background:#fff;font-weight:600;color:var(--navy)}
.pill.adv{border-style:dashed;color:var(--mut);font-weight:500}
.lead-tag{color:var(--mut);font-size:.82rem;margin-top:6px}
.band{background:linear-gradient(170deg,var(--navy),var(--navy2));color:#e9ecef;border-radius:22px;padding:44px 34px;margin:0 auto;max-width:var(--shell);box-shadow:var(--sh-lg)}
.band h2{color:#fff}.band p{color:#aeb8c4;max-width:60ch}
.center{text-align:center}.mt24{margin-top:24px}.muted{color:var(--mut)}
.price-row{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.price{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:#fff;box-shadow:var(--sh)}
.price .amt{font-size:2rem;font-weight:800;margin:.2rem 0;color:var(--navy)}
.price .amt span{font-size:.9rem;font-weight:500;color:var(--mut)}
.form-field{margin-bottom:16px}
.form-field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--navy)}
.form-field input,.form-field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,180,166,.15)}
.form-note{font-size:.85rem;color:var(--mut)}
.hp{position:absolute;left:-9999px}
.form-msg{padding:12px 16px;border-radius:10px;margin-top:12px;display:none}
.form-msg.ok{display:block;background:#eef8f0;border:1px solid #cfe9d5}
.form-msg.err{display:block;background:#fdeeee;border:1px solid #f4cccc}
.legal-doc h2{margin-top:1.6em}.legal-doc{max-width:var(--prose)}
.flag{background:#fff8e6;border:1px solid #f0dfa8;border-radius:10px;padding:12px 16px;color:#7a5c12;font-size:.9rem;margin:14px 0}

/* ---- FAQ accordion + extractable answer blocks (Phase 2 AEO) ----
   The homepage carries its own copy of this in front-page.php's inline CSS
   (that page is a self-contained port and dequeues this stylesheet). Keep the
   two visually consistent if either changes. */
.faq{max-width:820px;margin:32px auto 0}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:19px 52px 19px 22px;font-weight:700;color:var(--navy);font-size:16.5px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:600;color:var(--teal);transition:transform .18s ease}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .fa{padding:0 22px 20px;font-size:15px;color:var(--mut);line-height:1.65}
.faq .fa a{color:var(--teal);font-weight:600}

/* A standalone direct answer, sat under a question-shaped heading. Gold rule
   because the answer is the thing worth reading first. */
.answer{max-width:760px;margin:18px 0 28px;padding:0 0 0 18px;
  border-left:3px solid var(--gold);
  font-size:17.5px;line-height:1.7;color:var(--ink)}

@media(max-width:768px){
  .faq summary{font-size:15.5px;padding:17px 46px 17px 18px}
  .faq .fa{padding:0 18px 18px}
  .answer{font-size:16.5px}
}

/* ---- Integration pages (Phase 4 content clusters) ---- */
.hero--inner{padding:72px 0 56px}
.hero--inner .lead{max-width:640px}
.hero-cta{margin:26px 0 14px;display:flex;gap:12px;flex-wrap:wrap}
.btn--ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal)}
.chips{font-size:14px;color:var(--mut);margin:0}

.ticks,.crosses,.asks{max-width:780px;margin:22px 0 0;padding:0;list-style:none}
.ticks li,.crosses li{position:relative;padding:9px 0 9px 32px;font-size:16.5px;line-height:1.6;
  border-bottom:1px solid var(--line)}
.ticks li:last-child,.crosses li:last-child{border-bottom:0}
.ticks li::before{content:"";position:absolute;left:4px;top:16px;width:11px;height:6px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.crosses li::before{content:"\00d7";position:absolute;left:4px;top:8px;color:var(--mut);
  font-size:19px;line-height:1.6}

.asks li{padding:12px 0 12px 18px;border-left:3px solid var(--gold);margin-bottom:12px;
  font-size:17px;color:var(--navy);font-style:italic}

.note{max-width:780px;font-size:14.5px;color:var(--mut);line-height:1.65;margin-top:20px}
.note a{color:var(--teal);font-weight:600}

.cta-band{text-align:center;background:var(--mint);border:1px solid var(--line);
  border-radius:var(--r);padding:52px 28px}
.cta-band h2{margin-top:0}
.cta-band .lead{margin:0 auto 22px;max-width:520px}
.cta-band .note{margin:22px auto 0}

@media(max-width:768px){
  .hero--inner{padding:52px 0 40px}
  .ticks li,.crosses li{font-size:15.5px}
  .asks li{font-size:16px}
  .cta-band{padding:38px 20px}
}

/* Channel availability line (tier-gated channels — see ADR-148 note) */
.avail{max-width:640px;margin:14px 0 0;padding:12px 16px;background:var(--mint);
  border:1px solid var(--line);border-radius:12px;font-size:14.5px;color:var(--ink)}
.avail strong{color:var(--navy)}

/* Integrations hub grid */
.ig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:26px}
.ig-card{display:block;padding:24px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);text-decoration:none;color:var(--ink);transition:box-shadow .18s,border-color .18s}
.ig-card:hover{border-color:var(--teal);box-shadow:var(--sh)}
.ig-card h3{margin:0 0 8px;color:var(--navy);font-size:19px}
.ig-card p{margin:0 0 14px;font-size:14.5px;color:var(--mut);line-height:1.55}
.ig-more{font-size:13.5px;font-weight:600;color:var(--teal)}

/* ---------- People: About cards + profile pages ---------- */
/* Circular avatars. The source photographs were cropped square to
   head-and-shoulders before upload (see make-portraits.php), so a circular
   mask lands on the face rather than clipping a chin. */
.person-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;
  display:block;margin:0 0 14px;border:3px solid var(--mint);box-shadow:var(--sh)}
.person-card h3{margin-bottom:.2rem}

.person-head{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.person-photo{flex:0 0 auto}
.person-img{width:160px;height:160px;border-radius:50%;object-fit:cover;
  display:block;border:4px solid #fff;box-shadow:var(--sh-lg)}
.person-intro{flex:1 1 320px;min-width:0}
.person-intro h1{margin:.15rem 0 .4rem}
.person-intro .lead{margin:0;color:var(--mut)}

@media(max-width:600px){
  .person-head{gap:18px}
  .person-img{width:112px;height:112px}
}


/* ================================================================
   Audit fix - 2026-08-31
   Classes emitted by page-about / page-feature / page-vertical /
   page-security / page-nella-score / page-integrations-hub that had
   no CSS anywhere in the theme.
   ================================================================ */

/* Band alias. Templates were written against --mint, the stylesheet
   defines --alt. Both now resolve to the same mint band so the section
   rhythm is unbroken across both generations of template. */
.section--mint{background:var(--mint)}

/* Section headers. Gold kicker above the H2, per the brand spec -
   distinct from .eyebrow, which is teal and used in page heroes. */
.sec-head{max-width:var(--prose);margin:0 0 32px}
.sec-head h2{margin:0 0 .35em}
.sec-head p{margin:0;color:var(--mut);font-size:17px}
.kicker{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 .6em}

/* Comparison and spec tables. .table-wrap gives horizontal scroll on
   narrow screens rather than forcing the page wider. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.cmp{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
.cmp th,.cmp td{padding:14px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);line-height:1.55}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp thead th{background:var(--mint);color:var(--navy);font-weight:700;
  font-size:14px;letter-spacing:.02em}
.cmp tbody th{width:34%;color:var(--navy);font-weight:600;background:#FBFDFC}
.cmp td{color:var(--ink)}
@media(max-width:600px){
  .cmp{font-size:15px}
  .cmp th,.cmp td{padding:12px 14px}
}

/* Feature tier pill (hero). */
.tier{display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--mint);border:1px solid var(--line);color:var(--navy);
  font-size:13px;font-weight:700;letter-spacing:.01em;margin-right:8px}

/* "Questions you can ask Nella" list on the vertical pages. */
.ask-list{max-width:var(--prose);margin:22px 0 0;padding:0;list-style:none}
.ask-list li{position:relative;padding:12px 0 12px 30px;font-size:17px;
  line-height:1.6;color:var(--ink);border-bottom:1px solid var(--line)}
.ask-list li:last-child{border-bottom:0}
.ask-list li::before{content:"\201C";position:absolute;left:0;top:14px;
  color:var(--gold);font-size:26px;line-height:1;font-weight:700}

/* Scroll reveal. The homepage carries its own copy of this inside
   front-page.php; inner templates emit .rv with nothing behind it.
   Gated on .nella-rv, which only JS ever sets, so content is NEVER
   hidden when JS is off, blocked, or when a crawler renders the page. */
.nella-rv .rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease}
.nella-rv .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .nella-rv .rv{opacity:1;transform:none;transition:none}
}

/* ---------- Help centre (/help/) — 18 Oct 2026 ---------- */
.help-crumb a{color:var(--teal);text-decoration:none}
.help-crumb a:hover{text-decoration:underline}
.help-grid .help-card{display:block;text-decoration:none;color:var(--ink);position:relative}
.help-grid .help-card:hover{box-shadow:var(--sh-lg)}
.help-grid .help-card h3{margin-bottom:.35em}
.help-grid .help-card p{color:var(--mut);font-size:16px;margin:0}
.help-draft{position:absolute;top:14px;right:16px;font-size:12px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.06em}
.help-body h2{margin-top:1.6em}
.help-body ol,.help-body ul{padding-left:1.3em;margin:0 0 1.2em}
.help-body li{margin:.35em 0}
.help-body img,.help-body figure img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh)}
.help-body figure{margin:1.4em 0}
.help-body figcaption{font-size:14.5px;color:var(--mut);margin-top:.6em;text-align:left}
.help-body .help-shot{border:2px dashed var(--teal);background:var(--mint);color:var(--mut);border-radius:12px;padding:28px 20px;font-size:15px;text-align:center;margin:1.4em 0}
.help-body .help-tip{background:var(--mint);border-left:4px solid var(--teal);border-radius:8px;padding:14px 18px;font-size:16px}
/* Screenshot placeholders show only to signed-in editors (18 Oct 2026). */
body:not(.logged-in) .help-body .help-shot{display:none}

/* Skip link: hidden until focused (24 Oct 2026; the market switcher bar had pushed it into view). */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:8px;width:auto;height:auto;z-index:1000;background:#fff;color:var(--navy,#0D1B2E);padding:8px 14px;border-radius:8px;box-shadow:0 10px 30px rgba(13,27,46,.10)}

/* Layout alignment (24 Oct 2026). Prose sections used to be a 720px column
   centred on the page, so their left edge sat inside the hero and tables above.
   They now share the page container (same left edge as hero, tables, cards)
   and keep a readable measure for the text itself. */
.shell.prose{max-width:var(--shell)}
.shell.prose>*:not(.table-wrap):not(.grid):not(.wide){max-width:calc(var(--prose) - 48px)}

/* ---- Content pages with a reviewer (24 Oct 2026) ---- */
/* Hero: copy on the left, an "at a glance" card on the right. */
.mt-hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:center}
.mt-hero .lead{max-width:none}
.glance{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);padding:22px 24px}
.glance__kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold);margin:0 0 10px}
.glance dl{margin:0}
.glance__row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.glance__row:last-child{border-bottom:0}
.glance dt{color:var(--mut);font-size:.92rem}
.glance dd{margin:0;font-weight:700;color:var(--navy);text-align:right;white-space:nowrap}
.glance__foot{font-size:.8rem;color:var(--mut);margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}

/* Body: text column and a sticky side column, on the container's left edge. */
.mt-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.mt-main>*{max-width:calc(var(--prose) - 48px)}
.mt-main>h2:first-child{margin-top:0}
.mt-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}

.author-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);padding:22px}
.author-card__kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold);margin:0 0 12px}
.author-card__head{display:flex;gap:14px;align-items:center}
.author-card__photo{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.author-card__name{font-weight:800;color:var(--navy);font-size:1.05rem}
.author-card__role{margin:2px 0 0;color:var(--mut);font-size:.88rem;line-height:1.35}
.author-card__creds{margin:14px 0 8px;font-weight:700;color:var(--navy);font-size:.9rem}
.author-card__note{margin:0 0 10px;color:var(--ink);font-size:.9rem;line-height:1.55}
.author-card__date{margin:0 0 10px;color:var(--mut);font-size:.82rem}
.author-card__link{font-weight:700;font-size:.9rem}
.side-cta{background:var(--navy);color:#C6D2DF;border-radius:20px;padding:22px}
.side-cta__title{color:#fff;font-weight:800;margin:0 0 6px}
.side-cta p{font-size:.9rem}

@media(max-width:960px){
  .mt-hero,.mt-layout{grid-template-columns:1fr;gap:28px}
  .mt-side{position:static}
}

.side-list{list-style:none;padding:0;margin:8px 0 10px}
.side-list li{padding:7px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.side-list li:last-child{border-bottom:0}
.mt-main .table-wrap{max-width:none}

.author-card__li{margin-left:14px;color:var(--mut)}

.mt-block{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.mt-main .steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mt-main .ticks,.mt-main .crosses,.mt-main .asks,.mt-main .note{max-width:none}
.glance__foot a{font-weight:600}

/* Glance rows: label column and a value that may wrap (24 Oct 2026). */
.glance__row{display:grid;grid-template-columns:minmax(96px,38%) 1fr;align-items:baseline}
.glance dd{white-space:normal;line-height:1.35}

/* FAQ hub jump links (27 Oct 2026). */
.faq-jump{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:18px}
.faq-jump a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:.88rem}