/* ============================================================================
   The home page, English and German (index.html, de/index.html). Mockup 5 as
   Maxim approved it (D33 to D35). Loaded after brand.css and site.css.

   Duolingo's frame: a white page, one short title per section, one short
   paragraph, big art beside it, and a lot of space. The colour moments are the
   blue hero, the light steps band, the sand founder band and the navy close.
   Apple's App Store badge appears twice (hero, close). Nothing moves except the
   header button sinking when pressed (site.css).
   ========================================================================== */
.home{background:var(--color-surface);color:var(--color-ink)}
.home :where(h1,h2,h3,p,ul,ol,figure,blockquote){margin:0}
.home img{height:auto}
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:24px;position:relative}
.home mark{background:linear-gradient(transparent 58%,var(--color-marker) 58%);color:inherit;padding:0 4px;margin:0 -4px}
.title{font-size:clamp(32px,3.9vw,50px);line-height:1.04;letter-spacing:-.035em;font-weight:var(--font-weight-heavy);text-wrap:balance}
.para{font-size:18px;line-height:1.55;color:var(--color-ink-2);text-wrap:pretty}
.note{font-size:14px;line-height:1.4;font-weight:var(--font-weight-semibold)}
.sec{padding-block:80px}
/* a white section right after another white one does not double the gap */
.sec:not(.steps-band)+.sec:not(.steps-band){padding-top:0}
.center{text-align:center}

/* the header joins the blue hero on this page and scrolls away with it */
.site-nav[data-ground]{position:relative;background:var(--ground);border-bottom:0}
.site-nav[data-ground] .nav-links a:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}
.site-nav[data-ground] .nav-store{background:var(--color-surface);color:var(--color-ink);box-shadow:0 3px 0 var(--color-ink)}
.site-nav[data-ground] .nav-store:active{box-shadow:0 0 0 var(--color-ink)}

/* Apple's badge artwork, unaltered (Apple's marketing guidelines) */
.badge{display:inline-block;border-radius:10px}
.badge img{width:162px;height:54px}

/* hero: the blue moment */
.hero-in{display:grid;gap:36px;padding-block:28px 56px}
.hero-txt{display:grid;gap:22px;justify-items:start}
.hero h1{font-size:clamp(44px,5.2vw,62px);line-height:1;letter-spacing:-.045em;font-weight:var(--font-weight-heavy);text-wrap:balance}
.hero .para{color:var(--color-ink);font-size:19px;max-width:28ch}
.cta{display:grid;gap:14px;justify-items:start;margin-top:10px}
.hero-art{width:88%;justify-self:center}

/* the bank strip, like Duolingo's language strip under its hero */
.strip{padding-block:28px;background:var(--color-surface-raised)}
.strip-in{display:grid;gap:18px;justify-items:center;text-align:center}
.strip p{font-size:14px;font-weight:var(--font-weight-semibold);color:var(--color-ink-3)}
.strip ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 28px}
.strip img{max-height:22px;max-width:76px;width:auto;height:auto;object-fit:contain}

/* rows: one title, one short paragraph, big art beside it */
.row{display:grid;gap:36px;align-items:center}
.row-txt{display:grid;gap:18px;max-width:27rem}
.row-art{position:relative;width:min(70%,250px);justify-self:center;order:2}
.row-art .main{--e:5px}
.row-art .side{position:absolute;--e:4px}
.pain-art .main{width:84%;margin-left:auto;rotate:4deg}
.pain-art .side{width:38%;left:-4%;top:-2%;rotate:-8deg}
.trust-art .main{width:72%;margin-inline:auto;rotate:-4deg}
.trust-art .side{width:32%;right:0;bottom:-2%;rotate:9deg}
.budget-art .main{width:76%;rotate:3deg}
.budget-art .side{width:36%;right:-2%;top:6%;rotate:-7deg}
.quiet-link{font-weight:var(--font-weight-bold);font-size:16px;color:var(--color-link);text-underline-offset:3px;text-decoration-thickness:2px}

/* how it works: its own light band, four cards with a picture and a title */
.steps-band{background:var(--color-ground)}
.how-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px}
.how-card{background:var(--color-surface);border-radius:var(--radius-sheet);padding:22px 18px 24px;display:grid;gap:16px;justify-items:center;text-align:center}
.how-art{width:100%;height:84px;display:grid;place-items:center}
.how-art img{max-height:80px;width:auto;--e:3px}
.how-card h3{font-size:17px;line-height:1.25;font-weight:var(--font-weight-heavy);letter-spacing:-.01em;text-wrap:balance;margin:0}
.how-card h3 b{display:block;font:var(--font-weight-bold) 12px/1 var(--font-family-mono);letter-spacing:.1em;color:var(--color-ink-3);margin-bottom:8px}
.mini{width:84px;background:var(--color-ground);border-radius:12px;padding:12px 10px;display:grid;gap:7px}
.mini i{display:block;height:9px;border-radius:99px;background:var(--world-shallows-bg)}
.mini i:first-child{width:52%}
.mini i.hi{background:var(--color-brand)}

/* the sand moment: the founder */
.founder{padding-block:80px}
.founder blockquote{font-size:clamp(24px,2.8vw,34px);line-height:1.28;font-weight:var(--font-weight-heavy);letter-spacing:-.02em;text-wrap:balance;max-width:22em;margin-inline:auto}
.founder figcaption{margin-top:18px;font-weight:var(--font-weight-bold);font-size:15px}

/* early testers (only once every quote is confirmed, D35) */
.quotes{display:grid;gap:14px;margin-top:40px;text-align:left}
.quote{background:var(--color-ground);border-radius:var(--radius-sheet);padding:26px 24px;display:grid;gap:18px;align-content:space-between}
.quote blockquote{font-size:19px;line-height:1.4;font-weight:var(--font-weight-bold);letter-spacing:-.01em;text-wrap:pretty}
.quote figcaption{font-size:14px;font-weight:var(--font-weight-bold);color:var(--color-ink-2)}
.quotes-note{margin-top:22px;font-size:14px;color:var(--color-ink-3)}

/* start free */
.plans{display:grid;gap:14px;max-width:840px;margin:40px auto 0;text-align:left}
.plan{border-radius:var(--radius-sheet);padding:28px 26px;display:grid;gap:16px;align-content:start}
.plan-free{background:var(--color-ground)}
.plan h3{font-size:22px;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:10px;margin:0}
.pro-tag{font:var(--font-weight-heavy) 12px/1 var(--font-family-mono);letter-spacing:.1em;background:var(--color-marker);color:var(--color-ink);padding:6px 9px;border-radius:var(--radius-md)}
.plan ul{list-style:none;padding:0;display:grid;gap:11px}
.plan li{display:flex;gap:10px;font-size:16px;line-height:1.45}
.plan li::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;margin-top:2px;background:var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23051A49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.plan-pro li::before{background-color:var(--color-marker)}
.plan .small{font-size:14px;line-height:1.5;opacity:.8}

/* questions */
.faq{display:grid;gap:10px;max-width:720px;margin:40px auto 0;text-align:left}
.faq details{background:var(--color-ground);border-radius:var(--radius-card)}
.faq summary{list-style:none;display:flex;align-items:center;gap:14px;cursor:pointer;font-weight:var(--font-weight-heavy);font-size:17px;padding:18px 20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:none;width:10px;height:10px;border-right:2.5px solid var(--color-ink);border-bottom:2.5px solid var(--color-ink);rotate:45deg;translate:0 -3px}
.faq details[open] summary::after{rotate:225deg;translate:0 2px}
.faq summary:focus-visible{border-radius:var(--radius-card)}
.faq details p{padding:0 20px 18px;font-size:16px;line-height:1.55;color:var(--color-ink-2)}

/* the navy moment: the close, with the wave line on top (brand element) */
.closing{position:relative;margin-top:24px;padding-block:64px 44px;text-align:center}
.wave{position:absolute;left:0;right:0;top:-22px;width:100%;height:24px;display:block;color:var(--world-navy-bg)}
.closing-in{display:grid;justify-items:center;gap:26px}
.closing-finn{display:flex;align-items:center;gap:14px}
.closing-finn img{width:108px;rotate:6deg;--e:4px}
.bubble{position:relative;background:var(--color-surface);color:var(--color-ink);font-weight:var(--font-weight-heavy);font-size:15px;line-height:1.2;padding:10px 14px;border-radius:16px;box-shadow:var(--shadow-md);text-align:left}
.bubble::after{content:"";position:absolute;width:14px;height:14px;background:inherit;rotate:45deg;left:-5px;top:calc(50% - 7px)}
.closing .title{max-width:15em}
.closing .cta{justify-items:center;margin-top:0}
/* the navy footer follows the navy close without a white gap */
.home+footer.page{margin-top:0;padding-top:24px}

/* ---- desktop --------------------------------------------------------------- */
@media (min-width:760px){
  .wrap{padding-inline:56px}
  .sec{padding-block:128px}
  .para{font-size:20px}
  .hero-in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:56px;padding-block:56px 96px}
  .hero .para{font-size:21px}
  .hero-art{width:100%}
  .strip{padding-block:34px}
  .strip-in{grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:36px;align-items:center}
  .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px}
  .row .row-art{order:0;width:min(100%,400px)}
  .row.flip .row-art{order:2}
  .how-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:56px}
  .how-card{padding:32px 22px 34px;gap:22px}
  .how-art{height:120px}
  .how-art img{max-height:116px}
  .how-card h3{font-size:19px}
  .mini{width:120px;padding:16px 14px;gap:10px}
  .mini i{height:12px}
  .founder{padding-block:112px}
  .quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
  .quote{padding:32px 28px}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:56px}
  .plan{padding:36px}
  .faq{margin-top:56px}
  .closing{padding-block:96px 64px}
  .closing-finn img{width:132px}
}
/* the eleven logos only fit one row next to the label from here; below it they wrap */
@media (min-width:1000px){
  .strip ul{justify-content:space-between;width:100%;flex-wrap:nowrap}
}