:root{
  --ground:#ffffff; --band:#faf6fb; --surface:#ffffff; --surface-2:#f5eef7;
  --rule:#ece4ef; --rule-strong:#ddd0e2;
  --ink:#14101a; --ink-2:#564a5f; --ink-3:#8a7d93;
  --brand:#7e2b85; --brand-deep:#4a154b; --brand-soft:#f7ecf8; --sky:#36c5f0; --signal:#2eb67d;
  --on-brand:#ffffff;
  --shadow-sm:0 1px 2px rgba(20,16,26,.05);
  --shadow:0 1px 2px rgba(20,16,26,.04), 0 14px 34px -18px rgba(20,16,26,.16);
  --shadow-brand:0 10px 28px -12px rgba(126,43,133,.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#100d15; --band:#161020; --surface:#191320; --surface-2:#221a2c;
    --rule:#2b2233; --rule-strong:#3b3046;
    --ink:#f5f0f8; --ink-2:#b6a9bf; --ink-3:#8b7d95;
    --brand:#c769c4; --brand-deep:#a34ba6; --brand-soft:#271a2c; --sky:#5fd2f5; --signal:#45c68f;
    --on-brand:#1a0f1c;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 16px 40px -20px rgba(0,0,0,.7);
    --shadow-brand:0 10px 28px -12px rgba(199,105,196,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#100d15; --band:#161020; --surface:#191320; --surface-2:#221a2c;
  --rule:#2b2233; --rule-strong:#3b3046;
  --ink:#f5f0f8; --ink-2:#b6a9bf; --ink-3:#8b7d95;
  --brand:#c769c4; --brand-deep:#a34ba6; --brand-soft:#271a2c; --sky:#5fd2f5; --signal:#45c68f;
  --on-brand:#1a0f1c;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 16px 40px -20px rgba(0,0,0,.7);
  --shadow-brand:0 10px 28px -12px rgba(199,105,196,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--ground); color:var(--ink-2);
  font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.shell{max-width:1440px; margin:0 auto; padding:0 16px}
@media(min-width:640px){.shell{padding:0 24px}}
@media(min-width:1024px){.shell{padding:0 32px}}
.measure{max-width:min(720px,62ch)}
h1,h2,h3,h4{font-family:Outfit,sans-serif; color:var(--ink); text-wrap:balance; margin:0}
h1{font-weight:800; letter-spacing:-.03em; line-height:1.02; font-size:clamp(2.5rem,6.2vw,4.5rem)}
h2{font-weight:800; letter-spacing:-.025em; line-height:1.1; font-size:clamp(1.75rem,3.6vw,2.65rem)}
h3{font-weight:700; letter-spacing:-.015em; font-size:1.2rem; line-height:1.3}
h4{font-weight:700; font-size:1rem}
p{margin:0}
a{color:var(--brand); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:8px}
.grad{background:linear-gradient(100deg,var(--brand) 0%,var(--sky) 52%,var(--signal) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow{font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand)}
.badge{display:inline-block; font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft); padding:6px 13px; border-radius:999px}
.url{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:.9em; font-weight:500;
  background:var(--surface-2); color:var(--ink); padding:5px 12px; border-radius:8px; display:inline-block;
  border:1px solid var(--rule)}
.url b{color:var(--brand); font-weight:500}

/* header */
header.site{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--rule)}
.bar{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; height:74px}
.logo{display:inline-flex; align-items:center; gap:10px; font-family:Outfit,sans-serif;
  font-weight:800; font-size:1.3rem; letter-spacing:-.02em; color:var(--ink);
  text-decoration:none; white-space:nowrap}
/* The mark is 144x107. Both dimensions are set from that ratio so it can never
   stretch, whatever the surrounding layout does. */
.logo img{width:38px; height:28.24px; display:block; flex:none}
/* The wordmark is one flex item, so the gap only ever falls between the mark
   and the word — never inside "GullyPage". */
.logo .wm{display:inline-block; white-space:nowrap}
/* The wordmark stays a single ink colour — the mark carries the brand colour,
   and a two-tone word beside a four-colour logo reads as noise. */
.logo .wm b{color:inherit; font-weight:800}
.site-footer .logo img{width:34px; height:25.28px}
nav.main{display:flex; gap:30px; justify-content:center}
nav.main a.on{color:var(--brand)}
nav.main a{position:relative}
nav.main a.on::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px;
  border-radius:2px; background:var(--brand)}
@media(max-width:1023px){
  .bar{grid-template-columns:auto auto; height:auto; padding:12px 0; row-gap:12px}
  nav.main{grid-column:1 / -1; grid-row:2; justify-content:flex-start; gap:20px;
    overflow-x:auto; padding-bottom:5px; scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{white-space:nowrap; font-size:14.5px}
  nav.main a.on::after{bottom:-3px}
  .bar .actions{justify-content:flex-end}
}
nav.main a{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:700}
nav.main a:hover{color:var(--brand)}
.bar .actions{display:flex; align-items:center; gap:12px; justify-content:flex-end}
.btn{display:inline-block; font-family:Outfit,sans-serif; font-weight:700; font-size:15px; text-decoration:none;
  padding:12px 22px; border-radius:12px; border:1px solid transparent; cursor:pointer; line-height:1.2}
.btn--primary{background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-brand)}
.btn--primary:hover{background:var(--brand-deep)}
.btn--ghost{color:var(--ink); border-color:var(--rule-strong); background:var(--surface)}
.btn--ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn--sm{padding:9px 16px; font-size:14px; border-radius:10px}
.link-a{color:var(--ink); font-weight:700; text-decoration:none; font-size:15px}
.link-a:hover{color:var(--brand)}

/* sections */
section{padding:72px 0}
@media(min-width:768px){section{padding:96px 0}}
.band{background:var(--band); border-block:1px solid var(--rule)}
.head{display:flex; flex-direction:column; gap:16px; margin-bottom:44px}
.head p{max-width:min(720px,62ch); font-size:1.05rem}

/* grids */
.grid{display:grid; gap:24px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr}
@media(min-width:700px){.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:26px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px}
.card p{font-size:15.5px; line-height:1.6}
.chip-icon{width:38px; height:38px; border-radius:10px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-family:Outfit,sans-serif; font-weight:800; font-size:15px; margin-bottom:4px}
.chip-icon svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* hero */
.hero{padding:64px 0 76px}
@media(min-width:768px){.hero{padding:92px 0 104px}}
.hero .badge{margin-bottom:26px}
.hero h1{margin-bottom:26px}
.hero .lede{font-size:1.2rem; max-width:min(680px,60ch); color:var(--ink-2)}
.hero .sub{margin-top:18px; max-width:min(660px,58ch)}
.hero .cta{display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 22px}
.hero .fine{font-size:14.5px; color:var(--ink-3); max-width:min(620px,56ch)}
.hero .urls{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:34px;
  padding-top:26px; border-top:1px solid var(--rule)}
.hero .urls .label{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}

/* lists */
ul.plain{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:15px}
ul.plain li{color:var(--ink-2)}
ul.plain li::before{content:"—"; color:var(--brand); margin-right:8px}
ul.pills{list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 0; padding:0}
ul.pills li{font-size:14.5px; font-weight:700; color:var(--ink); background:var(--surface);
  border:1px solid var(--rule); border-radius:999px; padding:7px 15px}
ul.ticks{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px}
@media(min-width:560px){ul.ticks{grid-template-columns:repeat(2,1fr)}}
ul.ticks li{position:relative; padding-left:26px; font-size:15.5px}
ul.ticks li::before{content:""; position:absolute; left:0; top:8px; width:9px; height:9px;
  border-radius:50%; background:var(--signal)}
.urlstack{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:14px}

/* steps */
ol.steps{list-style:none; margin:0; padding:0; display:grid; gap:24px; counter-reset:s}
@media(min-width:700px){ol.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){ol.steps{grid-template-columns:repeat(4,1fr)}}
ol.steps li{background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:26px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px; position:relative}
.step-n{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  font-family:Outfit,sans-serif; font-weight:800; font-size:15px;
  background:linear-gradient(135deg,var(--brand),var(--sky)); color:#fff; margin-bottom:4px}
ol.steps li p{font-size:15.5px}

/* comparison table */
.tw{overflow-x:auto; border:1px solid var(--rule); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm)}
table{border-collapse:collapse; width:100%; font-size:16px}
thead th{text-align:left; font-family:Lato,sans-serif; font-weight:700; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); padding:16px 20px; background:var(--surface-2);
  border-bottom:1px solid var(--rule-strong)}
thead th:last-child{color:var(--brand)}
tbody td{padding:15px 20px; border-bottom:1px solid var(--rule); vertical-align:top}
tbody td:last-child{color:var(--ink); font-weight:700}
tbody tr:last-child td{border-bottom:0}

/* faq */
.faq{display:grid; gap:12px; max-width:min(880px,100%)}
.faq details{background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:4px 22px;
  box-shadow:var(--shadow-sm)}
.faq summary{font-family:Outfit,sans-serif; font-weight:700; color:var(--ink); font-size:1.02rem;
  cursor:pointer; padding:18px 0; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--brand); font-size:1.4rem; font-weight:400; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 20px; font-size:16px; max-width:62ch}

/* final cta */
.final{background:linear-gradient(150deg,var(--brand-deep) 0%,var(--brand) 46%,#2a5f8f 100%); color:#fff;
  padding:88px 0}
.final h2{color:#fff; max-width:20ch}
.final p{color:rgba(255,255,255,.86)}
.final .closing{margin-top:34px; font-family:Outfit,sans-serif; font-weight:700; font-size:1.22rem;
  color:#fff; max-width:30ch; line-height:1.3}
.final .note{margin-top:18px; font-size:14.5px; color:rgba(255,255,255,.7)}

/* footer */
footer.site-footer{background:var(--band); border-top:1px solid var(--rule); padding:64px 0 40px}
.fgrid{display:grid; gap:36px; grid-template-columns:1fr}
@media(min-width:700px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.fgrid{grid-template-columns:2fr 1fr 1fr 1fr 1fr}}
.fbrand p{font-size:15px; margin-top:14px; max-width:42ch}
.fbrand .tagline{color:var(--brand); font-weight:700; margin-top:12px}
footer.site-footer h4{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  font-family:Lato,sans-serif; font-weight:700; margin-bottom:14px}
footer.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
footer.site-footer ul a{color:var(--ink-2); text-decoration:none; font-size:15px}
footer.site-footer ul a:hover{color:var(--brand)}
.fbase{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  margin-top:48px; padding-top:26px; border-top:1px solid var(--rule); font-size:14px; color:var(--ink-3)}

/* ---- document pages (legal) ---- */
.doc-hero{padding:56px 0 40px; border-bottom:1px solid var(--rule); background:var(--band)}
.doc-hero h1{font-size:clamp(2rem,4.6vw,3.1rem); margin:18px 0 16px}
.doc-hero .meta{display:flex; flex-wrap:wrap; gap:8px 26px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.doc-hero .meta b{color:var(--ink)}
.doc-wrap{display:block; padding:48px 0 88px}
@media(min-width:1024px){
  .doc-wrap{display:grid; grid-template-columns:236px minmax(0,1fr); gap:56px; align-items:start}
}
.doc-toc{position:sticky; top:96px; border-left:1px solid var(--rule); padding-left:18px; display:none}
@media(min-width:1024px){.doc-toc{display:block}}
.doc-toc a{display:block; padding:5px 0; font-size:13.5px; line-height:1.4; color:var(--ink-3);
  text-decoration:none; border-left:2px solid transparent; margin-left:-20px; padding-left:18px}
.doc-toc a:hover{color:var(--brand)}
.doc{min-width:0; max-width:min(760px,68ch)}
.doc h2{font-size:1.42rem; margin:44px 0 14px; scroll-margin-top:110px; padding-top:26px;
  border-top:1px solid var(--rule)}
.doc h2:first-of-type{margin-top:0; padding-top:0; border-top:0}
.doc h3{font-size:1.08rem; margin:26px 0 10px; scroll-margin-top:110px}
.doc p{margin:0 0 16px; font-size:16.5px}
.doc ul,.doc ol{margin:0 0 18px; padding-left:22px; display:flex; flex-direction:column; gap:8px; font-size:16.5px}
.doc li::marker{color:var(--brand)}
.doc strong{color:var(--ink)}
.doc a{color:var(--brand)}
.doc .callout{background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--brand);
  border-radius:0 16px 16px 0; padding:18px 22px; margin:24px 0; box-shadow:var(--shadow-sm); font-size:16px}
.doc .callout strong{display:block; margin-bottom:6px}
.doc .fill{background:var(--brand-soft); color:var(--brand); font-family:"IBM Plex Mono",monospace;
  font-size:.86em; padding:2px 7px; border-radius:6px; font-weight:500}
.doc .tw{margin:22px 0}
.doc table{font-size:15.5px}
.doc-nav{display:grid; gap:14px; margin-top:56px; padding-top:32px; border-top:1px solid var(--rule)}
@media(min-width:700px){.doc-nav{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.doc-nav a{display:block; background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:16px 18px; text-decoration:none; box-shadow:var(--shadow-sm)}
.doc-nav a span{display:block; font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}
.doc-nav a b{font-family:Outfit,sans-serif; font-size:15.5px; color:var(--ink)}
.doc-nav a:hover{border-color:var(--brand)}

/* ---- inner page heroes ---- */
.page-hero{padding:60px 0 52px; border-bottom:1px solid var(--rule)}
@media(min-width:768px){.page-hero{padding:84px 0 72px}}
.page-hero .badge{margin-bottom:24px}
.page-hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem); margin-bottom:24px}
.page-hero .lede{font-size:1.15rem; max-width:min(680px,60ch); color:var(--ink-2)}
.page-hero .sub{margin-top:16px; max-width:min(660px,58ch)}
.page-hero .cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}

/* ---- CTAs on the gradient band ---- */
.cta--onbrand{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.btn--onbrand{background:#fff; color:var(--brand-deep)}
.btn--onbrand:hover{background:rgba(255,255,255,.9)}
.btn--onbrand-ghost{color:#fff; border-color:rgba(255,255,255,.55); background:transparent}
.btn--onbrand-ghost:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.final .cta--onbrand a:focus-visible{outline-color:#fff}

/* ---- contact page ---- */
.contact-grid{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:800px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
.contact-card{background:var(--surface); border:1px solid var(--rule); border-radius:16px;
  padding:26px; box-shadow:var(--shadow-sm)}
.contact-card h3{margin-bottom:8px}
.contact-card p{font-size:15.5px; margin-bottom:12px}
.contact-card a.mail{font-family:"IBM Plex Mono",monospace; font-size:14.5px; font-weight:500;
  background:var(--brand-soft); color:var(--brand); padding:7px 13px; border-radius:8px;
  display:inline-block; text-decoration:none}
.contact-card a.mail:hover{background:var(--brand); color:var(--on-brand)}

/* ---- plan comparison ---- */
.plans{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:820px){.plans{grid-template-columns:repeat(2,1fr)}}
.plan{background:var(--surface); border:1px solid var(--rule); border-radius:20px; padding:32px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px}
.plan--pro{border-color:var(--brand); box-shadow:var(--shadow)}
.plan h3{font-size:1.5rem}
.plan .price{font-family:Outfit,sans-serif; font-weight:700; font-size:1.05rem; color:var(--brand)}
.plan .for{font-size:15px; color:var(--ink-2)}

/* ---- footer head-office block ---- */
@media(min-width:1060px){.fgrid{grid-template-columns:1.6fr .8fr .8fr 1fr .8fr 1.4fr}}
.foffice .fentity{font-family:Outfit,sans-serif; font-weight:700; color:var(--ink); font-size:15px; margin-bottom:8px}
.foffice .faddr{font-size:14px; line-height:1.6; margin-bottom:12px; max-width:34ch}
.foffice .fline{font-size:14px; margin-bottom:6px}
.foffice .fline span{color:var(--ink-3)}
.foffice a{color:var(--ink-2); text-decoration:none}
.foffice a:hover{color:var(--brand)}
.foffice .fmap{display:inline-block; margin-top:10px; font-weight:700; font-size:14px; color:var(--brand)}
.fbase .fmade{color:var(--ink-3)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---- contact page ---- */
.contact-split{display:grid; gap:40px; grid-template-columns:1fr; align-items:start}
@media(min-width:960px){.contact-split{grid-template-columns:1fr 1.05fr; gap:56px}}
.ways{display:grid; gap:16px}
.way{display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--rule);
  border-radius:16px; padding:20px 22px; box-shadow:var(--shadow-sm)}
.way .chip-icon{margin:0; flex:none}
.way h3{font-size:1.02rem; margin-bottom:4px}
.way p{font-size:14.5px; margin-bottom:8px; color:var(--ink-2)}
.way a{font-weight:700; font-size:15px; color:var(--brand); text-decoration:none; word-break:break-word}
.way a:hover{text-decoration:underline}
.form-card{background:var(--surface); border:1px solid var(--rule); border-radius:20px; padding:30px;
  box-shadow:var(--shadow)}
.form-card h2{font-size:1.5rem; margin-bottom:6px}
.form-card .hint{font-size:14.5px; color:var(--ink-3); margin-bottom:24px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field label{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.field label .req{color:var(--brand)}
.field input,.field textarea{font-family:Lato,sans-serif; font-size:16px; color:var(--ink);
  background:var(--surface-2); border:1px solid transparent; border-radius:8px; padding:12px 14px; width:100%}
.field textarea{min-height:140px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent); background:var(--surface)}
.form-card .privacy-note{font-size:13.5px; color:var(--ink-3); margin-top:14px}
.form-card button{width:100%}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* =========================================================================
   Product motifs. The subject of this site is an address that belongs to
   someone, so the browser bar and the page preview are the recurring devices
   rather than generic marketing furniture.
   ========================================================================= */

.hero-split{display:grid; gap:44px; grid-template-columns:1fr; align-items:center}
/* The split hero gives the headline a narrower column, so it needs its own
   ceiling — the full-width scale wraps to three ragged lines here. */
.hero-split h1{font-size:clamp(2.2rem,3.5vw,3.4rem)}
.hero-split .lede{font-size:1.1rem}
@media(min-width:1040px){.hero-split{grid-template-columns:1.05fr .95fr; gap:64px}}

/* --- the browser frame --- */
.frame{border:1px solid var(--rule); border-radius:24px; background:var(--surface);
  box-shadow:var(--shadow); overflow:hidden}
.frame__bar{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface-2);
  border-bottom:1px solid var(--rule)}
.frame__dots{display:flex; gap:6px; flex:none}
.frame__dots i{width:10px; height:10px; border-radius:50%; background:var(--rule-strong); display:block}
.frame__addr{flex:1; min-width:0; background:var(--surface); border:1px solid var(--rule); border-radius:8px;
  padding:6px 12px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.frame__addr b{color:var(--brand); font-weight:500}
.frame__lock{flex:none; color:var(--signal); font-size:12px}
.frame__body{padding:26px}

/* --- the profile preview inside the frame --- */
.pv__cover{height:84px; border-radius:14px; margin-bottom:-34px;
  background:linear-gradient(115deg,var(--brand) 0%,var(--sky) 58%,var(--signal) 100%)}
.pv__id{display:flex; align-items:flex-end; gap:14px; padding:0 4px}
.pv__avatar{width:68px; height:68px; border-radius:50%; flex:none; border:3px solid var(--surface);
  background:var(--surface-2); display:grid; place-items:center; font-family:Outfit,sans-serif;
  font-weight:800; font-size:24px; color:var(--brand)}
.pv__name{font-family:Outfit,sans-serif; font-weight:800; font-size:1.15rem; color:var(--ink); line-height:1.2}
.pv__head{font-size:13.5px; color:var(--ink-2); margin-top:2px}
.pv__pills{display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 20px}
.pv__pills span{font-size:11.5px; font-weight:700; color:var(--ink-2); background:var(--surface-2);
  border-radius:999px; padding:5px 11px}
.pv__brief{display:flex; gap:14px; align-items:flex-start; border-top:1px solid var(--rule); padding-top:18px}
.pv__thumb{width:82px; height:52px; border-radius:8px; flex:none;
  background:linear-gradient(140deg,var(--brand-deep),var(--brand) 55%,var(--sky))}
.pv__brief h4{font-family:Outfit,sans-serif; font-weight:700; font-size:14px; color:var(--ink); line-height:1.35}
.pv__brief p{font-size:12.5px; color:var(--ink-3); margin-top:5px}

/* --- rotating chip accents: the mark has four colours, so the chips do too --- */
.chip-icon{background:var(--brand-soft); color:var(--brand)}
.grid > .card:nth-child(4n+2) .chip-icon{background:color-mix(in srgb,var(--sky) 16%,transparent); color:#1b7fa3}
.grid > .card:nth-child(4n+3) .chip-icon{background:color-mix(in srgb,var(--signal) 16%,transparent); color:#1c7a53}
.grid > .card:nth-child(4n+4) .chip-icon{background:color-mix(in srgb,#e9b02b 20%,transparent); color:#96700e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .grid > .card:nth-child(4n+2) .chip-icon{color:#6ad2f2}
  :root:not([data-theme="light"]) .grid > .card:nth-child(4n+3) .chip-icon{color:#5fd39e}
  :root:not([data-theme="light"]) .grid > .card:nth-child(4n+4) .chip-icon{color:#e9b02b}}

/* --- fact strip: replaces cards that held one line of text --- */
.facts{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:620px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:14px;
  background:var(--surface); border:1px solid var(--rule)}
.fact i{width:8px; height:8px; border-radius:50%; background:var(--brand); flex:none; margin-top:9px}
.fact:nth-child(4n+2) i{background:var(--sky)}
.fact:nth-child(4n+3) i{background:var(--signal)}
.fact:nth-child(4n+4) i{background:#e9b02b}
.fact b{font-family:Outfit,sans-serif; font-weight:700; font-size:15.5px; color:var(--ink); line-height:1.4}

/* --- brief cards, styled as the product renders them --- */
.briefcard{background:var(--surface); border:1px solid var(--rule); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.briefcard__img{height:132px; position:relative; display:flex; align-items:flex-end; padding:18px 20px}
.briefcard__img span{font-family:Outfit,sans-serif; font-weight:700; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; opacity:.92}
.bc1{background:linear-gradient(135deg,#4a154b,#7e2b85 60%,#36c5f0)}
.bc2{background:linear-gradient(135deg,#0b4f6c,#36c5f0)}
.bc3{background:linear-gradient(135deg,#12503a,#2eb67d)}
.bc4{background:linear-gradient(135deg,#7a2e12,#e9b02b)}
.briefcard__body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.briefcard h3{font-size:1.08rem; line-height:1.32}
.briefcard p{font-size:15px; color:var(--ink-2)}
.briefcard__meta{margin-top:auto; padding-top:14px; border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--ink-3); display:flex; gap:10px; flex-wrap:wrap;
  font-variant-numeric:tabular-nums}

/* --- steps get a connecting rule: they are a real sequence --- */
@media(min-width:1100px){
  ol.steps{position:relative}
  ol.steps::before{content:""; position:absolute; left:8%; right:8%; top:52px; height:2px;
    background:linear-gradient(90deg,var(--brand),var(--sky) 55%,var(--signal)); opacity:.25}
  ol.steps li{position:relative}
}

/* --- comparison table: one column is the answer --- */
.tw--compare table tbody td:last-child{background:color-mix(in srgb,var(--brand) 4%,transparent)}
.tw--compare thead th:last-child{background:color-mix(in srgb,var(--brand) 10%,transparent); color:var(--brand)}
.tw--compare tbody td:first-child{color:var(--ink-3)}

/* --- address showcase --- */
.addrs{display:grid; gap:14px}
.addr{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--rule);
  border-radius:14px; padding:14px 18px}
.addr .who{width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:Outfit,sans-serif; font-weight:800; font-size:13px; color:#fff}
.addr:nth-child(1) .who{background:var(--brand)}
.addr:nth-child(2) .who{background:var(--sky)}
.addr:nth-child(3) .who{background:var(--signal)}
.addr code{font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--ink); overflow-wrap:anywhere}
.addr code b{color:var(--brand); font-weight:500}