/* Rowmio landing page, direction B: bold and dark. */
:root {
  --ground: #14104a;
  --text: #ecebfb;
  --muted: #c9c5f2;
  --panel: #221e56;
  --indigo: #3426c9;
  --tangerine: #ff8a1f;
  --label: #1a1240;
  --tint: #ecebfb;
  --ring: #a9a2ff;
  --r: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 17px/1.55 Figtree, system-ui, sans-serif;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
.b2 :focus-visible, .b4 :focus-visible, .cta :focus-visible, .panel :focus-visible { outline-color: var(--indigo); }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 40px; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--tangerine); color: var(--label); padding: 10px 16px; border-radius: 10px; font-weight: 600; z-index: 10; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn { display: inline-block; padding: 16px 26px; border-radius: 12px; background: var(--tangerine); color: var(--label); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.btn:hover { background: #ffa04a; }
.btn-sm { padding: 12px 20px; font-size: 15px; }
.btn-dark { background: var(--ground); color: var(--text); }
.btn-dark:hover { background: var(--panel); }
.btn-dark:focus-visible { outline-color: var(--ground); }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 22px 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; }
.links { display: flex; gap: 32px; margin-left: auto; margin-right: 16px; }
.links a { text-decoration: none; color: var(--muted); font-weight: 500; }
.links a:hover { color: var(--text); }

/* hero */
.hero { padding-top: clamp(40px, 7vw, 96px); padding-bottom: 40px; }
.hero h1 { font-size: clamp(54px, 10.4vw, 156px); line-height: .9; }
.hero h1 .line { display: block; }
.hero h1 em { font-style: normal; color: var(--tangerine); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: clamp(28px, 4vw, 48px); }
.hero-row p { max-width: 30em; font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); }

/* bento */
.bento { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: minmax(220px, auto); gap: 14px; padding-block: 24px 96px; }
.tile { border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.tile-h { font-size: clamp(22px, 2vw, 28px); line-height: 1.1; }
.tile p { font-size: 15px; }
.b1 { grid-row: span 2; background: var(--indigo); }
.b1 p { color: var(--text); max-width: 34em; }
.b2 { background: var(--tangerine); color: var(--label); }
.b3, .b5 { background: var(--panel); }
.b3 p, .b5 p { color: var(--muted); }
.b4 { background: var(--tint); color: var(--ground); }
.b4 svg { color: var(--indigo); }
.big { font: 800 clamp(88px, 9vw, 128px)/.85 'Bricolage Grotesque', sans-serif; letter-spacing: -0.04em; }
.code { margin: 0; background: var(--ground); border-radius: 12px; padding: 22px; overflow-x: auto; font: 500 15px/1.6 ui-monospace, 'Cascadia Code', Consolas, monospace; color: var(--text); }
.code .c { color: #ffb36b; }

/* section heads */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; }
.sec-head h2 { font-size: clamp(40px, 6vw, 88px); line-height: .95; }
.sec-head p { max-width: 30em; color: var(--muted); }

/* path */
.path { padding-bottom: 112px; }
.weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.week { background: var(--indigo); border-radius: var(--r); padding: 18px 16px 20px; min-height: 260px; display: flex; flex-direction: column; gap: 10px; }
.wn { font: 800 46px/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; color: var(--tangerine); }
.week h3 { font-size: 18px; line-height: 1.15; margin-top: auto; }
.week p { font-size: 14px; color: var(--muted); }
.week.is-dim { background: var(--panel); }

/* inside */
.inside { padding-bottom: 112px; overflow: hidden; }
.inside-grid { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: center; }
.panel { margin: 0; background: var(--tint); border-radius: var(--r); padding: clamp(14px, 2vw, 28px); transform: rotate(-2deg); }
.panel img { width: 100%; height: auto; border-radius: 10px; }
.callouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.callouts li { background: var(--panel); border-radius: var(--r); padding: 20px 22px; color: var(--muted); font-size: 15px; }
.callouts b { display: block; color: var(--text); font: 800 20px/1.2 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; margin-bottom: 4px; }

/* how */
.how { padding-bottom: 112px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { border-radius: var(--r); padding: 28px; min-height: 320px; display: flex; flex-direction: column; gap: 12px; }
.sn { font: 800 clamp(96px, 10vw, 150px)/.8 'Bricolage Grotesque', sans-serif; letter-spacing: -0.04em; margin-bottom: auto; }
.step h3 { font-size: 26px; line-height: 1.1; margin-top: 24px; }
.step p { font-size: 16px; }
.s1 { background: var(--indigo); }
.s1 .sn { color: var(--tangerine); }
.s2 { background: var(--panel); }
.s2 .sn { color: var(--tangerine); }
.s2 p { color: var(--muted); }
.s3 { background: var(--tint); color: var(--ground); }
.s3 .sn { color: var(--indigo); }

/* faq */
.faq { padding-bottom: 112px; }
.qas { display: grid; gap: 10px; }
details { background: var(--panel); border-radius: var(--r); }
summary { list-style: none; cursor: pointer; padding: 22px 26px; font: 800 clamp(20px, 2vw, 26px)/1.2 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; display: flex; justify-content: space-between; gap: 16px; border-radius: var(--r); }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--tangerine); font-size: 1.3em; line-height: .9; }
details[open] summary::after { content: '\2212'; }
details p { padding: 0 26px 24px; color: var(--muted); max-width: 46em; }

/* cta */
.cta { background: var(--tangerine); color: var(--label); border-radius: var(--r); padding: clamp(36px, 6vw, 80px); display: grid; justify-items: start; gap: 22px; }
.cta h2 { font-size: clamp(48px, 8vw, 120px); line-height: .92; color: var(--ground); }
.cta p { max-width: 32em; font-size: 18px; }

.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 32px 40px; font-size: 14px; color: var(--muted); }

@media (max-width: 1100px) {
  .weeks { grid-template-columns: repeat(4, 1fr); }
  .inside-grid { grid-template-columns: 1fr; }
  .callouts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .wrap { padding-inline: 16px; }
  .links { display: none; }
  .hero-row, .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .b1 { grid-column: 1 / -1; grid-row: auto; }
  .steps, .callouts { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .week { min-height: 220px; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; padding-bottom: 72px; }
  .weeks { grid-template-columns: 1fr; }
  .week { min-height: 0; display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; row-gap: 4px; align-items: baseline; }
  .wn { font-size: 34px; grid-row: span 2; }
  .week h3 { margin-top: 0; }
  .path, .inside, .how, .faq { padding-bottom: 80px; }
  .panel { transform: rotate(-1.5deg); }
  .code { font-size: 13px; padding: 16px; }
}