/* myrekyolneyeti.com: a Fez zellij courtyard. Lime plaster above, a dado of hand-cut glazed tile, the shade of the arcade
   below; hard sun falls into the open court at -18deg. Devices: big-type-as-image (letters cut from one zellij raster,
   manganese grout edge) + glow-light (one slanted sun patch). UI: image-left-row, square buttons, square tags,
   plus-square markers, radius 4, hairline grout. Breakpoints: <768 mobile (Figma 360), 768-1199 tablet, >=1200 desktop (1368). */
:root{
  --plaster:#EFE6D6;--plaster2:#E3D5BD;--ink:#1E2320;--ink2:#4A4A3E;--shade:#173A33;--shade2:#102B26;--onShade:#EFE6D6;--onShade2:#B9CFC4;
  --green:#1E7A5A;--greenDk:#145E45;--cobalt:#1D4E9E;--honey:#D9A33A;--mang:#34281F;--terra:#B4552F;--white:#F7F3EA;--grout:#D9CFBB;--sun:#FFD98A;
  --disp:'Reem Kufi','Trebuchet MS',sans-serif;--text:'Markazi Text',Georgia,serif;
  --pad:16px;--body:17px;--zw:154px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--plaster);color:var(--ink);font:400 var(--body)/1.55 var(--text);overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--honey);outline-offset:2px}
[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--white);color:var(--ink);padding:10px 16px;border-radius:4px}
.skip:focus{top:12px}
.w{position:relative;z-index:1;width:min(100%,1368px);margin-inline:auto;padding-inline:var(--pad)}
.h2{font:700 32px/1.08 var(--disp);letter-spacing:-.01em}

/* ---------- world ---------- */
/* glow-light: the court's sun, one slanted patch (Figma -18deg = 18deg clockwise, pivot top-left) */
.sun{position:absolute;z-index:0;display:block;background:rgba(255,217,138,var(--sa,.5));transform:rotate(18deg);transform-origin:0 0;filter:blur(var(--sb,22px));box-shadow:0 0 60px rgba(255,217,138,.5);pointer-events:none}
/* big-type-as-image: the element paints the manganese grout edge, ::after lays the zellij raster inside the letters */
.zt{position:relative;display:inline-block;color:var(--ze,var(--mang));-webkit-text-stroke:var(--zs,3px) var(--ze,var(--mang));--zt:82px}
.zt::after{content:attr(data-t);position:absolute;inset:0;color:transparent;-webkit-text-stroke:0;background:url(../img/zellij-type.webp) 0 0/var(--zt) var(--zt) repeat;-webkit-background-clip:text;background-clip:text}
.ze,.dado,.rail,.band,.cp,.zs{background:url(../img/zellij.webp) 0 0/var(--zw) var(--zw) repeat}
.pq{flex:none;color:var(--green)}
.star{flex:none}

/* square tags, square buttons, links */
.tg{display:inline-block;padding:4px 9px;border:1px solid var(--grout);border-radius:4px;background:var(--plaster2);color:var(--ink);font:600 12px/1.55 var(--text);letter-spacing:.08em;text-transform:uppercase}
.tg.hn{background:var(--honey);border-color:var(--honey);color:var(--mang)}
.tg.dv{background:var(--shade2);border-color:var(--onShade2);color:var(--onShade)}
.tgs{display:flex;flex-wrap:wrap;gap:8px}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border:1px solid var(--greenDk);border-radius:4px;background:var(--green);color:var(--white);font:600 16px/1.55 var(--text);text-decoration:none;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.bt:hover{background:var(--greenDk)}
.bt.pl{background:var(--plaster2);border-color:var(--grout);color:var(--ink)}
.bt.pl:hover{background:#D9C8AC}
.ln{color:var(--greenDk);font:600 16px/1.55 var(--text);text-decoration:underline}
.ln:hover{text-decoration-thickness:2px}

/* a cover inlaid like a panel: white grout frame + manganese hairline */
.inl{display:block;flex:none;padding:5px;background:var(--white);border:1px solid rgba(52,40,31,.5);border-radius:4px;box-shadow:0 6px 14px rgba(52,40,31,.25)}
.inl img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px}

/* header line (navigation lives in the bottom dock) */
.top .w{display:flex;align-items:center;justify-content:space-between;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;font:700 18px/1.05 var(--disp);text-decoration:none}
.logo .star{width:24px;height:24px}
.chk{display:none;font-size:15px;color:var(--ink2)}

/* bottom dock: a short tile bar fixed to the bottom of the viewport */
.dock{position:fixed;left:50%;bottom:14px;z-index:60;transform:translateX(-50%)}
.dock ul{display:flex;gap:4px;padding:6px;background:var(--shade2);border:1px solid rgba(217,207,187,.35);border-radius:6px;box-shadow:0 12px 28px rgba(52,40,31,.35)}
.dock a{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:4px;color:var(--onShade);font:600 15px/1.55 var(--text);text-decoration:none;white-space:nowrap;transition:background-color .2s}
.dock a:hover{background:rgba(239,230,214,.12)}
.dock a[aria-current]{background:var(--honey);color:var(--mang)}

/* ---------- hero: the courtyard wall ---------- */
.hero{position:relative;overflow:hidden;padding-bottom:96px}
.hero .top{position:relative;z-index:2}
.arc{position:absolute;left:-260px;top:-300px;width:420px;height:2000px;background:rgba(195,200,178,.5);transform:rotate(18deg);transform-origin:0 0;pointer-events:none}
.hs{left:170px;top:380px;width:240px;height:520px;--sb:1.5px;box-shadow:0 0 60px rgba(255,217,138,.5)}
.ht{z-index:2;padding-top:18px}
.hero h1{max-width:1000px;font:700 50px/1 var(--disp);letter-spacing:-.015em;color:var(--mang)}
.hero h1 br{display:none}
.sub{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:18px}
.sub p{font-size:18px;line-height:1.4;color:var(--ink2);max-width:520px}
.plq{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;max-width:760px;background:var(--white);border:1px solid rgba(52,40,31,.35);border-radius:4px}
.plq div{padding:9px 12px}
.plq div:nth-child(odd){border-right:1px solid var(--grout)}
.plq div:nth-child(n+3){border-top:1px solid var(--grout)}
.plq dt{font:600 12px/1.55 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--greenDk)}
.plq dd{margin-top:4px;font:500 16px/1.55 var(--text)}
/* the dado: zellij band edge to edge, terracotta ledge on top, six covers inlaid as panels */
.band{position:relative;z-index:1;margin-top:136px;height:354px;border-top:14px solid var(--terra)}
.jar{position:absolute;right:31px;bottom:calc(100% - 3px);width:73px;height:auto;filter:drop-shadow(-16px 3px 2px rgba(52,40,31,.32));will-change:transform}
.cells{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 14px;width:min(100%,1368px);margin-inline:auto;padding:22px var(--pad) 0}
.cells a{display:block;text-decoration:none;color:var(--ink)}
.cells .inl{padding:4px;box-shadow:none}
.cells .lb{display:block;padding:4px 5px;background:var(--plaster);border:1px solid rgba(52,40,31,.35);border-radius:2px;font:600 12px/1.2 var(--text);text-align:center}
.cells a:hover .lb{background:var(--honey)}

/* ---------- G: numbered rows on the shaded side of the court ---------- */
.sec{position:relative;overflow:hidden;padding:56px 0}
.gs{background:var(--shade);color:var(--onShade)}
.gsun{left:10px;top:-100px;width:120px;height:600px;--sa:.12;--sb:2px}
.gh{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.gh p{color:var(--onShade2)}
.row{position:relative;padding:18px 12px;border-bottom:1px solid rgba(217,207,187,.3);transition:background-color .3s,box-shadow .3s}
.row:first-child{border-top:1px solid rgba(217,207,187,.3)}
.row{display:grid;grid-template-columns:40px 160px 1fr;align-items:center;gap:14px}
.row .rt,.row .rb{grid-column:1/-1}
.num{display:flex;justify-content:center}
.num .zt{font:700 60px/1 var(--disp);letter-spacing:-.01em;--ze:var(--onShade);--zs:3px;--zt:51px}
.row .inl{width:160px}
.rt{display:grid;gap:10px}
.rt h3{font:700 24px/1.12 var(--disp)}
.rt h3 a{text-decoration:none}
.st::after{content:"";position:absolute;inset:0;z-index:1}
.rt .ol{color:var(--onShade2)}
.rb{justify-self:start}
/* the sun reaches a row: first one by default, the hovered one while the pointer is in the list */
.row:first-child,.row:hover,.row:focus-within{background:rgba(255,217,138,.16);box-shadow:0 0 40px rgba(255,217,138,.25)}
.row:first-child .rb,.row:hover .rb,.row:focus-within .rb{background:var(--honey);border-color:var(--honey);color:var(--mang)}
.rows:hover .row:first-child:not(:hover):not(:focus-within){background:transparent;box-shadow:none}
.rows:hover .row:first-child:not(:hover):not(:focus-within) .rb{background:var(--green);border-color:var(--greenDk);color:var(--white)}

/* ---------- M: method plates on the sunlit plaster ---------- */
.ms .sun{right:-260px;top:-80px;width:260px;height:320px;--sb:40px}
.ze{position:absolute;left:0;top:0;bottom:0;width:10px;z-index:1}
.ms .h2{max-width:760px}
.ld{color:var(--ink2)}
.ms .ld{margin-top:28px}
.steps{display:grid;gap:12px;margin-top:28px}
.steps li{display:grid;gap:12px;align-content:start;padding:18px 16px;background:var(--white);border:1px solid var(--grout);border-radius:4px}
.steps h3{display:flex;align-items:center;gap:10px;font:600 19px/1.15 var(--disp)}
.steps p{font-size:16px;color:var(--ink2)}
.mlk{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:28px}

/* ---------- footer ---------- */
.foot{position:relative;overflow:hidden;background:var(--shade);color:var(--onShade);padding:44px 0 88px}
.ft{display:flex;flex-direction:column;gap:28px}
.fa{display:grid;gap:14px;justify-items:start}
.fa .logo{font-size:20px}
.fa .star{width:26px;height:26px}
.fa p{color:var(--onShade2)}
.em{color:var(--sun);font-weight:600}
.fcs{display:flex;flex-wrap:wrap;gap:20px 24px}
.fcs>div{width:150px}
.fcs h2{margin-bottom:8px;font:600 12px/1.55 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--onShade2)}
.fcs ul{display:grid;gap:8px}
.fcs a,.fcs span,.fcs button{font-size:17px;color:var(--onShade);text-decoration:none}
.fcs a:hover,.fcs button:hover{text-decoration:underline}
.fcs button{padding:0;border:0;background:none;cursor:pointer;text-align:left}
.fl{display:flex;flex-direction:column;gap:8px;margin-top:28px;font-size:15px;color:var(--onShade2)}
.wm{margin-top:28px;padding-bottom:8px;text-align:center;line-height:0}
.wm .zt{font:700 32px/.96 var(--disp);letter-spacing:-.02em;--ze:var(--shade2);--zs:3px;--zt:61px}

/* ---------- inner page head: plaster, sun, tile title, terracotta ledge + zellij dado ---------- */
.ph,.gt{position:relative;overflow:hidden}
.ph>.sun{right:-120px;top:-200px;width:240px;height:420px}
.ph>.w{display:grid;gap:14px;justify-items:start;padding-top:20px;padding-bottom:32px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font:500 15px/1.55 var(--text);color:var(--greenDk)}
.crumbs li{display:flex;gap:6px}
.crumbs li+li::before{content:"›"}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.ph h1{max-width:1000px;font:700 42px/1 var(--disp);letter-spacing:-.01em;--zs:3px;--zt:82px}
.lg h1{font-size:40px}
.ph .ld{font-size:17px;line-height:1.45;max-width:680px}
.dado{position:relative;z-index:1;display:block;height:44px;border-top:12px solid var(--terra)}

/* games: index with a preview that follows the pointer */
.idx{background:var(--shade);color:var(--onShade)}
.ixl{flex:1;min-width:0}
.ix{position:relative;display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(217,207,187,.3);transition:background-color .3s}
.ix:first-child{border-top:1px solid rgba(217,207,187,.3)}
.ix .inl{width:112px;padding:4px}
.it{display:grid;gap:8px;flex:1;min-width:0}
.it h2{font:700 20px/1.12 var(--disp)}
.it h2 a{text-decoration:none}
.ix .dv,.ix .ctl,.ix>.pq,.pv{display:none}
.ctl{font-size:16px;color:var(--onShade2)}
.ix.on{background:rgba(255,217,138,.16)}
.ix>.pq{width:22px;height:22px}
.ix.on>.pq{color:var(--honey)}

/* game page */
.gt>.sun{left:40px;top:120px;width:260px;height:420px;--sa:.55}
.gw{display:flex;flex-direction:column;gap:20px;padding:12px 0 28px}
.cp{display:flex;align-items:center;justify-content:center;width:100%;height:240px;border-radius:4px;overflow:hidden}
.cp .inl{width:288px;box-shadow:0 10px 24px rgba(52,40,31,.35)}
.gx{display:grid;gap:12px;justify-items:start;min-width:0}
.gx h1{font:700 34px/1.04 var(--disp);letter-spacing:-.01em}
.gx .sm{font-size:17px;line-height:1.45;color:var(--ink2)}
.gx .mt{font:500 15px/1.55 var(--text);color:var(--ink2)}
.fx,.keys,.pv dl{justify-self:stretch}
.fx{padding:4px 16px;background:var(--white);border:1px solid var(--grout);border-radius:4px}
.fx div,.pv dl div{display:flex;gap:16px;padding:8px 0;font-size:15px}
.fx div+div,.pv dl div+div{border-top:1px solid var(--grout)}
.fx dt,.pv dt{flex:none;width:96px;font-weight:600;color:var(--greenDk)}
.edge{display:block;height:12px;background:var(--terra)}
.gb{padding:24px 0 48px}
.gb>.sun{right:-60px;top:1400px;width:200px;height:360px;--sa:.4}
.tabs{display:flex;gap:4px;padding:4px;margin-bottom:24px;background:var(--plaster2);border:1px solid var(--grout);border-radius:4px}
.tabs button{flex:1;padding:10px;border:0;border-radius:4px;background:none;font:600 14px/1.55 var(--text);color:var(--ink);cursor:pointer;transition:background-color .2s}
.tabs button:hover{background:rgba(30,122,90,.12)}
.tabs button[aria-selected=true]{background:var(--green);color:var(--white)}
.cols{display:flex;flex-direction:column;gap:32px}
.main{min-width:0}
.pan{display:grid;gap:14px}
.pan+.pan{margin-top:28px}
.pan h2{display:flex;align-items:center;gap:10px;font:700 24px/1.12 var(--disp)}
.pan h2:not(:first-child){margin-top:14px}
.pan h2 b{font-weight:700}
.pan:focus-visible{outline-offset:6px}
.keys{padding:4px 16px;background:var(--white);border:1px solid var(--grout);border-radius:4px}
.keys div{display:flex;align-items:center;gap:16px;padding:10px 0}
.keys div+div{border-top:1px solid var(--grout)}
.keys dd{font-size:17px}
.tips{display:grid;gap:14px}
.tips li{display:flex;gap:12px}
.tips i{flex:none;width:8px;height:8px;margin-top:.55em;background:var(--honey);transform:rotate(45deg)}
.qa{display:grid;gap:14px}
.qa h4,.qa h3{font:700 18px/1.55 var(--text)}
.qa .a{color:var(--ink2)}
.side{display:grid;gap:24px;align-content:start}
.wh{position:relative;overflow:hidden;display:grid;gap:12px;justify-items:start;padding:24px 22px;background:var(--shade);border-radius:4px;color:var(--onShade)}
.wh .sun{left:160px;top:-120px;width:220px;height:300px;--sa:.14}
.wh>:not(.sun){position:relative}
.wh h2,.nx h2{font:700 24px/1.05 var(--disp)}
.wh p{font-size:16px;color:var(--onShade2)}
.wh .ln{color:var(--sun);text-decoration:underline}
.nx{display:grid;gap:12px}
.nx a{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--grout);text-decoration:none}
.nx .inl{width:96px;padding:3px}
.nx a>span{display:grid;gap:4px;align-content:start}
.nx b{font:700 18px/1.3 var(--text)}
.nx a:hover b{text-decoration:underline}
.nx a>span span{font-size:15px;color:var(--ink2)}

/* about */
.ab .sun{left:-40px;top:300px;width:200px;height:300px;--sa:.35}
.ag{display:grid;gap:28px}
.ag section{display:grid;gap:12px;align-content:start}
.ag h2{display:flex;align-items:center;gap:10px;font:700 24px/1.12 var(--disp)}
.kc{background:var(--shade);color:var(--onShade)}
.ksun{right:-160px;top:-200px;width:140px;height:500px;--sa:.14;--sb:2px}
.kc .ld{margin-top:28px;color:var(--onShade2)}
.rs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.kt{max-width:680px;margin-top:28px;padding:4px 18px;background:var(--shade2);border:1px solid rgba(185,207,196,.4);border-radius:4px}
.kt div{display:flex;gap:16px;padding:12px 0}
.kt div+div{border-top:1px solid rgba(185,207,196,.3)}
.kt dt{flex:none;width:110px;font:600 16px/1.55 var(--text);color:var(--sun)}
.kt dd{font-size:17px}

/* legal */
.lb{display:flex;gap:72px}
.rail{display:none;flex:none;width:36px;height:400px;border-radius:4px;--zw:205px}
.lc{display:grid;gap:10px;max-width:760px;min-width:0}
.sum{margin-bottom:12px;padding:18px 20px;background:var(--white);border:1px solid var(--grout);border-radius:4px;font-size:17px;line-height:1.45}
.lc h2{display:flex;align-items:center;gap:10px;margin-top:12px;font:700 21px/1.15 var(--disp)}
.lc p{font-size:16px}

/* cookie: a glazed tile plaque with a zellij strip */
.cookie{position:fixed;left:15px;right:15px;bottom:12px;z-index:80;max-width:500px;max-height:calc(100vh - 24px);overflow:auto;background:var(--white);border:1px solid rgba(52,40,31,.4);border-radius:4px;box-shadow:0 12px 28px rgba(52,40,31,.25)}
.zs{display:block;height:22px}
.ck{display:grid;gap:12px;padding:20px 20px 28px}
.ck-t{display:flex;align-items:center;gap:10px}
.cookie h2{font:700 24px/1.05 var(--disp)}
.cookie p{color:var(--ink2)}
.ck .ln{justify-self:start}
.ck-acts{display:flex;gap:10px;margin-top:6px}
.ck-acts .bt{flex:1}
.ck-manage{display:grid;gap:8px;padding:10px 0;border-block:1px solid var(--grout)}
.ck-manage label{display:flex;align-items:center;gap:10px}
.ck-manage input{width:18px;height:18px;accent-color:var(--green)}
.ck-manage .bt{justify-self:start}

/* ---------- tablet ---------- */
@media (min-width:768px){
  :root{--pad:40px;--zw:256px}
  .top .w{padding-block:22px}
  .logo{font-size:22px}
  .logo .star{width:30px;height:30px}
  .chk{display:block}
  .dock{bottom:20px}
  .dock a{padding:10px 22px;font-size:17px}
  .bt{padding:15px 24px;font-size:18px}
  .ln{font-size:18px}
  .arc{left:calc(-520 / 1368 * 100%);width:1100px}
  .hs{left:calc(760 / 1368 * 100%);top:-220px;width:520px;height:1100px;--sb:2.5px;box-shadow:0 0 120px rgba(255,217,138,.5)}
  .hero h1{font-size:clamp(64px,7.6vw,104px)}
  .hero h1 br{display:inline}
  .sub{flex-direction:row;align-items:center;gap:32px;margin-top:26px}
  .sub p{font-size:22px}
  .plq{display:flex;margin-top:26px}
  .plq div{flex:1;padding:12px 18px;border-top:0!important;border-right:1px solid var(--grout)}
  .plq div:last-child{border-right:0}
  .plq dd{font-size:18px}
  .band{margin-top:35px;height:314px}
  .jar{right:calc(118 / 1368 * 100%);bottom:calc(100% - 9px);width:clamp(150px,16.2vw,222px);filter:drop-shadow(-38px 6px 2px rgba(52,40,31,.32))}
  .cells{grid-template-columns:repeat(6,1fr);gap:1.4vw;padding-top:44px}
  .cells .inl{padding:6px}
  .cells .lb{padding:6px 8px;font-size:14px}
  .hero{padding-bottom:100px}
  .sec{padding:96px 0}
  .h2{font-size:56px}
  body{--body:19px}
  .gsun{left:40px;top:-200px;width:260px;height:900px}
  .gh{flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:36px}
  .gh p{max-width:420px}
  .row{display:flex;flex-direction:row;align-items:center;gap:28px;padding:24px}
  .num{width:64px;flex:none}
  .num .zt{font-size:96px;--zt:82px}
  .row .inl{width:202px}
  .rt{flex:1;margin-left:4px}
  .rt h3{font-size:32px}
  .rt .ol{max-width:560px}
  .rb{flex:none;align-self:center;margin-right:0}
  .ms .sun{right:0;top:-200px;width:520px;height:640px}
  .ze{width:28px}
  .ms .ld{margin-top:40px}
  .steps{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
  .steps li{padding:24px 22px}
  .steps h3{font-size:22px}
  .steps p{font-size:17px}
  .mlk{flex-direction:row;align-items:center;margin-top:40px}
  .foot{padding:72px 0 104px}
  .ft{flex-direction:row;gap:64px}
  .fa{flex:0 0 min(420px,40%)}
  .fcs{flex-wrap:nowrap;gap:56px}
  .fcs>div{width:auto}
  .fl{flex-direction:row;justify-content:space-between;margin-top:40px}
  .wm{margin-top:40px}
  .wm .zt{font-size:clamp(48px,8vw,110px);--zs:5px;--zt:215px}
  .ph>.sun{right:auto;left:calc(100% - 560px);width:520px;height:760px;--sb:40px;box-shadow:0 0 120px rgba(255,217,138,.5)}
  .ph>.w{gap:20px;padding-top:40px;padding-bottom:56px}
  .ph h1{font-size:clamp(64px,7vw,96px);--zs:5px;--zt:164px}
  .lg h1{font-size:clamp(60px,6.4vw,88px)}
  .ph .ld{font-size:21px}
  .dado{height:68px}
  .ix{gap:24px;padding:18px 16px}
  .ix .inl{width:128px}
  .it h2{font-size:30px}
  .ix .dv,.ix .ctl{display:block}
  .ix .dv{display:inline-block}
  .ix>.pq{display:block}
  .gt>.sun{left:120px;top:-140px;width:520px;height:820px;--sb:40px;box-shadow:0 0 120px rgba(255,217,138,.5)}
  .cp{height:auto;aspect-ratio:560/440}
  .cp .inl{width:86%;padding:8px}
  .gx h1{font-size:clamp(44px,4.7vw,64px)}
  .gx .sm{font-size:21px}
  .fx dt,.pv dt{width:130px}
  .gb{padding:40px 0 80px}
  .gb>.sun{right:-60px;top:900px;width:420px;height:700px;--sb:40px}
  .tabs{display:inline-flex;margin-bottom:32px}
  .tabs button{flex:none;padding:12px 26px;font-size:17px}
  .pan{gap:14px}
  .pan+.pan{margin-top:40px}
  .pan h2{font-size:30px}
  .pan h2:not(:first-child){margin-top:26px}
  .qa h4,.qa h3{font-size:20px}
  .ab .sun{left:-80px;top:200px;width:420px;height:600px;--sb:40px}
  .ag{grid-template-columns:repeat(2,1fr);gap:48px 40px}
  .ag h2{font-size:30px}
  .ksun{right:auto;left:calc(100% - 420px);width:300px;height:900px}
  .kc .ld,.rs,.kt{margin-top:40px}
  .rail{display:block}
  .lc{gap:10px}
  .sum{margin-bottom:18px;font-size:20px}
  .lc h2{margin-top:18px;font-size:26px}
  .lc p{font-size:18px}
  .cookie{left:24px;right:auto;bottom:24px;width:500px}
  .ck{padding:20px 28px 22px}
}
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(4,1fr)}
  .ib{display:flex;align-items:flex-start;gap:48px}
  .pv{position:relative;overflow:hidden;display:grid;gap:18px;flex:0 0 min(520px,42%);padding:24px;background:var(--plaster);border:1px solid var(--grout);border-radius:4px;color:var(--ink);transition:transform .35s ease-out}
  .pv>.sun{left:160px;top:-120px;width:340px;height:520px;--sa:.45;--sb:40px}
  .pv>:not(.sun){position:relative}
  .pvl{font:600 12px/1.55 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--greenDk)}
  .pv-c{display:grid;gap:18px;justify-items:start}
  .pv-c .inl{width:100%;padding:6px}
  .pv h3{font:700 30px/1.12 var(--disp)}
  .pv-c>p{font-size:17px;color:var(--ink2)}
  .pv dl{display:block}
  .pv dt{width:90px}
  .gw{flex-direction:row;align-items:flex-start;gap:56px;padding:24px 0 48px}
  .cp{flex:0 0 min(560px,44%)}
  .gx{flex:1;gap:16px}
  .cols{flex-direction:row;gap:64px}
  .main{flex:0 0 min(760px,60%)}
  .side{flex:1}
}
@media (min-width:1200px){
  :root{--pad:72px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pv,.row,.ix,.bt,.dock a{transition:none}
}

/* social icons (footer) */
.soc{display:flex;gap:10px}
.sic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;transition:background .16s,color .16s,border-color .16s;border:1px solid rgba(239,230,214,.32);border-radius:50%;color:var(--onShade)}
.sic:hover{background:var(--onShade);border-color:var(--onShade);color:var(--shade)}
.sic .si{width:17px;height:17px}