body {
  font-family: "Trebuchet MS", Arial, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 24px 60px;
  color: #222;
}

h1 {
  color: #1f3864;
}

.intro {
  line-height: 1.5;
  color: #333;
}

.intro code {
  font-family: "Courier New", monospace;
  background: #f2f2f2;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.85em;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 1.05em;
  margin: 10px 0 30px;
  cursor: pointer;
}

.toggle input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.demo-area {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* --- Phone mockup --- */

.phone-column {
  flex: 0 0 auto;
  text-align: center;
}

.phone-frame {
  position: relative;
  width: 380px;
  height: 380px;
  background-image: url("phone.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Percentages measured directly from phone.png's screen area */
.phone-screen {
  position: absolute;
  left: 31.94%;
  top: 8.06%;
  width: 35.83%;
  height: 77.78%;
  overflow: hidden;
  background: #ffffff;
  border-radius: 6px;
}

.scaler {
  transform-origin: top left;
}

.caption {
  max-width: 380px;
  margin: 14px auto 0;
  font-size: 0.9em;
  color: #444;
  line-height: 1.4;
}

/* --- Mock page content rendered inside the phone screen ---
   Sized deliberately for a mobile screen (small, sensible font sizes,
   tight padding). This is what "good enough" mobile content looks like -
   the whole point of the demo is that this content is FINE, but the
   browser only shows it at the right size once it knows the real device
   width. Without the viewport tag it gets crushed down regardless. */

.mock-page {
  width: 100%;
  font-family: Arial, sans-serif;
  background: #ffffff;
  box-sizing: border-box;
}

.mock-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: #1f3864;
  color: #ffffff;
}

.mock-logo {
  font-size: 16px;
  font-weight: bold;
}

.mock-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mock-nav span {
  font-size: 11px;
}

.mock-hero {
  padding: 24px 16px;
  text-align: center;
  background: #e7f3f3;
}

.mock-hero h1 {
  font-size: 18px;
  color: #1b6e6e;
  margin: 0 0 8px;
}

.mock-hero p {
  font-size: 12px;
  margin: 0 0 14px;
}

.mock-button {
  display: inline-block;
  background: #b8720a;
  color: #ffffff;
  padding: 8px 18px;
  font-size: 12px;
  border-radius: 4px;
}

.mock-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}

.mock-card {
  flex: 1 1 220px;
}

.mock-image {
  width: 100%;
  height: 70px;
  background: #cccccc;
  border-radius: 4px;
  margin-bottom: 8px;
}

.mock-card h2 {
  font-size: 13px;
  margin: 0 0 4px;
  color: #1f3864;
}

.mock-card p {
  font-size: 11px;
  color: #444;
  margin: 0;
}

.mock-footer {
  padding: 12px 16px;
  background: #f2f2f2;
  font-size: 10px;
  color: #666;
  text-align: center;
}

/* --- Code panel --- */

.code-column {
  flex: 1 1 320px;
  min-width: 280px;
}

.code-column h2 {
  font-size: 1.1em;
  color: #1f3864;
}

.code-column pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 16px 18px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.6;
}

.code-column code {
  font-family: "Courier New", monospace;
}

.code-column .highlight {
  background: #2d4a2d;
  color: #9fe89f;
  display: inline-block;
  width: 100%;
}