/* Wallby site styles. Brand colors come from aso-tokens.css and are never
   written literally here. The visual language is the thing the app makes:
   rounded widget tiles, tall wallpaper swatches, an iPhone-sized rhythm. */

:root{
  color-scheme: light;
  --paper:   #FBFAFD;
  --surface: #FFFFFF;
  --ink:     #1C1A25;
  --muted:   #514C66;
  --line:    #E5E1F0;
  --line-2:  #F0EDF8;
  --radius:  22px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}

h1,h2,h3,h4{line-height:1.2;letter-spacing:-.021em;margin:0 0 .5em;overflow-wrap:break-word}
h1{font-size:clamp(2rem,6vw,3.05rem);font-weight:800;letter-spacing:-.031em}
h2{font-size:clamp(1.45rem,3.6vw,2.05rem);font-weight:750;margin-top:0}
h3{font-size:1.16rem;font-weight:700}
h4{font-size:1rem;font-weight:700}
p{margin:0 0 1em;overflow-wrap:break-word}

a{color:var(--brand-ink);text-underline-offset:2px}
a:hover{text-decoration:none}

.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.prose{max-width:40rem}
.prose li{margin:.3em 0}

/* ---------- header ---------- */

.top{border-bottom:1px solid var(--line);background:var(--surface)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:60px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-decoration:none;font-size:1.05rem}
.mark img{width:26px;height:26px;border-radius:7px;display:block}
.top nav{display:flex;gap:16px;flex-wrap:wrap;font-size:.92rem;margin-left:auto}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--brand-ink)}

/* ---------- sections ---------- */

section{padding:52px 0}
section.tight{padding:34px 0}
.alt{background:var(--surface);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.lede{font-size:1.14rem;color:var(--muted);max-width:38rem}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-ink);margin:0 0 .6em}

/* ---------- hero ---------- */

.hero{padding:44px 0 8px}
.hero-grid{display:grid;gap:34px;align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:44px}}
.hero-shot{margin:0;justify-self:center;max-width:260px}
.hero-shot img{border-radius:26px;box-shadow:0 18px 44px rgba(28,26,37,.14);display:block}

.badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:22px 0 10px}
.aso-badge img{display:block}
.fineprint{font-size:.88rem;color:var(--muted);margin:.4em 0 0}
.fineprint strong{color:var(--ink)}

/* ---------- widget tiles ---------- */

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tile{
  aspect-ratio:1/1;border-radius:var(--radius);padding:14px;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;box-shadow:0 6px 18px rgba(28,26,37,.09);
}
.tile .t-top{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.78}
.tile .t-big{font-size:1.72rem;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.tile .t-sub{font-size:.78rem;opacity:.82;line-height:1.35}
.tile.serif .t-big{font-family:Georgia,"Times New Roman",serif;font-weight:700}
.tile.mono .t-big,.tile.mono .t-top{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tile.wide{aspect-ratio:2/1}

.t-cream{background:linear-gradient(135deg,#FBF3E7,#F3E1CE);color:#4A3B2E}
.t-midnight{background:linear-gradient(#1B1A2E,#302B63);color:#F2F1FB}
.t-sage{background:linear-gradient(#DDE7D5,#B7CBA9);color:#33402B}
.t-mono{background:#111113;color:#FAFAFA}
.t-blush{background:linear-gradient(135deg,#FDE7EE,#F7C6D9);color:#6E2740}
.t-ocean{background:linear-gradient(#0F2A47,#2E6C8E);color:#EAF4FA}
.t-aurora{background:conic-gradient(from 200deg,#5F2C82,#49A09D,#5F2C82);color:#FFF}
/* Aurora and Grape Soda run white text over a light end of their gradient. The
   app does the same; on a swatch the shadow keeps the sample legible. */
.t-aurora span,.t-grape span{text-shadow:0 1px 3px rgba(0,0,0,.45)}
.t-sunset{background:linear-gradient(135deg,#FF8177,#B12A5B);color:#FFF4F0}
.t-gold{background:linear-gradient(#0B0B0D,#2A2416);color:#E9C978}
.t-cotton{background:radial-gradient(circle at 50% 40%,#FDEFF9,#C1D9F0);color:#3B4A63}
.t-matcha{background:linear-gradient(135deg,#4E6C50,#7DA37F);color:#F3F7EF}
.t-grape{background:linear-gradient(#7028E4,#E5B2CA);color:#FFF}

.tile-name{font-size:.85rem;color:var(--muted);margin:.5em 0 0;text-align:center}

/* ---------- wallpaper swatches ---------- */

.walls{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.wall{aspect-ratio:9/19.5;border-radius:18px;box-shadow:0 6px 18px rgba(28,26,37,.1)}
.w-peach{background:linear-gradient(#FFDEE9,#B5FFFC)}
.w-dusk{background:linear-gradient(135deg,#2B5876,#4E4376)}
.w-mint{background:linear-gradient(#D4FC79,#96E6A1)}
.w-plum{background:radial-gradient(circle at 50% 45%,#B993D6,#2B1055)}
.w-ink{background:linear-gradient(#141414,#2A2A2E)}
.w-paper{background:linear-gradient(#F7F3EC,#E7DFD2)}
.w-dotted{background:radial-gradient(#2E3440 1.6px,transparent 1.7px) 0 0/16px 16px,#101216}
.w-borealis{background:radial-gradient(circle at 25% 20%,#5F2C82,transparent 60%),radial-gradient(circle at 80% 35%,#49A09D,transparent 58%),radial-gradient(circle at 40% 85%,#A8C0FF,transparent 62%),#3F2B96}
.w-nebula{background:radial-gradient(circle at 70% 25%,#B24592,transparent 60%),radial-gradient(circle at 25% 70%,#302B63,transparent 62%),#0F0C29}
.w-coral{background:radial-gradient(circle at 30% 25%,#FF9A9E,transparent 60%),radial-gradient(circle at 75% 70%,#A18CD1,transparent 60%),#FBC2EB}
.w-silk{background:linear-gradient(160deg,#1A2980,#26D0CE)}
.w-stripes{background:repeating-linear-gradient(35deg,#F7971E 0 14px,#FFD200 14px 28px)}
.w-blueprint{background:repeating-linear-gradient(#1E3A64 0 1px,transparent 1px 20px),repeating-linear-gradient(90deg,#1E3A64 0 1px,transparent 1px 20px),#0B1E3B}

/* ---------- generic blocks ---------- */

.cols{display:grid;gap:26px}
@media (min-width:760px){.cols.two{grid-template-columns:1fr 1fr}.cols.three{grid-template-columns:repeat(3,1fr)}}
.block h3{margin-bottom:.35em}
.block p{color:var(--muted);margin:0}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.panel h3{margin-top:0}
.panel p:last-child,.panel ul:last-child{margin-bottom:0}

.note{border-left:3px solid var(--brand-ink);padding:2px 0 2px 16px;color:var(--muted);margin:20px 0}
.note strong{color:var(--ink)}

ol.steps{counter-reset:s;list-style:none;margin:0 0 1em;padding:0;max-width:38rem}
ol.steps li{counter-increment:s;position:relative;padding:0 0 0 42px;margin:0 0 14px;min-height:28px}
ol.steps li::before{
  content:counter(s);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);font-size:.86rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

ul.checks{list-style:none;margin:0 0 1em;padding:0}
ul.checks li{position:relative;padding-left:26px;margin:0 0 10px}
ul.checks li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--brand)}

.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1em;padding:0;list-style:none}
.pills li{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 13px;font-size:.87rem;color:var(--muted)}

/* ---------- screenshot strip ---------- */

.shots{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:16px;overflow-x:auto;padding:4px 0 12px;margin:0;list-style:none;scrollbar-width:thin}
.shots figure{margin:0}
.shots img{border-radius:22px;box-shadow:0 10px 26px rgba(28,26,37,.12);display:block;width:100%}
.shots figcaption{font-size:.86rem;color:var(--muted);margin-top:10px}

/* ---------- comparison table ---------- */

.tablewrap{overflow-x:auto;margin:0 0 1.4em}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
tbody th{font-weight:600}

/* ---------- faq ---------- */

.faq{max-width:44rem;margin:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-weight:650;font-size:1.03rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.3rem;font-weight:400;color:var(--brand-ink)}
.faq details[open] summary::after{content:"\2212"}
.faq details > div{padding:0 0 18px;color:var(--muted);max-width:40rem}
.faq details > div p:last-child{margin-bottom:0}

/* ---------- closing cta ---------- */

.close-cta{text-align:center;padding:56px 0}
.close-cta h2{margin-bottom:.35em}
.close-cta p{color:var(--muted);max-width:34rem;margin-left:auto;margin-right:auto}
.close-cta .badge-row{justify-content:center}

/* ---------- footer ---------- */

footer.site{border-top:1px solid var(--line);background:var(--surface);padding:34px 0;font-size:.92rem;color:var(--muted)}
footer.site h2{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.9em}
footer.site ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
footer.site a{color:var(--muted)}
footer.site .legal{border-top:1px solid var(--line-2);padding-top:16px;margin-top:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}