@charset "UTF-8";
/* NotaryBerry design system: tokens and components for the signer and notary portals.
Spec: docs/design-system.md. Build screens only from these classes; add new parts here first. */
@font-face { font-family:'Pretendard Variable'; font-weight:45 920; font-style:normal; font-display:swap;
src:url('/shared/vendor/fonts/pretendard/PretendardVariable.woff2') format('woff2-variations'); }
html { font-size:62.5%; scroll-padding-top:88px; }
/* ── Tokens (our own values; see docs/design-system.md) ── */
:root {
--navy-50:#eef0f8; --navy-100:#dde1f1; --navy-500:#465194; --navy-600:#3c467f; --navy-700:#2e3566;
--grey-50:#f7f8fa; --grey-100:#f1f3f5; --grey-200:#e4e7eb; --grey-300:#d0d5db; --grey-400:#aab2bc;
--grey-500:#8a939e; --grey-600:#69737f; --grey-700:#4d5663; --grey-800:#323a46; --grey-900:#1c222b;
--red-500:#e0464e; --red-50:#fdeeef; --green-500:#149a63; --green-50:#e9f6f0; --amber-600:#a8650a; --amber-50:#fdf3e1;
--font:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--display:700 30px/40px var(--font); --title-1:700 22px/31px var(--font); --title-2:700 19px/27px var(--font); --headline:600 17px/25px var(--font);
--body:400 15px/23px var(--font); --caption:400 13px/19px var(--font); --micro:600 12px/17px var(--font);
--ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font); color:var(--grey-900); background:#fff; -webkit-font-smoothing:antialiased; letter-spacing:-.005em; }
h1, h2, h3, .wordmark, .ring b { letter-spacing:-.02em; }
button { font-family:inherit; }
:focus-visible { outline:2px solid var(--navy-500); outline-offset:2px; }
[hidden] { display:none !important; }
/* ── Button ── */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; cursor:pointer; font-weight:600; white-space:nowrap; text-decoration:none; overflow:hidden; transition:opacity .1s; user-select:none; }
.btn::after { content:''; position:absolute; inset:0; background:#000; opacity:0; transition:opacity .1s; pointer-events:none; }
.btn:active::after { opacity:.1; }
.btn.s { height:32px; padding:0 12px; border-radius:8px; font-size:13px; }
.btn.m { height:40px; padding:0 16px; border-radius:12px; font-size:15px; }
.btn.l { height:48px; padding:0 20px; border-radius:12px; font-size:16px; }
.btn.xl { height:56px; padding:0 24px; border-radius:16px; font-size:17px; }
.btn.full { display:flex; width:100%; }
.btn.primary { background:var(--navy-500); color:#fff; }
.btn.dark { background:var(--grey-800); color:#fff; }
.btn.danger { background:var(--red-500); color:#fff; }
.btn.weak.primary { background:var(--navy-50); color:var(--navy-700); }
.btn.weak.dark { background:var(--grey-100); color:var(--grey-800); }
.btn.weak.danger { background:var(--red-50); color:var(--red-500); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn:disabled::after { display:none; }
.btn .dots { display:none; gap:4px; }
.btn.loading .label { visibility:hidden; }
.btn.loading .dots { display:inline-flex; position:absolute; }
.btn .dots i { width:6px; height:6px; border-radius:50%; background:currentColor; animation:dot 1s infinite var(--ease); }
.btn .dots i:nth-child(2) { animation-delay:.15s; } .btn .dots i:nth-child(3) { animation-delay:.3s; }
@keyframes dot { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-2px); } }
.icon-btn { width:32px; padding:0; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
/* ── Badge ── */
.badge { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px; font:var(--micro); white-space:nowrap; }
.badge.act { background:var(--navy-50); color:var(--navy-700); }
.badge.wait { background:var(--amber-50); color:var(--amber-600); }
.badge.ready { background:var(--green-50); color:var(--green-500); }
.badge.done { background:var(--grey-100); color:var(--grey-600); }
.badge.stop { background:var(--red-50); color:var(--red-500); }
.badge.fill { background:var(--navy-500); color:#fff; }
/* ── List row ── */
.list { list-style:none; margin:0; padding:0; }
.row { position:relative; display:flex; align-items:center; gap:16px; padding:12px 24px; cursor:pointer; transition:background .1s; }
.row:active { background:var(--grey-100); }
@media (hover:hover) { .row:hover { background:var(--grey-50); } .row:active { background:var(--grey-100); } }
.row + .row::before { content:''; position:absolute; top:0; left:80px; right:24px; height:1px; background:var(--grey-200); }
.row.no-icon + .row.no-icon::before { left:24px; }
.row .lead { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--navy-50); color:var(--navy-500); }
.row .lead.round { border-radius:50%; background:var(--grey-100); color:var(--grey-700); font:600 15px/1 var(--font); }
.row .lead.instant { background:var(--amber-50); color:var(--amber-600); }
.row .main { flex:1; min-width:0; }
.row .title { font:var(--headline); color:var(--grey-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .desc { font:var(--caption); color:var(--grey-600); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .chev { color:var(--grey-400); }
.row.skeleton { cursor:default; }
.row.skeleton:hover, .row.skeleton:active { background:none; }
.sk { border-radius:6px; background:linear-gradient(90deg, var(--grey-100) 0, var(--grey-50) 50%, var(--grey-100) 100%); background-size:200% 100%; animation:shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position:-200% 0; } }
/* ── List header ── */
/* ── Tabs ── */
.tabs { display:flex; gap:28px; border-bottom:1px solid var(--grey-200); }
.tab { position:relative; height:48px; padding:0; border:0; background:none; font:400 15px/1 var(--font); color:var(--grey-600); cursor:pointer; }
.tab[aria-selected="true"] { color:var(--grey-900); font-weight:700; }
.tab[aria-selected="true"]::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--grey-900); }
/* ── Switch ── */
.switch { position:relative; flex:none; width:52px; height:32px; border:0; border-radius:16px; background:var(--grey-300); cursor:pointer; transition:background .2s var(--ease); }
.switch::before { content:''; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s var(--ease); }
.switch[aria-checked="true"] { background:var(--navy-500); }
.switch[aria-checked="true"]::before { transform:translateX(20px); }
/* ── Text field ── */
.field label { display:block; margin-bottom:6px; font:var(--caption); color:var(--grey-600); }
.field input { width:100%; height:52px; padding:0 16px; border:0; border-radius:12px; background:var(--grey-100); font:400 16px/1 var(--font); color:var(--grey-900); outline:none; transition:box-shadow .1s; }
.field input:focus { box-shadow:0 0 0 2px var(--navy-500); background:#fff; }
.field input::placeholder { color:var(--grey-400); }
.field .err { margin-top:6px; font:var(--caption); color:var(--red-500); }
/* ── Card ── */
/* ── Desktop app shell ── */
.app-header { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--grey-200); }
.strip { background:var(--navy-500); color:#fff; }
.strip .inner { display:flex; align-items:center; gap:16px; max-width:1328px; height:48px; margin:0 auto; padding:0 24px; }
.strip b { font:600 15px/1 var(--font); }
.strip span { font:400 14px/1 var(--font); color:rgba(255,255,255,.78); }
.strip .sep { width:1px; height:14px; background:rgba(255,255,255,.3); }
.strip .cta { margin-left:auto; background:rgba(255,255,255,.14); color:#fff; }
.timer { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:8px; background:var(--grey-100); font:600 13px/1 var(--font); color:var(--grey-700); font-variant-numeric:tabular-nums; }
.profile { position:relative; }
.profile > button { display:flex; align-items:center; gap:10px; height:40px; padding:0 8px 0 4px; border:0; border-radius:12px; background:transparent; font:600 15px/1 var(--font); color:var(--grey-800); cursor:pointer; }
.profile > button:hover, .profile > button[aria-expanded="true"] { background:var(--grey-100); }
.menu { position:absolute; right:0; top:48px; width:320px; padding:8px; border-radius:20px; background:#fff; box-shadow:0 12px 40px rgba(16,24,40,.16), 0 0 0 1px var(--grey-200); animation:rise .15s var(--ease); }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 4px 8px; }
.tiles a { position:relative; display:grid; justify-items:center; gap:8px; padding:14px 4px 12px; border-radius:14px; background:var(--grey-50); color:var(--grey-800); font:600 13px/1 var(--font); text-decoration:none; overflow:hidden; }
.tiles a svg { color:var(--navy-500); }
.tiles a:hover { background:var(--grey-100); }
.menu .items a, .menu .items div { display:flex; align-items:center; gap:12px; height:44px; padding:0 12px; border-radius:12px; color:var(--grey-800); font:500 15px/1 var(--font); text-decoration:none; }
.menu .items a:hover { background:var(--grey-50); }
.menu .items svg { color:var(--grey-500); }
.menu hr { margin:8px 4px; border:0; border-top:1px solid var(--grey-200); }
.menu .signout { margin:4px 4px 4px; }
.app-header .inner { display:flex; align-items:center; gap:40px; max-width:1328px; height:64px; margin:0 auto; padding:0 24px; }
.wordmark { font:800 19px/1 var(--font); letter-spacing:.02em; color:var(--navy-700); }
.app-nav { display:flex; gap:28px; align-self:stretch; }
.app-nav a { position:relative; display:flex; align-items:center; font:500 15px/1 var(--font); color:var(--grey-600); text-decoration:none; }
.app-nav a[aria-current] { color:var(--grey-900); font-weight:700; }
.app-nav a[aria-current]::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--navy-500); }
.account { margin-left:auto; display:flex; align-items:center; gap:10px; font:500 15px/1 var(--font); color:var(--grey-800); }
.avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--navy-50); color:var(--navy-700); font:700 13px/1 var(--font); }
.page { max-width:1328px; margin:0 auto; padding:24px 24px 64px; }
.site-foot { background:var(--navy-500); color:rgba(255,255,255,.72); }
.site-foot .inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; max-width:1328px; margin:0 auto; padding:40px 24px 44px; font:var(--body); }
.site-foot .brand { font:800 22px/1 var(--font); letter-spacing:-.02em; color:#fff; }
.site-foot .brand + p { margin:10px 0 0; font:var(--caption); color:rgba(255,255,255,.6); }
.site-foot b { display:block; margin-bottom:14px; font:600 15px/1 var(--font); color:#fff; }
.site-foot a { display:block; margin-top:10px; color:rgba(255,255,255,.72); text-decoration:none; }
.site-foot a:hover { color:#fff; }
.site-foot .bottom { background:var(--navy-700); }
.site-foot .bottom .inner { display:flex; justify-content:space-between; padding:16px 24px; font:var(--caption); color:rgba(255,255,255,.6); }
/* ── Offer screen ── */
.overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; background:rgba(20,24,40,.6); animation:fade .2s var(--ease); }
@keyframes fade { from { opacity:0; } }
.sheet { width:min(420px,100%); padding:28px 24px 24px; border-radius:24px; background:#fff; box-shadow:0 24px 64px rgba(0,0,0,.24); animation:rise .2s var(--ease); }
@keyframes rise { from { opacity:0; transform:translateY(12px); } }
.offer .kind { display:flex; justify-content:center; align-items:center; gap:6px; font:700 13px/1 var(--font); color:var(--amber-600); }
.ring { position:relative; width:112px; height:112px; margin:20px auto 16px; }
.ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:8; }
.ring .track { stroke:var(--grey-100); }
.ring .time { stroke:var(--navy-500); stroke-linecap:round; transition:stroke-dashoffset 1s linear, stroke .2s; }
.ring b { position:absolute; inset:0; display:grid; place-items:center; font:700 34px/1 var(--font); font-variant-numeric:tabular-nums; }
.offer.ending .ring .time { stroke:var(--red-500); } .offer.ending .ring b { color:var(--red-500); }
.offer h2 { margin:0; text-align:center; font:var(--display); }
.offer .sub { margin:2px 0 16px; text-align:center; font:var(--body); color:var(--grey-600); }
/* ── Toast ── */
.toast { position:fixed; left:50%; bottom:32px; z-index:200; transform:translate(-50%,16px); padding:14px 20px; border-radius:12px; background:rgba(28,34,43,.92); color:#fff; font:var(--body); opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.band { height:16px; background:var(--grey-100); }
.kv { margin:0; padding:4px 20px 8px; }
.kv div { display:flex; justify-content:space-between; gap:16px; padding:10px 0; font:var(--body); }
.kv dt { color:var(--grey-600); } .kv dd { margin:0; font-weight:600; text-align:right; }
.sw { border:1px solid var(--grey-200); border-radius:12px; overflow:hidden; font:var(--caption); }
/* ── Mockup viewer groups ── */
/* ── Page layouts ── */
.app { background:var(--grey-50); min-height:100vh; display:flex; flex-direction:column; }
.app main { flex:1; }
.page.wide { width:100%; max-width:1328px; margin:0 auto; padding:28px 24px 64px; display:grid; gap:16px; align-content:start; }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.split { display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; align-items:start; }
.split.rev { grid-template-columns:minmax(0,1fr) 360px; }
.sticky { position:sticky; top:84px; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0; }
.hero h1 { margin:0; font:var(--display); letter-spacing:-.02em; }
.hero .sub { margin:4px 0 0; font:400 16px/24px var(--font); color:var(--grey-600); }
.panel { background:#fff; border-radius:16px; padding:8px 0; }
.panel.pad { padding:24px; }
.ph { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px 8px; }
.ph h3 { margin:0; font:700 17px/25px var(--font); color:var(--grey-900); }
.ph .count { font:600 15px/1 var(--font); color:var(--grey-500); margin-left:6px; }
.ph-right { font:500 14px/20px var(--font); color:var(--grey-500); }
.ph-right.link { display:inline-flex; align-items:center; color:var(--grey-600); text-decoration:none; }
.desc em { font-style:normal; font-weight:600; }
.t-act { color:var(--navy-500); } .t-ready { color:var(--green-500); } .t-wait { color:var(--amber-600); } .t-stop { color:var(--red-500); } .t-done { color:var(--grey-500); }
.app .row .title { font:600 15px/22px var(--font); }
.app .row { padding:10px 24px; }
.tabs.in-panel { padding:0 24px; gap:24px; }
.tab[aria-selected="true"] .cnt { color:var(--grey-600); }
.seg { display:inline-flex; padding:3px; border-radius:12px; background:var(--grey-100); }
.seg button { height:34px; padding:0 14px; border:0; border-radius:10px; background:transparent; font:600 14px/1 var(--font); color:var(--grey-600); cursor:pointer; }
.seg button[aria-pressed="true"] { background:#fff; color:var(--grey-900); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.more { padding:4px 24px 16px; }
/* Calendar */
.mgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:4px 12px 16px; text-align:center; }
.mgrid .dow { font:600 12px/28px var(--font); color:var(--grey-500); }
.mgrid button { position:relative; height:38px; border:0; border-radius:10px; background:transparent; font:500 14px/1 var(--font); color:var(--grey-800); cursor:pointer; font-variant-numeric:tabular-nums; }
.mgrid button:hover { background:var(--grey-100); }
.mgrid button.out { color:var(--grey-300); }
.mgrid button.has::after { content:''; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--navy-500); }
.mgrid button.today { color:var(--navy-500); font-weight:700; }
.mgrid button.sel { background:var(--navy-500); color:#fff; }
.mgrid button.sel::after { background:#fff; }
.day-head { padding:20px 24px 6px; font:600 13px/19px var(--font); color:var(--grey-500); }
.day-head + .list .row::before { display:none; }
/* Settings rows (account) */
.set .row { cursor:pointer; }
.set .row .title { font:500 15px/22px var(--font); color:var(--grey-700); }
.set .row.no-icon + .row.no-icon::before { left:24px; }
.side-nav { padding:8px; }
.side-nav a { display:flex; align-items:center; gap:12px; height:44px; padding:0 14px; border-radius:12px; font:500 15px/1 var(--font); color:var(--grey-700); text-decoration:none; }
.side-nav a:hover { background:var(--grey-50); }
.side-nav a[aria-current] { background:var(--navy-50); color:var(--navy-700); font-weight:600; }
.side-nav a svg { color:currentColor; opacity:.8; }
.sig { font:400 26px/1 'Brush Script MT', 'Segoe Script', cursive; color:var(--grey-900); }
/* Session detail */
.stepper { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding:0 24px 4px; }
.stepper div { display:grid; gap:8px; font:500 12px/16px var(--font); color:var(--grey-500); }
.stepper i { height:4px; border-radius:2px; background:var(--grey-200); }
.stepper .done i { background:var(--navy-500); } .stepper .done { color:var(--grey-700); }
.stepper .now i { background:var(--navy-500); } .stepper .now { color:var(--navy-700); font-weight:700; }
.next { display:flex; align-items:center; gap:16px; padding:20px 24px; }
.next + .next { border-top:1px solid var(--grey-200); }
.next .t { flex:1; } .next .t b { display:block; font:600 16px/24px var(--font); } .next .t span { font:var(--caption); color:var(--grey-600); }
.title-badges { display:flex; gap:6px; margin-bottom:10px; }
@media (max-width:980px) { .cols2, .split, .split.rev { grid-template-columns:1fr; } .sticky { position:static; } }
/* Earnings chart */
.chart { display:flex; align-items:flex-end; gap:12px; height:200px; padding:8px 24px 0; }
.chart div { flex:1; display:grid; justify-items:center; align-content:end; gap:8px; height:100%; }
.chart i { width:100%; max-width:36px; border-radius:8px 8px 4px 4px; background:var(--navy-100); transition:background .15s; }
.chart div:hover i, .chart div.cur i { background:var(--navy-500); }
.chart span { font:500 12px/1 var(--font); color:var(--grey-500); }
.chart div.cur span { color:var(--grey-900); font-weight:700; }
/* Document preview */
.paper { margin:8px 24px 24px; aspect-ratio:8.5/11; border-radius:12px; background:var(--grey-50); box-shadow:inset 0 0 0 1px var(--grey-200); padding:28px 26px; display:grid; align-content:start; gap:10px; }
.paper b { font:700 14px/20px var(--font); text-align:center; margin-bottom:8px; }
.paper i { display:block; height:6px; border-radius:3px; background:var(--grey-200); }
.paper i.s { width:60%; } .paper i.m { width:85%; }
.paper .seal { justify-self:end; margin-top:18px; width:72px; height:72px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--navy-100); display:grid; place-items:center; font:700 10px/1.2 var(--font); color:var(--navy-500); text-align:center; }
.app .row.sel { background:var(--navy-50); }
.app .row.sel + .row::before, .app .row.sel::before { display:none; }
/* Select field */
.field select { width:100%; height:52px; padding:0 44px 0 16px; border:0; border-radius:12px; background:var(--grey-100) url('data:image/svg+xml;utf8,') no-repeat right 14px center; font:400 16px/1 var(--font); color:var(--grey-900); appearance:none; outline:none; cursor:pointer; }
.field select:focus { box-shadow:0 0 0 2px var(--navy-500); background-color:#fff; }
.field + .field { margin-top:16px; }
.field .hint { margin-top:6px; font:var(--caption); color:var(--grey-500); }
/* Checklist rows */
.panel .cta-block { padding:16px 24px 20px; display:grid; gap:8px; }
.panel .cta-block p { margin:0; font:var(--caption); color:var(--grey-600); text-align:center; }
/* Request flow */
.flow { width:100%; max-width:640px; margin:0 auto; padding:28px 24px 64px; display:grid; gap:16px; }
.flow .count-step { font:600 14px/20px var(--font); color:var(--navy-500); }
.flow .sub { margin:6px 0 0; font:var(--body); color:var(--grey-600); }
.progress { height:4px; border-radius:2px; background:var(--grey-200); overflow:hidden; }
.progress i { display:block; height:100%; background:var(--navy-500); transition:width .2s var(--ease); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips button { height:40px; padding:0 14px; border:0; border-radius:12px; background:var(--grey-100); font:500 15px/1 var(--font); color:var(--grey-700); cursor:pointer; }
.chips button[aria-pressed="true"] { background:var(--navy-50); color:var(--navy-700); font-weight:600; box-shadow:inset 0 0 0 1.5px var(--navy-500); }
.radio-row { display:flex; align-items:center; gap:14px; padding:16px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--grey-200); cursor:pointer; }
.radio-row[aria-checked="true"] { box-shadow:inset 0 0 0 2px var(--navy-500); }
.radio-row .dot { flex:none; width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--grey-300); }
.radio-row[aria-checked="true"] .dot { box-shadow:inset 0 0 0 7px var(--navy-500); }
.radio-row b { display:block; font:600 15px/22px var(--font); } .radio-row span { font:var(--caption); color:var(--grey-600); }
.two-f { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.two-f .field + .field { margin-top:0; }
/* Empty state */
/* Wider dialog for forms */
.sheet.form { width:min(480px,100%); }
.sheet.form .field + .field, .sheet.form .two-f { margin-top:16px; }
.sheet.form .row { padding:12px 0; }
.sheet.form .two-f .field + .field, .two-f .field + .field { margin-top:0; }
.stripe-note { display:flex; align-items:center; gap:6px; margin-top:14px; font:500 12px/1 var(--font); color:var(--grey-500); }
/* Request flow: step on the left, live summary on the right */
.flow { max-width:1328px; padding:28px 24px 64px; display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px 24px; align-items:start; }
.flow > .flow-main { display:grid; gap:16px; }
.flow > .flow-side { grid-row:span 2; }
.summary .row { cursor:pointer; }
.summary .row .desc { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.summary .row.todo { cursor:default; opacity:.45; }
.summary .row.now { background:var(--navy-50); }
.summary .row.now::before, .summary .row.now + .row::before { display:none; }
@media (max-width:980px) { .flow { grid-template-columns:1fr; } .flow > .flow-side { grid-row:auto; } }
.flow .pair { justify-self:end; width:100%; max-width:440px; }
/* Generic modal content */
.sheet.wide { width:min(560px,100%); }
.sheet h2 { margin:0 0 8px; font:var(--title-1); }
.sheet .lead2 { margin:0 0 20px; font:var(--body); color:var(--grey-700); }
.sheet .pair { margin-top:20px; }
.draw-box canvas { display:block; width:100%; height:180px; cursor:crosshair; touch-action:none; }
.draw-box .base { position:absolute; left:24px; right:24px; bottom:44px; border-top:1px dashed var(--grey-300); pointer-events:none; }
.draw-box .hint { position:absolute; left:0; right:0; bottom:14px; text-align:center; font:var(--caption); color:var(--grey-500); pointer-events:none; }
.f1 { font-family:'Snell Roundhand','Brush Script MT',cursive; font-size:28px; }
.f2 { font-family:'Segoe Script','Bradley Hand',cursive; font-size:24px; }
.f3 { font-family:'Noteworthy','Marker Felt','Comic Sans MS',cursive; font-size:24px; }
.avatar.xl { width:96px; height:96px; font-size:30px; margin:4px auto 16px; display:grid; }
/* Session states */
.state { display:grid; gap:16px; }
.pulse { position:relative; display:grid; place-items:center; width:88px; height:88px; margin-bottom:8px; }
.pulse::before, .pulse::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--navy-100); animation:pulse 2s infinite var(--ease); }
.pulse::after { animation-delay:1s; }
.pulse .avatar { position:relative; z-index:1; width:64px; height:64px; font-size:20px; }
@keyframes pulse { 0% { transform:scale(.7); opacity:.9; } 100% { transform:scale(1.4); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .pulse::before, .pulse::after { animation:none; opacity:.4; } }
.spin { width:20px; height:20px; border-radius:50%; border:2.5px solid var(--navy-100); border-top-color:var(--navy-500); animation:spin .8s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }
/* Identity flow */
.q-head { display:flex; align-items:center; justify-content:space-between; }
/* Auth */
.auth { min-height:100vh; background:var(--grey-50); display:grid; place-items:center; padding:48px 24px; }
.auth-row { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; align-items:start; }
.auth-card { width:420px; padding:40px 32px 32px; border-radius:24px; background:#fff; display:grid; gap:16px; }
.auth-card .wordmark { justify-self:center; font-size:22px; }
.auth-card h1 { margin:8px 0 0; text-align:center; font:700 24px/32px var(--font); letter-spacing:-.02em; }
.auth-card .lead2 { margin:-8px 0 4px; text-align:center; font:var(--body); color:var(--grey-600); }
.or { display:flex; align-items:center; gap:12px; font:var(--caption); color:var(--grey-500); }
.or::before, .or::after { content:''; flex:1; height:1px; background:var(--grey-200); }
.auth-links { display:flex; justify-content:space-between; font:500 14px/20px var(--font); }
.auth-links a { color:var(--grey-600); text-decoration:none; } .auth-links a.strong { color:var(--navy-500); font-weight:600; }
.code { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.code input { min-width:0; width:100%; height:60px; border:0; border-radius:12px; background:var(--grey-100); text-align:center; font:700 24px/1 var(--font); outline:none; }
.code input:focus { box-shadow:0 0 0 2px var(--navy-500); background:#fff; }
/* Header: logo left, portal tabs centered, account right (as in the current product) */
.app-header .inner { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; }
.app-header .app-nav { justify-self:center; }
.app-header .account { justify-self:end; margin-left:0; }
/* Shared step styles for every flow (request, verify, sign-up, registration) */
.step .count-step { font:600 14px/20px var(--font); color:var(--navy-500); }
.step h1 { margin:4px 0 0; font:var(--display); letter-spacing:-.02em; }
.step .sub { margin:6px 0 0; font:var(--body); color:var(--grey-600); }
.auth-card .step h1 { text-align:left; font-size:24px; line-height:32px; }
.auth-card .step .panel { padding:0 !important; margin-top:20px !important; background:none; }
/* ── Merged components ── */
/* Text button: a button with no fill */
.btn.ghost { background:transparent; color:var(--grey-600); }
.btn.ghost.danger { color:var(--red-500); }
.row.danger .title { color:var(--red-500); }
.row .lead.grey { background:var(--grey-100); color:var(--grey-700); }
.action-list .row .title { font:500 15px/22px var(--font); }
.action-list .row .lead { background:var(--grey-100); color:var(--grey-700); }
.action-list .row.danger .lead { background:var(--red-50); color:var(--red-500); }
/* Callout: grey by default, navy for information that blocks the next step */
.callout { display:flex; gap:12px; padding:16px 20px; border-radius:16px; background:var(--grey-100); font:var(--caption); color:var(--grey-700); }
.callout b { display:block; margin-bottom:2px; font:600 14px/20px var(--font); color:var(--grey-900); }
.callout.info { background:var(--navy-50); color:var(--navy-700); }
.callout.info b { color:var(--navy-700); }
/* Key-value list: rows of label and value; .boxed puts it on a grey box */
.kv { margin:0; padding:0 24px 8px; }
.kv div { display:flex; justify-content:space-between; gap:16px; padding:10px 0; font:var(--body); }
.kv div + div { border-top:1px solid var(--grey-100); }
.kv dt { color:var(--grey-600); } .kv dd { margin:0; font-weight:600; text-align:right; color:var(--grey-900); }
.kv.boxed { margin:0 0 24px; padding:4px 16px; border-radius:16px; background:var(--grey-50); }
.kv.boxed div + div { border-top:0; }
/* Step marker: grey to do, navy now, green done */
.marker { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--grey-100); color:var(--grey-600); font:700 13px/1 var(--font); }
.marker.now, .row.now .marker { background:var(--navy-500); color:#fff; }
.marker.done, .row.done .marker { background:var(--green-500); color:#fff; }
/* Value: a number or short value at the end of a row, with an optional caption */
.value { flex:none; margin-left:auto; text-align:right; font:600 15px/22px var(--font); color:var(--grey-900); font-variant-numeric:tabular-nums; white-space:nowrap; }
.value b { display:block; font:inherit; }
.value span, .value small { display:block; font:var(--caption); color:var(--grey-500); }
.value.lg { display:block; margin:0; padding:4px 24px 0; text-align:left; font:700 28px/38px var(--font); letter-spacing:-.02em; }
.value.lg small { letter-spacing:0; }
.set .row .title { font:500 15px/22px var(--font); color:var(--grey-700); }
/* State block: empty, waiting and result screens */
.state-block { display:grid; justify-items:center; gap:6px; padding:36px 24px 40px; text-align:center; }
.state-block .ic { display:grid; place-items:center; width:56px; height:56px; margin-bottom:6px; border-radius:50%; background:var(--grey-100); color:var(--grey-500); }
.state-block .ic.ok { background:var(--green-50); color:var(--green-500); }
.state-block .ic.bad { background:var(--red-50); color:var(--red-500); }
.state-block .ic.info { background:var(--navy-50); color:var(--navy-500); }
.state-block > b { font:var(--headline); color:var(--grey-900); }
.state-block > span { max-width:440px; font:var(--caption); color:var(--grey-600); }
.ic { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; }
.ic.ok { background:var(--green-50); color:var(--green-500); } .ic.bad { background:var(--red-50); color:var(--red-500); }
/* Timer chip: grey for the session clock, amber when time is short */
.timer.warn { background:var(--amber-50); color:var(--amber-600); }
/* Person: avatar, name and one line; .boxed on grey */
.person { display:flex; align-items:center; gap:14px; }
.person .avatar { width:48px; height:48px; font-size:16px; }
.person b { display:block; font:var(--headline); color:var(--grey-900); }
.person span:not(.avatar) { font:var(--caption); color:var(--grey-600); }
.panel > .person { padding:24px; }
.menu .person { padding:12px 12px 16px; }
.person.boxed { padding:16px; border-radius:16px; background:var(--grey-50); }
/* Segmented control, small size for menus */
.seg.s { padding:3px; border-radius:10px; }
.seg.s button { height:28px; padding:0 10px; border-radius:8px; font-size:13px; }
.menu .seg { margin-left:auto; }
/* Text area uses the text field look */
.field textarea { width:100%; min-height:96px; padding:14px 16px; border:0; border-radius:12px; background:var(--grey-100); font:400 15px/22px var(--font); color:var(--grey-900); resize:vertical; outline:none; }
.field textarea:focus { box-shadow:0 0 0 2px var(--navy-500); background:#fff; }
/* Well: an inset box for files, signatures and the card form */
.well { border-radius:16px; background:var(--grey-50); box-shadow:inset 0 0 0 1.5px var(--grey-300); }
.well.drop { display:grid; justify-items:center; gap:8px; padding:32px 16px; text-align:center; font:var(--caption); color:var(--grey-600); }
.well.drop b { font:600 15px/22px var(--font); color:var(--grey-900); }
.well.draw-box { position:relative; }
.well.sig-preview { display:grid; place-items:center; height:140px; font:400 40px/1 'Snell Roundhand','Brush Script MT','Segoe Script',cursive; color:var(--grey-900); }
.well.stripe-box { max-width:560px; padding:16px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--grey-200); }
/* Dialog text */
.sheet > p { margin:0 0 24px; font:var(--body); color:var(--grey-700); }
/* Signature styles in choice rows */
.radio-row span.f1, .radio-row span.f2, .radio-row span.f3 { color:var(--grey-900); }
.radio-row span.f1 { font:400 28px/1.2 'Snell Roundhand','Brush Script MT',cursive; }
.radio-row span.f2 { font:400 24px/1.2 'Segoe Script','Bradley Hand',cursive; }
.radio-row span.f3 { font:400 24px/1.2 'Noteworthy','Marker Felt',cursive; }
.tab .cnt { margin-left:4px; font-weight:500; color:var(--grey-500); }
.tab[aria-selected="true"] .cnt { color:var(--grey-600); }
/* Auth shell: every signed-out page (sign in, code, sign-up, email checks, password reset).
Left: navy panel with the turning wireframe berry. Right: one form on white. */
.auth-shell { position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:100vh; background:#fff; }
.auth-art { position:relative; display:grid; place-items:center; overflow:hidden; perspective:800px; background:radial-gradient(ellipse at 20% 20%, var(--navy-500) 0%, var(--navy-700) 60%); }
.berry { position:relative; width:360px; height:360px; transform-style:preserve-3d; animation:berry-turn 24s linear infinite; }
.berry::before { content:''; position:absolute; inset:17.5%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 50%, transparent 70%); animation:berry-glow 4s ease-in-out infinite; }
.berry .lng { position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); transform-style:preserve-3d; }
.berry .lng::after { content:''; position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:#fff; box-shadow:0 0 6px 2px rgba(255,255,255,.7), 0 0 16px 4px rgba(255,255,255,.3); animation:berry-dot 2.5s ease-in-out infinite backwards; }
.berry .lng:nth-child(1) { transform:rotateY(0deg); } .berry .lng:nth-child(1)::after { animation-delay:0.00s; }
.berry .lng:nth-child(2) { transform:rotateY(18deg); } .berry .lng:nth-child(2)::after { animation-delay:0.15s; }
.berry .lng:nth-child(3) { transform:rotateY(36deg); } .berry .lng:nth-child(3)::after { animation-delay:0.30s; }
.berry .lng:nth-child(4) { transform:rotateY(54deg); } .berry .lng:nth-child(4)::after { animation-delay:0.45s; }
.berry .lng:nth-child(5) { transform:rotateY(72deg); } .berry .lng:nth-child(5)::after { animation-delay:0.60s; }
.berry .lng:nth-child(6) { transform:rotateY(90deg); } .berry .lng:nth-child(6)::after { animation-delay:0.75s; }
.berry .lng:nth-child(7) { transform:rotateY(108deg); } .berry .lng:nth-child(7)::after { animation-delay:0.90s; }
.berry .lng:nth-child(8) { transform:rotateY(126deg); } .berry .lng:nth-child(8)::after { animation-delay:1.05s; }
.berry .lng:nth-child(9) { transform:rotateY(144deg); } .berry .lng:nth-child(9)::after { animation-delay:1.20s; }
.berry .lng:nth-child(10) { transform:rotateY(162deg); } .berry .lng:nth-child(10)::after { animation-delay:1.35s; }
.berry .crown { position:absolute; top:0; left:50%; width:0; height:0; transform-style:preserve-3d; }
.berry .crown span { position:absolute; bottom:0; left:50%; width:76px; height:39px; border:1.5px solid rgba(255,255,255,.28); border-radius:50% 50% 20% 20%; transform-origin:bottom center; }
.berry .crown span:nth-child(1) { transform:translateX(-50%) rotateY(0deg) rotateX(-50deg); }
.berry .crown span:nth-child(2) { transform:translateX(-50%) rotateY(72deg) rotateX(-50deg); }
.berry .crown span:nth-child(3) { transform:translateX(-50%) rotateY(144deg) rotateX(-50deg); }
.berry .crown span:nth-child(4) { transform:translateX(-50%) rotateY(216deg) rotateX(-50deg); }
.berry .crown span:nth-child(5) { transform:translateX(-50%) rotateY(288deg) rotateX(-50deg); }
@keyframes berry-turn { from { transform:rotateY(0) rotateX(-8deg) scaleY(.88); } to { transform:rotateY(360deg) rotateX(-8deg) scaleY(.88); } }
@keyframes berry-glow { 0%, 100% { opacity:.5; transform:scale(1); } 50% { opacity:1; transform:scale(1.15); } }
@keyframes berry-dot { 0% { transform:rotate(-90deg) translateX(180px) rotate(90deg); opacity:0; } 5%, 95% { opacity:1; } 100% { transform:rotate(90deg) translateX(180px) rotate(-90deg); opacity:0; } }
.auth-side { position:relative; display:grid; place-items:center; padding:48px 32px; }
.auth-shell .auth-card { width:100%; max-width:420px; padding:0; border-radius:0; background:none; animation:rise .5s var(--ease) both; }
.auth-shell .auth-card .wordmark { justify-self:start; }
.auth-shell .auth-card h1, .auth-shell .auth-card .lead2 { text-align:left; }
@media (max-width:1024px) { .auth-shell { grid-template-columns:42% 58%; } }
@media (max-width:768px) { .auth-shell { grid-template-columns:1fr; } .auth-art { display:none; } }
/* Help and language links that language.js adds to pages without a language slot. */
.auth-help { display:flex; align-items:center; gap:16px; font:500 14px/1 var(--font); }
.auth-help a { color:var(--grey-600); text-decoration:none; }
.auth-shell > .auth-help { position:absolute; right:clamp(24px,5vw,64px); bottom:24px; }
@media (max-width:768px) { .auth-shell > .auth-help { position:static; justify-content:center; padding:0 24px 24px; } }
@media (prefers-reduced-motion:reduce) { .berry, .berry::before, .berry .lng::after { animation:none; } }
/* Thumbnails: page previews in a grid; a click opens the large preview */
.thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:16px; padding:8px 24px 24px; }
.thumb { display:grid; gap:2px; padding:0; border:0; background:none; text-align:left; cursor:pointer; font-family:inherit; }
.thumb .paper.mini { margin:0 0 10px; padding:18px 16px; gap:6px; transition:box-shadow .15s; }
.thumb:hover .paper.mini { box-shadow:inset 0 0 0 2px var(--navy-500); }
.thumb b { font:600 14px/20px var(--font); color:var(--grey-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thumb span { font:var(--caption); color:var(--grey-500); }
.paper.mini b { font-size:9px; line-height:12px; margin-bottom:6px; }
.paper.mini i { height:4px; }
.paper.mini .seal { width:36px; height:36px; margin-top:10px; font-size:7px; }
.side-nav a .value { margin-left:auto; }
.pair:has(> [hidden]) { grid-template-columns:1fr; }
.list-foot { display:flex; align-items:center; justify-content:center; gap:4px; width:calc(100% - 48px); height:48px; margin:4px 24px 0; padding:0; border:0; border-top:1px solid var(--grey-200); background:none; font:500 14px/1 var(--font); color:var(--grey-600); cursor:pointer; }
.list-foot::after { content:''; width:6px; height:6px; margin-top:-3px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); }
.list-foot:hover { color:var(--grey-900); }
/* ── Bootstrap JS compatibility: modals and dropdowns keep Bootstrap's behavior, styled here ── */
.modal-open { overflow:hidden; }
.modal { position:fixed; inset:0; z-index:1050; display:none; overflow-x:hidden; overflow-y:auto; outline:0; }
.modal-open .modal { overflow-x:hidden; overflow-y:auto; }
.modal-dialog { position:relative; width:min(420px, calc(100% - 32px)); margin:64px auto; pointer-events:none; }
.modal-dialog-centered { display:flex; align-items:center; min-height:calc(100% - 128px); }
.modal-content { position:relative; display:flex; flex-direction:column; width:100%; padding:28px 24px 24px; border:0; border-radius:24px; background:#fff; box-shadow:0 24px 64px rgba(0,0,0,.24); pointer-events:auto; outline:0; }
.modal.fade .modal-dialog { transform:translateY(12px); opacity:0; transition:transform .2s var(--ease), opacity .2s var(--ease); }
.modal.show .modal-dialog { transform:none; opacity:1; }
.modal-backdrop { position:fixed; inset:0; z-index:1040; background:rgb(20,24,40); }
.modal-backdrop.fade { opacity:0; transition:opacity .2s var(--ease); }
.modal-backdrop.show { opacity:.6; }
.modal-lg { width:min(720px, calc(100% - 32px)); } .modal-xl { width:min(960px, calc(100% - 32px)); }
.dropdown-menu { display:none; }
.dropdown-menu.show { display:block; }
.collapse:not(.show) { display:none; }
.fade { transition:opacity .15s linear; } .fade:not(.show) { opacity:0; }
.sr-only, .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hidden { display:none !important; }
img, svg { vertical-align:middle; }
a { color:var(--navy-500); }
input, select, textarea, button { font-family:inherit; }
.modal.wiggle .modal-dialog { animation:wiggle .3s var(--ease); }
@keyframes wiggle { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
/* ── Icons: ── */
.ic { flex:none; width:20px; height:20px; color:inherit; vertical-align:-4px; }
.ic.s { width:16px; height:16px; vertical-align:-3px; }
.ic.l { width:24px; height:24px; }
/* ── Greeting strip text rotation ── */
.accent-rotator { overflow:hidden; }
.accent-text { display:inline-block; }
.accent-text.slide-down-in { animation:accent-in .3s var(--ease); }
.accent-text.slide-down-out { animation:accent-out .3s var(--ease) forwards; }
@keyframes accent-in { from { opacity:0; transform:translateY(-8px); } }
@keyframes accent-out { to { opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion:reduce) { .accent-text.slide-down-in, .accent-text.slide-down-out { animation-duration:.01s; } }
/* ── Shell details ── */
a.wordmark { text-decoration:none; }
.session-countdown.is-warning { background:var(--amber-50); color:var(--amber-600); }
.session-countdown.is-critical { background:var(--red-50); color:var(--red-500); }
.profile > button img.avatar { object-fit:cover; }
.language-switcher { display:flex; align-items:center; gap:10px; margin-left:auto; font:500 14px/1 var(--font); color:var(--grey-700); }
.language-switcher select { height:32px; padding:0 28px 0 10px; border:0; border-radius:8px; background:var(--grey-100) url('data:image/svg+xml;utf8,') no-repeat right 8px center; font:500 13px/1 var(--font); appearance:none; cursor:pointer; }
.menu [data-language-slot] { display:flex; align-items:center; gap:12px; height:44px; padding:0 12px; color:var(--grey-800); }
.menu [data-language-slot] .language-switcher-caption { font:500 15px/1 var(--font); }
/* ── Dialog content (shared Dialog and page modals) ── */
.dialog-text h2, .modal-content > h2 { margin:0 0 8px; font:var(--title-1); color:var(--grey-900); }
.dialog-text { font:var(--body); color:var(--grey-700); }
.dialog-text p { margin:0 0 8px; }
.modal-body { margin-bottom:24px; }
.dialog-footer.single { grid-template-columns:1fr; }
.dialog-spin { display:block; width:28px; height:28px; margin:0 0 16px; }
.modal-md { width:min(560px, calc(100% - 32px)); }
.modal-full { width:calc(100% - 32px); max-width:none; }
.stack-form { display:grid; gap:16px; margin-bottom:20px; }
.stack-form .field + .field { margin-top:0; }
/* ── Shell on narrow screens: nav moves to its own scrollable row, the name hides ── */
@media (max-width:768px) {
.app-header .inner { display:flex; flex-wrap:wrap; height:auto; min-height:56px; gap:0 12px; padding:0 16px; }
.app-header .wordmark { margin-right:auto; }
.app-header .account { gap:8px; }
.app-header .app-nav { order:3; justify-self:auto; width:100%; height:44px; gap:24px; overflow-x:auto; scrollbar-width:none; }
.app-header .app-nav:empty { display:none; }
.profile > button { font-size:0; gap:4px; padding:0 4px; }
.profile > button .ic { width:16px; height:16px; }
.menu { position:fixed; top:60px; right:12px; left:12px; width:auto; }
.strip .inner { height:auto; min-height:44px; padding:8px 16px; gap:10px; }
.strip .sep, .strip .accent-rotator { display:none; }
.page, .page.wide, .flow { padding-left:16px; padding-right:16px; }
}
/* ══ Components added with the Signer portal and signed-out pages ══ */
/* Loading overlay: covers a region while a request runs; .spin in the middle (loading.js). */
.loading-overlay { position:fixed; inset:0; z-index:1100; display:grid; place-items:center; background:rgba(255,255,255,.6); animation:fade .2s var(--ease); }
.loading-overlay .spin { width:36px; height:36px; border-width:3px; }
/* Toast holder: one toast at a time, bottom center, 32 px above the page bottom (toast.js). */
.toast-stack { position:fixed; left:50%; bottom:32px; z-index:1200; display:grid; justify-items:center; gap:8px; width:min(480px, calc(100% - 32px)); transform:translateX(-50%); pointer-events:none; }
.toast-stack .toast { position:relative; left:auto; bottom:auto; transform:translateY(16px); max-width:100%; pointer-events:auto; }
.toast-stack .toast.show { transform:none; }
.toast b { display:block; font-weight:600; }
.toast a { color:#fff; }
/* Radio rows with a native radio input (identity questions): the radio sits at the right edge. */
.radio-row input[type="radio"] { flex:none; width:22px; height:22px; margin:0; accent-color:var(--navy-500); cursor:pointer; }
.radio-row:has(input:checked) { box-shadow:inset 0 0 0 2px var(--navy-500); }
/* Notification: server events and reminders. White floating card at the bottom right, newest on top (toast.js showNotification). */
.notice-stack { position:fixed; right:24px; bottom:24px; z-index:1200; display:grid; gap:12px; width:min(360px, calc(100% - 32px)); }
.notice { position:relative; display:flex; align-items:flex-start; gap:12px; padding:16px 44px 16px 16px; border-radius:16px; background:#fff; box-shadow:0 12px 40px rgba(16,24,40,.16), 0 0 0 1px var(--grey-200); animation:rise .2s var(--ease); }
.notice-ic { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--navy-50); color:var(--navy-500); }
.notice.ready .notice-ic { background:var(--green-50); color:var(--green-500); }
.notice.wait .notice-ic { background:var(--amber-50); color:var(--amber-600); }
.notice.stop .notice-ic { background:var(--red-50); color:var(--red-500); }
.notice-body { min-width:0; }
.notice-body b { display:block; font:600 15px/22px var(--font); color:var(--grey-900); }
.notice-body p { margin:2px 0 0; font:var(--caption); color:var(--grey-600); }
.notice-body .btn { margin-top:10px; }
.notice-close { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:8px; background:none; color:var(--grey-500); cursor:pointer; }
.notice-close:hover { background:var(--grey-100); color:var(--grey-800); }
/* Below 640 px notifications move to the top, full width minus 16 px margins; the bottom stays free for the toast and the main button. */
@media (max-width:640px) { .notice-stack { top:16px; right:16px; bottom:auto; left:16px; width:auto; } }
@media (prefers-reduced-motion:reduce) { .notice { animation:none; } }
/* Page grids: a column never grows past the page because of a long row title (fix for .cols2, .split, .flow, .page.wide). */
.page.wide > *, .cols2 > *, .split > *, .flow > *, .flow-main > * { min-width:0; }
/* Phones: list rows keep one action; the row text wraps under the title instead of pushing the page wider. */
@media (max-width:600px) {
.two-f { grid-template-columns:1fr; gap:16px; }
.split.rev > .sticky, .flow > .flow-side { position:static; }
.next { flex-wrap:wrap; }
.next .btn { width:100%; }
.row:has(> .row-actions) { flex-wrap:wrap; }
.row > .row-actions { width:100%; justify-content:flex-end; }
.split > .side-nav { display:none; }
}
/* ══ Components added with the Notary portal ══ */
@charset "UTF-8";
/* Notary portal additions to ds.css. Each rule says what it adds; merge into ds.css. */
/* Stack: a vertical group of panels with the page gap (layout glue used on every page) */
.stack { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-content:start; min-width:0; }
/* List row: a row that does not open anything (switch rows, facts) */
.row.static { cursor:default; }
.row.static:hover, .row.static:active { background:none; }
/* List row: the one item on the right, kept together (a value, a small button, or a button and an icon button) */
.row-end { flex:none; display:flex; align-items:center; gap:8px; margin-left:auto; }
.row-end .value { margin-left:0; }
/* List row: the title can be the row's link; it reads as the title, the whole row is the target */
.row .title a, .row .title a:visited { color:inherit; text-decoration:none; }
.row .title a:focus-visible { outline-offset:4px; border-radius:4px; }
/* List row loading: skeleton in the row's shape */
.row .lead.sk { background-color:transparent; }
.row .sk-title { width:40%; height:14px; margin:4px 0 8px; }
.row .sk-desc { width:64%; height:12px; }
/* List: empty state inside a list, and the error line above it with Try again */
.list > .list-empty, .state-block.compact { padding:20px 24px 28px; }
.list-feedback { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 24px 8px; padding:10px 12px 10px 16px; border-radius:12px; background:var(--grey-100); font:var(--caption); color:var(--grey-700); }
.list.list-top { padding-top:8px; }
/* Callout with an action on the right */
.callout { align-items:flex-start; }
.callout > .ic { margin-top:1px; color:var(--grey-500); }
.callout.info > .ic { color:var(--navy-500); }
.callout > .grow, .grow { flex:1; min-width:0; }
.callout > .btn { align-self:center; }
/* Side navigation: a count at the end of an item */
.side-nav a .value.muted { font-weight:500; color:var(--grey-500); }
/* Document preview in a dialog: the server's rendered pages in a frame */
.preview-frame { height:min(62vh,560px); border-radius:12px; overflow:hidden; background:var(--grey-50); box-shadow:inset 0 0 0 1px var(--grey-200); }
.preview-frame iframe { display:block; width:100%; height:100%; border:0; }
.sheet.wide .preview-frame + .pair { margin-top:20px; }
/* Dialog text helpers */
.sheet .lead2.tight, .lead2.tight { margin:0; font:600 15px/22px var(--font); color:var(--grey-900); }
p.hint { margin:0; font:var(--caption); color:var(--grey-500); }
.radio-row .grow b { display:block; color:var(--grey-900); }
/* Text field: helper line below a group, and a code input */
.field .code-input { letter-spacing:.3em; font-variant-numeric:tabular-nums; }
/* Title area: a title block and a control wrap on narrow screens */
.hero { flex-wrap:wrap; }
.hero > div { min-width:0; }
.tabs { overflow-x:auto; scrollbar-width:none; }
.tab { flex:none; }
/* Phones: 20 px side padding, stacked field pairs */
@media (max-width:600px) {
.page.wide { padding:20px 20px 48px; }
.hero h1 { font-size:26px; line-height:35px; }
.two-f { grid-template-columns:1fr; gap:16px; }
.app .row { padding:10px 20px; }
.ph { padding:16px 20px 8px; }
.kv { padding:0 20px 8px; }
.thumbs { grid-template-columns:repeat(2,minmax(0,1fr)); padding:8px 20px 20px; }
}
/* Panel: padded form area and a caption note under a key-value list */
.panel-body { padding:4px 24px 8px; }
.panel-note { margin:0; padding:0 24px 16px; font:var(--caption); color:var(--grey-500); }
.panel:has(> .session-deadlines[hidden]) { display:none; }
/* Main action block that sits inside another one (Start meeting after the checks pass) */
.cta-block.flush { padding:0; }
/* Text buttons under the right column (Withdraw, Cancel session): quiet, left-aligned */
.text-actions { display:grid; justify-items:start; gap:0; }
.text-actions .btn.ghost { padding:0 8px; }
.text-actions:empty { display:none; }
/* Step marker: amber when something needs review, red when it failed; icons inside */
.marker .ic.s { width:14px; height:14px; }
.marker.warn { background:var(--amber-50); color:var(--amber-600); }
.marker.bad { background:var(--red-50); color:var(--red-500); }
.signer-checks .day-head:first-child { padding-top:4px; }
.client-status-check .desc:empty { display:none; }
.client-status-check .desc { white-space:normal; }
/* Form panels: a section title inside a padded panel, and the form's main action at its end */
.form-title { margin:0 0 16px; font:700 17px/25px var(--font); color:var(--grey-900); }
.form-actions { justify-self:end; width:100%; max-width:440px; }
.stack.tight { gap:8px; }
.stack.tight p { margin:0; }
/* Agreement check: a checkbox with its text, as in the custodian notice and the account attestations */
.check-row { display:flex; align-items:flex-start; gap:10px; font:var(--body); color:var(--grey-800); cursor:pointer; }
.check-row input[type="checkbox"] { flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--navy-500); cursor:pointer; }
/* File drop: the well is the file input's label; navy icon, focus ring, error ring, chosen state */
.well.drop { cursor:pointer; }
.well.drop > .ic { color:var(--navy-500); }
.well.drop:focus-within { box-shadow:inset 0 0 0 2px var(--navy-500); }
.well.drop.invalid { box-shadow:inset 0 0 0 2px var(--red-500); }
.well.drop.dragging { background:var(--navy-50); }
.well.drop.selected b { color:var(--navy-700); }
.preview-frame.tall { height:min(80vh,820px); }
/* Long guide text in a panel */
.guide-text p, .guide-text ol { margin:0 0 12px; font:var(--body); color:var(--grey-700); }
.guide-text ol { padding-left:20px; }
.guide-text p:last-child { margin-bottom:0; }
/* Title area with two controls (a segmented control and a weak button) */
.hero-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Bar chart panel: room under the month labels */
.panel.chart-panel { padding-bottom:20px; }
.stack > p.hint { padding:0 8px; }
/* Save as PDF: print only the page body */
@media print {
.app-header, .strip, .site-foot, .hero-actions, #payoutAction { display:none !important; }
.app { background:#fff; }
.cols2 { grid-template-columns:1fr 1fr; }
.sticky { position:static; }
}
/* Account dialogs: field errors stay hidden until validation shows them (account.js) */
.invalid-feedback, .invalid-file-tooltip { display:none; }
.field .is-invalid { box-shadow:0 0 0 2px var(--red-500); }
.field-label { margin-bottom:6px; font:var(--caption); color:var(--grey-600); }
.lead2.flush, .sheet .lead2.flush { margin:0; }
/* Image preview in a dialog: the profile photo (round) or the seal (in a well) */
.img-preview { display:grid; place-items:center; min-height:120px; margin-bottom:16px; }
.img-preview img { max-width:100%; max-height:120px; object-fit:contain; }
.img-preview.round img { width:96px; height:96px; max-height:none; border-radius:50%; object-fit:cover; }
.well.img-preview { height:140px; }
.well.drop.compact { width:100%; padding:16px; margin-top:12px; border:0; font-family:inherit; }
button.well.drop { width:100%; border:0; font-family:inherit; }
/* Account file: the saved file line, the chosen file and its Remove */
.file-saved { margin-bottom:12px; font:var(--caption); color:var(--grey-600); }
.file-saved b { font-weight:600; color:var(--grey-900); }
.file-pending { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; font:var(--caption); color:var(--grey-600); }
.file-actions { display:flex; align-items:center; gap:12px; }
.file-actions .file-message { font:var(--caption); color:var(--grey-700); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Setting rows: a long value (an address) wraps instead of cutting off */
.value.wrap { white-space:normal; max-width:60%; }
.row .desc.wrap { white-space:normal; }
.person .grow b { overflow-wrap:anywhere; }
/* Setup checklist: the progress bar inside the panel */
.progress.setup-progress { margin:4px 24px 8px; }
.panel-note.error { color:var(--red-500); }
/* Key-value list: long values wrap inside a narrow column instead of widening it */
.kv div > dt { flex:none; max-width:45%; }
.kv div > dd { min-width:0; overflow-wrap:anywhere; }
.value em { font-style:normal; font-weight:600; }
.sheet.form .two-f + .field, .sheet.form .field + .two-f { margin-top:16px; }
/* Dialog: an error line that is not inside a .field (file errors) */
.sheet .err { margin:0 0 8px; font:var(--caption); color:var(--red-500); }
.stack > .btn { justify-self:start; }
/* Stacked dialog form: the grid gap spaces the fields; the action pair follows closely */
.sheet.form .stack-form .two-f, .sheet.form .stack-form .field + .field { margin-top:0; }
.stack-form + .pair { margin-top:4px; }
.stack-form .field > .hint:only-child { margin-top:-8px; }
@media (max-width:600px) { [data-account-nav] { display:none; } }
/* ══ Public website: content pages on white, bordered cards (mockup: Website pages) ══ */
.app-header.site { position:sticky; top:0; }
.app-header.site .wordmark { cursor:pointer; }
.site-page { max-width:1328px; margin:0 auto; padding:0 24px 80px; }
.site-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center; padding:72px 0 64px; }
.site-hero.narrow { grid-template-columns:minmax(0,760px); }
.site-hero.center { justify-content:center; text-align:center; }
.site-hero h1 { margin:0; font:700 48px/60px var(--font); letter-spacing:-.03em; color:var(--grey-900); }
.site-hero p { margin:16px 0 0; font:400 19px/30px var(--font); color:var(--grey-600); }
.site-hero .eyebrow, .doc .eyebrow { margin:0 0 10px; font:600 15px/22px var(--font); color:var(--navy-500); }
.hero-actions { display:flex; gap:12px; margin-top:32px; }
.site-hero.center .hero-actions { justify-content:center; }
.hero-card { border-radius:24px; background:#fff; box-shadow:0 12px 40px rgba(16,24,40,.12), 0 0 0 1px var(--grey-200); overflow:hidden; }
.site-sec { padding:40px 0; border-top:1px solid var(--grey-100); }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.sec-head h2 { margin:0; font:700 30px/40px var(--font); letter-spacing:-.02em; }
.sec-head p { margin:6px 0 0; font:var(--body); color:var(--grey-600); }
.steps4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.step-card, .feature, .price-card, .aside-card { border-radius:16px; box-shadow:inset 0 0 0 1px var(--grey-200); background:#fff; }
.step-card { display:grid; gap:8px; align-content:start; padding:24px; }
.step-card .marker { margin-bottom:8px; }
.step-card b, .feature b { font:600 17px/25px var(--font); color:var(--grey-900); }
.step-card p, .feature p { margin:0; font:var(--body); color:var(--grey-600); }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature { display:grid; gap:8px; align-content:start; padding:24px; }
.feature .fi { display:grid; place-items:center; width:44px; height:44px; margin-bottom:8px; border-radius:12px; background:var(--navy-50); color:var(--navy-500); }
.state-list { display:flex; flex-wrap:wrap; gap:8px; }
.state-list span { display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:10px; background:var(--grey-100); font:500 14px/1 var(--font); color:var(--grey-800); }
.site-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:40px; padding:40px 48px; border-radius:24px; background:var(--navy-50); }
.site-cta h2 { margin:0; font:700 30px/40px var(--font); letter-spacing:-.02em; color:var(--navy-700); }
.site-cta p { margin:6px 0 0; font:var(--body); color:var(--navy-700); }
.board { border-bottom:1px solid var(--grey-200); }
.board summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; font:600 17px/25px var(--font); color:var(--grey-900); cursor:pointer; list-style:none; }
.board summary::-webkit-details-marker { display:none; }
.board summary svg { flex:none; color:var(--grey-500); transition:transform .2s var(--ease); }
.board[open] summary svg { transform:rotate(180deg); }
.board > div { padding:0 4px 20px; font:var(--body); color:var(--grey-700); max-width:760px; }
.faq { max-width:880px; margin:0 auto; }
.aside-card { padding:8px 0; }
.aside-card h3 { margin:0; padding:16px 24px 4px; font:700 17px/25px var(--font); }
.one-time { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 32px; border-radius:16px; box-shadow:inset 0 0 0 1px var(--grey-200); }
.one-time b { font:700 22px/31px var(--font); } .one-time p { margin:4px 0 0; font:var(--body); color:var(--grey-600); }
.prices { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.price-card { display:grid; gap:12px; align-content:start; padding:24px; }
.price-card > b { font:700 19px/27px var(--font); } .pc-sub { font:var(--caption); color:var(--grey-600); margin-top:-8px; }
.pc-price { font:700 34px/44px var(--font); letter-spacing:-.02em; } .pc-price small { font:500 15px/1 var(--font); color:var(--grey-600); }
.price-card ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px; font:var(--body); color:var(--grey-700); }
.price-card li { display:flex; gap:8px; align-items:center; } .price-card li svg { color:var(--green-500); }
.fine { margin:16px 0 0; font:var(--caption); color:var(--grey-500); }
.doc-page { display:grid; grid-template-columns:280px minmax(0,760px); gap:56px; padding-top:48px; }
.doc-toc { position:sticky; top:88px; align-self:start; display:grid; gap:12px; }
.doc-toc .side-nav { padding:0; } .doc-toc .side-nav a { height:auto; min-height:40px; padding:9px 14px; line-height:22px; }
.search-field { display:flex; align-items:center; gap:10px; height:48px; padding:0 16px; border-radius:12px; background:var(--grey-100); color:var(--grey-500); }
.search-field input { flex:1; border:0; background:none; font:400 16px/1 var(--font); outline:none; color:var(--grey-900); }
.search-field.big { height:56px; max-width:560px; margin:28px auto 0; }
.doc h1 { margin:0; font:700 36px/48px var(--font); letter-spacing:-.02em; }
.doc .lead-doc { margin:12px 0 0; font:400 19px/30px var(--font); color:var(--grey-600); }
.doc .updated { margin:8px 0 0; font:var(--caption); color:var(--grey-500); }
.doc h2 { margin:40px 0 12px; font:700 22px/31px var(--font); }
.doc p, .doc li { font:400 16px/27px var(--font); color:var(--grey-800); }
.doc ul, .doc ol { padding-left:22px; } .doc li + li { margin-top:6px; }
.doc .callout { margin:24px 0; }
@media (max-width:980px) { .site-hero, .steps4, .features, .prices, .doc-page { grid-template-columns:1fr; } .doc-toc { position:static; } .site-hero h1 { font-size:36px; line-height:46px; } }
/* Containers that receive focus from script (to announce a new state) do not show the focus ring. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline:none; }
/* Row descriptions wrap to two lines instead of hiding facts; titles stay on one line. */
.row .desc { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
/* A button in a person row keeps its width; on phones the row wraps under the name. */
.person .btn { flex:none; }
@media (max-width:600px) { .person { flex-wrap:wrap; } .person > .btn { margin-left:0 !important; } }
/* ══ Components added with the public website ══ */
/* Skip link: hidden until it has keyboard focus. */
.skip-link { position:absolute; left:-9999px; top:8px; z-index:40; padding:10px 14px; border-radius:8px; background:#fff; font:600 14px/20px var(--font); box-shadow:var(--shadow-float); }
.skip-link:focus { left:16px; }
/* Announcement above the home hero: a callout with page spacing. */
.site-page > .site-note { margin-top:24px; align-items:center; }
/* Price cards in three columns (home pricing section). */
.prices.three { grid-template-columns:repeat(3,1fr); }
/* Board rows that hold a heading (FAQ questions) or lists (state requirements). */
.board summary h3 { margin:0; font:inherit; color:inherit; }
.board > div > :first-child { margin-top:0; }
.board > div > :last-child { margin-bottom:0; }
.board > div ul { margin:0; padding-left:22px; display:grid; gap:8px; }
.board > div ul ul { margin-top:8px; }
.site-sec .sec-head + .board, .faq .board + .sec-head { margin-top:0; }
.faq .board + .sec-head { padding-top:40px; }
p.flush { margin:0; }
/* Search field: the hidden attribute wins over its flex layout; a larger field in a hero. */
.search-field[hidden] { display:none; }
.search-field input::-webkit-search-cancel-button { cursor:pointer; }
.search-field:focus-within { box-shadow:0 0 0 2px var(--navy-500); background:#fff; }
.site-hero .search-field { height:56px; max-width:560px; margin:28px auto 0; }
/* Help search results: list rows that link to a topic. */
.help-results { align-self:start; }
.site-page > .help-results { max-width:880px; margin:0 auto; padding-top:24px; }
.help-results > .fine { margin:0 0 8px; }
.help-results li + li { border-top:1px solid var(--grey-200); }
.help-results a.row { padding:14px 8px; color:inherit; text-decoration:none; border-radius:12px; }
/* Long documents: room under the sticky header for anchors; definition lists, notes and links. */
.doc section[id], .board[id] { scroll-margin-top:88px; }
.doc a { color:var(--navy-500); }
.doc dl { margin:16px 0 0; }
.doc dt { margin-top:16px; font:600 16px/24px var(--font); color:var(--grey-900); }
.doc dd { margin:4px 0 0; font:400 16px/27px var(--font); color:var(--grey-800); }
.doc .guide-note { padding:16px 20px; border-radius:16px; background:var(--navy-50); color:var(--navy-700); }
.doc > .eyebrow + h1 { margin-top:0; }
.site-sec > .doc { max-width:760px; }
.site-sec > .doc > h2:first-child, .cols2 > .doc > h2:first-child { margin-top:0; }
/* Language switcher in the navy footer bar. */
.site-foot .bottom .inner { align-items:center; }
.site-foot .language-switcher { margin-left:0; color:rgba(255,255,255,.72); font:var(--caption); }
.site-foot .language-switcher select { background-color:rgba(255,255,255,.12); color:#fff; }
.site-foot .language-switcher option { color:var(--grey-900); }
/* Phones: stacked hero and call-to-action buttons, one-column footer, compact header buttons. */
@media (max-width:768px) {
.site-page { padding:0 20px 56px; }
.site-hero { padding:40px 0 32px; gap:32px; }
.site-hero h1 { font-size:32px; line-height:42px; }
.site-hero p { font-size:17px; line-height:27px; }
.hero-actions { flex-direction:column; align-items:stretch; }
.sec-head { flex-direction:column; align-items:flex-start; gap:12px; }
.sec-head h2, .site-cta h2 { font-size:24px; line-height:32px; }
.prices.three { grid-template-columns:1fr; }
.site-cta, .one-time { flex-direction:column; align-items:stretch; padding:28px 24px; }
.doc-page { padding-top:24px; gap:24px; }
.doc h1 { font-size:28px; line-height:38px; }
.site-foot .inner { grid-template-columns:1fr 1fr; }
.site-foot .inner > :first-child { grid-column:1 / -1; }
.site-foot .bottom .inner { flex-wrap:wrap; gap:12px; }
.app-header.site .account .btn.m { height:36px; padding:0 12px; font-size:14px; }
.app-header.site .app-nav { gap:20px; }
.app-header.site .app-nav a { white-space:nowrap; }
}
/* Content pages sit on white (the portals use grey-50 behind panels). */
body.site .app { background:#fff; }
/* Prose after a card grid in the same section. */
.steps4 + .doc, .features + .doc { margin-top:32px; }
/* Inside the .app flex column, auto margins stop pages from stretching: keep the full width. */
.app > .site-page { width:100%; box-sizing:border-box; }
/* Flow steps pack to the top; a taller side panel must not stretch the gaps between them. */
.flow > .flow-main { align-content:start; }