/* Shared styles for the static pages generated by pages.mjs.
   Same visual system as src/Main.dc.html: Inter 100/300, flat panels,
   1px rules, square dots, chapter colours, no shadows. */
:root{--bg:#f6f8f7;--ink:#000000;--dark:#0f0e12;--graphite:#b2b2b2;--rule:#e5e5e5;--link:#0071bb;--accent:#0085bb;--muted:rgba(0,0,0,0.6);--c:#0085bb;--fg:#000000}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-weight:300;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible,main:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
main:focus{outline:none}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
h1,h2,h3{font-weight:300}
h1{font-size:40px;line-height:1.11;letter-spacing:-0.015em}
h2{font-size:26px;line-height:1.15;letter-spacing:-0.01em}
h3{font-size:19px;line-height:1.25}
.sq{display:inline-block;flex-shrink:0;width:8px;height:8px;background:var(--c)}
.sm{font-size:13px}
.muted{color:var(--muted)}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* skip link */
.skip{position:absolute;left:16px;top:-80px;z-index:20;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--ink);color:var(--bg);font-size:13px}
.skip:focus{top:11px;text-decoration:none}

/* shell */
.shell{width:100%;max-width:1200px;margin:0 auto;padding:0 66px}
.col{max-width:800px}

/* header */
.site-header{position:relative;background:var(--bg);border-bottom:1px solid var(--rule)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:66px}
.wordmark{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-size:24px;letter-spacing:-0.01em}
.wordmark:hover{text-decoration:none}
.wordmark .sq{background:var(--accent)}
#site-nav ul{list-style:none;padding:0;display:flex;align-items:center;gap:4px}
#site-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;color:var(--ink);font-size:13px}
#site-nav a .sq{width:6px;height:6px;opacity:0;transition:opacity .2s}
#site-nav a:hover{text-decoration:none}
#site-nav a:hover span+span,#site-nav a[aria-current] span+span{text-decoration:underline;text-underline-offset:4px}
#site-nav a:hover .sq,#site-nav a[aria-current] .sq{opacity:1}

/* mobile menu (< 860px). No JS: <details> opens an in-flow link list under the header.
   With src/site.js (html.js): full-screen dialog with focus trap, Esc/close and scroll lock. */
.mnav{display:none}
.mnav-btn,.mnav-close{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:0 14px;background:transparent;border:1px solid var(--ink);border-radius:0;color:var(--ink);font:inherit;font-size:13px;line-height:1;cursor:pointer}
.mnav-btn{list-style:none;-webkit-tap-highlight-color:transparent}
.mnav-btn::-webkit-details-marker{display:none}
.mnav-btn::marker{content:""}
.mnav-btn:hover,.mnav-close:hover{background:var(--rule)}
.mnav[open]>.mnav-btn{background:var(--ink);color:var(--bg)}
.mnav-panel{position:absolute;left:0;right:0;top:100%;z-index:30;max-height:calc(100vh - 66px);overflow-y:auto;background:var(--bg);color:var(--ink);border-top:1px solid var(--rule);border-bottom:1px solid var(--ink)}
.mnav-top{display:none}
html.js .mnav-panel{position:fixed;inset:0;top:0;max-height:none;height:100%;border:0;overscroll-behavior:contain}
html.js .mnav-top{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:66px;padding:0 16px;border-bottom:1px solid var(--rule)}
.mnav-title{display:inline-flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-0.01em}
.mnav-title .sq{background:var(--accent)}
.mnav-list ul{list-style:none;padding:0;margin:0}
.mg{border-bottom:1px solid var(--rule)}
.mt{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;color:var(--ink);font-size:19px;line-height:1.2}
.mt .sq{width:8px;height:8px;background:var(--c)}
.mc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 15px;padding:0 16px 10px 34px !important}
.mc a{display:flex;align-items:center;min-height:44px;color:var(--ink);font-size:15px;line-height:1.25}
.mnav-list .mt:hover,.mnav-list .mc a:hover{text-decoration:none}
.mnav-list .mt:hover span+span,.mnav-list .mc a:hover span,.mnav-list .mt[aria-current="page"] span+span,.mnav-list .mc a[aria-current="page"] span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.mnav-list .mt[aria-current="page"]::after,.mnav-list .mc a[aria-current="page"]::after{content:"\00a0· you are here";content:"\00a0· you are here" / "";font-size:13px;color:var(--muted)}
.mx{display:flex;flex-wrap:wrap;gap:0 22px;padding:10px 16px 33px !important}
.mx a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--link);font-size:13px}
html.mnav-lock{overflow:hidden}
html.mnav-lock body{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* breadcrumb */
.crumbs{padding:15px 0 0;font-size:13px}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"\203A";content:"\203A" / "";padding:0 8px;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--graphite);text-underline-offset:4px}
.crumbs a:hover{text-decoration-color:var(--ink)}
.crumbs [aria-current]{color:var(--muted)}

/* page head */
.page-head{padding:22px 0 44px;display:flex;flex-direction:column;gap:22px;max-width:760px}
.bar{height:2px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:470px}
.lede{font-size:19px;line-height:1.35}
.body{padding-bottom:88px;display:flex;flex-direction:column;gap:44px}

/* panels */
.panel{background:var(--bg);border:1px solid var(--rule);border-top:3px solid var(--c)}
.panel.white{background:#ffffff}
.p-head{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;padding:15px 22px;border-bottom:1px solid var(--rule);font-size:13px}
.p-head>span:first-child{display:inline-flex;align-items:center;gap:8px}
.p-head .sq{width:10px;height:10px}
.p-body{padding:33px 22px;display:flex;flex-direction:column;gap:22px}
.p-body h2{font-size:40px;line-height:1.11;letter-spacing:-0.015em}
.sub{display:flex;align-items:center;gap:8px;padding:12px 22px;border-top:1px solid var(--ink);font-size:13px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border-bottom:1px solid var(--rule)}
.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{background:var(--bg);padding:12px 15px 15px;display:flex;flex-direction:column;gap:2px;border-top:3px solid var(--c)}
.stat b{font-size:40px;font-weight:100;line-height:1.11}
.stat span{font-size:13px;line-height:1.5}
.panel .stats{border-bottom:0;border-top:1px solid var(--rule)}
.panel .stat{border-top:0;padding:15px 22px}
.panel .stat b{color:var(--sc,var(--c))}

/* buttons, chips */
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:var(--ink);color:var(--bg);font-size:13px}
.btn:hover{text-decoration:none;background:var(--dark)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--rule)}
.btn.fill{background:var(--c);color:var(--fg)}
.btn.fill:hover{background:var(--ink);color:var(--bg)}
.btn svg{flex-shrink:0}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{padding:5px 10px;border:1px solid var(--ink);font-size:13px}
.chips li.on{background:var(--ink);color:var(--bg)}
.chips.soft li{border-color:var(--graphite)}

/* entry (project / role) */
.entry{border:1px solid var(--rule);background:var(--bg)}
.entry-head{background:var(--c);color:var(--fg);padding:33px 22px;display:flex;flex-direction:column;gap:15px}
.entry-head .meta{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:13px}
.entry-head .lede{font-size:26px;line-height:1.15}
.entry-head .chips li{border-color:currentColor}
.entry-body{padding:33px 22px 44px;display:flex;flex-direction:column;gap:33px}
.entry-body>section{display:flex;flex-direction:column;gap:15px;border-top:1px solid var(--ink);padding-top:15px}
.kicker{display:flex;align-items:center;gap:8px;font-size:13px}
.logo-box{display:flex;align-items:center;gap:15px;padding:15px 22px;background:#ffffff;border:1px solid var(--rule)}
.logo-box img{height:32px;width:auto}
.logo-box img[src*="sendgrid"]{height:44px}
.bullets{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.bullets li{display:flex;gap:12px}
.bullets li::before{content:"";flex-shrink:0;width:6px;height:6px;margin-top:9px;background:var(--c)}
.items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px}
.item{background:#ffffff;outline:1px solid var(--rule);padding:15px;display:flex;flex-direction:column;gap:6px}
.item h2,.item h3{margin:0;font-size:15px;font-weight:300;line-height:1.35}
.item p{font-size:13px;white-space:pre-line}
.item .shot{margin:-15px -15px 8px;border-bottom:1px solid var(--rule);background:var(--dark)}
.shot{display:block}
.shot img{display:block;width:100%;height:auto}
.shot:hover{opacity:.92}
figure.fig{display:flex;flex-direction:column;gap:10px}
figure.fig figcaption{display:flex;align-items:center;gap:8px;font-size:13px}
pre{margin:0;padding:15px;background:var(--dark);color:var(--bg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;overflow-x:auto;white-space:pre}
pre:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vid{position:relative;display:block;border:1px solid var(--ink);background:var(--dark)}
.vid img{display:block;width:100%;height:auto}
.vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:72px;height:72px;background:var(--ink)}
.vid:hover .play{background:#ff5a1f}
.vid .yt{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;background:var(--ink);color:var(--bg);font-size:13px}
.faq details{border-top:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:44px;padding:10px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-size:19px;font-weight:100;transition:transform .25s}
.faq details[open] .pm{transform:rotate(45deg)}
.faq details p{margin:0 0 15px}
.scale-card{display:flex;flex-direction:column;gap:6px;padding:15px 22px;background:#ffffff;border:1px solid var(--rule);border-left:3px solid var(--c)}
.scale-card .top{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:19px}

/* prev / next */
.pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pn a{display:flex;flex-direction:column;gap:4px;min-height:88px;justify-content:center;padding:15px 22px;background:var(--c);color:var(--fg)}
.pn a:hover{text-decoration:none}
.pn a:hover b{text-decoration:underline}
.pn a.next{text-align:right;align-items:flex-end}
.pn b{font-size:26px;font-weight:300;line-height:1.15}
.pn span{font-size:13px}
.backs{display:flex;flex-wrap:wrap;gap:10px 22px}
.backs a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-size:13px;text-decoration:underline;text-decoration-color:var(--graphite);text-underline-offset:4px}
.backs a:hover{text-decoration-color:var(--ink)}

/* role list (experience index) */
.role{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto 16px;gap:15px;align-items:center;min-height:64px;padding:10px 22px;border-top:1px solid var(--rule);color:var(--ink);transition:background .2s}
.role:hover{background:#ffffff;text-decoration:none}
.role:hover .nm{text-decoration:underline}
.role .sq{width:12px;height:12px}
.role .tx{display:flex;flex-direction:column;gap:2px}
.role .nm{font-size:19px}
.role img{height:20px;width:auto;filter:grayscale(1) brightness(0);opacity:.7}
.role .arr{transition:transform .2s}
.role:hover .arr{transform:translateX(3px)}

/* project cards */
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.card{display:flex;flex-direction:column;height:100%;min-height:212px;background:#ffffff;border:1px solid var(--rule);color:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.1,1),border-color .2s}
.card:hover{text-decoration:none;transform:translateY(-4px);border-color:var(--ink)}
.card .cb{display:flex;flex-direction:column;justify-content:space-between;height:72px;padding:10px 12px;background:var(--c);color:var(--fg);font-size:13px;transition:height .35s cubic-bezier(.2,.7,.1,1)}
.card:hover .cb{height:96px}
.card .cb>span{display:flex;justify-content:space-between}
.card .cc{display:flex;flex-direction:column;gap:6px;padding:12px;flex-grow:1}
.card .nm{font-size:24px;line-height:1.15}
.card .ol{margin-top:auto;font-size:13px;color:var(--link)}
.card:hover .ol{text-decoration:underline}

/* dark panel (now strip) */
.dark{background:var(--dark);color:var(--bg);border:1px solid rgba(246,248,247,0.16)}
.dark .p-head{border-bottom-color:rgba(246,248,247,0.16);color:var(--graphite)}
.dark .blk{padding:33px 22px;display:flex;flex-direction:column;gap:18px}
.dark .blk+.blk{border-top:1px solid rgba(246,248,247,0.16)}
.dark .g{color:var(--graphite);font-size:13px}
.dark .g b{font-weight:300;color:var(--bg)}
.dark h2{font-size:40px;line-height:1.11;letter-spacing:-0.015em}
.dark a:focus-visible{outline-color:var(--bg)}
.dark button:focus-visible{outline-color:var(--bg)}
.btn.inv{background:var(--bg);color:var(--dark)}
.btn.inv:hover{background:var(--rule)}

/* gtm */
.principles li{display:grid;grid-template-columns:44px minmax(0,1fr);border-top:1px solid var(--rule)}
.principles{list-style:none;padding:0}
.principles .n{padding:12px 0 12px 22px;font-size:13px}
.principles .t{padding:12px 22px 12px 0;display:flex;flex-direction:column;gap:2px}
.principles h3{font-size:19px}
.tiles{display:grid;gap:1px;padding:1px 22px 22px}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{background:#ffffff;outline:1px solid var(--rule);border-top:3px solid var(--c);padding:12px;display:flex;flex-direction:column;gap:6px}
.tile.plain{border-top:0;padding:15px;gap:8px}
.tile h3{font-size:19px;line-height:1.15}
.tile p{font-size:13px}
.tile .sq{width:12px;height:12px}

/* logos strip */
.logos{list-style:none;padding:22px;display:flex;flex-wrap:wrap;align-items:center;gap:22px 44px;border-top:1px solid var(--rule)}
.logos img{display:block;height:28px;width:auto;filter:grayscale(1) brightness(0);opacity:.75}
.logos img[src*="sendgrid"]{height:40px}

/* testimonials */
.quotes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.quote{height:100%;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--rule);border-top:3px solid var(--c)}
.quote blockquote{padding:22px;font-size:19px;line-height:1.4;letter-spacing:-0.005em;flex:1 1 auto}
/* footer pinned to the bottom, tall enough for a 2-line role so rules align per row */
.quote figcaption{display:flex;align-items:center;gap:15px;margin-top:auto;min-height:106px;padding:15px 22px;border-top:1px solid var(--rule)}
.quote img{display:block;width:56px;height:56px;object-fit:cover;filter:grayscale(1)}
.quote .who{display:flex;flex-direction:column;gap:2px}
.quote .nm{font-size:19px}
.quote .rl{font-size:13px}

/* boarding pass */
.pass{display:grid;grid-template-columns:minmax(0,1fr) 190px;background:#ffffff;border:1px solid var(--ink);border-top:3px solid var(--accent);max-width:640px}
.pass .l{display:flex;flex-direction:column;border-right:1px dashed var(--graphite)}
.pass .ph{display:flex;justify-content:space-between;gap:15px;padding:15px 22px;border-bottom:1px solid var(--ink);font-size:13px}
.pass .ph>span:first-child{display:inline-flex;align-items:center;gap:8px}
.pass .route{display:grid;grid-template-columns:112px minmax(0,1fr);border-bottom:1px solid var(--rule)}
.pass .route img{display:block;width:112px;height:140px;object-fit:cover;border-right:1px solid var(--rule)}
.pass .fl{padding:15px 22px;display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.pass .code{font-size:40px;font-weight:100;line-height:1.11}
.pass .cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border-bottom:1px solid var(--rule)}
.pass .cells>div{background:#ffffff;padding:15px 22px}
.pass .cells dt{font-size:13px;color:var(--muted)}
.pass .cells dd{display:flex;align-items:center;gap:8px}
.pass .r{display:flex;flex-direction:column;justify-content:space-between;gap:15px;padding:15px;font-size:13px}
.pass .r .btns{flex-direction:column}
.pass .r .btn{justify-content:center}
.dot-live{display:block;width:7px;height:7px;background:#16a36a}

/* footer */
.site-footer{background:var(--dark);color:var(--bg);font-size:13px}
.site-footer a{color:var(--bg)}
.site-footer a:focus-visible{outline-color:var(--bg)}
.ft-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:33px;padding:44px 0 33px}
.ft-index h2{font-size:13px;line-height:1.5;color:var(--graphite);display:flex;align-items:center;gap:8px;padding-bottom:6px}
.ft-index ul{list-style:none;padding:0}
.ft-index a{display:inline-flex;align-items:center;min-height:44px}
.ft-base{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding:22px 0 33px;border-top:1px solid rgba(246,248,247,0.16)}
.ft-base .id{display:flex;align-items:center;gap:10px}
.ft-base .dots{display:grid;grid-template-columns:repeat(4,6px);gap:2px}
.ft-base .dots span{height:6px}
.ft-base .links{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.ft-base .links a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:860px){
.shell{padding:0 16px}
.hide-sm{display:none !important}
.wordmark{font-size:19px}
#site-nav{display:none}
.mnav{display:block}
h1{font-size:32px}
.p-body h2,.dark h2{font-size:32px}
.stats,.items,.quotes,.tiles.three,.pn{grid-template-columns:minmax(0,1fr)}
.stats.hero{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards,.tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.ft-index{grid-template-columns:minmax(0,1fr)}
.role{grid-template-columns:12px minmax(0,1fr) 16px}
.role .dt,.role img{display:none}
.pass{grid-template-columns:minmax(0,1fr)}
.pass .l{border-right:0;border-bottom:1px dashed var(--graphite)}
.pass .cells{grid-template-columns:minmax(0,1fr)}
.pn a.next{text-align:left;align-items:flex-start}
}
@media (max-width:520px){
.cards,.tiles.four{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:359px){
.mc{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
.card:hover{transform:none}
}
@media print{
.site-header,.site-footer,.skip,.crumbs,.mnav{display:none}
}

/* generated-page helpers */
.stack-y{display:flex;flex-direction:column;gap:15px}
.plain-list{list-style:none;padding:0}
.sc-list{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.sc-row{display:flex;flex-direction:column;gap:6px;padding:15px 22px;border-bottom:1px solid var(--rule)}
.sc-row:last-child{border-bottom:0}
.sc-row .top{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:19px}
.sc-row .top>span:first-child{display:inline-flex;align-items:center;gap:10px}
.sc-row a{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px}
.gsec{border-top:1px solid var(--ink)}
.gsec>.sub{border-top:0}
.pad{padding:0 22px 22px}
.pad-x{padding:7px 22px 22px}
h2.sub{font-size:13px;line-height:1.5;letter-spacing:0;font-weight:300}
figure.fig .shot{width:100%;margin:0 auto;border:1px solid var(--rule)}
h2.kicker{font-size:13px;line-height:1.5;letter-spacing:0}
.related{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:13px}
.related a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--graphite);text-underline-offset:4px}
.related a:hover{text-decoration-color:var(--ink)}
.closing{font-size:15px}
.quote .rl a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--graphite);text-underline-offset:3px}
.sc-more{padding:0 22px;border-top:1px solid var(--rule)}
a.stat{color:var(--ink)}
a.stat:hover{text-decoration:none}
a.stat:hover span{text-decoration:underline;text-underline-offset:3px}
.contact-intro .bullets a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
/* Inline text links: taller hit area on touch screens. Vertical padding on an inline box does not change line height, so nothing reflows. */
main :is(p,.rl,.bullets span) a:not([class]){padding-block:9px}
}