/* ShapedSocial — site styles.

   The identity is the mark: three overlapping rounded squares in yellow, green
   and orange. So the page is built from rounded squares too. Flat colour
   panels, no gradients, no blur, no drop shadows and no icon tiles, which is
   what the previous site leaned on and what made it read as generated.

   One stylesheet, no build step, because the site is static files on cPanel. */

/* ── Tokens ──────────────────────────────────────────────────────────────
   Light is the bare :root so the un-stamped "system" state resolves, then the
   dark palette is redefined twice: once for a dark OS (guarded so an explicit
   light choice still wins) and once for an explicit dark choice. */
:root {
  color-scheme: light;

  --paper:  #F2F4F0;   /* cool pale green-grey, chosen over the usual cream */
  --card:   #FFFFFF;
  --ink:    #11201A;   /* near-black carrying the brand's green bias */
  --slate:  #55665E;   /* muted text, same family as the ink */
  --rule:   #D8DED6;

  --orange: #FF7A1A;
  --green:  #1FAE7D;
  --yellow: #FFD23F;

  --on-orange: #1A0E03;
  --on-green:  #04231A;
  --on-yellow: #241B00;

  --measure: 62ch;
  --radius: 28px;       /* the mark's corner, scaled up */
  --radius-sm: 14px;
  --gutter: clamp(20px, 5vw, 64px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0D1813;
    --card:  #152420;
    --ink:   #ECEFE9;
    --slate: #9BAAA2;
    --rule:  #26352E;
    /* The accents hold on the dark ground; only the text on them shifts. */
    --on-orange: #1A0E03;
    --on-green:  #04231A;
    --on-yellow: #241B00;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0D1813;
  --card:  #152420;
  --ink:   #ECEFE9;
  --slate: #9BAAA2;
  --rule:  #26352E;
}

/* ── Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hanken Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 7.2vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.2; }

p { margin: 0; max-width: var(--measure); }
a { color: inherit; }

.label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

.lead { font-size: clamp(1.05rem, 1.7vw, 1.32rem); color: var(--slate); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 12px 18px; z-index: 50;
}
.skip:focus { left: 12px; top: 12px; }

/* ── Masthead ────────────────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding-block: 22px 18px;
}
.wordmark {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; font-weight: 700; font-size: 1.06rem;
  letter-spacing: -0.015em; white-space: nowrap;
}
.wordmark img { width: 30px; height: 30px; display: block; }

.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.nav a {
  text-decoration: none; font-size: 0.95rem; font-weight: 500;
  padding: 7px 11px; border-radius: var(--radius-sm); color: var(--slate);
}
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
/* The current page is marked by a weight of colour, not a faint tint.
   Square ends: a radius here curls the bar up at both ends and it stops
   reading as a rule. */
.nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -4px 0 var(--orange);
  border-radius: 0;
}

/* ── Panels: the one structural idea ─────────────────────────────────── */
.panel {
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 52px);
}
.panel-orange { background: var(--orange); color: var(--on-orange); }
.panel-green  { background: var(--green);  color: var(--on-green); }
.panel-yellow { background: var(--yellow); color: var(--on-yellow); }
.panel-ink    { background: var(--ink);    color: var(--paper); }
.panel-card   { background: var(--card);   color: var(--ink); }
.panel p { color: inherit; }
.panel .label { color: inherit; opacity: 0.72; }

/* The mark, drawn large and flat: two squares and a circle, overlapped, no
   blur.
   ⚠️ The green one is a CIRCLE, not a rounded square. Measured off icon.png:
   its row width an eighth of the way down is 62% of its width at the middle,
   which is a circle (a rounded square measures 95%+). The other two measure
   112% and 81%, so they are squares.
   It also has to be SQUARE for `border-radius: 50%` to draw a circle rather
   than an ellipse - it was 60% x 54%, so the left inset carries the extra 6%
   that the width used to. */
.stack { position: relative; aspect-ratio: 1; width: min(100%, 320px); }
.stack i {
  position: absolute; display: block; border-radius: 22%;
}
.stack i:nth-child(1) { background: var(--yellow); inset: 0 38% 38% 0; }
.stack i:nth-child(2) { background: var(--green);  inset: 4% 0 42% 46%;
                        border-radius: 50%; }
.stack i:nth-child(3) { background: var(--orange); inset: 38% 18% 0 20%; }

/* ── Circl's own marks ───────────────────────────────────────────────────
   The wordmark is drawn as a green outline, so it holds on the paper and ink
   grounds but disappears on the green panel. It is used only on those two,
   and the app icon carries the identity anywhere else. */
.circl-wordmark {
  display: block; height: clamp(30px, 4vw, 44px); width: auto;
  margin-bottom: 18px;
}
.circl-wordmark.sm { height: 26px; margin-bottom: 14px; }

.app-icon {
  display: block; width: min(100%, 260px); height: auto;
  border-radius: 24%;
}

/* ── App screenshots ─────────────────────────────────────────────────────
   Shown as plain images with a hairline and the page's own corner radius,
   rather than dropped into a drawn iPhone bezel. The captures already carry a
   status bar; a second frame around them is set dressing. */
.shots {
  display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.shots figure { margin: 0; display: grid; gap: 12px; }
.shots img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--card);
}
.shots figcaption { font-size: 0.86rem; color: var(--slate); }

@media (max-width: 860px) {
  /* Two up rather than four: at phone width a quarter-column screenshot is
     too small to read anything in. */
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  display: grid; gap: clamp(26px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: end;
  padding-block: clamp(34px, 6vw, 76px) clamp(30px, 5vw, 60px);
}
.hero-side { display: flex; justify-content: flex-end; }
.hero p.lead { margin-top: 22px; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 600;
  padding: 13px 22px; border-radius: var(--radius-sm); font-size: 0.98rem;
  border: 2px solid transparent;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--orange); color: var(--on-orange); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* ── Sections ────────────────────────────────────────────────────────── */
section { padding-block: clamp(34px, 5vw, 64px); }
.section-head { display: grid; gap: 10px; margin-bottom: clamp(22px, 3vw, 38px); }

/* Deliberately uneven. A 2x2 of identical cards is the shape the old site
   used and the shape every generated page uses. */
.panels { display: grid; gap: 14px; }
.panels-2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.panels-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panels-stagger { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.panels-stagger > *:nth-child(1) { grid-column: span 7; }
.panels-stagger > *:nth-child(2) { grid-column: span 5; }
.panels-stagger > *:nth-child(3) { grid-column: span 5; }
.panels-stagger > *:nth-child(4) { grid-column: span 7; }

.panel h3 { margin-bottom: 10px; }
.panel .n {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 2.4rem; font-weight: 700; line-height: 1; display: block;
  margin-bottom: 14px; opacity: 0.6;
}

/* A list that is a list, rather than four boxes pretending to be one. */
.facts { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.fact {
  display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 40px);
  padding-block: 20px; border-bottom: 1px solid var(--rule);
  align-items: start;
}
.fact dt { color: var(--slate); font-size: 0.86rem; font-weight: 600;
           letter-spacing: 0.06em; text-transform: uppercase; padding-top: 3px; }
.fact dd { margin: 0; }
.fact dd p + p { margin-top: 10px; }

.split {
  display: grid; gap: clamp(22px, 4vw, 52px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
}

.prose > * + * { margin-top: 18px; }
.prose h3 { margin-top: 34px; }

.pill {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--yellow); color: var(--on-yellow);
}

.contact-list { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0; }
.contact-list li {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.contact-list a { font-weight: 600; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot { margin-top: clamp(40px, 6vw, 80px); padding-bottom: 40px; }
.foot-inner {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: clamp(28px, 4vw, 48px);
  display: grid; gap: 30px;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
}
.foot a { color: var(--paper); }
.foot h3 { font-size: 1rem; margin-bottom: 12px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot .small { font-size: 0.82rem; opacity: 0.66; line-height: 1.6; max-width: 34ch; }
.foot .label { color: var(--paper); opacity: 0.55; }

/* ── Narrow ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero-side { justify-content: flex-start; }
  .stack { width: min(62%, 240px); }
  .panels-2, .panels-3 { grid-template-columns: minmax(0, 1fr); }
  .panels-stagger { grid-template-columns: minmax(0, 1fr); }
  .panels-stagger > * { grid-column: auto !important; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .foot-inner { grid-template-columns: minmax(0, 1fr); }
  .fact { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .contact-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .nav { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}