/* The home page, built from its design (docs/product/tripsomo-home.html), whose two artboards are
   1440px and 390px wide. It has one palette and no dark mode (the head pins color-scheme to "only
   light"). Bricolage Grotesque sets the name and the headings, and Familjen Grotesk everything else.
   Below 900px it takes the phone layout. It's all scoped to .home, since every stylesheet loads on
   every page, and the rules for bare elements sit in :where(.home), so any class outweighs them. */
.home{
  --ink:#2A2240;
  --ink-soft:#6A5B6B;
  --paper:#FBF3E8;
  --line:#EADCC8;
  --terracotta:#B94A2C;
  --amber:#E8962E;
  --dusk:#2B2858;
  --dusk-ink-soft:#CFC9EE;
  --display:"Bricolage Grotesque","Familjen Grotesk",sans-serif;
  /* 80px at 1440, and the content no wider than it is there */
  --edge:max(clamp(40px,5.56vw,80px),(100% - 1280px) / 2);
  background:var(--paper);
  color:var(--ink);
  font-family:"Familjen Grotesk","Helvetica Neue",sans-serif;
}
body:has(> .home){background:#FBF3E8}
:where(.home) :is(h1,h2,h3,p,ol,ul){margin:0}
:where(.home) :is(h1,h2,h3){font-family:var(--display);font-weight:500}
:where(.home) :is(ol,ul){padding:0;list-style:none}
:where(.home) a{color:var(--ink)}
:where(.home) a:hover{color:var(--terracotta)}
:where(.home) :is(a,button,input):focus-visible{outline:3px solid var(--amber);outline-offset:3px}
:where(.home) :is(header,section):focus{outline:none} /* Turbo focuses where an in-page link lands, for screen readers */
:where(.home) :is(time,.num){font-variant-numeric:tabular-nums}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* A photo or a sticker, in its colour until there's an image for it (HomeHelper) */
.home .photo{overflow:hidden;background:var(--tint)}
.home .photo img{display:block;width:100%;height:100%;object-fit:cover}
.home .sticker{display:flex;align-items:center;justify-content:center;flex:none;width:94px;height:94px;border:3px dashed #fff;border-radius:50%;outline:1px solid var(--line);background:var(--tint);font-size:14px;font-weight:700}
.home .sticker.light{color:#fff}
.home .sticker:has(img){border:0;outline:0;background:none}
.home .sticker img{width:100%;height:100%;object-fit:contain}

/* The header */
.home-header{display:flex;justify-content:space-between;align-items:center;padding:28px var(--edge)}
.home-name{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-size:28px;font-weight:600;text-decoration:none}
.home-name:hover{color:var(--ink)}
.home-nav{display:flex;align-items:center;gap:32px}
.home-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;text-decoration:none}
.home-nav .home-join,.home-nav .home-join:hover{padding:12px 22px;border-radius:12px;background:var(--ink);color:var(--paper);font-weight:600}

/* The hero: a trip in a sentence, and its first sketch on a phone */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(48px,7.78vw,112px);align-items:center;padding:48px var(--edge) 104px}
.hero-text{display:flex;flex-direction:column;container-type:inline-size}
.hero h1{max-width:680px;font-size:clamp(56px,5.56vw,80px);line-height:1.02;letter-spacing:-.02em}
.hero-lead{max-width:580px;margin:28px 0 44px;font-size:22px;line-height:1.5;color:var(--ink-soft)}
.trip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;max-width:680px}
.trip label{grid-column:1/-1;font-size:16px;font-weight:600}
.trip input{min-width:0;height:60px;padding:0 20px;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:18px}
.trip button{height:60px;padding:0 28px;border:0;border-radius:14px;background:var(--terracotta);color:#fff;font:inherit;font-size:18px;font-weight:600;cursor:pointer}
.trip-chips{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.trip-chips span{margin-right:4px;font-size:16px;color:var(--ink-soft)}
.trip-chips button{height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:16px;cursor:pointer}
.trip-chips button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.hero-free{margin-top:28px;font-size:16px;color:var(--ink-soft)}
/* A narrow column, just above the phone layout, puts the button under the field */
@container (max-width:459.98px){
  .trip{grid-template-columns:minmax(0,1fr)}
  .trip-chips span{flex-basis:100%}
}

.phone{display:flex;flex-direction:column;width:360px;height:700px;padding:30px 22px 22px;border:10px solid var(--ink);border-radius:48px;background:#fff}
.sketch{flex:1;display:flex;flex-direction:column;gap:14px}
.sketch-day{font-size:14px;color:var(--ink-soft)}
.sketch-city{margin-top:-6px;font-family:var(--display);font-size:34px;font-weight:500;line-height:1}
.sketch-meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sketch-pace{padding:6px 10px;border-radius:999px;background:#FBE3C2;color:#6B3F0A;font-size:13px;font-weight:600}
.sketch-faces{display:flex}
.sketch-faces span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:-6px;border:2px solid #fff;border-radius:50%;background:#F6D29C;font-size:12px;font-weight:700}
.sketch-faces span:nth-child(4n+2){background:#F2B09E}
.sketch-faces span:nth-child(4n+3){background:#EBB3C6}
.sketch-faces span:nth-child(4n){background:#C9C5EE}
.sketch-rule{height:1px;background:var(--line)}
.sketch-wait{flex:1;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink-soft)}
.sketch-stops{flex:1;display:flex;flex-direction:column;gap:4px;animation:rise .4s ease-out both}
.sketch-stops li{display:grid;grid-template-columns:50px minmax(0,1fr);gap:10px;padding:9px 10px;border-radius:12px}
.sketch-stops li.wander{background:#E9E6F8}
.sketch-stops time{padding-top:1px;font-size:15px;font-weight:600}
.sketch-stops li > span{display:flex;flex-direction:column;gap:2px}
.stop-title{font-size:16px;font-weight:600;line-height:1.3}
.stop-note{font-size:14px;line-height:1.4;color:var(--ink-soft)}

/* The sections under it. A row of cards is as tall as its tallest card, so the headings under the
   cards stay in line when a narrower screen makes one of them taller. */
.home-section{padding:96px var(--edge) 112px;border-top:1px solid var(--line)}
.home-section h2{margin-bottom:56px;font-size:54px;line-height:1.05;letter-spacing:-.01em}
.home .card{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff}
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 44px}
.little{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.features > li,.little > li{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.features .card{min-height:196px}
.features h3{margin:26px 0 10px;font-size:27px;line-height:1.15}
.home .about p{font-size:17px;line-height:1.55;color:var(--ink-soft)}

.home .ideas-card{gap:12px}
.ideas-card li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center}
.ideas-card li > span:last-child{display:flex;flex-direction:column}
.ideas-card .face{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--tint);font-size:13px;font-weight:700}
.idea-title{font-size:15px;font-weight:600;line-height:1.3}
.idea-votes{font-size:13px;color:var(--ink-soft)}

.fund-head{display:flex;justify-content:space-between;font-size:15px}
.fund-head b{font-weight:600}
.fund-head span{color:var(--ink-soft)}
.fund-bar{height:12px;overflow:hidden;border-radius:999px;background:#F3E6D3}
.fund-bar span{display:block;width:80%;height:100%;border-radius:999px;background:var(--amber)}
.fund-paid{font-size:15px;line-height:1.45}

.home .wander-card{gap:12px}
.wander-groups{display:flex;gap:8px}
.wander-groups span{padding:8px 12px;border-radius:999px;background:#E9E6F8;font-size:14px;font-weight:600}
.wander-groups span + span{background:#FBE3C2}
.wander-meet{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.4}
.wander-meet time{font-weight:600}

.recap-photos{display:flex;gap:8px}
.recap-photos .photo{flex:1;height:78px;border-radius:10px}
.recap-play{align-self:flex-start;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:600}

.home-section.big-trips{padding-bottom:96px}
.home-section.big-trips h2{margin-bottom:16px}
.big-trips-lead{max-width:720px;margin-bottom:44px;font-size:22px;line-height:1.5;color:var(--ink-soft)}
.recaps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.recaps li{display:flex;flex-direction:column;gap:10px}
.recaps .wide{grid-column:span 2}
.recaps .photo{height:160px;border-radius:14px}
.recaps li > span{display:flex;flex-direction:column;gap:2px}
.recap-title{font-size:16px;font-weight:600;line-height:1.3}
.recap-when{font-size:14px;color:var(--ink-soft)}

.little .card{min-height:230px;padding:24px}
.little h3{margin:26px 0 10px;font-size:30px;line-height:1.15}
.home .little .about p{max-width:560px}
.fact-where{font-size:14px;color:var(--ink-soft)}
.fact{font-size:21px;font-weight:600;line-height:1.4}
.stickers{display:flex;gap:12px}
.sticker-note{font-size:15px;line-height:1.45}

/* Signing up, on dusk. Each step after the email answers into the same frame (SignupHelper). */
.signup-band,.home-footer{background:var(--dusk);color:var(--paper)}
.signup-band{padding:104px var(--edge) 64px}
.signup-band-grid{display:grid;grid-template-columns:minmax(0,664fr) minmax(0,520fr);gap:clamp(48px,6.67vw,96px);align-items:start}
.signup-band h2{font-size:clamp(52px,4.73vw,68px);line-height:1.02;letter-spacing:-.02em}
.signup-band-tagline{max-width:560px;margin-top:24px;font-family:var(--display);font-size:24px;line-height:1.45;color:var(--dusk-ink-soft)}
.signup-band-form{display:flex;flex-direction:column;padding-top:12px;container-type:inline-size}
.signup-band-note{margin-top:18px;font-size:16px;line-height:1.55;color:var(--dusk-ink-soft)}
.home-footer{padding:0 var(--edge) 48px}
.home-footer p{font-size:14px;line-height:1.5;color:var(--dusk-ink-soft)}

.home #signup_form{display:block}
.home .signup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}
.home .signup label{grid-column:1/-1;font-size:16px;font-weight:600}
.home .signup .field_with_errors{display:contents} /* Rails' wrapper would take the field's place in the grid */
.home .signup input{min-width:0;height:58px;padding:0 18px;border:0;border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:17px}
.home .signup input::placeholder{color:#757575;opacity:1} /* Chrome's own grey, as in the design; 4.6:1 on white, where other browsers draw it lighter */
.home .signup input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--amber)}
.home .signup input.code{letter-spacing:.3em}
.home .signup .cta{height:58px;padding:0 24px;border:0;border-radius:14px;background:var(--amber);color:var(--ink);font:inherit;font-size:17px;font-weight:700;cursor:pointer}
@container (max-width:419.98px){.home .signup{grid-template-columns:minmax(0,1fr)}}
.home .signup-prompt{margin-bottom:14px;font-size:16px;line-height:1.55}
.home .signup-prompt b{font-weight:600;overflow-wrap:anywhere}
.home .signup-error{margin-top:12px;font-size:16px;color:var(--amber)}
.home .signup-done{font-size:18px;line-height:1.5;overflow-wrap:anywhere}
.home .signup-done:focus{outline:none} /* focused so screen readers read it, not to be typed into */
.home .signup-aside{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:6px;font-size:15px;color:var(--dusk-ink-soft)}
.home .signup-aside a,.home .link-button{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.home .signup-aside a:hover,.home .link-button:hover{color:var(--paper)}
.home .link-button{padding:0;border:0;background:none;font:inherit;text-decoration:underline;cursor:pointer}

/* Between the two artboards, the desktop layout makes room */
@media (max-width:1199.98px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recaps{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* The phone layout */
@media (max-width:899.98px){
  .home{--edge:24px}
  .home-header{padding:18px var(--edge)}
  .home-name{font-size:24px}
  .home-nav a:not(.home-join){display:none}
  .home-nav .home-join,.home-nav .home-join:hover{padding:12px 18px;font-size:16px}

  .hero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:24px var(--edge) 64px}
  .hero h1{font-size:42px;line-height:1.04}
  .hero-lead{margin:20px 0 32px;font-size:18px}
  .trip{grid-template-columns:minmax(0,1fr)}
  .trip input{height:56px;padding:0 16px;font-size:17px}
  .trip button{height:56px}
  .trip-chips{gap:8px;margin-top:22px}
  .trip-chips span{flex-basis:100%;margin:0 0 2px}
  .trip-chips button{padding:0 16px;font-size:15px}
  .hero-free{margin:20px 0 36px;font-size:15px}
  .phone{width:100%;max-width:400px;height:640px;margin-inline:auto;padding:26px 18px 18px;border-width:8px;border-radius:40px}
  .sketch{gap:12px}
  .sketch-city{font-size:30px}
  .sketch-faces span{width:30px;height:30px;margin-left:-7px;font-size:11px}
  .sketch-stops{gap:2px}
  .sketch-stops li{grid-template-columns:48px minmax(0,1fr);gap:8px;padding:8px 10px}
  .sketch-stops time{font-size:14px}
  .stop-title{font-size:15px}
  .stop-note{font-size:13px}

  .home-section{padding:64px var(--edge) 72px}
  .home-section h2{margin-bottom:36px;font-size:36px}
  #how h2{line-height:1.08}
  .features,.little{display:flex;flex-direction:column;gap:48px}
  .features > li,.little > li{display:flex;flex-direction:column}
  .features .card{min-height:184px;padding:20px}
  .features h3{margin:22px 0 8px;font-size:26px}
  .home .ideas-card{gap:10px}
  .wander-groups{flex-wrap:wrap}
  .recap-photos .photo{height:74px}

  .home-section.big-trips{padding-bottom:72px}
  .big-trips-lead{font-size:18px}
  .recaps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .recaps .photo{height:110px}
  .recaps .wide .photo{height:130px}

  .little .card{min-height:200px}
  .little h3{font-size:26px}
  .fact{font-size:18px}
  .home .sticker{flex:0 1 82px;width:auto;height:auto;min-width:0;aspect-ratio:1}

  .signup-band{padding:72px var(--edge) 48px}
  .signup-band-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .signup-band h2{font-size:44px;line-height:1.04}
  .signup-band-tagline{margin:18px 0 36px;font-size:20px}
  .signup-band-form{padding-top:0}
  .home .signup{grid-template-columns:minmax(0,1fr)}
  .home .signup input,.home .signup .cta{height:56px}
  .home .signup input{padding:0 16px}
  .signup-band-note{margin-top:16px;font-size:15px}
  .home-footer{padding-bottom:40px}
  .home-footer p{font-size:13px}
}