/* Editorial finish for every public page (home, notary, websites, bookkeeping and the generated guides, towns and tools).
   Loaded after site.css or firm.css, never in the admin, portals or apps. It replaces the old "liquid glass" layer:
   flat ivory surfaces, hairline rules, square corners, a serif for headlines, one muted gold. No blur, no shadows, no gradients.
   Remove the <link> to fall back to the plain look in site.css. Header and footer details are in chrome.css. */

/* ---- type ---- */
:root{--f-display:var(--f-serif);--f-brand:var(--f-serif)}
body{font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background:var(--paper)}
.wrap{max-width:var(--wrap);padding-inline:32px}
@media (max-width:640px){.wrap{padding-inline:20px}}
h1,h2,h3{font-family:var(--f-serif);font-weight:400;letter-spacing:-.018em;line-height:1.08;font-variant-numeric:lining-nums}
h1{font-size:clamp(2.5rem,5.2vw,4.4rem);line-height:1.04;letter-spacing:-.025em}
h2{font-size:clamp(1.9rem,3.2vw,2.75rem)}
h3{font-size:1.25rem;font-weight:500;letter-spacing:-.008em;line-height:1.22}
h2.as-h1{font-size:clamp(2.5rem,5.2vw,4.2rem);font-weight:400}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400}
.lede{font-size:1.18rem;line-height:1.62;color:var(--ink-2);max-width:60ch}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font:600 .72rem/1.4 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink)}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);flex:none}
.mono{font-family:var(--f-mono)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 .76rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;padding:18px 30px;border-radius:0;border:1px solid transparent;transition:background .25s,border-color .25s,color .25s,transform .25s}
.btn-primary{background:var(--cta);color:var(--on-cta);border-color:var(--cta);filter:none;box-shadow:none}
.btn-primary:hover{background:var(--brass-ink);border-color:var(--brass-ink);color:#fff;filter:none;transform:none;box-shadow:none}
.btn-ghost{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 38%,transparent);box-shadow:none}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-sm{padding:13px 20px;font-size:.7rem}
.btn:active{transform:none}
.band.dark .btn-primary,.hero .btn-primary,.cta-band .btn-primary,.aside-card .btn-primary,.firm-hero .btn-primary{background:#f3eee2;border-color:#f3eee2;color:#0b1814}
.band.dark .btn-primary:hover,.hero .btn-primary:hover,.cta-band .btn-primary:hover,.aside-card .btn-primary:hover{background:var(--gold);border-color:var(--gold);color:#0b1814}
.band.dark .btn-ghost,.hero .btn-ghost,.cta-band .btn-ghost,.aside-card .btn-ghost{background:transparent;color:var(--deep-fg);border-color:color-mix(in srgb,var(--deep-fg) 36%,transparent)}
.band.dark .btn-ghost:hover,.hero .btn-ghost:hover,.cta-band .btn-ghost:hover,.aside-card .btn-ghost:hover{background:var(--deep-fg);border-color:var(--deep-fg);color:var(--deep)}

/* ---- thin contact bar above the header (generated pages) ---- */
.strip{background:var(--deep);color:var(--deep-muted);font:500 .74rem/1.4 var(--f-body);letter-spacing:.05em}
.strip .wrap{padding-block:9px}
.strip b{color:var(--deep-fg);font-weight:600}

/* ---- page headers ---- */
.page-hero{background:var(--paper);padding-block:88px 72px;border-bottom:1px solid var(--line)}
.page-hero h1{max-width:22ch}
.page-hero .lede{margin-top:24px}
.page-hero .hero-ctas{margin-top:34px}
.crumbs{font:500 .72rem/1.5 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brass-ink)}
@media (max-width:760px){.page-hero{padding-block:56px 48px}}

/* ---- notary hub hero ---- */
.hero{background:var(--deep);color:var(--deep-fg);padding-block:96px 104px;border-bottom:1px solid var(--gold)}
.hero h1{color:var(--deep-fg)}
.hero h1 span{color:var(--gold);font-style:italic}
.hero .eyebrow{color:var(--gold)}
.hero .eyebrow::before{background:var(--gold)}
.hero .lede{color:var(--deep-muted)}
.hero-ctas{gap:14px}
.chips{gap:10px 28px}
.chips span::before{content:"";display:inline-block;width:14px;height:1px;background:var(--brass);margin-right:10px;vertical-align:.3em;font-weight:400}
.hero .chips span::before{background:var(--gold)}
.ticket{border-radius:0;box-shadow:none;border:1px solid color-mix(in srgb,var(--deep-fg) 24%,transparent);background:var(--surface)}
.ticket-top{border-bottom:1px solid var(--line)}
.ticket-top .tag{border-radius:0;background:transparent;color:var(--brass-ink);border:1px solid var(--brass);letter-spacing:.14em}
.hero .ticket{background:color-mix(in srgb,var(--deep-fg) 6%,var(--deep));color:var(--deep-fg);border-color:color-mix(in srgb,var(--deep-fg) 22%,transparent)}
.hero .ticket-top{border-bottom-color:color-mix(in srgb,var(--deep-fg) 18%,transparent)}
/* The ticket and the sign-from-home demo sit on the dark hero, so they use the dark-surface text colours (the light-page greys were 1.1 to 2.8 to 1 on this panel). */
.hero .ticket{--muted:var(--deep-muted);--ink:var(--deep-fg);--ok:#7fd6a0}
.hero .ticket-top .tag{color:var(--gold);border-color:var(--gold)}

/* ---- always-dark sections: light text and gold accents whatever the visitor's theme ---- */
.band.dark,.cta-band{--brass:#cfae6c;--brass-ink:#e2c88e;--on-brass:#0b1814;--ink:#f3eee2;--ink-2:#cdd5ce;--muted:#a9b9af;--line:color-mix(in srgb,#f3eee2 16%,transparent);--cta:#f3eee2;--on-cta:#0b1814}
.hero{--brass:#cfae6c;--brass-ink:#e2c88e;--on-brass:#0b1814}

/* ---- sections ---- */
section.band{padding-block:112px}
section.band.tight{padding-block:64px}
@media (max-width:760px){section.band{padding-block:72px}section.band.tight{padding-block:48px}}
.band.alt{background:var(--surface);border-block:1px solid var(--line)}
.band.dark{background:var(--deep);color:var(--deep-fg)}
.band.dark h2,.band.dark h3{color:var(--deep-fg)}
.sec-head{gap:18px;margin-bottom:56px;max-width:760px}

/* ---- cards ---- */
.grid{gap:24px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:34px 32px 30px;gap:12px;box-shadow:none;transition:border-color .25s,box-shadow .25s}
a.svc:hover{border-color:var(--ink);box-shadow:inset 0 3px 0 0 var(--brass);transform:none}
.svc .code{font:600 .66rem/1.3 var(--f-body);letter-spacing:.2em;color:var(--brass-ink)}
.svc h3{font-size:1.4rem}
.svc p{font-size:.96rem;line-height:1.6}
.svc .more{font:600 .7rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-top:6px}
.band.alt .svc{background:var(--paper)}
.commit{border-radius:0;border:1px solid var(--line);background:var(--surface)}
.commit strong{font-family:var(--f-serif);font-stretch:normal;font-weight:400;font-size:2.7rem;letter-spacing:-.02em;color:var(--brass-ink)}
.remote-card{border-radius:0;border:1px solid color-mix(in srgb,var(--deep-fg) 22%,transparent);padding:36px;box-shadow:none;background:transparent}
.remote-card .abbr{font-family:var(--f-serif);font-stretch:normal;font-weight:400;font-size:4rem;line-height:.9;color:var(--gold)}
.callout{border-left:2px solid var(--brass);border-radius:0;background:var(--brass-soft);padding:20px 24px;box-shadow:none}
.pill{border-radius:0;letter-spacing:.14em;font-weight:600;font-family:var(--f-body);font-size:.66rem}
.cred-list li{border-radius:0;border:1px solid var(--line);border-left:2px solid var(--brass);background:var(--surface);box-shadow:none;padding:20px 22px}
.cred-list b{font-family:var(--f-serif);font-weight:500;font-size:1.15rem}
.about-photo{border-radius:0}
.states span{border-radius:0}
.more-svcs li a{border-radius:0;box-shadow:none;background:transparent;font-size:.86rem}
.more-svcs li a:hover{border-color:var(--ink);color:var(--ink)}
.county-links a,.chk-row label{border-radius:0}
.fee-table .tag{border-radius:0}
.pay-line{border-radius:0}

/* ---- steps, tables, faq ---- */
.steps{border-top:1px solid var(--ink)}
.steps li::before{font-family:var(--f-serif);font-size:1.7rem;color:var(--brass);margin-bottom:10px;letter-spacing:-.01em}
.tbl-wrap{border-radius:0;border-color:var(--line)}
th{font:600 .66rem/1.3 var(--f-body);letter-spacing:.16em}
summary{font-family:var(--f-serif);font-size:1.22rem;font-weight:500;padding-block:20px}
summary::after{font-family:var(--f-body);font-weight:300;top:16px}
.faq-group h3{font:600 .7rem/1.3 var(--f-body);letter-spacing:.2em;color:var(--brass-ink)}

/* ---- forms ---- */
.form-card{border-radius:0;border:1px solid var(--line);background:var(--surface);padding:40px;box-shadow:none}
@media (max-width:620px){.form-card{padding:22px}}
.form-card legend{font:600 .68rem/1.3 var(--f-body);letter-spacing:.2em;color:var(--brass-ink)}
label{font:600 .8rem/1.4 var(--f-body);letter-spacing:.01em}
input,select,textarea{border-radius:0;background:var(--surface);border:1px solid var(--rule);padding:13px 14px;box-shadow:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:var(--surface)}
.radio-row label,.agree{border-radius:0}
.radio-row label{background:var(--surface)}
.notice{border-radius:0}
.aside-card{border-radius:0;padding:36px;box-shadow:none;border:1px solid color-mix(in srgb,var(--deep-fg) 14%,transparent)}
.aside-card .big{font-family:var(--f-serif);font-stretch:normal;font-weight:400;font-size:1.8rem}

/* ---- booking wizard ---- */
.stepbar li{border-top-width:2px;border-radius:0;font:600 .72rem/1.3 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.svc-opt{border-radius:0;background:var(--surface);box-shadow:none}
.svc-opt-code{font-family:var(--f-serif);font-stretch:normal;font-weight:400;font-size:1.7rem;width:8ch}
.svc-opt:hover{border-color:var(--ink);transform:none}
.day,.slot{border-radius:0;background:var(--surface);box-shadow:none}
.day b{font-family:var(--f-serif);font-stretch:normal;font-weight:400;font-size:1.4rem}
.day:not([disabled]):hover,.slot:hover{border-color:var(--ink);transform:none;background:var(--surface)}
.slot[aria-selected="true"]{background:var(--cta);border-color:var(--cta);color:var(--on-cta)}
.addon-row{border-radius:0;background:var(--surface)}
.bstep-title{font-size:1.7rem}

/* ---- long-form pages: guides, legal ---- */
.legal-doc{max-width:720px;font-size:1.04rem;line-height:1.75}
.legal-doc h2{font-size:1.75rem;margin:52px 0 14px}
.legal-doc p,.legal-doc li{color:var(--ink-2)}
.guide-note{border-top:1px solid var(--line)}
.byline{letter-spacing:.01em}

/* ---- closing band on every generated page ---- */
.cta-band{background:var(--deep);color:var(--deep-fg);padding-block:104px;border-top:1px solid var(--gold);position:relative}
.cta-band h2{color:var(--deep-fg);max-width:20ch}
.cta-band p{color:var(--deep-muted)}
.cta-band .cb p{color:var(--deep-fg)}
.cta-band input{background:#f7f5f0;color:#101a16;border:1px solid #8a9b93}
.cta-band .cb-msg{color:var(--deep-muted)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---- virtual notary session demo (hero sample order) ---- */
.ron-demo{padding:14px 18px 4px;display:grid;gap:10px}
.rd-call{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rd-tile{position:relative;aspect-ratio:4/3;border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--brass) 14%,transparent),transparent 70%),color-mix(in srgb,var(--deep-fg) 4%,transparent);display:grid;place-items:center;overflow:hidden}
.rd-av svg{width:46%;min-width:44px;fill:none;stroke:var(--muted);stroke-width:1.6;display:block;margin:0 auto}
.rd-av{width:100%}
.rd-tile em{position:absolute;left:8px;bottom:6px;font:.64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.rd-live{position:absolute;right:8px;top:7px;font:.58rem/1 var(--f-mono);letter-spacing:.12em;font-style:normal;color:var(--gold);display:flex;align-items:center;gap:5px}
.rd-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#e5594f;animation:rdBlink 1.4s infinite}
.rd-id{position:absolute;right:8px;bottom:8px;width:42%;aspect-ratio:1.6;border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);opacity:0;transform:translateY(8px);overflow:hidden}
.rd-id b{position:absolute;left:6px;top:6px;width:30%;height:55%;border:1px solid var(--gold);opacity:.7}
.rd-id u{position:absolute;left:42%;right:6px;top:8px;height:3px;background:var(--gold);opacity:.5;box-shadow:0 7px 0 var(--gold),0 14px 0 var(--gold)}
.rd-scan{position:absolute;left:0;right:0;height:2px;background:var(--ok);box-shadow:0 0 8px var(--ok);top:0;opacity:0}
.rd-doc{position:relative;border:1px solid var(--line);padding:12px 14px 14px;min-height:74px;background:color-mix(in srgb,var(--deep-fg) 4%,transparent)}
.rd-line{height:4px;background:var(--line);margin:0 0 7px;width:100%}.rd-line.s{width:62%}
.rd-sig{width:58%;height:30px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;display:block;margin-top:6px}
.rd-seal{position:absolute;right:12px;bottom:8px;width:54px;height:54px;display:grid;place-items:center;opacity:0;transform:scale(2.2) rotate(-14deg);color:var(--ok)}
.rd-seal svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}
.rd-seal span{font:700 .5rem/1 var(--f-mono);letter-spacing:.1em;margin-top:24px}
.rd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.rd-steps li{font:.6rem/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-top:2px solid var(--line);padding-top:5px;transition:color .3s,border-color .3s}
.rd-steps li.on{color:var(--ink);border-top-color:var(--gold)}
.rd-steps li.ok{color:var(--ok);border-top-color:var(--ok)}
@keyframes rdBlink{50%{opacity:.25}}
@keyframes rdId{0%{opacity:0;transform:translateY(8px)}12%,100%{opacity:1;transform:none}}
@keyframes rdScan{0%{top:0;opacity:1}100%{top:calc(100% - 2px);opacity:1}}
@keyframes rdSig{to{stroke-dashoffset:0}}
@keyframes rdSeal{0%{opacity:0;transform:scale(2.2) rotate(-14deg)}60%{opacity:1;transform:scale(.92) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
.ron-demo.go .rd-id{animation:rdId .5s .9s both}
.ron-demo.go .rd-scan{animation:rdScan 1.1s 1.3s ease-in-out both}
.ron-demo.go .rd-sig{animation:rdSig 1.6s 3.2s ease-out both}
.ron-demo.go .rd-seal{animation:rdSeal .5s 5s cubic-bezier(.2,.9,.3,1.2) both}
@media (prefers-reduced-motion:reduce){
  .rd-live::before{animation:none}
  .rd-id,.rd-seal{opacity:1;transform:none}.rd-sig{stroke-dashoffset:0}
  .rd-steps li{color:var(--ok);border-top-color:var(--ok)}
}

/* ---- text motion (homepage + notary): headline words rise in, copy fades up on scroll. Only when html.motion is set. ---- */
html.motion [data-tm]{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.6,.2,1) var(--tmd,0ms),transform .7s cubic-bezier(.2,.6,.2,1) var(--tmd,0ms)}
html.motion [data-tm].in{opacity:1;transform:none}
html.motion .tm-h .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
html.motion .tm-h .w>span{display:inline-block;transform:translateY(105%);transition:transform .75s cubic-bezier(.2,.7,.2,1) var(--wd,0ms)}
html.motion .tm-h.in .w>span{transform:none}

/* long buttons wrap on phones */
@media (max-width:560px){.btn{white-space:normal;max-width:100%;text-align:center;line-height:1.3}}