/* Style My Page · Linja frame for the web. Strictly black and white (greys only for hairlines and secondary text). */
@font-face{font-family:'SMP Syne';src:url(/assets/fonts/Syne.woff2) format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'SMP DM Sans';src:url(/assets/fonts/DMSans.woff2) format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:'SMP Plex Mono';src:url(/assets/fonts/IBMPlexMono.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'SMP Plex Mono';src:url(/assets/fonts/IBMPlexMono-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
:root{--white:#FAFAFA;--paper:#FFF;--ink:#0E0E0E;--grey:#D9D9D9;--hair:#E6E6E6;--mid:#616161;
--frame:'SMP Syne',system-ui,sans-serif;--ui:'SMP DM Sans',system-ui,sans-serif;--mono:'SMP Plex Mono',ui-monospace,monospace;
--pad:clamp(20px,6.6vw,128px);--max:1664px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 18px/1.55 var(--ui);position:relative}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.gridlines{position:fixed;inset:0;pointer-events:none;z-index:0;max-width:var(--max);margin:0 auto;left:0;right:0;padding:0 var(--pad);
  background-clip:content-box;background-image:repeating-linear-gradient(90deg,#EFEFEF 0 1px,transparent 1px calc((100% - 1px)/12))}
main,header,footer{position:relative;z-index:1}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* header */
.top{position:sticky;top:0;background:rgba(250,250,250,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--grey);z-index:10}
.top__in{display:flex;justify-content:space-between;align-items:center;height:68px;gap:20px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.mark b{font:700 20px/1 var(--frame);letter-spacing:-.03em}
.mark__by{font:400 14px/1 var(--ui);color:var(--mid);margin-left:2px}
.tick{width:6px;height:22px;background:var(--ink);display:inline-block}
.nav{display:flex;gap:28px;align-items:center;font:500 15px/1 var(--ui)}
.nav a{text-decoration:none}.nav a:hover{text-decoration:underline}
.nav__cta{border:1px solid var(--ink);padding:10px 14px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.nav__cta:hover{background:var(--ink);color:var(--white);text-decoration:none!important}

/* hero */
.hero{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;padding-top:clamp(48px,8vw,112px);padding-bottom:clamp(48px,8vw,112px);position:relative}
.hero__txt{grid-column:1/7;display:flex;flex-direction:column;gap:26px}
.hero__fig{grid-column:7/13;margin:0}
.hero__fig img{border:1px solid var(--grey);background:var(--paper)}
.kicker{font:500 14px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
h1{font:700 clamp(44px,6vw,96px)/.95 var(--frame);letter-spacing:-.045em}
.lead{font-size:clamp(19px,1.6vw,23px);line-height:1.5;max-width:40ch}
.fine{font-size:14px;color:var(--mid);line-height:1.5}
.corner{position:absolute;width:20px;height:20px;border:0 solid var(--ink)}
.c-tl{top:24px;left:calc(var(--pad) - 28px);border-width:2px 0 0 2px}.c-tr{top:24px;right:calc(var(--pad) - 28px);border-width:2px 2px 0 0}
.c-bl{bottom:24px;left:calc(var(--pad) - 28px);border-width:0 0 2px 2px}.c-br{bottom:24px;right:calc(var(--pad) - 28px);border-width:0 2px 2px 0}
.cap{font:400 13px/1.4 var(--mono);color:var(--mid);margin-top:12px;letter-spacing:.02em}
.cap span{color:var(--ink);font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-right:8px}

/* inputs */
.quick{display:flex;border:1px solid var(--ink);background:var(--paper);max-width:620px}
.quick input{flex:1;min-width:0;border:0;background:transparent;font:400 18px/1 var(--ui);padding:0 18px;height:60px;color:var(--ink)}
.quick input:focus{outline:none}.quick:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.btn{appearance:none;border:0;background:var(--ink);color:var(--white);font:500 16px/1 var(--ui);padding:0 24px;height:60px;cursor:pointer;white-space:nowrap}
.btn:hover{background:#333}.btn--lg{height:64px;width:100%;font-size:17px}
.btn[disabled]{opacity:.6;cursor:progress}

/* band */
.band{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--grey)}
.band div{padding:26px 24px 26px 0;display:flex;flex-direction:column;gap:6px}
.band div+div{padding-left:24px;border-left:1px solid var(--grey)}
.band b{font:700 40px/1 var(--frame);letter-spacing:-.04em}
.band span{font-size:15px;color:var(--mid)}

/* sections */
.sec{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(24px,3vw,40px)}
.sec__h{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;border-top:1px solid var(--ink);padding-top:18px;margin-bottom:44px;row-gap:14px}
.num{grid-column:1/3;font:700 30px/1 var(--frame);letter-spacing:-.03em}
.sec__h h2{grid-column:3/13;font:700 clamp(32px,4vw,60px)/1 var(--frame);letter-spacing:-.04em}
.sec__lead{grid-column:3/10;font-size:20px;color:var(--ink);max-width:56ch}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps li{border-top:1px solid var(--grey);padding-top:18px;display:flex;flex-direction:column;gap:12px}
.steps h3,.notes h3{font:700 23px/1.15 var(--frame);letter-spacing:-.025em}
.steps p:not(.mono),.notes p{color:#2b2b2b;font-size:17px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.notes>div{border-top:1px solid var(--grey);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.label{color:var(--mid);margin-bottom:14px}.label--next{margin-top:40px}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.rows li{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--grey);font-size:17px}
.rows li span:first-child{font-weight:600}
.rows li span:last-child{color:#3a3a3a}
.labels{margin-top:28px;display:flex;flex-direction:column;gap:12px;font-size:16px}
.tag{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--ink);margin-right:10px;min-width:118px;text-align:center}
.tag--dash{border-style:dashed}

/* gallery */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}
.gallery figure,.sheet{margin:0}
.gallery img{border:1px solid var(--grey)}
.sheet{margin-top:48px}
.sheet img{border:1px solid var(--ink)}

/* order */
.order__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
.form{grid-column:1/8;display:flex;flex-direction:column;gap:22px}
.price{grid-column:9/13;border:1px solid var(--ink);background:var(--paper);padding:28px;display:flex;flex-direction:column;gap:10px;position:sticky;top:96px}
.price__n{font:700 72px/1 var(--frame);letter-spacing:-.05em}
.ticks{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--grey);display:flex;flex-direction:column;gap:8px;font-size:16px}
.ticks li::before{content:'';display:inline-block;width:10px;height:2px;background:var(--ink);vertical-align:middle;margin-right:12px}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.more summary{font-weight:600;font-size:16px}
.opt{font-weight:400;color:var(--mid);font-size:14px;margin-left:6px}
input[type=text],input[type=email],select,textarea{font:400 17px/1.4 var(--ui);color:var(--ink);background:var(--paper);border:1px solid #8a8a8a;border-radius:0;padding:14px 16px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
textarea{resize:vertical;min-height:88px}
.more{border-top:1px solid var(--grey);border-bottom:1px solid var(--grey);padding:16px 0}
.more summary{cursor:pointer;list-style:none}.more summary::-webkit-details-marker{display:none}
.more summary::before{content:'+';font-family:var(--mono);display:inline-block;width:22px}
.more[open] summary::before{content:'−'}
.more .field{margin-top:18px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:#0E0E0E;flex:none}
.err{font-size:14px;font-weight:600;min-height:0}.err:empty{display:none}
.err::before{content:'! ';font-family:var(--mono)}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.result{font-size:16px;border-left:2px solid var(--ink);padding-left:14px}.result:empty{display:none}

/* faq */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--grey);padding:20px 0}
.faq summary{cursor:pointer;font:700 21px/1.25 var(--frame);letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq p{margin-top:12px;max-width:70ch;color:#2b2b2b}

/* footer */
.foot{margin-top:clamp(64px,8vw,120px);border-top:1px solid var(--ink);background:var(--ink);color:var(--white)}
.foot__in{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:36px;padding-bottom:36px;flex-wrap:wrap;font-size:14px;color:rgba(250,250,250,.7)}
.foot .mark b{color:var(--white)}.foot .tick{background:var(--white)}.foot .mark__by{color:rgba(250,250,250,.65)}

/* simple pages */
.page{max-width:820px;padding-top:72px;padding-bottom:40px}
.page h1{font-size:clamp(36px,5vw,64px);margin-bottom:24px}
.page p{margin-bottom:16px}
.page dl{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--ink);margin:24px 0}
.page dt,.page dd{margin:0;padding:12px 0;border-bottom:1px solid var(--grey)}
.page dt{font:500 13px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}

@media (max-width:1000px){
  .hero__txt,.hero__fig{grid-column:1/13}.hero{row-gap:40px}
  .steps,.g3{grid-template-columns:1fr}.g2,.gallery{grid-template-columns:1fr}
  .band{grid-template-columns:1fr 1fr}.band div:nth-child(3){padding-left:0;border-left:0}.band div:nth-child(n+3){border-top:1px solid var(--grey)}
  .form,.price{grid-column:1/13}.price{position:static;margin-top:40px}
  .num{grid-column:1/13}.sec__h h2,.sec__lead{grid-column:1/13}
  .nav a:not(.nav__cta){display:none}
}
@media (max-width:560px){
  .quick{flex-direction:column}.quick .btn{width:100%}
  .mark b{font-size:17px}.mark__by{font-size:12px}.hide-s{display:none}.nav__cta{padding:9px 10px}.corner{display:none}
  .rows li{grid-template-columns:1fr;gap:4px}
  .band b{font-size:32px}
}

/* waitlist */
.form.is-done .field,.form.is-done .fine,.form.is-done button,.quick.is-done{display:none}
.form.is-done .result,.result--quick{font-weight:600}
.result--quick{margin-top:14px}