/* Circl, circlapp.org
   Editorial rather than card based. Flat colour only, no gradients.
   Structure comes from hairline rules and a left meta column, not from
   floating boxes with shadows, which is the look this is avoiding. */

:root {
  --ink:       #0E2A1B;
  --ink-2:     #1B3C29;
  --cream:     #F4F1E8;
  --cream-2:   #EAE6D8;
  --paper:     #FFFFFF;
  --green:     #2F7D4B;
  --green-br:  #5BC174;
  --text:      #16261D;
  --muted:     #5E6C62;
  --rule:      #D6D1C0;
  --rule-dk:   #2A4A36;
  --wrap:      1180px;
}

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

@font-face { font-family: Clash; src: url('fonts/ClashDisplay-Medium.otf')   format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Clash; src: url('fonts/ClashDisplay-Semibold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Clash; src: url('fonts/ClashDisplay-Bold.otf')     format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Nunito; src: url('fonts/Nunito-Regular.ttf')  format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Nunito; src: url('fonts/Nunito-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Nunito; src: url('fonts/Nunito-Bold.ttf')     format('truetype'); font-weight: 700; font-display: swap; }

body {
  background: var(--cream); color: var(--text);
  font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: Clash, sans-serif; letter-spacing: -0.025em;
                       font-weight: 700; color: var(--ink); line-height: 1.06; }
a { color: var(--ink); text-decoration: none; }
p a, .prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
p a:hover, .prose a:hover { text-decoration-color: var(--green); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }

/* Metadata labels. Uppercase, tracked, small. Used instead of coloured pills. */
.label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.num { font-family: Clash, sans-serif; font-weight: 600; font-size: 13px;
       letter-spacing: .06em; color: var(--green); }

.icon { width: 19px; height: 19px; flex: 0 0 19px; stroke: currentColor;
        fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Header ─────────────────────────────────────────────────────────── */
header { border-bottom: 1px solid var(--rule); background: var(--cream); }
.nav { display: flex; align-items: center; height: 74px; gap: 40px; }
.nav .mark { height: 24px; filter: brightness(0); opacity: .9; }
.nav-links { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.nav-links a {
  font-size: 15px; font-weight: 600; color: var(--muted);
  padding-bottom: 2px; border-bottom: 1.5px solid transparent;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.on { color: var(--ink); border-bottom-color: var(--green); }
.nav-links .nav-join { display: none; }

/* ── Features dropdown ──────────────────────────────────────────────── */
.has-menu { position: relative; display: flex; align-items: center; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  font-family: Nunito, sans-serif; font-size: 15px; font-weight: 600; color: var(--muted);
  cursor: pointer; padding: 0 0 2px; border-bottom: 1.5px solid transparent;
}
.menu-btn:hover { color: var(--ink); }
.menu-btn.on { color: var(--ink); border-bottom-color: var(--green); }
.menu-btn .caret { width: 15px; height: 15px; flex-basis: 15px; transition: transform .15s; }
.menu-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.menu-panel {
  display: none; position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%); min-width: 230px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px; padding: 8px; z-index: 60;
}
.menu-panel.open { display: block; }
.menu-panel a {
  display: block; padding: 10px 12px; font-size: 15px; font-weight: 600;
  color: var(--muted); border-radius: 6px; border: 0;
}
.menu-panel a:hover { background: var(--cream); color: var(--ink); }
.menu-panel a.on { color: var(--ink); background: var(--cream); }

/* ── Features overview grid ─────────────────────────────────────────── */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
         padding: 54px 0 64px; }
.fcard { display: block; border: 1px solid var(--rule); border-radius: 6px;
         overflow: hidden; background: var(--paper); }
.fcard:hover { border-color: var(--ink); text-decoration: none; }
.fcard img { display: block; width: 100%; border-bottom: 1px solid var(--rule); }
.fcard-body { padding: 20px 22px 24px; }
.fcard-body .label { display: block; margin-bottom: 8px; }
.fcard-body strong { display: block; font-family: Clash, sans-serif; font-size: 20px;
                     color: var(--ink); line-height: 1.15; }
.fcard-body p { font-size: 15px; color: var(--muted); margin-top: 8px; }

@media (max-width: 960px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .fgrid { grid-template-columns: 1fr; } }
.nav-cta { font-size: 15px; font-weight: 700; color: var(--ink);
           border-bottom: 1.5px solid var(--green); padding-bottom: 2px; }

/* Hidden on desktop, where the links are already visible. */
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--rule);
              border-radius: 999px; width: 44px; height: 44px; cursor: pointer;
              align-items: center; justify-content: center; color: var(--ink); }
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle .icon { width: 21px; height: 21px; flex-basis: 21px; }

/* ── Buttons: square, flat, no shadow ───────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: Nunito, sans-serif;
       font-weight: 700; font-size: 15.5px; padding: 13px 26px; border-radius: 999px;
       border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

/* ── Page head ──────────────────────────────────────────────────────── */
.phead { padding: 78px 0 58px; border-bottom: 1px solid var(--rule); }
.phead .label { margin-bottom: 20px; }
.phead h1 { font-size: 60px; line-height: .98; max-width: 15ch; }
.phead p { font-size: 19.5px; color: var(--muted); margin-top: 24px; max-width: 46ch; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding: 66px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.hero h1 { font-size: 74px; line-height: .95; text-transform: lowercase; }
.hero h1 .accent { color: var(--green); }
.hero .lede { font-size: 20px; color: var(--muted); margin-top: 26px; max-width: 34ch; }
.hero-cta { display: flex; gap: 14px; margin: 34px 0 60px; flex-wrap: wrap; align-items: center; }
/* The hero screenshot sits in a device shell turned slightly away from the
   viewer. The perspective is on the wrapper rather than the phone, so the
   rotation reads as depth instead of a skew. The screenshot already carries
   iOS's own status bar and dynamic island, so none is drawn here. */
.device-stage { perspective: 2400px; display: flex; justify-content: flex-end; }
.iphone {
  width: 300px; padding: 11px; background: #12140F; border-radius: 52px;
  /* One axis only. A z-tilt on top of a y-rotation reads as a phone that is
     falling over rather than one turned to the side, and an x-rotation on a
     tall object exaggerates the near corner. */
  transform: rotateY(-13deg);
  transform-origin: 50% 50%;
  /* Cast away from the turn, so the light direction agrees with the rotation. */
  box-shadow: 26px 30px 56px rgba(14, 42, 27, .18);
  position: relative;
}
/* Volume and power, on the edge whose side face the rotation actually
   exposes: turning the right edge toward the viewer reveals the left flank. */
.iphone::before, .iphone::after {
  content: ""; position: absolute; left: -3px; width: 3px;
  background: #2A2D26; border-radius: 3px 0 0 3px;
}
.iphone::before { top: 150px; height: 34px; }
.iphone::after  { top: 198px; height: 58px; }
.iphone img { display: block; width: 100%; border-radius: 42px; }

@media (max-width: 960px) {
  .device-stage { justify-content: center; perspective: none; }
  .iphone { transform: none; box-shadow: 0 18px 40px rgba(14, 42, 27, .16); }
}

/* ── Rule rows: the main structural device ──────────────────────────── */
.rows { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 200px 1fr; gap: 48px;
       padding: 42px 0; border-bottom: 1px solid var(--rule); }
.row-meta { display: flex; flex-direction: column; gap: 10px; }
.row-body h3 { font-size: 25px; margin-bottom: 10px; }
.row-body p { color: var(--muted); max-width: 62ch; }
.row-body ul { list-style: none; margin-top: 18px; }
.row-body li { display: flex; gap: 11px; align-items: flex-start; margin-top: 10px; font-size: 15.5px; }
.row-body li .icon { color: var(--green); margin-top: 3px; width: 16px; height: 16px; flex-basis: 16px; }

/* A rule row that also carries a screenshot. Three columns rather than two,
   so the meta label, the prose and the image stay on one baseline. */
.row.has-shot { grid-template-columns: 170px 1fr 250px; }
.row.has-shot .row-shot img { width: 100%; border: 1px solid var(--rule);
                              border-radius: 4px; display: block; }

/* Evenly weighted trio, used where no single screenshot leads. */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
         padding: 52px 0 58px; border-bottom: 1px solid var(--rule); }
.strip figure img { width: 100%; border: 1px solid var(--rule); border-radius: 4px; display: block; }
.strip figcaption { margin-top: 14px; }
.strip figcaption .label { display: block; margin-bottom: 5px; }
.strip figcaption p { font-size: 15px; color: var(--muted); margin-top: 4px; }
.strip figcaption strong { font-family: Clash, sans-serif; font-size: 17.5px; color: var(--ink); }

@media (max-width: 960px) {
  .row.has-shot { grid-template-columns: 1fr; }
  .row.has-shot .row-shot img { max-width: 260px; }
  .strip { grid-template-columns: 1fr; gap: 34px; }
  .strip figure img { max-width: 260px; }
}

/* ── Feature blocks with a screenshot ───────────────────────────────── */
.feature { display: grid; grid-template-columns: 1fr 300px; gap: 64px;
           align-items: center; padding: 58px 0; border-bottom: 1px solid var(--rule); }
.feature.flip { grid-template-columns: 300px 1fr; }
.feature.flip .feature-media { order: -1; }
.feature h3 { font-size: 30px; margin: 12px 0 12px; }
.feature p { color: var(--muted); max-width: 54ch; }
.feature ul { list-style: none; margin-top: 20px; }
.feature li { display: flex; gap: 11px; align-items: flex-start; margin-top: 10px; font-size: 15.5px; }
.feature li .icon { color: var(--green); margin-top: 3px; width: 16px; height: 16px; flex-basis: 16px; }
.feature-media img { width: 100%; border: 1px solid var(--rule); border-radius: 4px; display: block; }

/* ── Statement band ─────────────────────────────────────────────────── */
.band { background: var(--ink); color: var(--cream); padding: 74px 0; }
.band h2 { color: var(--cream); font-size: 42px; line-height: 1.06; max-width: 22ch; }
.band p { color: rgba(244,241,232,.7); margin-top: 20px; max-width: 54ch; font-size: 18px; }
.band .label { color: var(--green-br); }
.band-rows { margin-top: 52px; border-top: 1px solid var(--rule-dk); }
.band-row { display: grid; grid-template-columns: 200px 1fr; gap: 48px;
            padding: 30px 0; border-bottom: 1px solid var(--rule-dk); }
.band-row h3 { color: var(--cream); font-size: 21px; }
.band-row p { color: rgba(244,241,232,.66); margin-top: 6px; font-size: 16px; }
.band-row .icon { color: var(--green-br); }

/* ── Early access ───────────────────────────────────────────────────── */
.join { padding: 74px 0; border-bottom: 1px solid var(--rule); }
.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.join h2 { font-size: 38px; line-height: 1.05; }
.join p.sub { color: var(--muted); margin-top: 16px; max-width: 44ch; }
.join-form { display: flex; gap: 10px; flex-wrap: wrap; }
.join-form input {
  flex: 1 1 260px; padding: 13px 15px; font-family: Nunito, sans-serif; font-size: 16px;
  border: 1px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--text);
}
.join-form input:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.form-msg { margin-top: 14px; font-size: 15px; min-height: 22px; }
.form-msg.err { color: #A7382C; }
.form-msg.ok  { color: var(--green); font-weight: 700; }
.join-fine { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

/* ── CTA strip: closes every page except join itself ────────────────── */
.cta-strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
             background: var(--cream-2); padding: 46px 0; }
.cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.cta-grid h2 { font-size: 29px; margin-top: 12px; max-width: 24ch; line-height: 1.1; }

/* ── Join page ──────────────────────────────────────────────────────── */
/* The one dark page on the site. Flat ink, no gradient: the contrast against
   every other page is what gives it weight. */
.join-stage { background: var(--ink); color: var(--cream); overflow: hidden; }
.join-grid2 { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px;
              align-items: center; padding: 88px 0 92px; }
.join-stage .label { color: var(--green-br); }
.join-stage h1 { color: var(--cream); font-size: 56px; line-height: 1.0;
                 margin-top: 20px; max-width: 15ch; }
.join-stage .lede { font-size: 19.5px; color: rgba(244,241,232,.72);
                    margin-top: 22px; max-width: 46ch; }

/* Form inverted for the dark ground. */
.join-stage .join-form { margin-top: 34px; max-width: 480px; }
.join-stage .join-form input {
  background: var(--cream); border-color: var(--cream); color: var(--text);
}
.join-stage .join-form input::placeholder { color: #8A948C; }
.join-stage .join-form input:focus { outline: 2px solid var(--green-br); outline-offset: 2px; }
.join-stage .btn-primary { background: var(--green-br); color: var(--ink); }
.join-stage .btn-primary:hover { background: #77CE8C; }
.join-stage .form-msg.ok { color: var(--green-br); }
.join-stage .form-msg.err { color: #F0A79C; }
.join-stage .join-fine { color: rgba(244,241,232,.5); }

/* Assurances under the form, on one line. */
.join-points { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 30px;
               padding-top: 24px; border-top: 1px solid var(--rule-dk); }
.join-points div { display: flex; gap: 9px; align-items: center;
                   font-size: 14.5px; color: rgba(244,241,232,.72); }
.join-points .icon { color: var(--green-br); width: 17px; height: 17px; flex-basis: 17px; }

/* Three devices fanned, sharing the hero's perspective treatment. */
.fan { position: relative; height: 560px; perspective: 2400px; }
.fan .iphone { position: absolute; width: 232px; padding: 9px; border-radius: 42px;
               box-shadow: 22px 26px 50px rgba(0,0,0,.42); }
.fan .iphone img { border-radius: 34px; }
.fan .iphone::before, .fan .iphone::after { display: none; }
.fan .f1 { left: 0;    top: 92px;  transform: rotateY(-15deg) scale(.88); z-index: 1; }
.fan .f2 { left: 150px; top: 18px; transform: rotateY(-13deg);            z-index: 3; }
.fan .f3 { left: 316px; top: 118px; transform: rotateY(-11deg) scale(.84); z-index: 2; }

@media (max-width: 1080px) {
  .fan { height: 480px; }
  .fan .iphone { width: 196px; }
  .fan .f2 { left: 128px; }
  .fan .f3 { left: 266px; }
}
@media (max-width: 960px) {
  .join-grid2 { grid-template-columns: 1fr; gap: 44px; padding: 62px 0 68px; }
  .join-stage h1 { font-size: 40px; }
  /* The fan needs width it does not have on a phone; one device reads better
     than three crushed together. */
  .fan { height: 420px; perspective: none; }
  .fan .iphone { position: static; transform: none; width: 240px; margin: 0 auto; }
  .fan .f1, .fan .f3 { display: none; }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer { padding: 56px 0 38px; background: var(--cream-2); }
.foot { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.foot h4 { font-family: Nunito, sans-serif; font-size: 11.5px; font-weight: 700;
           text-transform: uppercase; letter-spacing: .14em; color: var(--ink); margin-bottom: 15px; }
.foot ul { list-style: none; }
.foot li { margin-bottom: 9px; }
.foot a { color: var(--muted); font-size: 15px; }
.foot a:hover { color: var(--ink); }
.foot-mark { height: 22px; filter: brightness(0); opacity: .85; margin-bottom: 14px; }
.foot-about { font-size: 15px; color: var(--muted); max-width: 30ch; }
.foot-bottom { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--rule);
               display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
               font-size: 13.5px; color: var(--muted); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid, .feature, .feature.flip, .join-grid { grid-template-columns: 1fr; gap: 36px; }
  .feature.flip .feature-media { order: 0; }
  .row, .band-row { grid-template-columns: 1fr; gap: 14px; }
  .hero h1 { font-size: 52px; }
  .phead h1 { font-size: 44px; }
  .band h2 { font-size: 33px; }
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 14px; }
  .shot { margin: 0 auto; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hero h1 { font-size: 42px; }
  .phead h1 { font-size: 36px; }
  .nav { gap: 14px; height: 62px; }
  .foot { grid-template-columns: 1fr; }

  /* The links move into a panel under the header rather than vanishing.
     Hiding them was fine when every item was an anchor on one page; now
     each is its own page, so hiding them removes the only way to reach them. */
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--cream);
    border-bottom: 1px solid var(--rule); padding: 6px 30px 18px; z-index: 40;
    /* The base rule centres items for the horizontal bar. Left as-is in a
       column it centres each link and shrinks it to its text, so the rules
       between them become short floating dashes. */
    align-items: stretch;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    font-size: 17px; padding: 14px 0; border-bottom: 1px solid var(--rule);
    border-top: 0; min-height: 44px; display: flex; align-items: center;
  }
  .nav-links a.on { color: var(--ink); border-bottom-color: var(--rule); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links .nav-join { display: flex; font-weight: 700; color: var(--green); }

  /* No hovering on a phone, and no room for a floating panel: the features
     sit inline, indented under their own heading. */
  .has-menu { display: block; }
  .menu-btn { width: 100%; justify-content: space-between; font-size: 17px;
              padding: 14px 0; min-height: 44px; border-bottom: 1px solid var(--rule); }
  .menu-panel { position: static; transform: none; display: none; min-width: 0;
                border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
                padding: 4px 0 10px; background: none; }
  .menu-panel.open { display: block; }
  .menu-panel a { padding: 11px 0 11px 16px; font-size: 15.5px; min-height: 44px;
                  display: flex; align-items: center; }
  .menu-panel a:hover, .menu-panel a.on { background: none; }

  header { position: relative; }

  /* Full width targets read better than two odd-sized pills on a phone. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .cta-grid { grid-template-columns: 1fr; gap: 20px; }
  .cta-act .btn { width: 100%; justify-content: center; }
  .join-form { flex-direction: column; }
  .join-form input, .join-form .btn { width: 100%; }
  .join-form .btn { justify-content: center; }
}