/* PhotoMeasureKit visual system — soft utility styling with restrained lime accents. */
:root {
  --yellow:#cfff18;
  --yellow2:#b7e900;
  --green:#cfff18;
  --ink:#242625;
  --muted:#66706c;
  --paper:#f7f8f7;
  --soft:#eef1ef;
  --line:#dfe4e1;
  --mid:#919894;
  --shadow:0 12px 34px rgba(27,34,31,.08);
}
body {
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
}
body.dark {
  --paper:#151716;
  --soft:#202321;
  --line:#343936;
  --ink:#f4f6f5;
  --muted:#adb5b1;
  --mid:#a1a9a5;
  --shadow:0 12px 34px rgba(0,0,0,.24);
}
.wrap { width:min(1120px,calc(100% - 40px)); }
.site-header {
  height:72px;
  padding:0 max(24px,calc((100% - 1120px)/2));
  background:color-mix(in srgb,var(--paper) 96%,transparent);
  border-color:var(--line);
}
.brand { width:188px; height:54px; display:block; flex:0 0 auto; font-size:0; }
.brand::before {
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:url("../images/photomeasurekit-logo.png") left center/contain no-repeat;
}
.brand > * { display:none !important; }
.site-header nav { gap:24px; }
.site-header nav a,footer nav a { color:var(--muted); font-size:14px; font-weight:700; }
.site-header nav a:hover,footer nav a:hover { color:var(--ink); }
.button,.icon-btn { border-radius:10px; }
.button-dark { background:#292c2a; color:#fff; }
.button-yellow {
  background:var(--green);
  color:#202220;
  padding:14px 20px;
  border:1px solid #afd000;
  box-shadow:0 4px 0 #9fbd00;
}
.button-yellow:hover {
  background:#d8ff3f;
  transform:translateY(-1px);
  box-shadow:0 5px 0 #9fbd00,0 8px 20px rgba(135,168,0,.18);
}
.hero {
  grid-template-columns:1fr 1fr;
  gap:58px;
  padding-top:68px;
  padding-bottom:72px;
}
.eyebrow { background:#fff; border-color:var(--line); box-shadow:0 3px 12px rgba(30,40,35,.04); }
body.dark .eyebrow { background:var(--soft); }
.eyebrow i { background:var(--green); box-shadow:0 0 0 3px rgba(207,255,24,.22); }
.hero h1 {
  max-width:620px;
  margin:22px 0;
  font-size:clamp(44px,5vw,64px);
  line-height:1.04;
  letter-spacing:-2.8px;
}
.hero h1 em::after { height:5px; bottom:-2px; background:var(--green); }
.hero-copy > p { font-size:18px; line-height:1.65; }
.hero-actions { margin:28px 0; }
.trust-row { color:var(--muted); }
.trust-row span::first-letter { color:#7d9900; }
.hero-visual {
  position:relative;
  overflow:hidden;
  margin:0;
  aspect-ratio:3/2;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.theme-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.theme-image-dark { display:none; }
body.dark .theme-image-light { display:none; }
body.dark .theme-image-dark { display:block; }
body.dark .hero-visual { background:#222522; }
.demo-toolbar,.demo-status { color:var(--ink); }
.demo-toolbar small,.demo-status b { color:var(--muted); }
.demo-toolbar > span { background:#d6dbd8; }
.demo-toolbar > span:first-child { background:var(--green); }
.demo-scene { height:365px; border-radius:12px; }
.measure::before { color:var(--green); }
.measure b,.callout { background:var(--green); }
.ad-slot {
  height:88px;
  margin-bottom:88px;
  background:#fff;
  border-color:var(--line);
  border-radius:12px;
}
body.dark .ad-slot { background:var(--soft); }
.tools-section { padding-bottom:90px; }
.section-heading { margin-bottom:30px; }
.section-heading h2,.steps-section h2,.accuracy h2,.pro-card h2 {
  font-size:clamp(31px,3.5vw,44px);
  line-height:1.12;
  letter-spacing:-1.5px;
}
.kicker { color:#758d00; }
.tool-grid { gap:18px; }
.tool-card {
  min-height:245px;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  box-shadow:0 4px 18px rgba(25,34,30,.035);
  overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body.dark .tool-card { background:var(--soft); }
.tool-card:hover {
  transform:translateY(-5px);
  border-color:#afd000;
  box-shadow:0 0 0 2px rgba(207,255,24,.22),0 16px 34px rgba(91,116,0,.16);
}
.tool-card.featured { background:#fff; border:1px solid var(--line); }
body.dark .tool-card.featured { background:var(--soft); }
.tool-card.active-tool { border-color:var(--line); }
.tool-icon {
  width:46px;
  height:46px;
  border:0;
  border-radius:12px;
  background:#edffab;
  box-shadow:none;
  color:#333733;
}
.tool-card h3 { margin:22px 0 9px; font-size:20px; }
.featured p { color:var(--muted); }
.tool-card b {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  margin-top:auto;
  padding:9px 13px;
  border-radius:9px;
  background:#292c2a;
  color:#fff;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.tool-card:hover b {
  background:var(--green);
  color:#202220;
  box-shadow:0 3px 0 #9fbd00;
}
.grid-feature,.grid-ad {
  min-height:245px;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 4px 18px rgba(25,34,30,.035);
}
body.dark .grid-feature,body.dark .grid-ad { background:var(--soft); }
.grid-feature { position:relative; }
.grid-feature .theme-image { object-fit:cover; }
.grid-feature figcaption {
  position:absolute;
  left:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  max-width:calc(100% - 32px);
  padding:10px 13px;
  border-left:4px solid var(--green);
  border-radius:6px;
  background:rgba(36,38,37,.92);
  color:#fff;
  line-height:1.2;
  box-shadow:0 7px 20px rgba(0,0,0,.18);
}
.grid-feature figcaption span { font-size:11px; text-transform:uppercase; letter-spacing:.7px; }
.grid-feature figcaption strong { font-size:17px; }
.grid-ad {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  border-style:dashed;
  color:var(--muted);
  text-align:center;
}
.grid-ad span { font-size:10px; font-weight:800; letter-spacing:1.8px; }
.grid-ad p { margin:7px 0 0; font-size:13px; }
.steps-section { padding:78px 0; background:#292c2a; }
.steps { margin-top:38px; gap:30px; }
.steps article {
  padding:24px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.steps article b { background:var(--green); color:#232523; border-radius:8px; }
.accuracy { gap:64px; padding-top:90px; padding-bottom:90px; }
.accuracy-visual {
  position:relative;
  overflow:hidden;
  margin:0;
  aspect-ratio:3/2;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--soft);
  box-shadow:var(--shadow);
}
.accuracy-visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.accuracy-visual figcaption {
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  width:max-content;
  max-width:calc(100% - 36px);
  padding:9px 13px;
  border-left:4px solid var(--green);
  border-radius:5px;
  background:rgba(32,37,33,.92);
  color:#fff;
  font-size:12px;
  font-weight:850;
  letter-spacing:.35px;
  text-transform:uppercase;
}
.ruler-art {
  height:320px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
}
body.dark .ruler-art { background:var(--soft); }
.angle-scale { border-color:#555b58; background:conic-gradient(from 270deg at 50% 100%,#d9ff49 0 14%,#d9dddb 14% 38%,#555b58 38% 57%,#f2f4f3 57% 100%); }
.angle-scale::before,.angle-scale i { opacity:.55; }
.straight-scale { border-color:#555b58; }
.pro-section { padding:80px 0; background:#eef1ef; }
body.dark .pro-section { background:#1b1e1c; }
.pro-card {
  padding:46px;
  background:#292c2a;
  color:#fff;
  border:0;
  border-radius:18px;
  box-shadow:var(--shadow);
}
.pro-card .kicker { color:var(--green); }
.pro-card p { color:#cbd0cd; }
.pro-note { color:#bfc6c2; }
footer { background:#fff; }
body.dark footer { background:#111312; }

/* Trust, legal and support pages */
.content-page { max-width:960px; padding-top:72px; padding-bottom:100px; }
.breadcrumbs { display:flex; align-items:center; gap:9px; padding-top:18px; color:var(--muted); font-size:14px; line-height:1.4; }
.breadcrumbs a { color:var(--muted); text-decoration:none; }
.breadcrumbs a:hover,.breadcrumbs a:focus-visible { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.breadcrumbs span[aria-current="page"] { color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-hero { max-width:850px; margin-bottom:38px; }
.page-hero h1 {
  margin:10px 0 18px;
  font-size:clamp(38px,5.2vw,62px);
  line-height:1.04;
  letter-spacing:-2.4px;
}
.page-hero .lede { max-width:820px; margin:0; color:var(--muted); font-size:19px; line-height:1.65; }
.updated { margin-top:18px; color:var(--mid); font-size:13px; font-weight:700; }
.answer-box,.principles-card,.contact-card,.safety-notice,.legal-toc {
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
}
body.dark .answer-box,body.dark .principles-card,body.dark .contact-card,body.dark .safety-notice,body.dark .legal-toc { background:var(--soft); }
.answer-box { margin:0 0 48px; padding:30px 34px; border-left:6px solid var(--green); }
.answer-box h2 { margin:0 0 8px; font-size:25px; }
.answer-box p { margin:0; color:var(--muted); font-size:17px; }
.content-columns { display:grid; grid-template-columns:1.35fr .65fr; gap:42px; align-items:start; }
.content-columns h2,.page-section h2,.legal-copy h2 { margin:32px 0 10px; font-size:25px; line-height:1.2; letter-spacing:-.5px; }
.content-columns article h2:first-child,.legal-copy section:first-child h2 { margin-top:0; }
.content-columns p,.page-section p,.legal-copy p,.legal-copy li { color:var(--muted); }
.principles-card { position:sticky; top:96px; padding:28px; }
.check-list { margin:18px 0 0; padding:0; list-style:none; }
.check-list li { position:relative; padding:9px 0 9px 27px; border-bottom:1px solid var(--line); }
.check-list li:last-child { border-bottom:0; }
.check-list li::before { content:"✓"; position:absolute; left:0; color:#789500; font-weight:900; }
.page-section { margin-top:58px; }
.faq details { border:1px solid var(--line); border-radius:12px; background:#fff; margin:10px 0; padding:0 20px; }
body.dark .faq details { background:var(--soft); }
.faq summary { padding:18px 0; cursor:pointer; font-weight:800; }
.faq details p { margin:0; padding:0 0 19px; }
.page-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:54px; padding-top:26px; border-top:1px solid var(--line); }
.page-links a { padding:10px 13px; border-radius:8px; background:var(--soft); color:var(--ink); text-decoration:none; font-weight:800; }
.page-links a:hover { background:var(--green); color:#202220; }
.legal-toc { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:46px; padding:18px 22px; }
.legal-toc strong { margin-right:4px; }
.legal-toc a { color:var(--muted); font-size:14px; font-weight:700; }
.legal-copy { max-width:820px; }
.legal-copy section { padding:0 0 25px; scroll-margin-top:95px; }
.legal-copy ul { padding-left:22px; }
.legal-copy li { margin:9px 0; }
.legal-copy a,.content-page a:not(.button) { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
.safety-notice { margin:0 0 46px; padding:24px 28px; border-left:6px solid var(--green); }
.safety-notice strong { font-size:18px; }
.safety-notice p { margin:5px 0 0; color:var(--muted); }
.contact-card { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:52px; padding:32px; }
.contact-card h2 { margin:7px 0; font-size:clamp(22px,3vw,34px); }
.contact-card h2 a { text-decoration:none; }
.contact-card p { margin:0; color:var(--muted); }
.contact-guidance { margin-top:18px; }
.contact-guidance .principles-card { position:static; }

@media(max-width:760px){
  .content-page { padding-top:48px; }
  .content-columns { grid-template-columns:1fr; gap:24px; }
  .principles-card { position:static; }
  .contact-card { align-items:flex-start; flex-direction:column; }
  .legal-toc { align-items:flex-start; flex-direction:column; }
}
.privacy-chip { color:#465500; background:#efffb5; }
.editor-shell { border-color:var(--line); border-radius:16px; box-shadow:var(--shadow); }
.tool-intro h1 { font-size:clamp(38px,4.4vw,54px); line-height:1.05; letter-spacing:-2px; }
.limit-card { border-left-color:var(--green); background:#fff; }
body.dark .limit-card { background:var(--soft); }
.tool-rail { background:#292c2a; }
.tool-rail button.active { background:var(--green); }
.top-actions .download { background:var(--green); border-color:#b6d700; }
.content-grid aside { background:#f1f5e8; border:1px solid #d9e3c3; }
body.dark .content-grid aside { background:#222820; border-color:#3d4637; }
@media(max-width:900px) {
  .brand { width:165px; }
  .hero {
    grid-template-columns:1fr;
    gap:36px;
    align-items:start;
  }
  .hero-visual {
    width:100%;
    max-width:680px;
    justify-self:center;
  }
  .ruler-art { max-width:560px; }
}
@media(max-width:600px) {
  .wrap { width:min(100% - 24px,1120px); }
  .site-header { height:64px; }
  .brand { width:145px; height:48px; }
  .hero { gap:30px; padding-top:36px; padding-bottom:55px; }
  .hero h1 { font-size:43px; letter-spacing:-2px; }
  .hero-copy > p { font-size:17px; }
  .hero-visual { border-radius:14px; }
  .demo-scene { height:290px; }
  .tool-card { min-height:215px; }
  .pro-card { padding:30px 24px; }
}

@media print {
  .print-brand {
    display:flex !important;
    align-items:flex-end;
    height:66px;
    margin:0 0 22px;
    padding-bottom:8px;
    border-bottom:2px solid #cfff18;
  }
  .print-brand img { width:225px; height:56px; object-fit:contain; object-position:left center; }
  .print-brand strong { margin:0 0 7px 2px; color:#222824; font:800 17px Arial,Helvetica,sans-serif; }
}

.print-brand { display:none; }

.related-tools { padding-top:30px; padding-bottom:70px; }
.related-tools h2 { margin:6px 0 20px; font-size:clamp(28px,3vw,38px); }
.related-tools > div { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.related-tools a { display:flex; flex-direction:column; min-height:115px; padding:20px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-decoration:none; font-weight:800; transition:.2s ease; }
body.dark .related-tools a { background:var(--soft); }
.related-tools a span { margin-top:auto; color:#647700; font-size:12px; }
.related-tools a:hover { transform:translateY(-3px); border-color:#afd000; box-shadow:0 0 0 2px rgba(207,255,24,.2),0 12px 28px rgba(91,116,0,.12); }
@media(max-width:700px) { .related-tools > div { grid-template-columns:1fr; } }