/* If Possible 4.0: additions to the homepage design system (if4.css).
   Video moment, quote moment, and the working newsletter form. Tokens come from if4.css. */

/* ---- Video moment: a framed vertical clip beside the line it proves ---- */
.hp .vmom{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,5cqw,72px);align-items:center;margin-top:clamp(48px,7cqw,96px)}
.hp .vmom.flip{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.hp .vmom.flip .vmom-frame{order:2}
.hp .vmom.wide{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.hp .vmom-frame{position:relative;background:var(--plate,#fff);padding:10px;box-shadow:0 2px 6px rgba(16,34,52,.08),0 22px 48px -18px rgba(16,34,52,.28);transform:rotate(-1.2deg)}
.hp .vmom.flip .vmom-frame{transform:rotate(1.2deg)}
.hp .vmom.wide .vmom-frame{transform:none}
.hp .vmom-box{position:relative;aspect-ratio:9/16;background:#10283c;overflow:hidden}
.hp .vmom.wide .vmom-box{aspect-ratio:16/9}
.hp .vmom-box img,.hp .vmom-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hp .vmom-play{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:pointer}
.hp .vmom-play::after{content:"";position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--btn);box-shadow:0 10px 30px rgba(16,34,52,.35);transition:transform .25s ease}
.hp .vmom-play::before{content:"";position:absolute;left:50%;top:50%;z-index:1;margin:-11px 0 0 -6px;border-left:19px solid #143651;border-top:11px solid transparent;border-bottom:11px solid transparent}
.hp .vmom-play:hover::after,.hp .vmom-play:focus-visible::after{transform:scale(1.06)}
.hp .vmom-play:focus-visible{outline:3px solid var(--acc,#367949);outline-offset:4px}
.hp .vmom-txt{display:flex;flex-direction:column;gap:16px;min-width:0}
.hp .vmom-line{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(24px,3.1cqw,38px);line-height:1.18;margin:0;text-wrap:balance}
.hp .vmom-who{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
@container (max-width:860px){
  .hp .vmom,.hp .vmom.flip,.hp .vmom.wide{grid-template-columns:minmax(0,1fr)}
  .hp .vmom.flip .vmom-frame{order:0}
  .hp .vmom-frame{max-width:300px;margin-inline:auto;width:100%}
  .hp .vmom.wide .vmom-frame{max-width:none}
}

/* ---- Quote moment: one real voice, set as a pull quote ---- */
.hp .qmom{margin:clamp(40px,6cqw,80px) auto 0;max-width:860px;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center}
.hp .qmom.left{text-align:left;align-items:flex-start;margin-left:0}
.hp .qmom blockquote{margin:0;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(24px,3.3cqw,40px);line-height:1.2;text-wrap:balance}
.hp .qmom blockquote::before{content:"\201C";display:block;font-family:var(--f-serif);font-size:1.9em;line-height:.6;margin-bottom:.12em;color:var(--acc,#367949)}
.hp .sg-dark .qmom blockquote::before{color:var(--accD,#95cea6)}
.hp .qmom .qhl2{background:linear-gradient(transparent 58%,rgba(245,236,138,.75) 58%);padding:0 .08em}
.hp .sg-dark .qmom .qhl2{background:linear-gradient(transparent 58%,rgba(245,236,138,.32) 58%)}
.hp .qmom figcaption{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.78;line-height:1.5}
.hp .qmom figcaption b{font-weight:700;opacity:1}

/* ---- Newsletter form (footer), wired to the same GHL webhook as before ---- */
.hp .nl{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.hp .nl input[type=text],.hp .nl input[type=email]{width:100%;font:inherit;font-size:15px;color:inherit;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:var(--rad,6px);padding:13px 14px}
.hp .nl input::placeholder{color:currentColor;opacity:.55}
.hp .nl input:focus-visible{outline:2px solid var(--accD,#95cea6);outline-offset:1px;border-color:transparent}
.hp .nl button{border:0;cursor:pointer;justify-content:center;font-family:inherit}
.hp .nl #if-form-message{margin:0;font-size:14px;min-height:1em}
.hp .row2 a.wc{color:inherit;text-decoration:none}
.hp .row2 a.wc:hover{text-decoration:underline}
.hp .vm-after{padding-bottom:120px}
.hp .vm-after .vmom{margin-top:0}
.hp .nl button,.hp .nl input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--btn);color:var(--btnInk);font-weight:650;font-size:15px;padding:13px 20px;border-radius:var(--rad,6px);letter-spacing:.005em}
.hp .nl p,.hp .nl .form-msg,.hp .nl [role=status]{margin:0;font-size:14px}

/* ---- Tablet widths: use the phone menu until the full nav fits on one line ---- */
@container (min-width:701px) and (max-width:980px){
  .hp .nav{display:none}
  .hp .hdr .menu{display:block}
  .hp .hdr.mopen .mnav{display:flex}
  .hp .mnav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:16px;background:#fff;color:var(--ink);padding:18px var(--mx) 24px;box-shadow:0 24px 50px rgba(16,34,52,.2);z-index:40}
  .hp .mnav .mg{display:flex;flex-direction:column}
  .hp .mnav .mg .wc{margin-bottom:6px;color:var(--acc)}
  .hp .mnav .mg a{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-top:1px solid var(--line);color:inherit}
  .hp .mnav b{font-stretch:var(--fs);font-weight:var(--fw2,800);text-transform:uppercase;font-size:18px;line-height:1.05}
  .hp .mnav span{font-family:var(--f-mono);font-size:11.5px;color:var(--ink2)}
  .hp .mnav .mf span{color:var(--ink);font-family:inherit;font-weight:650;font-size:13px}
  .hp .mnav>.btn{align-self:flex-start}
  .hp .ann .dt{display:none}
}
.hp .nav>a,.hp .nav .ddw>.dd,.hp .ann b,.hp .ann .go{white-space:nowrap}
.hp .ddp a,.hp .ddp i,.hp .ddp span{white-space:normal}
.hp .ddl{flex:1;min-width:0}

/* ---- Headlines scale with the page so long words never outgrow their column ---- */
.hp .h1{font-size:clamp(40px,6.4cqw,80px)}
.hp .h2{font-size:clamp(30px,4.1cqw,50px)}
.hp .hd{overflow-wrap:anywhere}

/* ---- Tablet widths: stack the two-column blocks (doubled .hp so page styles can't undo it) ---- */
@container (min-width:701px) and (max-width:980px){
  .hp.hp .hero,.hp.hp .prob-top,.hp.hp .meth,.hp.hp .about,.hp.hp .closer,
  .hp.hp .cx-split,.hp.hp .cx-two,.hp.hp .cx-kinds,.hp.hp .cx-cap,.hp.hp .cx-wk,.hp.hp .cx-wk-b,.hp.hp .cx.in,
  .hp.hp .ifs-split,.hp.hp .ifs-gap,.hp.hp .ifs-sessions,.hp.hp .ifs-faqwrap,
  .hp.hp .ab-hero-grid,.hp.hp .ab-founder{grid-template-columns:minmax(0,1fr)}
  .hp.hp .cards,.hp.hp .cx-three,.hp.hp .cx-four,.hp.hp .cx-arc,.hp.hp .cx-bonus,.hp.hp .ifs-steps,.hp.hp .ifs-proc,.hp.hp .ab-pp,.hp.hp .ab-comps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp.hp .cx-week{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hp.hp .cards .card.feat,.hp.hp .cx-bonus>.lead-b{grid-column:1/-1}
  .hp.hp .hero .fig{min-height:0;max-width:520px;margin-inline:auto;width:100%}
  .hp.hp .ab-photos{position:static}
  .hp.hp .cx-row{grid-template-columns:120px minmax(0,1fr)}
  .hp.hp .h2{font-size:clamp(30px,5.4cqw,50px)}
  .hp.hp .ab-copy .h1,.hp.hp .cx-closer .h1,.hp.hp .cx-date .h1{font-size:clamp(40px,7cqw,64px)}
  .hp.hp .cx-ph-t{font-size:34px}
}

/* ---- Footer: sub-labels sit back so the link names lead ---- */
.hp .ftr .links a small{font-family:var(--f-mono);font-stretch:100%;font-weight:400;font-size:11.5px;letter-spacing:.02em;text-transform:none;opacity:.55;margin-top:3px}

/* ---- Light on midnight: wide and feathered, never a tight band in the middle ---- */
.hp.dir-light [data-sec="closer"]::after,.hp.dir-light [data-sec="problem"] .col.new::after{
  inset:-8% -12%;
  background:
    linear-gradient(108deg,rgba(246,226,112,0) 6%,rgba(246,226,112,.035) 24%,rgba(246,226,112,.06) 42%,rgba(246,226,112,.045) 58%,rgba(246,226,112,.02) 76%,rgba(246,226,112,0) 94%),
    linear-gradient(98deg,rgba(246,226,112,0) 30%,rgba(246,226,112,.03) 55%,rgba(246,226,112,0) 85%);
  filter:blur(24px)}
.hp [data-sec="closer"]{overflow:hidden}

/* ---- Video lightbox ---- */
.vlb{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(11,31,48,.92);padding:calc(56px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.vlb[hidden]{display:none}
.vlb-stage{position:relative;width:min(420px,100%,calc((100vh - 120px) * 9 / 16))}
.vlb.wide .vlb-stage{width:min(1100px,100%,calc((100vh - 120px) * 16 / 9))}
.vlb-frame{background:#fff;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.vlb-frame video{display:block;width:100%;aspect-ratio:9/16;background:#10283c}
.vlb.wide .vlb-frame video{aspect-ratio:16/9}
.vlb-x{position:absolute;top:-46px;right:0;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;cursor:pointer}
.vlb-x::before,.vlb-x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:#fff;transform:translate(-50%,-50%) rotate(45deg)}
.vlb-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.vlb-x:focus-visible{outline:3px solid #95cea6;outline-offset:2px}
html.vlb-open{overflow:hidden}

/* ---- The one door (homepage hero door), sized the same wherever it appears ---- */
.hp .fig.door4{position:relative;height:auto;min-height:0;display:flex;align-items:center;justify-content:center}
.hp.hp .fig.door4>svg{position:static;transform:none;right:auto;top:auto;width:100%;max-width:560px;height:auto;overflow:visible}

/* ---- No italics outside quotes (Scott): emphasis stays upright in the page's own type ---- */
.hp.hp.hp.hp em,.hp.hp.hp em{font-style:normal;font-family:inherit;font-weight:inherit;text-transform:inherit;letter-spacing:inherit;font-size:inherit}
.hp.hp.hp .cx-pull,.hp.hp.hp .cx-kicker,.hp.hp.hp .cx-guide,.hp.hp.hp .cx-row.free .cx-after,.hp.hp.hp .viz__caption,
.hp.hp.hp .ab-close,.hp.hp.hp .ab-ppclose em,.hp.hp.hp .ab-pulls em,.hp.hp.hp .intel-title .the,
.hp.hp.hp .ifs-p.ifs-aside,.hp.hp.hp .ifs-layer .the,.hp.hp.hp .ifs-line em{font-style:normal;font-family:var(--f-sans)}
.hp.hp.hp .cx-pull,.hp.hp.hp .cx-kicker,.hp.hp.hp .cx-guide,.hp.hp.hp .ifs-p.ifs-aside,.hp.hp.hp .ab-close{font-weight:600;letter-spacing:-.005em}
/* quotes keep their italic voice */
.hp.hp.hp blockquote em,.hp.hp.hp .qmom em,.hp.hp.hp .qn em,.hp.hp.hp .ifs-qs em{font-style:italic}

/* ---- If Studio fit: "is" and "isn't" are the point ---- */
.hp.hp.hp .ifs-bm{font-size:24px;line-height:1.1;color:inherit;opacity:.8}
.hp.hp.hp .ifs-bm em{color:inherit}
.hp.hp.hp .ifs-flag{display:inline-block;font-family:var(--f-sans);font-stretch:88%;font-weight:850;text-transform:uppercase;font-size:64px;line-height:.95;letter-spacing:-.01em;text-decoration:none;color:inherit;margin-right:.08em;vertical-align:-.08em}
.hp.hp.hp .ifs-tail{display:block;margin-top:6px}
@container (max-width:700px){.hp.hp.hp .ifs-flag{font-size:48px}}

/* ---- Header dropdowns never leave the window (placed by if4-site.js) ---- */
.hp .ddp{max-width:calc(100vw - 32px)}
.hp .ddp-work{width:min(740px,calc(100vw - 32px))}
.hp.hp .ddp.placed::before{left:var(--arrow)}

/* ---- 701 to 1140: the homepage's big headlines and stat numbers scale down instead of breaking words ---- */
@container (min-width:701px) and (max-width:1140px){
  .hp.hp.t-stack .h1{font-size:clamp(40px,7.6cqw,104px)}
  .hp.hp.t-stack .h2{font-size:clamp(30px,5.2cqw,70px)}
  .hp.hp .stats .num{font-size:clamp(38px,4.8cqw,64px)}
  .hp.hp .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hp.hp .stats>.tagline{grid-column:1/-1;padding-left:0;border-left:0;border-top:1px solid var(--line)}
}

/* Meet Colleen and Scott: the founder reels carousel (build.py reels(), if4-site.js) */
.hp .reels{margin-top:clamp(48px,7cqw,96px)}
.hp .reels-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.hp .reels-nav{display:flex;gap:10px}
.hp .reels-nav button{position:relative;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;cursor:pointer;opacity:.8;transition:opacity .2s ease,transform .2s ease}
.hp .reels-nav button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translate(-65%,-50%) rotate(45deg)}
.hp .reels-nav .reels-prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
.hp .reels-nav button:hover{opacity:1;transform:translateY(-1px)}
.hp .reels-nav button:disabled{opacity:.28;cursor:default;transform:none}
.hp .reels-nav button:focus-visible{outline:3px solid var(--acc,#367949);outline-offset:3px}
.hp .reels-track{position:relative;list-style:none;margin:0;padding:6px 2px 14px;display:flex;gap:clamp(14px,1.8cqw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.hp .reels-track::-webkit-scrollbar{display:none}
.hp .reel{flex:0 0 clamp(170px,18.4cqw,212px);scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;min-width:0}
.hp .reel-box{position:relative;aspect-ratio:9/16;background:#10283c;overflow:hidden;box-shadow:0 0 0 6px var(--plate,#fff),0 2px 6px 6px rgba(16,34,52,.06),0 22px 40px -16px rgba(16,34,52,.32);margin:6px 6px 12px}
.hp .reel-box img,.hp .reel-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#10283c}
.hp .reel-play{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:pointer}
.hp .reel-play::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--btn);box-shadow:0 10px 26px rgba(16,34,52,.35);transition:transform .25s ease}
.hp .reel-play::before{content:"";position:absolute;left:50%;top:50%;z-index:1;margin:-9px 0 0 -5px;border-left:16px solid #143651;border-top:9px solid transparent;border-bottom:9px solid transparent}
.hp .reel-play:hover::after,.hp .reel-play:focus-visible::after{transform:scale(1.07)}
.hp .reel-play:focus-visible{outline:3px solid var(--acc,#367949);outline-offset:-3px}
.hp .reel.on .reel-play{display:none}
.hp .reel-on{margin:0 6px;font-family:var(--f-sans);font-weight:750;font-size:17px;line-height:1.2;text-wrap:balance}
.hp .reel-on i{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--acc,#367949);margin-right:.1em}
.hp .sg-dark .reel-on i{color:var(--accD,#95cea6)}
.hp .reel-who{margin:0 6px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
@media (max-width:700px){
  .hp .reels-track{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .hp .reel{flex-basis:56vw}
}

/* Light never shows an edge (Scott, Oct 24): the highlighted word's glow is its own soft layer that
   fades to nothing past the word and swells as the headline scrolls in (--pg, set by if4-site.js) */
/* painted on each line of the phrase (box-decoration-break), so a highlight that wraps gets one soft glow per line;
   closest-side means it fades to zero at the box edge, never a hard edge (iPhone Safari broke the old ::before glow) */
.hp.em-band.hl-glow .pay{position:static;isolation:auto;padding:.26em .36em .32em;margin:0 -.36em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:radial-gradient(closest-side,rgba(246,226,112,.9) 0,rgba(246,226,112,.6) 34%,rgba(246,226,112,.26) 62%,rgba(246,226,112,.07) 84%,rgba(246,226,112,0) 100%) center/calc(100% - (.22 - .22 * var(--pg,1)) * var(--pgk,1) * 100%) calc(100% - (.22 - .22 * var(--pg,1)) * var(--pgk,1) * 100%) no-repeat}
.hp.em-band.hl-glow .pay::before{content:none}
.hp.em-band.hl-glow .sg-dark .pay::before{content:none}
.hp.em-band.hl-glow .sg-dark .pay{text-shadow:0 0 calc(.16em + .08em * var(--pg,1) * var(--pgk,1)) rgba(246,226,112,.95),0 0 calc(.45em + .35em * var(--pg,1) * var(--pgk,1)) rgba(246,226,112,calc(.38 + .3 * var(--pg,1)))}
/* the eyebrow dot: a soft halo, no ring, twinkling with the stars (--tw) */
.hp.dir-light .eb.ln::before{box-shadow:0 0 9px 3px rgba(246,226,112,.55),0 0 22px 7px rgba(246,226,112,.2);transform:scale(var(--tw,1))}
@media (prefers-reduced-motion:reduce){.hp.dir-light .eb.ln::before{transform:none}}

/* The intelligence layer (Scott, Oct 24): the venn tips forward in 3D and a glowing layer lifts off it */
.hp .venn,.hp .intel-grid{perspective:1500px}
.hp .venn3d{position:relative;transform-style:preserve-3d;transform-origin:50% 72%}
.hp .venn3d>svg{display:block}
.hp .venn3d .ilayer{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}

/* phones: the wide hero photo (Scott) is cropped tighter so his face reads (Scott, Oct 24) */
@media (max-width:700px){.hp .cx-hero-ph .wide{padding:0;border:12px solid var(--frame,#fff);overflow:hidden}.hp .cx-hero-ph .wide img{transform:scale(1.38);transform-origin:56% 8%}}
/* Homepage quotes trial (Scott, Oct 25): the standard midnight outline on every card, and the tint the words
   sit on 50 percent stronger (each card's own light color was about 25 percent of its tint over white; now 38) */
.hp .quotes.in .qn{box-shadow:inset 0 0 0 2px var(--dk,#10283c);background:color-mix(in srgb,var(--qt) 27%,#fff)}

/* Closed-offer note (Oct 26): a midnight strip at the top of pages for an offer that has closed */
.hp .closed-note{background:var(--dk,#10283c);color:#fff}
.hp .closed-note .in{display:flex;align-items:center;gap:12px;padding-block:14px}
.hp .closed-note p{margin:0;font-size:15.5px;line-height:1.45}
.hp .closed-note a{color:#fff;font-weight:650;text-decoration:underline;text-decoration-color:var(--accD,#95cea6);text-underline-offset:3px}
.hp .closed-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#f2cf3c;box-shadow:0 0 0 4px rgba(246,226,112,.22)}

/* Secondary boxes a smidge more present (Scott, Oct 26): the outlined cards beside a featured
   midnight card were a 1px #e8e6dc line, too light and too thin. Same look, firmer edge. */
.hp .spot .card:not(.feat){outline:1.5px solid rgba(29,74,110,.2);outline-offset:-1.5px}

/* Visually hidden, still read by search and screen readers (the link-in-bio page heading) */
.hp .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Footer: a Free resources column between the site links and the newsletter (Oct 31 SEO audit H1) */
.hp .ftr .row1:has(.links.res){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr)}
.hp .ftr .links.res{columns:1}
@container (max-width:1100px){.hp .ftr .row1:has(.links.res){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@container (max-width:700px){.hp .ftr .row1:has(.links.res){grid-template-columns:minmax(0,1fr)}}

/* Keep reading: three articles from The Art of the Possible at the end of key pages (build.py READS) */
.hp .cards.reads-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp .reads .card .ttl{font-size:23px;line-height:1.05}
.hp .reads .card .ttl a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em;text-decoration-color:var(--acc)}
.hp .reads .reads-all{margin-top:40px}
@container (max-width:700px){.hp .cards.reads-cards{grid-template-columns:minmax(0,1fr)}}

/* Images carry their real width and height (build.py img_sizes) so the page doesn't jump as they load.
   Zero specificity: any rule that sizes an image still wins; this only keeps the ratio where CSS sets a width alone. */
:where(#main img[width][height]){height:auto}
/* Skip link (Nov 1 accessibility): off screen until a keyboard user tabs to it */
.skip{position:absolute;left:12px;top:-80px;z-index:1000;padding:12px 18px;border-radius:6px;background:#10283c;color:#fff;font:600 15px/1.2 "Archivo","Helvetica Neue",Arial,sans-serif;text-decoration:none}
.skip:focus{top:12px;outline:3px solid #f6e270;outline-offset:2px}