/* DeedDesk modern theme: light hero with soft colour glows, glass header, gradient pill buttons, tinted icon chips,
   rounder cards. Loaded after brand.css and overrides it; remove the link in user_layout.html to go back to the earlier look. */
:root {
  --dd-navy: #0F1238; --dd-navy2: #1E2370; --dd-navy3: #2A2F8F; --dd-indigo: #4F46E5; --dd-teal: #14B8A6;
  --dd-green: #8DC63E; --dd-green-d: #3F9A2B; --dd-gold: #F2B705; --dd-lav: #C7CAEF;
  --dd-ink: #0F1238; --dd-muted: #5B6182; --dd-line: #E8EAF4; --dd-soft: #F6F7FC;
  --dd-grad: linear-gradient(135deg, #8DC63E 0%, #22B07D 100%);
  --dd-grad-ink: linear-gradient(135deg, #0F1238 0%, #23288A 100%);
  --dd-grad-text: linear-gradient(90deg, #4F46E5 0%, #22B07D 55%, #8DC63E 100%);
  --dd-shadow: 0 1px 2px rgba(15,18,56,.04), 0 14px 36px rgba(15,18,56,.08);
  --dd-shadow-lg: 0 2px 4px rgba(15,18,56,.04), 0 30px 70px rgba(15,18,56,.14);
}
body { background: #fff; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(141,198,62,.3); }

/* top bar and glass header */
.dd-top { background: var(--dd-grad-ink); }
.dd-top i { color: var(--dd-green); }
.dd-header { background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
             box-shadow: none; border-bottom: 1px solid rgba(232,234,244,.9); }
.dd-links > li > a { border-radius: 999px; padding: 9px 14px; }
.dd-links > li > a:hover, .dd-links > li > a.on { color: var(--dd-indigo); background: rgba(79,70,229,.07); }
.dd-links .dd-sub, .dd-acct-menu { border-radius: 18px; box-shadow: var(--dd-shadow-lg); border-color: var(--dd-line); }
.dd-sub a:hover { background: rgba(79,70,229,.06); color: var(--dd-indigo); }
.dd-sub a i { color: var(--dd-indigo); }
@media (max-width: 560px) { .dd-top { display: none; } }

/* buttons: pills with gradients */
.dd-btn { border-radius: 999px; padding: 12px 22px; font-weight: 600; letter-spacing: .01em; }
.dd-btn.primary { background: var(--dd-grad); color: #fff !important; box-shadow: 0 10px 26px rgba(34,176,125,.32); }
.dd-btn.primary:hover { background: var(--dd-grad); filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(34,176,125,.4); }
.dd-btn.navy { background: var(--dd-grad-ink); box-shadow: 0 10px 26px rgba(15,18,56,.25); }
.dd-btn.navy:hover { transform: translateY(-2px); background: var(--dd-grad-ink); }
.dd-btn.line { background: #fff; border-color: var(--dd-line); color: var(--dd-ink) !important; }
.dd-btn.line:hover { border-color: var(--dd-indigo); color: var(--dd-indigo) !important; transform: translateY(-1px); }

/* hero: light with colour glows */
.dd-hero { color: var(--dd-ink); padding: 96px 0 120px;
           background: radial-gradient(700px 420px at 8% 8%, rgba(79,70,229,.13), transparent 60%),
                       radial-gradient(640px 420px at 92% 4%, rgba(141,198,62,.24), transparent 62%),
                       radial-gradient(560px 380px at 78% 96%, rgba(20,184,166,.14), transparent 60%),
                       linear-gradient(180deg, #F8F9FF 0%, #FFFFFF 100%); }
.dd-hero::after { background-image: radial-gradient(rgba(15,18,56,.07) 1px, transparent 1px); background-size: 22px 22px;
                  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.dd-eyebrow { background: rgba(255,255,255,.75); border: 1px solid var(--dd-line); color: var(--dd-ink); font-weight: 500; box-shadow: var(--dd-shadow); }
.dd-eyebrow i { color: var(--dd-green-d); }
.dd-hero h1 { color: var(--dd-ink); letter-spacing: -.03em; }
.dd-hero h1 span { background: var(--dd-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dd-hero .dd-tag { color: var(--dd-muted); }
.dd-hero p.lead { color: var(--dd-muted); }
.dd-hero .dd-btn.ghost { border-color: var(--dd-line); background: rgba(255,255,255,.8); color: var(--dd-ink) !important; }
.dd-hero .dd-btn.ghost:hover { border-color: var(--dd-indigo); color: var(--dd-indigo) !important; }
.dd-ticks { color: var(--dd-muted); } .dd-ticks i { color: var(--dd-green-d); }
.dd-hero-card { background: rgba(255,255,255,.88); backdrop-filter: blur(10px); border: 1px solid rgba(232,234,244,.9); border-radius: 26px; box-shadow: var(--dd-shadow-lg); }
.dd-pick { border-radius: 16px; background: #fff; }
.dd-pick:hover { border-color: rgba(79,70,229,.35); box-shadow: 0 10px 24px rgba(79,70,229,.1); }
.dd-pick i.ic { background: rgba(79,70,229,.09); color: var(--dd-indigo); }
.dd-pick:nth-of-type(2) i.ic { background: rgba(141,198,62,.16); color: var(--dd-green-d); }
.dd-pick:nth-of-type(3) i.ic { background: rgba(242,183,5,.16); color: #B07F00; }
.dd-pick:nth-of-type(4) i.ic { background: rgba(20,184,166,.13); color: #0E8F81; }
.dd-seal { background: var(--dd-grad); color: #fff; box-shadow: 0 0 0 6px #fff, 0 14px 30px rgba(34,176,125,.35); }
.dd-hero.page { padding: 80px 0 96px; }
.dd-crumb { color: var(--dd-muted); } .dd-crumb a { color: var(--dd-indigo); }

/* section headings */
.dd-kicker { background: rgba(141,198,62,.14); color: var(--dd-green-d); padding: 6px 14px; border-radius: 999px; letter-spacing: .1em; font-size: .72rem; }
.dd-kicker::before { display: none; }
.dd-h2 { letter-spacing: -.025em; color: var(--dd-ink); }
.dd-sec.soft { background: linear-gradient(180deg, #F6F7FC 0%, #FBFBFE 100%); }

/* document cards */
.dd-type { border-radius: 24px; box-shadow: var(--dd-shadow); border-color: transparent; position: relative; }
.dd-type::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, #E8EAF4, #F3F4FA);
                   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.dd-type:hover { transform: translateY(-6px); box-shadow: var(--dd-shadow-lg); }
.dd-type:hover::before { background: var(--dd-grad-text); }
.dd-type .ic { border-radius: 16px; background: rgba(79,70,229,.09); color: var(--dd-indigo); }
.dd-grid4 > .dd-type:nth-child(2) .ic { background: rgba(141,198,62,.16); color: var(--dd-green-d); }
.dd-grid4 > .dd-type:nth-child(3) .ic { background: rgba(242,183,5,.16); color: #B07F00; }
.dd-grid4 > .dd-type:nth-child(4) .ic { background: rgba(20,184,166,.13); color: #0E8F81; }
.dd-type .opts a { border-radius: 12px; border: 1px solid transparent; }
.dd-type .opts a:hover { background: #fff; border-color: rgba(79,70,229,.25); }
.dd-type .opts a.diy { background: rgba(141,198,62,.1); }
.dd-type .opts a.diy:hover { background: #fff; border-color: rgba(141,198,62,.5); }
.dd-type .dd-btn.line { width: 100%; }

/* steps */
.dd-step { border-radius: 22px; border-color: transparent; box-shadow: var(--dd-shadow); transition: transform .2s, box-shadow .2s; }
.dd-step:hover { transform: translateY(-4px); box-shadow: var(--dd-shadow-lg); }
.dd-step .n { background: var(--dd-grad); color: #fff; border-radius: 14px; box-shadow: 0 8px 18px rgba(34,176,125,.3); }

/* two ways: the "done for you" card is dark */
.dd-choice { border-radius: 26px; box-shadow: var(--dd-shadow); border-color: var(--dd-line); }
.dd-choice.featured { border: 0; background: var(--dd-grad-ink); color: #fff; box-shadow: 0 30px 70px rgba(15,18,56,.3); position: relative; overflow: hidden; }
.dd-choice.featured::after { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
                             background: radial-gradient(circle, rgba(141,198,62,.35), transparent 70%); pointer-events: none; }
.dd-choice.featured h3 { color: #fff; } .dd-choice.featured > p { color: var(--dd-lav); } .dd-choice.featured li { color: #fff; }
.dd-choice.featured li i { color: var(--dd-green); }
.dd-choice.featured .badge { background: var(--dd-green); color: var(--dd-navy); }
.dd-choice.featured .dd-btn.navy { background: #fff; color: var(--dd-ink) !important; position: relative; z-index: 1; }
.dd-choice .badge { border-radius: 999px; }

/* dark band */
.dd-sec.navy { background: radial-gradient(600px 300px at 90% 0%, rgba(141,198,62,.2), transparent 60%),
                           radial-gradient(500px 300px at 0% 100%, rgba(79,70,229,.35), transparent 60%), var(--dd-grad-ink); }
.dd-trust > div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 18px; }
.dd-trust i { border-radius: 14px; background: rgba(141,198,62,.18); }

/* FAQ */
.dd-faq details { border-radius: 18px; border-color: var(--dd-line); transition: box-shadow .2s, border-color .2s; }
.dd-faq details[open] { border-color: rgba(79,70,229,.25); box-shadow: var(--dd-shadow); }
.dd-faq summary::after { width: 26px; height: 26px; border-radius: 50%; background: rgba(79,70,229,.08); color: var(--dd-indigo); display: grid; place-items: center; flex-shrink: 0; }

/* call to action */
.dd-cta { background: radial-gradient(500px 260px at 100% 100%, rgba(141,198,62,.35), transparent 60%),
                      radial-gradient(500px 260px at 0% 0%, rgba(79,70,229,.45), transparent 60%), var(--dd-grad-ink);
          border-radius: 30px; box-shadow: 0 30px 70px rgba(15,18,56,.25); }
.dd-cta::after { border-color: rgba(255,255,255,.08); }

/* inner pages */
.dd-card { border-radius: 22px; border-color: transparent; box-shadow: var(--dd-shadow); }
.dd-card .ic { border-radius: 16px; background: rgba(79,70,229,.09); color: var(--dd-indigo); }
.dd-card.g .ic { background: rgba(141,198,62,.16); color: var(--dd-green-d); }
.dd-card.gold .ic { background: rgba(242,183,5,.16); color: #B07F00; }
a.dd-card:hover { transform: translateY(-4px); box-shadow: var(--dd-shadow-lg); border-color: transparent; }
.dd-stats { border-radius: 24px; box-shadow: var(--dd-shadow-lg); }
.dd-stats b { background: var(--dd-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* footer */
.dd-foot { background: #0B0E2C; position: relative; }
.dd-foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--dd-grad-text); }
.dd-foot .social a { border-radius: 50%; transition: background .15s; }
.dd-foot .social a:hover { background: var(--dd-grad); color: #fff; }

/* reveal on scroll: only once the footer script adds .dd-reveal, so the page shows fully without JS */
.dd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.dd-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dd-reveal { opacity: 1; transform: none; transition: none; } }

/* the sign-in button reuses the old .menu-tigger hook, whose fixed size squeezed it */
.dd-actions .menu-tigger { width: auto !important; height: auto !important; line-height: normal !important; flex-shrink: 0; }
.dd-links > li > a { white-space: nowrap; padding: 9px 12px; font-size: .9rem; }
.dd-btn { box-sizing: border-box; }
@media (max-width: 1200px) { .dd-links > li > a { padding: 8px 9px; font-size: .86rem; } .dd-nav { gap: 10px; } }
.dd-type .dd-btn.line { margin-left: 0 !important; margin-right: 0 !important; }
.dd-type .dd-btn.line { padding: 11px 18px !important; border-color: rgba(79,70,229,.25); color: var(--dd-indigo) !important; }
.dd-type .dd-btn.line:hover { background: rgba(79,70,229,.06); }

/* ---------- documents catalogue (our-services) ---------- */
main.sc { --navy: #0F1238; --navy2: #4F46E5; --green: #22B07D; --green2: #8DC63E; --ink: #0F1238; --muted: #5B6182; --line: #E8EAF4; --soft: #F6F7FC; }
main.sc .sc-hero { color: var(--dd-ink); padding: 80px 0 64px;
           background: radial-gradient(700px 400px at 6% 10%, rgba(79,70,229,.13), transparent 60%),
                       radial-gradient(640px 420px at 94% 0%, rgba(141,198,62,.24), transparent 62%), linear-gradient(180deg, #F8F9FF 0%, #FFFFFF 100%); }
main.sc .sc-hero::after { background-image: radial-gradient(rgba(15,18,56,.07) 1px, transparent 1px);
                  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
main.sc .sc-kicker { background: #fff; border-color: var(--dd-line); color: var(--dd-ink); box-shadow: var(--dd-shadow); }
main.sc .sc-kicker i { color: var(--dd-green-d); }
main.sc .sc-hero h1 { color: var(--dd-ink); font-weight: 800; letter-spacing: -.03em; }
main.sc .sc-hero h1 span { background: var(--dd-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
main.sc .sc-hero p.lead { color: var(--dd-muted); } main.sc .sc-hero p.lead b { color: var(--dd-ink); }
main.sc .sc-search { border: 1px solid var(--dd-line); border-radius: 999px; box-shadow: var(--dd-shadow-lg); }
main.sc .sc-search button { background: var(--dd-grad); border-radius: 999px; } main.sc .sc-search button:hover { background: var(--dd-grad); filter: brightness(1.05); }
main.sc .sc-quick span { color: var(--dd-muted); }
main.sc .sc-quick button { background: #fff; border-color: var(--dd-line); color: var(--dd-ink); } main.sc .sc-quick button:hover { background: #fff; border-color: var(--dd-indigo); color: var(--dd-indigo); }
main.sc .sc-stats b { color: transparent; background: var(--dd-grad-text); -webkit-background-clip: text; background-clip: text; } main.sc .sc-stats small { color: var(--dd-muted); }
main.sc .sc-bar { position: static; box-shadow: none; }
main.sc .sc-chip[aria-pressed="true"] { background: var(--dd-grad-ink); border-color: transparent; }
main.sc .sc-results { background: linear-gradient(180deg, #F6F7FC 0%, #FBFBFE 100%); }
main.sc .sc-group { flex-wrap: wrap; margin-top: 26px; }
main.sc .sc-group .sc-gdesc { flex-basis: 100%; order: 3; margin: 0; color: var(--dd-muted); font-size: .9rem; text-align: left; }
main.sc .sc-group::after { order: 2; }
main.sc .sc-group h2 { font-weight: 800; letter-spacing: -.02em; }
main.sc .sc-group h2 .ic { border-radius: 14px; font-size: 1.2rem; }
main.sc .sc-card { border-radius: 22px; border-color: transparent; box-shadow: var(--dd-shadow); }
main.sc .sc-card:hover { box-shadow: var(--dd-shadow-lg); border-color: transparent; }
main.sc .sc-tag { border-radius: 999px; padding: 3px 10px; } main.sc .sc-tag.navy { background: rgba(79,70,229,.08); color: var(--dd-indigo); }
main.sc .sc-btn { border-radius: 999px; background: var(--dd-grad-ink); } main.sc .sc-btn:hover { background: var(--dd-grad); }
main.sc .sc-price b { color: var(--dd-ink); }
main.sc .sc-cta { border-radius: 26px; background: radial-gradient(400px 220px at 100% 100%, rgba(141,198,62,.35), transparent 60%), var(--dd-grad-ink); }
main.sc .sc-cta a { background: var(--dd-grad); border-radius: 999px; }
/* each way has its own colour: done for you = indigo, self-service = green, compare = gold */
main.sc .sc-group[data-group] h2 .ic { background: rgba(79,70,229,.1); color: var(--dd-indigo); }
main.sc .sc-group.way-diy h2 .ic { background: rgba(141,198,62,.18); color: var(--dd-green-d); }
main.sc .sc-group.way-cmp h2 .ic { background: rgba(242,183,5,.18); color: #B07F00; }
main.sc .sc-card.way-dfy { box-shadow: inset 0 3px 0 var(--dd-indigo), var(--dd-shadow); }
main.sc .sc-card.way-diy { box-shadow: inset 0 3px 0 var(--dd-green), var(--dd-shadow); }
main.sc .sc-card.way-cmp { box-shadow: inset 0 3px 0 var(--dd-gold), var(--dd-shadow); }
@media (max-width: 767px) { .sc-hero { padding: 54px 0 40px; } }

/* keep the logo its natural shape on pages with tight headers */
.dd-logo { flex-shrink: 0; } .dd-logo img { width: auto !important; max-width: none; }