/* ============================================================
   MailArc — design tokens, aligned with portfolio.rehpoehler.de
   ============================================================ */
:root {
   /* Brand / accent */
   --accent: #8b5cf6;
   --accent-rgb: 139, 92, 246;

   /* Core palette */
   --ink: #15120d;
   --ink-rgb: 21, 18, 13;
   --cream: #f4f1ea;
   --cream-rgb: 244, 241, 234;
   --white: #fff;
   --black: #000;

   /* Text */
   --text-body: #4a4438;
   --text-muted: #6f695c;
   --text-muted-dark: #9a937f;
   --text-footer-link: #c9c2ad;

   /* Borders */
   --border-ink: rgba(var(--ink-rgb), .12);
   --border-ink-strong: rgba(var(--ink-rgb), .15);
   --border-tag: rgba(var(--ink-rgb), .16);
   --border-on-dark: rgba(var(--cream-rgb), .3);

   /* Card palette */
   --card-purple: #8b5cf6;
   --card-blue: #5aa9e6;
   --card-orange: #e8943a;
   --card-green: #34c98a;

   /* Typography */
   --font-display: 'Archivo', sans-serif;
   --font-body: 'Instrument Sans', system-ui, sans-serif;
   --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

   /* Motion */
   --transition: .25s ease;

   /* Shape / layout */
   --radius-pill: 999px;
   --radius-card: 22px;
   --content-max: 1340px;
   --content-pad: clamp(18px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
   font-family: var(--font-body);
   background: var(--cream);
   color: var(--ink);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(var(--accent-rgb), .22); }

a { color: inherit; text-decoration: none; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

.main {
   flex: 1;
   width: 100%;
   max-width: var(--content-max);
   margin: 0 auto;
   padding: 0 var(--content-pad);
}

/* ============================================================
   Pills
   ============================================================ */
.pill { border-radius: var(--radius-pill); font-weight: 600; }

.pill--ghost-dark {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: .86rem;
   color: var(--ink);
   background: var(--white);
   border: 1.5px solid var(--border-ink-strong);
   padding: 11px 18px;
   transition: transform var(--transition);
}
.pill--ghost-dark:hover { transform: translateY(-1px); }

.pill--solid {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
   font-size: .86rem;
   color: var(--cream);
   background: var(--ink);
   padding: 11px 20px;
   transition: transform var(--transition), background var(--transition);
}
.pill--solid:hover { transform: translateY(-1px); background: var(--black); }

/* ============================================================
   Nav — sticky, translucent, full-bleed
   ============================================================ */
.nav {
   position: sticky;
   top: 0;
   z-index: 50;
   width: 100%;
   padding: 12px var(--content-pad);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   background: rgba(var(--cream-rgb), .7);
   backdrop-filter: blur(12px) saturate(1.6);
   -webkit-backdrop-filter: blur(12px) saturate(1.6);
   border-bottom: 1px solid var(--border-ink);
}

.nav-brand { display: inline-flex; align-items: center; gap: 9px; }
.nav-brand-dot {
   width: 10px; height: 10px;
   border-radius: 50%;
   background: var(--accent);
}
.nav-brand-name {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.05rem;
   letter-spacing: -.03em;
}
.nav-pills { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nav-pill-arrow { font-size: .78rem; }

/* ============================================================
   Eyebrow
   ============================================================ */
.eyebrow {
   font-size: .82rem;
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--text-muted);
}
.eyebrow--strong { color: var(--text-muted); }
.eyebrow--block { display: block; margin-bottom: 20px; }
.eyebrow--on-dark { color: var(--text-muted-dark); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: clamp(44px, 6vw, 88px) 0 clamp(20px, 3vw, 24px); }

.hero-head {
   max-width: 72%;
   container-type: inline-size;
}

.hero-title {
   font-family: var(--font-display);
   font-weight: 800;
   /* Sized off the column, not the viewport: "An email archive" measures
      9.28x its font-size in Archivo 800 at -.045em, so 10.4cqi keeps it
      on one line at every width. */
   font-size: clamp(1.75rem, 10.4cqi, 6.4rem);
   line-height: .9;
   letter-spacing: -.045em;
   text-transform: uppercase;
   color: var(--ink);
}
.hero-title-accent { color: var(--accent); }

.hero-lede {
   margin-top: 26px;
   font-size: clamp(1.05rem, 1.5vw, 1.25rem);
   line-height: 1.6;
   color: var(--text-body);
   max-width: 44ch;
   text-wrap: pretty;
}

.hero-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 30px;
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding: clamp(44px, 6vw, 72px) 0 clamp(20px, 3vw, 32px); }
.section-head { margin-bottom: clamp(26px, 4vw, 40px); }

.section-title {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: clamp(1.9rem, 4vw, 3rem);
   line-height: 1.02;
   letter-spacing: -.03em;
   color: var(--ink);
}

.section-sub {
   margin-top: 18px;
   font-size: clamp(1rem, 1.3vw, 1.12rem);
   line-height: 1.6;
   color: var(--text-body);
   max-width: 62ch;
   text-wrap: pretty;
}

.section-accent {
   width: 48px;
   height: 3px;
   background: var(--accent);
   margin-top: 14px;
}

/* ============================================================
   Colour cards
   ============================================================ */
.features {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
}

.feature {
   position: relative;
   display: flex;
   flex-direction: column;
   min-height: 340px;
   border-radius: var(--radius-card);
   padding: 22px 20px 20px;
   overflow: hidden;
   color: var(--white);
   transition: transform var(--transition);
}
.feature:hover { transform: translateY(-3px); }

.feature--purple { background: var(--card-purple); }
.feature--blue   { background: var(--card-blue); }
.feature--orange { background: var(--card-orange); }
.feature--green  { background: var(--card-green); }

.feature-ghost {
   position: absolute;
   right: -10px;
   bottom: -34px;
   font-family: var(--font-display);
   font-weight: 900;
   font-size: 9rem;
   line-height: 1;
   color: rgba(255, 255, 255, .16);
   pointer-events: none;
   user-select: none;
}

.feature-tag {
   position: relative;
   display: block;
   font-size: .7rem;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .8);
}

.feature-title {
   position: relative;
   margin-top: auto;
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.35rem;
   letter-spacing: -.02em;
   margin-bottom: 10px;
}

.feature-desc {
   position: relative;
   font-size: .92rem;
   line-height: 1.55;
   color: rgba(255, 255, 255, .93);
   text-wrap: pretty;
}

/* ============================================================
   Steps
   ============================================================ */
.steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
}
.step { border-top: 2px solid var(--ink); padding-top: 18px; }
.step-num {
   font-size: .7rem;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 10px;
}
.step-title {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.12rem;
   letter-spacing: -.02em;
   margin-bottom: 8px;
}
.step-desc {
   font-size: .93rem;
   line-height: 1.6;
   color: var(--text-body);
   text-wrap: pretty;
}

/* ============================================================
   Two-column "why" block
   ============================================================ */
.why-grid {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   gap: clamp(24px, 5vw, 72px);
   align-items: start;
}
.why-body p {
   font-size: clamp(1rem, 1.3vw, 1.12rem);
   line-height: 1.7;
   color: var(--text-body);
   max-width: 62ch;
   text-wrap: pretty;
}
.why-body p + p { margin-top: 16px; }

/* ============================================================
   Tag list
   ============================================================ */
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: .92rem;
   font-weight: 600;
   color: var(--ink);
   border: 1.5px solid var(--border-tag);
   border-radius: var(--radius-pill);
   padding: 11px 20px;
   transition: transform var(--transition), border-color var(--transition);
}
.tag:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), .5); }

/* ============================================================
   App screenshot
   ============================================================ */
.shot { margin: clamp(28px, 4vw, 48px) 0 0; }
.shot-frame {
   border: 1.5px solid var(--border-ink-strong);
   border-radius: var(--radius-card);
   overflow: hidden;
   background: var(--white);
   box-shadow: 0 30px 60px -30px rgba(var(--ink-rgb), .35);
}
.shot-bar {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 12px 16px;
   background: var(--cream);
   border-bottom: 1px solid var(--border-ink);
}
.shot-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--ink-rgb), .18); }
.shot-name {
   margin-left: 8px;
   font-size: .72rem;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--text-muted);
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-caption {
   margin-top: 14px;
   font-size: .88rem;
   line-height: 1.6;
   color: var(--text-muted);
   max-width: 76ch;
}

/* ============================================================
   Callout
   ============================================================ */
.callout {
   border-left: 3px solid var(--accent);
   padding: 4px 0 4px 22px;
}
.callout p {
   font-size: clamp(1rem, 1.3vw, 1.12rem);
   line-height: 1.65;
   color: var(--text-body);
   max-width: 72ch;
   text-wrap: pretty;
}

/* ============================================================
   Legal pages
   ============================================================ */
.legal { padding: clamp(36px, 6vw, 72px) 0 clamp(44px, 7vw, 88px); }
.legal-eyebrow { margin-bottom: 18px; }
.legal-title {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: clamp(2.2rem, 6vw, 4rem);
   line-height: .95;
   letter-spacing: -.04em;
   color: var(--ink);
}
.legal-accent {
   width: 48px; height: 3px;
   background: var(--accent);
   margin: 22px 0 clamp(32px, 5vw, 52px);
}
.legal-grid {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   gap: clamp(28px, 5vw, 72px);
   align-items: start;
}
.legal-block + .legal-block { margin-top: clamp(30px, 4vw, 44px); }
.legal-heading {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: clamp(1.15rem, 2vw, 1.5rem);
   letter-spacing: -.02em;
   color: var(--ink);
   margin-bottom: 12px;
}
.legal-text {
   font-size: clamp(1rem, 1.3vw, 1.08rem);
   line-height: 1.65;
   color: var(--text-body);
   max-width: 66ch;
   text-wrap: pretty;
}
.legal-text + .legal-text { margin-top: 14px; }
.legal-list {
   margin: 14px 0 0 20px;
   font-size: clamp(1rem, 1.3vw, 1.08rem);
   line-height: 1.65;
   color: var(--text-body);
   max-width: 66ch;
}
.legal-list li { margin-bottom: 10px; }
.legal-list li::marker { color: var(--accent); }
.legal-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-link:hover { color: var(--accent); }
.legal-updated { font-size: .85rem; color: var(--text-muted); margin-top: 8px; }
.legal-code {
   font-family: var(--font-mono);
   font-size: .88rem;
   background: rgba(var(--ink-rgb), .06);
   border-radius: 5px;
   padding: 2px 7px;
   word-break: break-all;
}

/* Display-reverses obfuscated text written backwards in the source */
.reverse { unicode-bidi: bidi-override; direction: rtl; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
   background: var(--ink);
   color: var(--cream);
   margin-top: clamp(44px, 6vw, 88px);
}
.footer-inner {
   width: 100%;
   max-width: var(--content-max);
   margin: 0 auto;
   padding: clamp(48px, 6vw, 96px) var(--content-pad);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
}
.footer-logo {
   display: inline-flex;
   align-items: center;
   font-family: var(--font-display);
   font-weight: 800;
   font-size: .92rem;
   letter-spacing: -.02em;
   color: var(--ink);
   background: var(--cream);
   border-radius: var(--radius-pill);
   padding: 12px 22px;
   transition: transform var(--transition);
}
.footer-logo:hover { transform: translateY(-1px); }
.footer-meta { font-size: .86rem; color: var(--text-muted-dark); }
.footer-impressum {
   color: var(--text-footer-link);
   text-decoration: underline;
   text-underline-offset: 3px;
   margin-left: 14px;
}
.footer-impressum:hover { color: var(--cream); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
   .features { grid-template-columns: repeat(2, 1fr); }
   .steps { grid-template-columns: repeat(2, 1fr); }
   .hero-head { max-width: 100%; }
   .why-grid { grid-template-columns: 1fr; }
   .legal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
   .features { grid-template-columns: 1fr; }
   .steps { grid-template-columns: 1fr; }
   .feature { min-height: 260px; }
   .footer-inner { align-items: flex-start; }
}