:root{
  --brand:#0B5FA5; --ink:#101828; --slate:#465166;
  --page:#F7F9FC; --surface:#fff; --wash:#EDF1F6; --line:#DEE4EC;
  --settled:#0F5C3A; --attention:#7A4E00; --stop:#A8271B;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 18px/1.6 var(--font)}
.wrap{max-width:60rem;margin:0 auto;padding:0 20px}
.prose{max-width:32rem}
header.site{background:var(--surface);border-bottom:1px solid var(--line);padding:16px 0}
header.site .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:22px}
.tile{width:30px;height:30px;border-radius:6px;background:var(--brand);position:relative;flex:none}
.tile::before,.tile::after{content:"";position:absolute;left:7px;right:7px;height:3px;background:#fff;border-radius:1px}
.tile::before{top:9px}.tile::after{top:17px}
nav.main{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap;font-size:16px}
nav.main a{color:var(--brand)}
.tel{margin-left:auto;font-size:18px}
main{padding:40px 0 64px}
h1{font-size:32px;line-height:1.2;font-weight:600;margin:0 0 14px}
h2{font-size:22px;line-height:1.3;font-weight:600;margin:40px 0 12px}
h3{font-size:18px;font-weight:600;margin:24px 0 4px}
p{margin:0 0 16px}
.sub{font-size:22px;color:var(--slate);margin:0 0 24px;max-width:32rem}
.eyebrow{color:var(--slate);font-size:18px;margin:0 0 24px}
a{color:var(--brand)}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font:600 18px/1 var(--font);
     padding:15px 28px;border-radius:8px;border:0;min-height:48px;cursor:pointer}
.btn.wide{display:block;width:100%;text-align:center}
.btn.sec{background:var(--surface);color:var(--brand);border:2px solid var(--brand);padding:13px 26px}
.linkbtn{display:inline-block;padding:12px 0;font-size:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px;margin:0 0 20px}
.wash{background:var(--wash);border-radius:8px;padding:20px 24px;margin:0 0 20px}
.wash.prose,.card.prose,.err.prose,.att.prose,.okbox.prose{max-width:44rem}
.pwrow{display:flex;gap:12px;align-items:flex-end}
.pwrow .field{flex:1;margin:0}
@media(max-width:480px){h1{font-size:28px}h2{font-size:20px}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:700px){.two{grid-template-columns:1fr}}
.price{font-size:32px;font-weight:600;margin:4px 0 0}
.setup{color:var(--slate);font-size:16px;margin:0 0 12px}
ul.plain{margin:0;padding-left:22px}
ul.plain li{margin:0 0 8px}
dl.sched{margin:0}
dl.sched dt{font-size:16px;color:var(--slate);margin:20px 0 2px}
dl.sched dd{margin:0;font-size:18px}
dl.sched dd.strong{font-weight:600}
.callout{background:var(--surface);border:2px solid var(--brand);border-radius:8px;padding:24px;margin:0 0 28px}
.callout .big{font-size:32px;font-weight:600;display:inline-block;margin-right:24px}
.field{margin:0 0 20px}
.field label{display:block;font-weight:600;margin:0 0 4px}
.field .hint{display:block;color:var(--slate);font-size:16px;margin:0 0 6px}
.field input,.field textarea,.field select{width:100%;font:400 18px var(--font);padding:12px;
  border:1px solid var(--slate);border-radius:4px;background:#fff;color:var(--ink)}
.tick{margin:0 0 20px}
.tick label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.tick input{flex:none;width:22px;height:22px;margin:3px 0 0;accent-color:var(--brand)}
.req{color:var(--slate);font-weight:400;font-size:16px}
.tag{display:inline-block;font-size:16px;font-weight:600;padding:2px 10px;border-radius:4px;border:1px solid}
.tag.ok{color:var(--settled);border-color:var(--settled);background:#EAF3EE}
.tag.att{color:var(--attention);border-color:var(--attention);background:#F7F0E2}
.tag.stop{color:var(--stop);border-color:var(--stop);background:#F8ECEA}
.finding{border-top:1px solid var(--line);padding:20px 0}
.finding h3{margin:0 0 6px}
.rec{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px;color:var(--slate);word-break:break-all}
.gap{display:inline-block;background:#FFF4D6;border:1px dashed var(--attention);color:var(--attention);
     font-size:16px;font-weight:600;padding:1px 8px;border-radius:4px}
.offer{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;color:var(--ink)}
table{border-collapse:collapse;width:100%;font-size:18px;margin:0 0 20px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font-weight:600}
footer.site{border-top:1px solid var(--line);background:var(--surface);padding:32px 0;color:var(--slate);font-size:16px}
footer.site a{color:var(--brand)}
footer.site .big{color:var(--ink);font-size:18px}
.err{border-left:4px solid var(--stop);background:#F8ECEA;padding:16px 20px;margin:0 0 20px}
.err h3{margin:0 0 6px;color:var(--stop)}
.att{border-left:4px solid var(--attention);background:#F7F0E2;padding:16px 20px;margin:0 0 20px}
.att h3{margin:0 0 6px;color:var(--attention)}
.okbox{border-left:4px solid var(--settled);background:#EAF3EE;padding:16px 20px;margin:0 0 20px}
.okbox h3{margin:0 0 6px;color:var(--settled)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.idx a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;text-decoration:none}
.idx a b{display:block;color:var(--ink);font-size:18px}

/* --- visual rhythm, added 20 Aug --- */
.band{padding:48px 0;margin:0}
.band + .band{border-top:1px solid var(--line)}
.band.wash{background:var(--wash)}
.band.deep{background:var(--brand);color:#fff}
.band.deep h2,.band.deep h3,.band.deep strong{color:#fff}
.band.deep a{color:#fff;text-decoration:underline}
.band.deep .btn{background:#fff;color:var(--brand)}
.band > .wrap > h2:first-child{margin-top:0}
main.rhythm{padding:0}
main.rhythm .band:first-child{padding-top:40px}

.quote{margin:0;padding:0 0 0 24px;border-left:5px solid var(--brand);max-width:38rem}
.quote p{font-size:24px;line-height:1.45;font-weight:600;margin:0 0 12px}
.quote footer{font-size:16px;color:var(--slate)}
.band.deep .quote{border-left-color:#fff}
.band.deep .quote footer{color:#DCE9F5}

figure.fig{margin:24px 0;max-width:44rem}
figure.fig svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px;background:var(--page)}
figure.fig figcaption{font-size:16px;color:var(--slate);margin-top:8px}

.slot{border:2px dashed var(--attention);background:#FFF9EC;border-radius:8px;padding:20px;margin:0 0 20px}
.slot b{display:block;color:var(--attention);font-size:16px;margin-bottom:6px}
.slot p{margin:0 0 6px;font-size:16px}
.slot .dims{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;color:var(--slate)}
.slot.portrait{max-width:320px;min-height:300px}

.markwatch{position:relative;overflow:hidden}
.markwatch .tilebig{position:absolute;right:-40px;top:-30px;width:220px;height:220px;border-radius:48px;
  background:var(--brand);opacity:.06}
.hero{position:relative}
.hero .lead{max-width:34rem}
.stat{font-size:56px;line-height:1;font-weight:600;color:var(--brand)}
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:700px){.tcards{grid-template-columns:1fr}.stat{font-size:44px}.band{padding:36px 0}}
.idx a span{color:var(--slate);font-size:16px}

/* --- sign in, 02-my.md section 4. The wireframes' inline hr style, and
   POST actions (Start again, Email me a code, Sign out) drawn as links --- */
hr.rule{border:0;border-top:1px solid var(--line);margin:32px 0}
form.inline{display:inline}
button.link{background:none;border:0;padding:12px 0;margin:0;font:400 18px/1.6 var(--font);color:var(--brand);
  text-decoration:underline;cursor:pointer}
.eyebrow button.link{font-size:inherit;padding:0}
/* the line passkeys.js fills when a device prompt does not go through */
p[aria-live]:empty{margin:0}
.pwrow{margin:0 0 20px}
.err p,.att p,.okbox p{margin:0 0 8px}
.err p:last-child,.att p:last-child,.okbox p:last-child{margin:0}
/* the code to scan on the authenticator setup, drawn with a quiet margin of its own */
.qr{margin:0 0 16px}
.qr svg{display:block;width:200px;max-width:100%;height:auto}
/* a long sign in address breaks inside itself rather than pushing the page sideways:
   02-my.md section 1, Reflows to 320px without a horizontal scrollbar */
main{overflow-wrap:anywhere}
/* the authenticator key wraps between its groups of four, never inside one */
.rec.key{word-break:normal}
/* the help page's four cases, h2 for the outline under the h1 and drawn at the wireframe's h3 size */
h2.case{font-size:18px;line-height:inherit;margin:24px 0 4px}

/* --- print, 02-my.md section 1: Everything prints properly --- */
.print-only{display:none}
@media print{
  @page{margin:18mm}
  body{background:#fff;color:#000;font-size:12pt;line-height:1.45}
  .skip,nav,form,button,.btn,.linkbtn,header.site nav,footer.site{display:none !important}
  header.site{border:0;padding:0 0 12pt}
  .print-only{display:block}
  .print-date{margin:0 0 12pt;font-size:11pt;color:#000}
  .print-foot{margin:24pt 0 0;padding-top:8pt;border-top:1px solid #000;font-size:11pt;color:#000}
  main{padding:0}
  .card,.wash{border:1px solid #000;background:#fff}
  a{color:#000;text-decoration:none}
}

/* --- the portal's frame and pages, spec section 6 (4 October 2026) ---
   THE PRODUCT, lifted from the prototype (docs/portal/my-dalaric-prototype.html, the `.ui`
   block, which is itself lifted verbatim from the my.dalaric.com design record), light only.
   Left out: the rig's own `.addr .route`, `.menus` and `.menu` rules, which style the
   prototype's frame rather than the product and read the rig's tokens. --sys is the
   prototype's :root font stack, set on .ui so it reaches nothing before sign in. */
.ui{--sys:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
.ui{
  --s:#FFFFFF; --s2:#EEF1F4; --i:#101828; --im:#465166;
  --b:#DCE5EF; --bs:#6C7A8C; --a:#0B5FA5; --ah:#07456F; --as:#E3EEF8;
  --ok:#0B6B57; --wn:#A0480A; --cr:#9B1C1C;
  font-family:var(--sys);
  color-scheme:light;
  background:#FFFFFF;
  color:#101828;
  font-size:15px;
  line-height:1.5;
}
.ui *{box-sizing:border-box}
.ui h1,.ui h2,.ui h3{letter-spacing:-0.02em;line-height:1.15;margin:0;font-weight:640;color:#101828}
.ui p{margin:0}
.ui a:not(.ui-btn){color:var(--a)}

.ui-bar{display:flex;align-items:center;gap:14px;padding:12px 22px;border-bottom:1px solid var(--b);background:#FFFFFF}
.ui-mark{width:24px;height:24px;border-radius:6px;background:var(--a);flex:none;position:relative}
.ui-mark i{position:absolute;left:5px;height:3px;border-radius:1px;background:#fff;display:block}
.ui-mark i:nth-child(1){top:6px;width:7px}
.ui-mark i:nth-child(2){top:11px;width:11px}
.ui-mark i:nth-child(3){top:16px;width:15px}
.ui-bar .name{font-weight:640;font-size:14.5px;letter-spacing:-0.01em}
.ui-bar .who{margin-left:auto;font-size:13.5px;color:var(--im);display:flex;align-items:center;gap:16px}

.ui-body{padding:26px 22px 30px;display:grid;gap:20px}
.ui-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ui-h h1{font-size:26px}
.ui-h .meta{font-size:13.5px;color:var(--im)}

.ui-note{border:1px solid var(--b);border-left:3px solid var(--a);background:var(--as);border-radius:4px;padding:14px 16px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ui-note .t{font-weight:640;font-size:14.5px}
.ui-note .d{font-size:14px;color:#2C3A4F;margin-top:3px;max-width:62ch}
.ui-note.warn{border-left-color:var(--wn);background:#FBF1E7}
.ui-note.ok{border-left-color:var(--ok);background:#E9F3F0}
.ui-note .act{margin-left:auto}

.ui-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:16px}
@media(min-width:760px){.ui-grid.two{grid-template-columns:1fr 1fr}}
@media(min-width:860px){.ui-grid.three{grid-template-columns:repeat(3,1fr)}}
.ui-field textarea,.ui-field select{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--bs);border-radius:4px;background:#FFFFFF;color:#101828;width:100%}
.ui-field textarea{min-height:84px;resize:vertical;line-height:1.45}
.ui-btn.sm{font-size:13px;padding:5px 11px}
.ui-ticks{display:grid;gap:12px}
.ui-ticks label{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.45;max-width:74ch}
.ui-ticks input{margin-top:3px;width:16px;height:16px;accent-color:var(--a)}
.ui-steps.compact li{padding:9px 0}
.ui-card{border:1px solid var(--b);border-radius:4px;background:#FFFFFF;padding:18px;display:flex;flex-direction:column;gap:12px}
.ui-card h2{font-size:16px}
.ui-card .big{font-size:19px;font-weight:640;letter-spacing:-0.02em;word-break:break-word}
.ui-kv{display:grid;gap:7px;font-size:14px}
.ui-kv > div{display:flex;justify-content:space-between;gap:14px}
.ui-kv .k{color:var(--im)}
.ui-kv .v{text-align:right;font-variant-numeric:tabular-nums}
.ui-small{font-size:13px;color:var(--im);line-height:1.45}
.ui-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}

.ui-btn{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:4px;border:1px solid var(--a);background:var(--a);color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
.ui-btn:hover{background:var(--ah);border-color:var(--ah)}
.ui-btn.sec{background:#FFFFFF;color:var(--a)}
.ui-btn.sec:hover{background:var(--as);color:var(--ah)}
.ui-btn.quiet{background:transparent;border-color:var(--b);color:#101828}
.ui-btn.quiet:hover{background:var(--s2)}

.ui-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:640;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:var(--as);color:var(--ah);white-space:nowrap}
.ui-pill.live{background:#E9F3F0;color:var(--ok)}
.ui-pill.wait{background:#FBF1E7;color:var(--wn)}
.ui-pill.off{background:var(--s2);color:var(--im)}
.ui-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}

.ui-sec{border-top:1px solid var(--b);padding-top:18px;display:grid;gap:12px}
.ui-sec h2{font-size:16px}

.ui-table{width:100%;border-collapse:collapse;font-size:14px;color:#101828}
.ui-table th{text-align:left;font-weight:640;color:var(--im);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:0 10px 8px 0;border-bottom:1px solid var(--b)}
.ui-table td{padding:9px 10px 9px 0;border-bottom:1px solid var(--b);vertical-align:top}
.ui-table td.num,.ui-table th.num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
.ui-table tr:last-child td{border-bottom:0}
.ui-table tr.tot td{font-weight:640;border-top:2px solid #101828;border-bottom:0}

.ui-steps{list-style:none;margin:0;padding:0;display:grid}
.ui-steps li{display:grid;grid-template-columns:26px 1fr auto;gap:14px;padding:12px 0;border-bottom:1px solid var(--b);align-items:start}
.ui-steps li:last-child{border-bottom:0}
.ui-steps .mk{width:20px;height:20px;border-radius:50%;border:2px solid var(--b);margin-top:1px;position:relative;background:#FFFFFF}
.ui-steps .done .mk{background:var(--ok);border-color:var(--ok)}
.ui-steps .done .mk::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ui-steps .now .mk{border-color:var(--wn);box-shadow:0 0 0 3px #FBF1E7}
.ui-steps .now .mk::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--wn)}
.ui-steps .s-t{font-weight:600;font-size:14.5px;display:block}
.ui-steps .s-d{font-size:13.5px;color:var(--im);margin-top:2px;max-width:66ch;display:block}
.ui-steps .s-w{font-size:12.5px;color:var(--im);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:2px}
.ui-steps .todo .s-t{color:var(--im);font-weight:500}

.ui-find{display:grid;gap:0;border:1px solid var(--b);border-radius:4px;overflow:hidden}
.ui-find .row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--b)}
.ui-find .row:last-child{border-bottom:0}
.ui-find .sev{width:4px;align-self:stretch;min-height:26px;border-radius:2px;background:var(--bs)}
.ui-find .high .sev{background:var(--cr)}
.ui-find .med .sev{background:var(--wn)}
.ui-find .ttl{font-size:14.5px;font-weight:600;display:block}
.ui-find .sub{font-size:13px;color:var(--im);margin-top:1px;display:block}
.ui-find .cnt{font-size:12.5px;color:var(--im);font-variant-numeric:tabular-nums}

.ui-score{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ui-score .num{font-size:44px;font-weight:700;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}
.ui-foot{border-top:1px solid var(--b);padding:16px 22px;background:var(--s2);font-size:13px;color:var(--im);display:flex;gap:20px;flex-wrap:wrap}
.ui-foot a{color:var(--ah)}
@media (max-width:620px){
  .ui-steps li{grid-template-columns:26px 1fr}
  .ui-steps .s-w{grid-column:2;white-space:normal}
}


.ui-stats{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--b);border-radius:4px;overflow:hidden}
.ui-stats>div{flex:1 1 130px;padding:12px 16px;border-right:1px solid var(--b);display:flex;flex-direction:column;gap:2px}
.ui-stats>div:last-child{border-right:0}
.ui-stats .n{font-size:22px;font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.ui-stats .l{font-size:12.5px;color:var(--im)}
.ui-tag{display:inline-block;font-size:11.5px;font-weight:640;letter-spacing:.03em;padding:2px 7px;border-radius:3px;background:var(--s2);color:var(--im);white-space:nowrap}
.ui-tag.site{background:#E9F3F0;color:var(--ok)}
.ui-tag.red{background:var(--as);color:var(--ah)}
.ui-tag.hold{background:#FBF1E7;color:var(--wn)}
.ui-tag.mail{background:var(--as);color:var(--ah)}
.ui-slot{display:inline-block;border:1px dashed var(--wn);color:var(--wn);background:#FFFFFF;border-radius:2px;padding:0 .4em;font-size:12.5px;font-weight:600;white-space:nowrap}
.ui-table td .ui-small{display:block;margin-top:3px}
.ui-signin{max-width:360px;margin:0 auto;padding:40px 24px 44px;display:grid;gap:14px}
.ui-signin h1{font-size:24px}
.ui-mark.big{width:34px;height:34px;border-radius:8px;margin-bottom:2px}
.ui-mark.big i:nth-child(1){top:9px;left:7px;width:10px;height:4px}
.ui-mark.big i:nth-child(2){top:16px;left:7px;width:15px;height:4px}
.ui-mark.big i:nth-child(3){top:23px;left:7px;width:20px;height:4px}
.ui-field{display:grid;gap:5px}
.ui-field label{font-size:13px;font-weight:600;color:var(--im)}
.ui-field input{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--bs);border-radius:4px;background:#FFFFFF;color:#101828;width:100%}
.ui-btn.wide{text-align:center;padding:11px 14px;display:block}
.ui-rule{height:1px;background:var(--b);margin:4px 0}
.ui-or{display:flex;align-items:center;gap:12px;color:var(--im);font-size:12.5px}
.ui-or::before,.ui-or::after{content:"";height:1px;background:var(--b);flex:1}
.ui-small.centre{text-align:center}
.ui-small.soft{color:#6C7A8C}
.pair{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:880px){.pair{grid-template-columns:1fr 1fr}}


.ui-app{display:grid;grid-template-columns:212px 1fr;align-items:stretch}

.ui-rail{background:var(--s2);border-right:1px solid var(--b);padding:16px 0;display:flex;flex-direction:column}
.ui-nav{display:flex;flex-direction:column}
.ui .ui-nav a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 16px;font-size:14.5px;color:#101828;text-decoration:none;border-left:3px solid transparent;cursor:pointer}
.ui .ui-nav a:hover{background:#E3E8EE}
.ui .ui-nav a[aria-current="page"]{background:#FFFFFF;border-left-color:var(--a);font-weight:640}
.ui-nav a .c{font-size:12.5px;color:var(--im);font-variant-numeric:tabular-nums}
.ui-rail .sep{height:1px;background:var(--b);margin:12px 16px}
.ui-pages{min-width:0}
.ui-back{font-size:13px;margin-bottom:2px}
.ui-back a{text-decoration-thickness:1px}
.ui-tabs{display:flex;gap:6px;flex-wrap:wrap}
.ui-tabs button{font:inherit;font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--b);background:#FFFFFF;color:var(--im);cursor:pointer}
.ui-tabs button:hover{color:#101828;border-color:var(--bs)}
.ui-tabs button[aria-pressed="true"]{background:var(--as);border-color:var(--a);color:var(--ah)}
@media(max-width:700px){.ui-app{grid-template-columns:1fr}.ui-rail{border-right:0;border-bottom:1px solid var(--b);flex-direction:row;overflow-x:auto;padding:0}.ui-nav{flex-direction:row}.ui .ui-nav a{border-left:0;border-bottom:3px solid transparent;white-space:nowrap;padding:10px 14px}.ui .ui-nav a[aria-current="page"]{border-left-color:transparent;border-bottom-color:var(--a)}.ui-rail .sep{width:1px;height:auto;margin:8px 2px;flex:none}}

/* --- the frame's glue: not the prototype's, here so the sign in rules above (main, table,
   button.link) do not reach into the frame, and so Sign out can be a POST form, which the
   prototype draws as a link --- */
.ui main{padding:0}
/* the prototype's frame sits in the rig; on its own page a short page still puts the footer at the bottom */
body.ui{min-height:100vh;display:flex;flex-direction:column}
body.ui > .ui-app{flex:1 0 auto}
.ui table{margin:0}
.ui-bar .who form{margin:0}
/* a long sign in address in the top bar wraps rather than pushing a phone's page sideways */
.ui-bar .who,.ui-bar .who > span{min-width:0;overflow-wrap:anywhere}
.ui-bar .who button.link{font:inherit;padding:0;color:var(--a);white-space:nowrap}
/* the prototype wraps each wide table in an inline overflow-x:auto, which the page's CSP refuses.
   Inside it a word stays whole and the table scrolls sideways at phone width, rather than taking
   main's overflow-wrap:anywhere from the sign in rules and breaking "August" across two lines */
.ui-scroll{overflow-x:auto}
.ui-scroll .ui-table{overflow-wrap:normal}
/* Start at phone width (the walk, 7 October 2026): the packages table's four columns left "For" a word or
   two a line and broke the price headings, so below the frame's narrow breakpoint each package stacks as
   its name, its description full width, "£82.50 a year before VAT", "£40.83 to set up", then Choose. It is
   still the one table, with its headings, which stay for a screen reader and are only taken out of sight.
   Every rule is under .ui .start .packages, the Start page's own wrapper and table, so no other table
   changes. The joining words are in the page and shown only here ("a year before VAT" is the heading's
   words, "to set up" is new, for Julian). */
.ui .start .packages .after{display:none}
@media (max-width:620px){
  .ui .start .packages thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ui .start .packages,.ui .start .packages tbody,.ui .start .packages tr,.ui .start .packages td{display:block;width:100%}
  .ui .start .packages tr{padding:14px 0;border-bottom:1px solid var(--b)}
  .ui .start .packages tr:first-child{padding-top:0}
  .ui .start .packages tr:last-child{border-bottom:0}
  .ui .start .packages td,.ui .start .packages td.num{padding:0 0 4px;border-bottom:0;text-align:left}
  .ui .start .packages td:last-child{padding:8px 0 0}
  .ui .start .packages .after{display:inline}
}
/* a head cell with no heading is a td (Websites' Open column, the walk, 5 October 2026); it keeps the
   heads' rule beneath it, which tr:last-child td would otherwise take away */
.ui-table thead tr:last-child td{border-bottom:1px solid var(--b);padding:0 0 8px}
/* at phone width the menu strip and the page are two grid rows; on a page shorter than the screen
   the spare height would otherwise go to the strip and make it tall */
@media(max-width:700px){.ui-app{align-content:start}}
/* at phone width the strip opens scrolled to the lit item, so Settings or Billing is not off the right
   edge until the strip is scrolled (the walk, 5 October 2026). CSS only; a browser without
   scroll-initial-target opens the strip at its start, as before. The strip is not a snap container,
   so a snap alignment on the lit item would do nothing and there is none (the final review) */
@media(max-width:700px){.ui .ui-nav a[aria-current="page"]{scroll-initial-target:nearest}}

/* the How you sign in pages inside the frame (spec §6.8, §6.9): their own markup and the sign in
   rules above, brought to the frame's type scale (the walk, 5 October 2026): 15px text as .ui, 13px
   labels and hints as .ui-field and .ui-small, 14px buttons as .ui-btn, and the frame's page heading.
   Their markup is unchanged. .ui p and .ui h1 take away the margins these pages space their text
   with, so they come back here: a page's own paragraphs, and a paragraph in an .err, .att or .okbox,
   which gets that box's spacing back from .ui p as the sign in pages have it (the final review) */
.ui .prose{font-size:15px;line-height:1.5}
.ui .prose h1{font-size:26px;margin:0 0 14px}
.ui .prose > p,.ui .prose > form > p{margin:0 0 12px}
.ui .prose > p[aria-live]:empty{margin:0}
.ui .err p,.ui .att p,.ui .okbox p{margin:0 0 8px}
.ui .err p:last-child,.ui .att p:last-child,.ui .okbox p:last-child{margin:0}
.ui .prose .eyebrow{font-size:inherit;margin:0 0 14px}
.ui .prose dl.sched dt{font-size:13px;margin:16px 0 2px}
.ui .prose dl.sched dd{font-size:15px}
.ui .prose hr.rule{margin:24px 0}
.ui .prose .rec{font-size:14px}
.ui .prose .field{margin:0 0 14px}
.ui .prose .field label{font-size:13px;color:var(--im);margin:0 0 5px}
.ui .prose .field .hint{font-size:13px;margin:0 0 5px}
.ui .prose .field input{font:400 15px var(--sys);padding:10px 12px;border-color:var(--bs)}
.ui .prose .pwrow{gap:8px;margin:0 0 14px}
.ui .prose .pwrow .field{margin:0}
.ui .prose .btn{font:600 14px/1.5 var(--sys);padding:8px 14px;border-radius:4px;min-height:0;border:1px solid var(--a);background:var(--a)}
.ui .prose .btn.wide{padding:11px 14px}
.ui .prose .btn.sec{background:#fff}
.ui .prose button.link{font:inherit;padding:8px 0}
/* .ui a:not(.ui-btn) colours every other link, which would put a .btn link's words in the
   button's own blue */
.ui .prose a.btn{color:#fff}
.ui .prose a.btn.sec,.ui .prose button.btn.sec{color:var(--a)}

/* the order's steps and check page inside the frame (orders spec §5): the form engine's own step and
   summary views, whose form.css is the start pages' 18px scale, brought to the frame's as the How you
   sign in pages are (the walk, 7 October 2026): the frame's page heading, 15px text and boxes, 13px
   labels and hints as .ui-field and .ui-small, 14px buttons as .ui-btn. Under .ui .order, the order
   layout's body, so the start pages keep their look; boxes and choices keep form.css's 44px height.
   The body is a grid with a gap, so the engine's own margins between its parts are taken away */
.ui .order h1{font-size:26px;margin:0}
.ui .order .small{font-size:13px;color:var(--im);margin:0}
.ui .order .prose{font-size:15px;max-width:74ch}
.ui .order .prose p{margin:0}
.ui .order .field{margin:0 0 16px}
.ui .order .field label,.ui .order .field legend,.ui .order .field-name{font-size:13px;font-weight:600;color:var(--im);margin:0 0 5px}
.ui .order .hint,.ui .order .eg,.ui .order .opt,.ui .order label.sub,.ui .order fieldset.choices legend{font-size:13px}
.ui .order .hint,.ui .order .eg{margin:0 0 5px;color:var(--im)}
.ui .order .eg-label{color:var(--im)}
.ui .order :where(.field) input[type=text],.ui .order :where(.field) input[type=tel],.ui .order :where(.field) input[type=email],.ui .order :where(.field) input[type=url],.ui .order :where(.field) textarea{font:400 15px/1.5 var(--sys);padding:10px 12px;min-height:44px;max-width:28rem;border:1px solid var(--bs);border-radius:4px}
.ui .order .has-error input,.ui .order .has-error textarea{border-color:var(--stop)}
.ui .order .field .err{margin:0 0 8px;padding:10px 14px;font-size:14px;max-width:28rem}
.ui .order label.choice{font-size:15px;font-weight:400;color:#101828;gap:10px;margin:0;padding:6px 0}
.ui .order label.choice input{width:18px;height:18px;margin-top:3px;accent-color:var(--a)}
.ui .order fieldset.choices{margin:12px 0 0}
.ui .order fieldset.choices legend{font-weight:400}
.ui .order .actions{gap:8px;margin:8px 0 0}
.ui .order .btn{font:600 14px/1.5 var(--sys);padding:8px 14px;border-radius:4px;min-height:0;border:1px solid var(--a);background:var(--a);color:#fff}
.ui .order .btn:hover{background:var(--ah);border-color:var(--ah)}
.ui .order .btn.sec{background:#fff;color:var(--a)}
.ui .order .btn.sec:hover{background:var(--as);color:var(--ah)}
.ui .order .keep{gap:8px 16px;margin:0}
.ui .order .summary h2{font-size:16px;margin:8px 0 0;padding-bottom:6px;border-bottom:1px solid var(--b)}
.ui .order .summary dl{margin:0 0 20px}
.ui .order .summary dt{font-size:13px;color:var(--im);margin:12px 0 2px}
.ui .order .summary dd{font-size:15px}
.ui .order .back{margin:0}

/* Settings (spec §6.8): at phone width an address does not fit beside its label, so the value
   goes onto its own line whole, rather than breaking mid-word beside it; a value too long for a
   line of its own still breaks */
.ui-body.settings .ui-kv > div{flex-wrap:wrap}
.ui-body.settings .ui-kv .v{max-width:100%;overflow-wrap:break-word}

/* Settings at desktop width: each card keeps its own height, rather than stretching to the tallest in
   its row and leaving an empty block above its actions (the walk, 7 October 2026) */
.ui-body.settings .ui-grid{align-items:start}

/* How you sign in (the walk, 7 October 2026). A paragraph after the list (the one passkey line) is set
   apart from its last row as hr.rule is, whose margin this one collapses into. A remove drawn as a
   button keeps its padding to tap, but not in the line, so its words sit where a link's do. And a
   row's action keeps its words together: "Set it up" after the authenticator hint, not "Set / it up" */
.ui .prose dl.sched{margin:0 0 24px}
.ui .prose dl.sched dd button.link{margin:-8px 0}
.ui .prose dl.sched dd a,.ui .prose dl.sched dd button.link{white-space:nowrap}

/* the pages before sign in (my.layout), the walk, 7 October 2026: the footer's contact line wraps
   between its three parts, so a part that goes onto the next line starts at the edge, not after the
   separator's spaces. (Their heading's 14px below, as the frame's .ui .prose h1, is the h1 rule's.) */
footer.site .contact{display:flex;flex-wrap:wrap;column-gap:22px}

/* Support (spec §6.7): the prototype's card holds its fields and button directly; here they sit in
   a form, which keeps the card's spacing between them. A problem with a field sits between its
   label and the field, at the field's size */
.ui-card > form{display:flex;flex-direction:column;gap:12px}
.ui-field .err{margin:0;padding:10px 14px;font-size:14px}

/* The order's terms page (orders spec §5): the file's body as text, its lines kept and wrapped to
   the page; the fingerprint is long and breaks rather than widening the page at phone width */
.ui-body pre.terms{white-space:pre-wrap;overflow-wrap:break-word;font:inherit;font-size:14px;line-height:1.5;max-width:74ch;margin:16px 0 0}
.ui-body .terms-kv .v{min-width:0;overflow-wrap:anywhere}

/* The viewing band (view as a client, spec section 6): above the top bar while an operator looks at
   this account from ops. Deep violet, because nothing a client sees uses violet: the frame is blue,
   green, amber and red, so the band is the one thing on the page that differs from what the client
   sees. White on the band violet (declared once below) is 11.0:1 (WCAG AA wants 4.5:1; AAA 7:1). The Stop button is the inverse,
   violet on white, the same 11.0:1. This stylesheet is light only (color-scheme:light on .ui, no
   prefers-color-scheme block), so there is no dark mode to keep it AA in. The white focus ring
   (against the violet, 11.0:1) replaces the dark one, which would be near invisible on it. */
.ui-viewing{--vw:#4A1D96;display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;padding:10px 22px;background:var(--vw);color:#FFFFFF}
.ui-viewing p{font-size:14.5px;font-weight:600;line-height:1.4;max-width:80ch}
.ui-viewing form{margin:0 0 0 auto}
.ui-viewing button{font:inherit;font-size:14px;font-weight:600;padding:6px 14px;border-radius:4px;border:1px solid #FFFFFF;background:#FFFFFF;color:var(--vw);cursor:pointer}
.ui-viewing button:hover{background:#EDE5FA;border-color:#EDE5FA}
.ui-viewing :focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}

/* print, for the frame (the walk, 5 October 2026): the sign in block above hides nav, forms and
   buttons, which left the menu's grey column, the footer and every .ui-btn link on the paper. The
   page takes the whole width, and a wide table prints whole rather than cut at its scroll box */
@media print{
  .ui-rail,.ui-foot,.ui-actions,.ui-btn{display:none !important}
  .ui-app{display:block}
  .ui-scroll{overflow:visible}
}

/* --- the fresh look (21 October 2026): Julian found the portal "boring and old" and asked for it
   to look modern and want to be used. Colour, type and spacing only: every word and every element
   is as it was, so the rules above still say what each part is, and these say how it looks now.
   The deep navy and sky are dalaric.com's own (--dl-surface-deep, --dl-accent-on-deep), so the
   account reads as the same company as the site that sent you to it. Light pages inside a navy
   frame: the frame is the one bold thing, and the page inside it stays quiet. --- */
:root{--night:#0B1220;--night-2:#16213A;--night-line:#26334D;--on-night:#C4CEDD;--on-night-soft:#93A0B5;--sky:#8FC3F0;--mist:#F2F5F9}

/* the signed in frame: the top bar and the side menu are one navy L, and the page sits inside it
   as a light sheet with rounded corners. The footer is on the navy below the sheet */
body.ui{background:var(--night)}
.ui-bar{background:var(--night);border-bottom:0;padding:14px 22px 14px 24px;gap:12px}
.ui-bar .name{color:#FFFFFF;font-size:16px}
.ui-bar .who{color:var(--on-night)}
.ui-bar .who > span{color:#FFFFFF;font-weight:600}
.ui-bar .who button.link{color:var(--sky);text-decoration:none}
.ui-bar .who button.link:hover{text-decoration:underline}
.ui-mark{border-radius:7px}
.ui-app{grid-template-columns:236px 1fr;background:var(--night)}
.ui-rail{background:transparent;border-right:0;padding:6px 12px 24px}
.ui-rail{scrollbar-width:thin;scrollbar-color:var(--night-line) transparent}
.ui .ui-nav{gap:2px}
.ui .ui-nav a{justify-content:flex-start;gap:12px;padding:9px 12px;border-left:0;border-radius:8px;color:var(--on-night);font-size:14.5px}
.ui .ui-nav a::before{content:"";flex:none;width:18px;height:18px;background:currentColor;opacity:.75;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ui .ui-nav a:hover{background:var(--night-2);color:#FFFFFF}
.ui .ui-nav a[aria-current="page"]{background:rgba(143,195,240,.14);color:#FFFFFF;font-weight:600}
.ui .ui-nav a[aria-current="page"]::before{background:var(--sky);opacity:1}
.ui-nav a .c{margin-left:auto;color:var(--on-night-soft);font-size:12px;background:var(--night-2);border-radius:999px;padding:1px 8px}
.ui-rail .sep{background:var(--night-line);margin:14px 12px}
.ui :focus-visible{outline:3px solid var(--a);outline-offset:2px}
.ui-bar :focus-visible,.ui-rail :focus-visible,.ui-foot :focus-visible{outline-color:var(--sky)}

/* the menu's icons, by where each item goes, so the menu's markup stays as it was. Line drawings in
   the frame's own stroke, drawn as masks so they take the item's colour; img-src allows data: */
/* Overview first, as every item's default: its address is the bare host, which no ending matches */
.ui .ui-nav a{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E")}
.ui .ui-nav a[href*="/websites"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M7 6.5h.01M10 6.5h.01'/%3E%3C/svg%3E")}
.ui .ui-nav a[href$="/domains"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E")}
.ui .ui-nav a[href$="/email"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.ui .ui-nav a[href$="/billing"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E")}
.ui .ui-nav a[href$="/support"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E")}
.ui .ui-nav a[href$="/settings"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E")}
.ui .ui-nav a[href$="/order"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}

.ui-pages{background:var(--mist);border-radius:16px;margin:0 12px 0 0}
.ui-body{padding:34px 40px 44px;gap:22px;max-width:1120px}
.ui-h h1,.ui .prose h1,.ui .order h1{font-size:30px;letter-spacing:-0.025em}
.ui-h .meta{font-size:13.5px}
.ui-foot{background:var(--night);border-top:0;color:var(--on-night-soft);padding:18px 24px 22px}
.ui-foot a{color:var(--sky)}
.ui-foot span{max-width:90ch}

/* the page's parts: white on the mist, rounded, a hairline and the faintest lift */
.ui-card,.ui-sec,.ui-stats,.ui-find{background:#FFFFFF;border:1px solid #E1E8F0;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.ui-card{padding:22px;gap:14px}
/* a list page's table (Websites, Domains, Email) sits straight in the page, so it gets the same white panel */
.ui-body > .ui-scroll{background:#FFFFFF;border:1px solid #E1E8F0;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.04);padding:16px 20px 6px}
.ui-card h2,.ui-sec h2{font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ui-card .big{font-size:22px;letter-spacing:-0.025em;line-height:1.2}
.ui-sec{padding:22px;gap:14px}
.ui-sec .ui-kv{font-size:14.5px}
.ui-kv > div{padding:2px 0}
.ui-stats .n{font-size:24px}
.ui-find .row{padding:13px 16px}
.ui-table{font-size:14.5px}
.ui-table th{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
.ui-table td{padding:11px 10px 11px 0}
.ui-table tr.tot td{border-top:2px solid #101828}
.ui-note{border:0;border-radius:12px;box-shadow:inset 3px 0 0 var(--a);padding:16px 18px}
.ui-note.warn{box-shadow:inset 3px 0 0 var(--wn)}
.ui-note.ok{box-shadow:inset 3px 0 0 var(--ok)}
.ui-note .t{font-size:15px}

/* buttons and fields, a little rounder and a little roomier */
.ui-btn{border-radius:8px;padding:9px 16px;transition:background-color .12s,border-color .12s}
.ui-btn.sm{border-radius:6px}
.ui-btn.wide{padding:12px 16px}
.ui-field input,.ui-field textarea,.ui-field select{border-radius:8px;border-color:#B8C4D3}
.ui-field input:focus,.ui-field textarea:focus,.ui-field select:focus{border-color:var(--a);outline:3px solid var(--as);outline-offset:0}
.ui .prose .btn,.ui .order .btn{border-radius:8px;padding:9px 16px}
.ui .prose .field input,.ui .order :where(.field) input[type=text],.ui .order :where(.field) input[type=tel],.ui .order :where(.field) input[type=email],.ui .order :where(.field) input[type=url],.ui .order :where(.field) textarea{border-radius:8px}

/* "Live" and "Working": the dot breathes, the one moving thing, to say the thing is running now */
.ui-pill{padding:4px 10px}
.ui-pill.live i{position:relative}
.ui-pill.live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:ui-live 2.4s ease-out infinite}
@keyframes ui-live{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.ui-pill.live i::after{animation:none;display:none}}

@media(max-width:700px){
  .ui-bar{padding:12px 16px}
  .ui-app{grid-template-columns:1fr}
  .ui-rail{padding:0 8px 10px;border-bottom:0}
  .ui .ui-nav a,.ui .ui-nav a[aria-current="page"]{border-bottom:0;padding:8px 12px}
  .ui-rail .sep{background:var(--night-line);margin:8px 4px}
  .ui-pages{margin:0;border-radius:16px 16px 0 0}
  .ui-body{padding:24px 16px 32px}
  .ui-h h1,.ui .prose h1,.ui .order h1{font-size:26px}
  .ui-foot{padding:18px 16px 22px}
}

/* the pages before sign in (my.layout): a band with the mark, and the page's words on a white card
   lifted half onto it. The band is Julian's picture of the Dorset coast (AI-generated by him, 22
   October 2026, in the Dalaric image register as generated-my-sign-in-coast), cropped to the strip
   with the village and Durdle Door; the middle, where the card sits, is fields. A navy fade at its
   top keeps the white mark readable, and navy shows if the picture does not load. It carries his
   small label, top right, as every AI picture of his does. (Faint stepped bars in the band were
   tried first and taken out: they read as a page still loading.) */
body:not(.ui){background:var(--mist)}
header.site{position:relative;border-bottom:0;padding:22px 0 190px;
  background:linear-gradient(180deg,rgba(11,18,32,.72),rgba(11,18,32,0) 55%),url("/img/sign-in-coast.webp") 50% 62%/cover no-repeat,var(--night)}
header.site::after{content:"Illustration, AI-generated by Julian Mullins";position:absolute;top:16px;right:16px;font-size:12px;line-height:1.3;color:#FFFFFF;opacity:.85;max-width:20rem;text-align:right}
/* the band's mark, the card and the footer share one column, so their left edges line up */
header.site .wrap{max-width:calc(34rem + 40px)}
header.site .lockup{color:#FFFFFF;font-size:20px}
/* the mark as dalaric.com draws it: three stepped bars, not two */
.tile{width:30px;height:30px;border-radius:7px;
  background:linear-gradient(#fff,#fff) 6px 7px/8px 3.5px no-repeat,linear-gradient(#fff,#fff) 6px 13.25px/12.5px 3.5px no-repeat,linear-gradient(#fff,#fff) 6px 19.5px/18px 3.5px no-repeat,var(--brand)}
.tile::before,.tile::after{display:none}
body:not(.ui) main{padding:0 0 56px}
body:not(.ui) main > .wrap > .prose{position:relative;margin:-76px auto 0;max-width:34rem;background:#FFFFFF;border-radius:16px;
  padding:36px 40px 32px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 40px rgba(11,18,32,.10)}
body:not(.ui) h1{font-size:30px;letter-spacing:-0.025em;font-weight:650}
body:not(.ui) .sub{font-size:18px;line-height:1.55;max-width:none}
body:not(.ui) .btn{border-radius:10px;transition:background-color .12s}
body:not(.ui) .btn:hover{background:#07456F}
body:not(.ui) .btn.sec:hover{background:#E3EEF8}
body:not(.ui) .field input,body:not(.ui) .field textarea,body:not(.ui) .field select{border-radius:10px;border-color:#B8C4D3;padding:13px 14px}
body:not(.ui) .field input:focus{border-color:var(--brand);outline:3px solid #E3EEF8;outline-offset:0}
body:not(.ui) .err,body:not(.ui) .att,body:not(.ui) .okbox,body:not(.ui) .wash{border-radius:10px}
body:not(.ui) hr.rule{margin:28px 0 20px}
footer.site{background:transparent;border-top:0;padding:8px 0 40px;font-size:15px}
footer.site .wrap{max-width:calc(34rem + 40px);margin:0 auto}
@media(max-width:600px){
  header.site{padding:16px 0 120px;background-position:0 0,86% 62%,0 0}
  header.site::after{top:12px;right:12px;font-size:11px;max-width:9rem}
  body:not(.ui) main > .wrap > .prose{margin:-64px auto 0;padding:26px 20px 22px;border-radius:14px}
  body:not(.ui) h1{font-size:26px}
}
@media print{
  header.site{background:#fff;padding:0 0 12pt}
  header.site::after{display:none}
  header.site .lockup{color:#000}
  body:not(.ui) main > .wrap > .prose{margin:0;padding:0;box-shadow:none}
  .ui-pages{background:#fff;margin:0}
}

/* .btn sets display, which would otherwise show a button the passkeys script has not revealed.
   Last, so nothing above can show what a page has hidden. */
[hidden]{display:none !important}