:root{
  /* Colour tokens — PDFCustard's palette (the one token category allowed to vary per TeachSmarts app) */
  --primary-color:#d89d11;      /* PDFCustard's custard gold, matches the desktop app's --yellow-dark */
  --primary-hover:#b8850e;      /* ~15% darker than primary */
  --secondary-color:#95a5a6;
  --secondary-hover:#7f8c8d;
  --success-color:#34A853;
  --success-hover:#2e8a4a;
  --danger-color:#e74c3c;
  --danger-hover:#c0392b;
  --text-dark:#2c3e50;
  --text-light:#34495e;
  --text-muted:#8b929a;
  --input-bg:#ecf0f1;
  --container-bg-color:#ffffff;
  --main-bg-color:#f0f2f5;
  --gradient-start:#fbf3e0;     /* light tint of primary */
  --gradient-end:#fdfefe;
  --border-soft:#d5deec;
  --border-input:#ccc;
  --font-sans:'Google Sans','Roboto Flex','Inter','Roboto','Segoe UI',sans-serif;

  /* Structural tokens — fixed across every TeachSmarts app */
  --radius-input:8px;
  --radius-button:8px;
  --radius-card:16px;
  --radius-modal:18px;
  --radius-pill:999px;

  --space-xs:6px;
  --space-sm:10px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;

  --control-height:44px;
  --width-app-max:960px;
  --width-wizard-max:900px;
  --width-landing-max:1320px;
  --width-legal-max:860px;

  --shadow-card:0 12px 36px rgba(0,0,0,.08);
  --shadow-card-soft:0 4px 20px rgba(0,0,0,.06);
  --shadow-hover-lift:0 6px 14px rgba(0,0,0,.08);
  --shadow-modal:0 28px 80px rgba(15,23,42,.28);

  --font-size-page-title:2rem;
  --font-size-section:1.5rem;
  --font-size-card-title:1.125rem;
  --font-size-body:1rem;
  --font-size-control:1em;
  --font-size-helper:0.875rem;

  --transition-fast:0.2s ease;
  --transition-lift:0.15s ease;

  --z-dropdown:10;
  --z-sticky-nav:100;
  --z-modal:9999;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text-dark);
  background:linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  min-height:100vh;
}
a{color:var(--primary-color);}
img{max-width:100%;}

/* Header */
.landing-header{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--width-landing-max); margin:0 auto; padding:24px 40px;
}
.landing-brand{ display:flex; align-items:center; gap:10px; font-size:1.125rem; letter-spacing:-.2px; color:var(--text-dark); text-decoration:none; }
.landing-brand img{ width:40px; height:40px; object-fit:contain; display:block; }
.landing-brand b{ font-weight:700; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--control-height);
  padding:15px 30px;
  border:none; border-radius:var(--radius-button);
  font-size:var(--font-size-control); font-weight:bold;
  font-family:var(--font-sans);
  cursor:pointer; text-decoration:none;
  transition:background-color var(--transition-fast);
}
/* Primary buttons keep dark text rather than the family-default white: PDFCustard's brand
   colour is a light gold, and white text on it falls well under WCAG AA contrast (~2.4:1). */
.btn-primary{ background:var(--primary-color); color:var(--text-dark); }
.btn-primary:hover{ background:var(--primary-hover); }
.btn-secondary{ background:var(--secondary-color); color:#fff; }
.btn-secondary:hover{ background:var(--secondary-hover); }
.btn-outline{ background:transparent; color:var(--text-dark); border:2px solid var(--border-soft); }
.btn-outline:hover{ background:var(--input-bg); }

/* Landing layout */
.landing-container{
  max-width:var(--width-landing-max); margin:0 auto; padding:40px;
  display:flex; align-items:center; gap:50px; flex-wrap:wrap;
}
.landing-left{ flex:1 1 480px; display:flex; flex-direction:column; align-items:center; padding-right:40px; text-align:center; }
.landing-right{ flex:1 1 480px; display:flex; flex-direction:column; align-items:flex-start; padding-left:40px; gap:var(--space-md); }

.landing-logo{ width:350px; height:350px; object-fit:contain; max-width:100%; }
.landing-title{ font-size:1.5rem; font-weight:700; margin:var(--space-md) 0 var(--space-xs); }
/* align-items:center on .landing-left sizes flex-item children to their max-content (shrink-to-fit)
   width by default, which stops wrapping text dead and overflows the column — width:100% forces
   these children back to the container's actual width so text-align/justify-content can center
   their contents without the box itself refusing to shrink. */
.landing-headline{ width:100%; font:700 38px/1.15 Georgia, serif; letter-spacing:-1px; margin:0 0 var(--space-sm); color:var(--text-dark); }
.landing-subhead{ width:100%; font-size:1.1rem; color:var(--text-light); margin:0 auto var(--space-lg); max-width:480px; }
.landing-cta-row{ width:100%; display:flex; gap:var(--space-sm); flex-wrap:wrap; justify-content:center; }
.landing-note{ width:100%; margin-top:var(--space-md); font-size:var(--font-size-helper); color:var(--text-muted); display:flex; align-items:center; justify-content:center; gap:6px; }

/* Feature boxes */
.feature-box{
  width:100%;
  background:#fff;
  border-radius:var(--radius-input);
  padding:var(--space-md) var(--space-lg);
  box-shadow:var(--shadow-card-soft);
  font-size:1.1rem;
  transition:transform var(--transition-lift), box-shadow var(--transition-lift);
  display:flex; align-items:flex-start; gap:var(--space-md);
}
.feature-box:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover-lift); }
.feature-box .feature-icon{ font-size:1.4rem; line-height:1; flex:0 0 auto; }
.feature-box h3{ margin:0 0 4px; font-size:var(--font-size-card-title); color:var(--text-dark); }
.feature-box p{ margin:0; font-size:var(--font-size-helper); color:var(--text-light); line-height:1.5; }

/* Footer */
.landing-footer{ text-align:center; color:var(--text-muted); font-size:0.75rem; padding:16px 40px 24px; }
.landing-footer a{ color:var(--text-muted); text-decoration:underline; margin:0 6px; }
.landing-footer .dot{ margin:0 2px; }

@media (max-width:768px){
  .landing-header{ padding:20px; }
  .landing-container{ padding:20px; gap:32px; }
  .landing-left,.landing-right{ padding:0; flex-basis:100%; }
  .landing-logo{ width:220px; height:220px; }
  .landing-headline{ font-size:28px; }
  .landing-footer{ padding:16px 20px 24px; }
}

/* Legal pages (privacy / terms) */
.legal-header{ display:flex; align-items:center; justify-content:space-between; padding:24px 40px; }
.legal-back{ font-size:0.875rem; color:var(--primary-hover); text-decoration:none; }
.legal-body{
  max-width:var(--width-legal-max); margin:0 auto 40px; background:#fff;
  border-radius:var(--radius-card); box-shadow:var(--shadow-card-soft);
  padding:40px 44px 48px;
}
.legal-body h1{ font-size:2rem; margin:0 0 var(--space-md); }
.legal-body h2{ font-size:1.25rem; margin:var(--space-xl) 0 var(--space-sm); }
.legal-body h3{ font-size:1.05rem; margin:var(--space-lg) 0 var(--space-xs); }
.legal-body p, .legal-body li{ font-size:1rem; line-height:1.6; color:var(--text-light); }
.legal-body .legal-updated{ font-size:var(--font-size-helper); color:var(--text-muted); }
.legal-footer{ text-align:center; font-size:var(--font-size-helper); }
.legal-footer a{ color:var(--primary-hover); }

@media (max-width:640px){
  .legal-header{ padding:20px; }
  .legal-body{ margin:0 16px 40px; padding:28px 22px 32px; }
}

/* Licence download and activation page */
.licence-body{
  max-width:1080px; margin:0 auto 40px; background:#fff;
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:40px 44px 48px;
}
.licence-hero{ display:flex; align-items:center; gap:24px; margin-bottom:36px; }
.licence-logo{ width:112px; height:112px; object-fit:contain; flex:0 0 auto; }
.licence-eyebrow{ margin:0 0 6px; color:var(--primary-hover); font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; }
.licence-hero h1{ margin:0 0 8px; font:700 38px/1.15 Georgia,serif; letter-spacing:-1px; }
.licence-hero p:last-child{ margin:0; max-width:700px; color:var(--text-light); line-height:1.55; }
.licence-body h2{ margin:30px 0 16px; font-size:1.35rem; }
.download-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.download-card{ border:1px solid var(--border-soft); border-radius:var(--radius-card); padding:22px; display:flex; flex-direction:column; align-items:flex-start; }
.download-platform{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:var(--gradient-start); color:var(--primary-hover); font-size:1.35rem; }
.download-card h3{ margin:14px 0 5px; font-size:1.05rem; }
.download-card p{ margin:0 0 18px; color:var(--text-light); line-height:1.45; font-size:.9rem; flex:1; }
.download-button{ width:100%; padding:12px 14px; text-align:center; }
.download-button.is-unavailable{ opacity:.55; cursor:not-allowed; pointer-events:none; }
.download-status{ margin:12px 0 0; color:var(--text-muted); font-size:.875rem; }
.security-notice{ margin-top:32px; padding:24px; border:1px solid #e4c56e; border-radius:var(--radius-card); background:#fffaf0; }
.security-notice h2{ margin-top:0; }
.security-notice > p{ color:var(--text-light); line-height:1.55; }
.warning-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; }
.warning-card{ background:#fff; border:1px solid #eadba9; border-radius:var(--radius-input); padding:18px; }
.warning-card h3{ margin:0 0 8px; }
.warning-card p,.warning-card li{ color:var(--text-light); line-height:1.5; font-size:.92rem; }
.warning-card ol{ margin:8px 0 12px; padding-left:22px; }
.warning-footnote{ margin-bottom:0; }
.official-guidance{ margin-bottom:0; font-size:.86rem; }
.activation-section{ border-top:1px solid var(--border-soft); margin-top:32px; padding-top:1px; }
.activation-steps{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:activation; }
.activation-steps li{ counter-increment:activation; display:grid; grid-template-columns:42px 1fr; column-gap:12px; align-items:start; }
.activation-steps li::before{ content:counter(activation); grid-row:1 / span 2; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--primary-color); color:var(--text-dark); font-weight:700; }
.activation-steps strong{ margin-top:1px; }
.activation-steps span{ color:var(--text-light); line-height:1.5; }
.licence-help{ margin-top:24px; border-left:4px solid var(--primary-color); background:var(--gradient-start); padding:16px 18px; line-height:1.55; color:var(--text-light); }

@media (max-width:780px){
  .licence-body{ margin:0 16px 32px; padding:28px 22px 32px; }
  .licence-hero{ align-items:flex-start; }
  .licence-logo{ width:82px; height:82px; }
  .licence-hero h1{ font-size:29px; }
  .download-grid{ grid-template-columns:1fr; }
  .warning-grid{ grid-template-columns:1fr; }
}

@media (max-width:480px){
  .licence-hero{ display:block; }
  .licence-logo{ margin-bottom:12px; }
}