/* Self-hosted (SIL Open Font License), latin subset, so the site makes no third-party requests. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Literata-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/SchibstedGrotesk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* tibah.co — the home of Tibah.
   Stone ground, ink type, and one red: the thread from the wordmark. It is the only thing every Tibah theme
   shares, so on this site it is the only colour, and it runs through the five themes the way it runs through
   the word. */

:root {
  --stone: #E7E8E3;
  --stone-deep: #D9DAD3;
  --card: #F6F6F3;
  --ink: #191B1D;
  --ink-2: #565A55;
  --ink-3: #8A8D87;
  --rule: rgba(25, 27, 29, 0.14);
  --thread: #B42E22;

  --serif: 'Literata', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stone: #16181A;
    --stone-deep: #1E2124;
    --card: #202326;
    --ink: #ECECE7;
    --ink-2: #A9ACA6;
    --ink-3: #777A75;
    --rule: rgba(236, 236, 231, 0.14);
    --thread: #D0463A;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--thread); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--thread); }
:focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ——— header ——— */
.site-head { padding: 22px 0; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { color: var(--ink); display: inline-block; line-height: 0; }
.wordmark svg { width: 104px; height: auto; }
.site-head nav { display: flex; gap: 26px; font-size: 15px; }
.site-head nav a { text-decoration: none; color: var(--ink-2); }
.site-head nav a:hover, .site-head nav a[aria-current] { color: var(--ink); }

.label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }

/* ——— hero ——— */
.hero { padding: clamp(40px, 9vw, 112px) 0 clamp(36px, 6vw, 72px); }
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(42px, 7.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 18px 0 0;
  max-width: 13ch;
}
.hero .lede { font-size: clamp(18px, 2vw, 21px); color: var(--ink-2); max-width: 36em; margin: 28px 0 0; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.button {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--ink); color: var(--stone); padding: 15px 22px; border-radius: 999px; font-weight: 600; font-size: 16px;
}
.button:hover { color: var(--stone); background: var(--thread); }
.hero .note { font-size: 15px; color: var(--ink-3); }

/* ——— the themes, with the thread through them ——— */
.looks { background: var(--stone-deep); padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 84px); overflow: hidden; }
.looks-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; }
.looks h2, .section h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 46px); line-height: 1.08;
  letter-spacing: -0.015em; margin: 10px 0 0; max-width: 16ch;
}
.looks-head p { color: var(--ink-2); max-width: 30em; margin: 0; font-size: 17px; }

.strip { position: relative; margin-top: clamp(36px, 5vw, 56px); }
.strip-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip-scroll::-webkit-scrollbar { display: none; }
.phones {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: clamp(16px, 2.4vw, 32px);
  max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter) 8px; min-width: 900px;
}
.phone { position: relative; margin: 0; }
.phone .screen {
  border-radius: 34px; overflow: hidden; background: #000; aspect-ratio: 603 / 1311;
  box-shadow: 0 0 0 7px #0E0F10, 0 0 0 8px rgba(255, 255, 255, 0.08), 0 28px 50px -18px rgba(0, 0, 0, 0.45);
}
.phone .screen img { width: 100%; height: 100%; object-fit: cover; }
.phone figcaption { margin-top: 26px; }
.phone figcaption strong { font-family: var(--serif); font-weight: 500; font-size: 22px; display: block; }
.phone figcaption span { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; display: block; margin-top: 4px; }
/* the thread passes over the odd phones and under the even ones */
.phone:nth-child(odd) { z-index: 1; }
.phone:nth-child(even) { z-index: 3; }
.thread { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.thread path { fill: var(--thread); }

/* ——— sections ——— */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section + .section { border-top: 1px solid var(--rule); }

.steps { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 18px; }
.steps li::before { content: counter(step); font-family: var(--serif); font-size: 44px; line-height: 1; display: block; margin-bottom: 14px; }
.steps h3, .details h3 { font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.steps p, .details p { margin: 0; color: var(--ink-2); font-size: 16.5px; }

.details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px clamp(24px, 4vw, 56px); margin-top: clamp(32px, 4vw, 48px); }
.details > div { border-top: 1px solid var(--rule); padding-top: 18px; }

.promise { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.promise ul { list-style: none; margin: 18px 0 0; padding: 0; }
.promise li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.promise li:first-child { border-top: 1px solid var(--rule); }
.promise p { color: var(--ink-2); }

.phone .tier { font-family: var(--mono); font-style: normal; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--thread); margin-left: 6px; vertical-align: 3px; }

/* ——— Tibah+ ——— */
.plus { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.plus h2 { max-width: 18ch; }
.plus-lede { color: var(--ink-2); max-width: 36em; }
.compare { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 16px; }
.compare th, .compare td { text-align: left; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare thead th { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.compare tbody th { font-weight: 500; }
.compare td { color: var(--ink-2); }
.compare td:last-child { color: var(--ink); }
.fine { font-size: 15px; color: var(--ink-3); margin-top: 18px; }
.prices { list-style: none; margin: 0; padding: 26px 28px; background: var(--card); border-radius: 18px; }
.prices li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.prices li:last-child { border-bottom: 0; }
.prices strong { font-family: var(--serif); font-weight: 500; font-size: 30px; display: block; }
.prices span { color: var(--ink-2); font-size: 15.5px; }
.prices .note { font-size: 14px; color: var(--ink-3); }
.badge { display: inline-block; line-height: 0; }

/* ——— sign-up ——— */
.signup p { color: var(--ink-2); max-width: 36em; }
.signup-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.signup-form input { flex: 1 1 260px; max-width: 380px; font: inherit; font-size: 16px; padding: 14px 18px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); }
.signup-form button { border: 0; cursor: pointer; font-family: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— press ——— */
.facts { margin: 18px 0 0; }
.facts > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.facts dd { margin: 0; color: var(--ink); }
.founder { margin: 18px 0 0; }
.founder img { border-radius: 14px; width: 100%; height: auto; }
.founder figcaption { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.files { list-style: none; padding: 0 !important; margin-top: 18px; }
.files li { padding: 10px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.files li:first-child a { font-weight: 600; }
@media (max-width: 520px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* ——— footer ——— */
.site-foot { border-top: 1px solid var(--rule); padding: 40px 0 56px; font-size: 15px; color: var(--ink-2); }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.site-foot nav { display: flex; gap: 24px; }
.site-foot .wordmark svg { width: 78px; }

/* ——— long-form pages ——— */
.doc { padding: clamp(40px, 7vw, 88px) 0 clamp(64px, 9vw, 120px); }
.doc .wrap { max-width: 780px; }
.doc h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5.5vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 0; }
.doc .intro { font-size: 20px; color: var(--ink-2); margin: 22px 0 0; }
.doc h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 52px 0 10px; }
.doc h3 { font-size: 18px; font-weight: 600; margin: 32px 0 6px; }
.doc p, .doc li { color: var(--ink-2); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 6px 0; }
.doc .meta { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-top: 18px; }
.faq { margin-top: 40px; }
.faq details { border-top: 1px solid var(--rule); padding: 18px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--ink-3); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; }
.contact { margin-top: 48px; padding: 26px 28px; background: var(--card); border-radius: 18px; }
.contact p { margin: 6px 0 0; }

/* ——— small screens ——— */
@media (max-width: 860px) {
  .steps, .details { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr; }
  .phones { grid-template-columns: repeat(4, 230px); min-width: 0; width: max-content; }
  .plus { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .site-head nav { gap: 18px; }
  .wordmark svg { width: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}