/* Pengu — an ice-world palette, carried over from the page this grew out of.
   Light only on purpose: the whole thing is set in the snow. */

:root {
    --ice-0: #f7fbff;
    --ice-1: #eaf4fb;
    --ice-2: #d6e9f7;
    --line: #dce7f0;
    --line-soft: #eef3f7;

    --accent: #ff8fab;
    --accent-deep: #f4708f;
    --sun: #f5a623;

    --ink: #2b2b38;
    --ink-soft: #5b6472;
    --ink-faint: #8b95a3;

    --ok: #1f8a5f;
    --bad: #c2334d;

    --radius: 20px;
    --radius-lg: 26px;
    --shadow: 0 2px 4px rgba(43, 43, 56, .05), 0 18px 45px rgba(43, 43, 56, .13);
    --shadow-sm: 0 1px 2px rgba(43, 43, 56, .05), 0 6px 18px rgba(43, 43, 56, .08);
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(170deg, var(--ice-0) 0%, var(--ice-1) 45%, var(--ice-2) 100%);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    line-height: 1.55;
    /* German compounds are long. Without this, a word like "Vorlesungsskripten" can push a
       card wider than a phone screen and take the whole page with it. */
    overflow-wrap: break-word;
}

h1, h2, h3 { letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 2.4rem; font-weight: 800; }
h2 { font-size: 1.6rem; font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: var(--accent-deep); }

.muted { color: var(--ink-faint); }
.small { font-size: .84rem; }
.center { text-align: center; }

/* ── shell ───────────────────────────────────────────────────────────── */

.shell { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 36rem; }

.nav {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 0;
}
.nav .brand {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 800; font-size: 1.15rem; color: var(--ink); text-decoration: none;
}
.nav .brand svg { width: 30px; }
.nav .spacer { flex: 1; }
.nav a.link { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .92rem; }
.nav a.link:hover { color: var(--accent-deep); }

.foot {
    margin-top: auto;
    /* Longhand on purpose: .foot is always used together with .wrap, and a `padding` shorthand
       here silently zeroes .wrap's side gutter — which left the footer links flush against the
       edge of the screen on a phone. */
    padding-top: 3rem;
    padding-bottom: 2rem;
    color: var(--ink-faint); font-size: .82rem;
}
.foot a { color: var(--ink-faint); }

/* ── surfaces ────────────────────────────────────────────────────────── */

.card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.25rem 2rem;
}
.panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.4rem 1.5rem;
}

.sign {
    display: inline-block;
    background: #fff7e0;
    border: 2px dashed var(--sun);
    color: #a86a00;
    border-radius: 12px;
    padding: .4rem 1rem;
    font-size: .76rem;
    font-weight: 800;
    transform: rotate(-2deg);
}

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-block; border: none; cursor: pointer;
    padding: .85rem 1.7rem; border-radius: 9999px;
    background: var(--accent); color: #fff;
    font: inherit; font-weight: 700; font-size: .97rem; text-decoration: none;
    box-shadow: 0 5px 16px rgba(244, 112, 143, .35);
    transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(244, 112, 143, .5); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.block { display: block; width: 100%; text-align: center; }
.btn.ghost {
    background: #fff; color: var(--ink); border: 1.5px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.btn.ghost:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }

/* ── forms ───────────────────────────────────────────────────────────── */

.field { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .85rem; font-weight: 700; }
.field input, .field select {
    border: 1.5px solid var(--line); border-radius: 12px;
    padding: .65rem .8rem; font-size: .95rem; font-family: inherit;
    background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}

.drop {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    border: 2.5px dashed #c3ddf0; border-radius: var(--radius);
    padding: 2.1rem 1rem; cursor: pointer; text-align: center; background: #fbfdff;
    transition: border-color .18s, background .18s, transform .18s;
}
.drop:hover { border-color: var(--accent); background: #fff7f9; transform: translateY(-2px); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-title { font-weight: 700; font-size: 1rem; }
.drop-hint { font-size: .8rem; color: var(--ink-faint); }

.error { color: var(--bad); font-size: .9rem; margin-top: 1rem; }
.notes {
    list-style: disc outside; margin: 1.4rem 0 0; padding-left: 1.3rem;
    color: var(--ink-faint); font-size: .84rem; line-height: 1.75;
}

/* ── pricing ─────────────────────────────────────────────────────────── */

.plans { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; height: 100%; }
.plan.best { border-color: var(--accent); box-shadow: 0 10px 30px rgba(244, 112, 143, .18); }
.plan .tag {
    position: absolute; top: -.7rem; right: 1rem;
    background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800;
    padding: .2rem .6rem; border-radius: 9999px; letter-spacing: .03em;
}
.plan .price { font-size: 2rem; font-weight: 800; margin: .3rem 0 0; }
.plan .per { font-size: .84rem; color: var(--ink-faint); margin-bottom: .8rem; }
.plan .save { color: var(--ok); font-weight: 700; font-size: .8rem; }
.plan ul { list-style: none; margin: 1rem 0 1.4rem; padding: 0; font-size: .88rem; }
.plan li { padding: .3rem 0; color: var(--ink-soft); }
.plan li::before { content: "🐧 "; }
.plan .foot-btn { margin-top: auto; }

/* ── meter ───────────────────────────────────────────────────────────── */

.meter { height: 8px; border-radius: 9999px; background: var(--ice-2); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 9999px; }

/* ── status ──────────────────────────────────────────────────────────── */

.status { font-weight: 700; margin: 0 0 .35rem; font-size: 1.02rem; }
.big { font-size: 2.1rem; font-weight: 800; margin: .3rem 0 .2rem; }
.party { font-size: 2rem; animation: pop .6s ease-out; }
@keyframes pop {
    0%   { transform: scale(.4); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.decks {
    margin: 1.3rem 0 0; padding: 0; list-style: none; text-align: left;
    max-height: 11rem; overflow-y: auto; border-top: 1px solid var(--line-soft);
    font-size: .82rem; color: var(--ink-faint);
}
.decks li { padding: .35rem 0; border-bottom: 1px solid var(--line-soft); }
.decks li::before { content: "🐧 "; }

/* rotating encouragement, CSS-only so there is no timer to leak */
.cheer { position: relative; height: 1.4rem; margin-top: .9rem; }
.cheer span {
    position: absolute; inset: 0;
    font-size: .88rem; color: var(--accent-deep); font-weight: 600;
    opacity: 0; animation: cheer 24s infinite;
}
.cheer span:nth-child(1) { animation-delay: 0s; }
.cheer span:nth-child(2) { animation-delay: 6s; }
.cheer span:nth-child(3) { animation-delay: 12s; }
.cheer span:nth-child(4) { animation-delay: 18s; }
@keyframes cheer {
    0%, 2%    { opacity: 0; transform: translateY(6px); }
    6%, 22%   { opacity: 1; transform: translateY(0); }
    26%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* ── penguins ────────────────────────────────────────────────────────── */

.peek {
    position: absolute; top: -46px; right: 30px; width: 62px;
    animation: peek 4.5s ease-in-out infinite; transform-origin: bottom center;
}
@keyframes peek {
    0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
    80%           { transform: translateY(-6px) rotate(-7deg); }
    90%           { transform: translateY(-6px) rotate(7deg); }
}

.waddler {
    width: 84px; margin: .2rem auto 1.2rem; display: block;
    animation: waddle 1.1s ease-in-out infinite; transform-origin: bottom center;
}
@keyframes waddle {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50%      { transform: rotate(7deg) translateY(-5px); }
}

.flake { position: fixed; top: -40px; color: #b9d9ef; opacity: .7; animation: fall linear infinite; z-index: 0; }
.flake-lg { color: #cbe4f6; opacity: .55; }
@keyframes fall {
    0%   { transform: translateY(-20px) rotate(0deg); }
    100% { transform: translateY(105vh) rotate(360deg); }
}

.ice-floor { position: fixed; left: 0; right: 0; bottom: 0; height: 26px; background: #fff; opacity: .75; z-index: 0; }
/* In front of the content, not behind it: the parade is the one bit of the page that is
   purely for fun, and it was being hidden by every card it walked past. Safe to put on top
   because pointer-events are off — the penguins cannot swallow a tap on a button. The ice
   floor stays behind, since a white strip over the footer would cost more than it buys. */
.parade { position: fixed; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; z-index: 3; }
/* backwards fill-mode keeps each one off-screen during its delay, instead of parking them
   all on top of each other at the left edge. */
.parade .walker { position: absolute; bottom: 16px; width: 52px; animation: cross linear infinite backwards; }
.parade .walker svg { animation: waddle .7s ease-in-out infinite; transform-origin: bottom center; }
.parade .w1 { animation-duration: 26s; animation-delay: 0s; }
.parade .w2 { animation-duration: 33s; animation-delay: 4s; width: 40px; }
.parade .w3 { animation-duration: 29s; animation-delay: 9s; width: 60px; }
.parade .w4 { animation-duration: 38s; animation-delay: 14s; width: 34px; }
.parade .w5 { animation-duration: 23s; animation-delay: 19s; width: 48px; }
.parade .w6 { animation-duration: 31s; animation-delay: 25s; width: 56px; }
/* slightly different waddles, so the line does not march in lockstep */
.parade .w2 svg { animation-duration: .58s; }
.parade .w4 svg { animation-duration: .82s; }
.parade .w5 svg { animation-duration: .66s; }
.parade .w6 svg { animation-duration: .75s; }
@keyframes cross {
    from { transform: translateX(-90px); }
    to   { transform: translateX(calc(100vw + 90px)); }
}

/* ── sign in ─────────────────────────────────────────────────────────── */

.providers { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.4rem; }
.provider {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .8rem 1rem; border-radius: 12px; border: 1.5px solid var(--line);
    background: #fff; color: var(--ink); font-weight: 700; font-size: .93rem;
    text-decoration: none; transition: border-color .15s, transform .15s;
}
.provider:hover { border-color: var(--accent); transform: translateY(-1px); }
.provider svg { width: 18px; height: 18px; }

/* ── layout helpers ──────────────────────────────────────────────────── */

/* Longhand, for the reason given on .foot: these are all used as "wrap hero" /
   "wrap section", and a padding shorthand wipes out .wrap's side gutter. */
.hero { padding-top: 3rem; padding-bottom: 1rem; }
.hero p.lead { font-size: 1.08rem; color: var(--ink-soft); max-width: 34rem; }
.section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.pad-b { padding-bottom: 6rem; }

/* ── phones ──────────────────────────────────────────────────────────────
   Two breakpoints, not one: 760px is where the three-column grids stop
   working, and 560px is where the header runs out of room — sooner in
   German, where "Kostenlos starten" is twice the width of "Start free". */

@media (max-width: 760px) {
    h1 { font-size: 1.85rem; }
    h2 { font-size: 1.4rem; }
    .plans, .grid-3 { grid-template-columns: 1fr; }
    .nav a.link.hide-sm { display: none; }

    /* A wider gutter, not a narrower one: text running to the edge of the
       glass is the thing that reads as unfinished. */
    .wrap { padding: 0 1.15rem; }

    .card { padding: 1.75rem 1.35rem; }
    .panel { padding: 1.2rem 1.25rem; }

    .hero { padding-top: 2rem; padding-bottom: .5rem; }
    .hero p.lead { font-size: 1rem; }
    .section { padding-top: 1.85rem; padding-bottom: 1.85rem; }
    .pad-b { padding-bottom: 4.5rem; }

    /* The penguin hangs off the top of the card; on a narrow card it was
       clipping the corner radius. */
    .peek { width: 52px; top: -38px; right: 18px; }

    /* The interval toggle carries a badge ("Bis zu 40 % sparen") that does not
       fit beside the word on a phone. Stacking the two keeps the segmented
       control intact instead of letting it overflow sideways. */
    .toggle { display: flex; width: 100%; }
    .toggle a {
        flex: 1; flex-direction: column; gap: .15rem;
        justify-content: center; text-align: center;
        padding: .5rem .6rem; font-size: .85rem;
    }
    .toggle .pill { font-size: .66rem; }
}

@media (max-width: 560px) {
    /* The header does not fit on one line in German — "Kostenlos starten" is twice the width
       of "Start free". Rather than leave the button stranded at the left of a half-empty
       second row, give it the whole row: a full-width CTA reads as deliberate. */
    .nav { flex-wrap: wrap; gap: .45rem .6rem; padding: .8rem 0 .9rem; }
    .nav .brand { font-size: 1.05rem; }
    .nav > a.btn { flex: 1 0 100%; text-align: center; padding: .62rem 1rem; font-size: .9rem; }

    /* "VOLLE LEISTUNG" is wider than "MOST POWER" and was reaching the card's edge. */
    .plan .tag { right: auto; left: 1.1rem; font-size: .64rem; }

    .card { padding: 1.5rem 1.15rem; }
    .panel { padding: 1.05rem 1.1rem; }

    .plan .price { font-size: 1.8rem; }

    /* Six digits at .5rem tracking is wider than a 320px screen. */
    .code-input { font-size: 1.35rem; letter-spacing: .35rem; }
    .code-input::placeholder { letter-spacing: .35rem; }

    /* Footer links sat flush against the tagline once the row wrapped. */
    .foot { padding-top: 2.25rem; padding-bottom: 1.5rem; }
    .foot .row { gap: .5rem .9rem; }

    .field.lead-field { padding: .85rem .95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .flake, .parade, .peek, .waddler, .cheer span, .party { animation: none !important; }
    .flake, .parade { display: none; }
    .cheer span:nth-child(1) { opacity: 1; }
}

/* ── billing interval toggle ──────────────────────────────────────────── */

.toggle {
    display: inline-flex; gap: .25rem; margin: 1.2rem 0 .5rem;
    background: #fff; border: 1px solid var(--line); border-radius: 9999px; padding: .25rem;
    box-shadow: var(--shadow-sm);
}
.toggle a {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem 1.1rem; border-radius: 9999px;
    font-size: .88rem; font-weight: 700; text-decoration: none; color: var(--ink-soft);
}
.toggle a.on { background: var(--accent); color: #fff; }
.toggle .pill {
    background: rgba(255, 255, 255, .25); color: inherit;
    border-radius: 9999px; padding: .05rem .45rem; font-size: .72rem; font-weight: 800;
}
.toggle a:not(.on) .pill { background: #eefaf3; color: var(--ok); }

.plan .price .unit { font-size: .95rem; font-weight: 700; color: var(--ink-faint); }

/* ── passwordless sign-in ─────────────────────────────────────────────── */

.code-input {
    font-size: 1.6rem; font-weight: 800; letter-spacing: .5rem;
    text-align: center; font-variant-numeric: tabular-nums;
}
.code-input::placeholder { color: #cfdbe6; letter-spacing: .5rem; }

.linkish {
    background: none; border: none; padding: 0; font: inherit;
    color: var(--ink-faint); font-size: .85rem; text-decoration: underline; cursor: pointer;
}
.linkish:hover { color: var(--accent-deep); }

/* ── language switcher ────────────────────────────────────────────────────
   Deliberately loud for a piece of chrome. Pengu defaults to German, so the
   English half of its audience arrives on a page they cannot read and has to
   spot this in the first second — a quiet globe icon would not do it. */

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lang { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }

.lang-select {
    appearance: none;
    border: 2px solid var(--line); border-radius: 9999px;
    padding: .5rem 2.1rem .5rem .9rem;
    font-family: inherit; font-size: .92rem; font-weight: 700;
    color: var(--ink); background-color: #fff;
    /* The chevron is inline so the control needs no extra request and no icon font. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: .7rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .18s, transform .18s;
}
.lang-select:hover { border-color: var(--accent); transform: translateY(-1px); }
.lang-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.lang-go {
    border: 2px solid var(--line); border-radius: 9999px; background: #fff;
    padding: .5rem .9rem; font: inherit; font-weight: 700; font-size: .88rem;
    color: var(--ink); cursor: pointer;
}

/* The one field on the page that has to be seen before anything is uploaded:
   which language the cards come out in. */
.field.lead-field {
    background: var(--ice-1); border-radius: var(--radius);
    padding: 1rem 1.1rem; margin-top: 0; gap: .45rem;
}
.field.lead-field label { font-size: .95rem; }
.field.lead-field select {
    font-size: 1.05rem; font-weight: 700; padding: .75rem .9rem;
    border-color: #c3ddf0;
}

@media (max-width: 560px) {
    .lang-select { padding: .42rem 1.75rem .42rem .65rem; font-size: .84rem; }
}