/* ============================================================
   RoomClearStage — shared stylesheet
   Extends the Showhome Studio design language: paper/ink/green,
   Bricolage Grotesque headings, IBM Plex body and mono labels.
   ============================================================ */

:root{
  --paper:#EAEBE5;
  --paper-2:#F4F5F0;
  --ink:#171A16;
  --graphite:#6B7168;
  --line:#C9CCC2;
  --green:#2E4A38;
  --green-bright:#3F6B4F;
  --amber:#9C6F1E;
  --radius:3px;
  --measure:34rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

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

h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-bright)}

img{max-width:100%;height:auto}

.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--graphite);
  margin:0 0 1.1rem;
}

.wrap{
  width:100%;
  max-width:60rem;
  margin:0 auto;
  padding:0 1.5rem;
}
.wrap-narrow{max-width:44rem}

/* skip link — keyboard users shouldn't tab the nav on every page */
.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--green);
  color:var(--paper-2);
  padding:.7rem 1rem;
  z-index:10;
}
.skip:focus{left:0}

/* ---------- masthead + nav ---------- */
.masthead{
  border-bottom:1px solid var(--line);
  padding:1.1rem 0;
  background:var(--paper);
}
.masthead .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.wordmark{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.wordmark:hover{color:var(--green)}
.wordmark span{color:var(--green)}

.nav{
  display:flex;
  gap:1.35rem;
  flex-wrap:wrap;
  align-items:center;
  font-size:.88rem;
}
.nav a{
  color:var(--graphite);
  text-decoration:none;
  padding:.15rem 0;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--line)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--green)}
.nav .nav-cta{
  color:var(--green);
  font-weight:600;
  border:1px solid var(--green);
  border-radius:var(--radius);
  padding:.35rem .8rem;
}
.nav .nav-cta:hover{background:var(--green);color:var(--paper-2);border-color:var(--green)}

/* ---------- breadcrumbs ---------- */
.crumbs{
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--graphite);
  padding:1.2rem 0 0;
}
.crumbs a{color:var(--graphite)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 .45rem;opacity:.6}

/* ---------- hero ---------- */
.hero{padding:3.2rem 0 0}
.hero h1{font-size:clamp(2.1rem,5.8vw,3.7rem)}
.hero-lede{
  max-width:var(--measure);
  margin-top:1.4rem;
  font-size:1.06rem;
  color:#31362F;
}
.hero-actions{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  margin-top:1.8rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font:inherit;
  font-weight:600;
  font-size:.95rem;
  border-radius:var(--radius);
  padding:.75rem 1.3rem;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.btn-primary{
  color:var(--paper-2);
  background:var(--green);
  border:1px solid var(--green);
}
.btn-primary:hover{background:var(--green-bright);border-color:var(--green-bright);color:var(--paper-2)}
.btn-ghost{
  color:var(--green);
  background:transparent;
  border:1px solid var(--line);
}
.btn-ghost:hover{border-color:var(--green);background:var(--paper-2)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- sections ---------- */
.section{padding:4rem 0 0}
.section-tight{padding:2.6rem 0 0}
.section h2{font-size:clamp(1.6rem,3.8vw,2.3rem);margin-bottom:1rem}
.section h3{font-size:1.12rem;margin:2rem 0 .5rem}
.prose{max-width:var(--measure)}
.prose h3{margin-top:2.2rem}
.prose ul,.prose ol{max-width:var(--measure);padding-left:1.2rem;margin:0 0 1rem}
.prose li{margin-bottom:.5rem}

.rule{border:0;border-top:1px solid var(--line);margin:4rem 0 0}

/* ---------- before / after slider ---------- */
.ba{margin:2.6rem 0 0}
.ba-frame{
  position:relative;
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:var(--radius);
  overflow:hidden;
  /* reserve space so the page doesn't shift when the images decode */
  aspect-ratio:3 / 2;
}
.ba-layers{position:relative;height:100%}
.ba-layers img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ba-after{
  position:absolute;
  inset:0;
  clip-path:inset(0 50% 0 0);
}
.ba-seam{
  position:absolute;
  top:0;bottom:0;
  left:50%;
  width:1px;
  background:var(--green);
  pointer-events:none;
}
.ba-seam::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:34px;height:34px;
  margin:-17px 0 0 -17px;
  border:1px solid var(--green);
  border-radius:50%;
  background:var(--paper-2);
}
/* The range input IS the control — it sits invisibly over the image, so
   pointer, touch and keyboard all work through one native element. */
.ba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
}
.ba-range:focus-visible{
  opacity:1;
  outline:2px solid var(--green);
  outline-offset:-2px;
}
.ba-tags{
  display:flex;
  justify-content:space-between;
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--graphite);
  padding:.7rem .1rem 0;
}
.ba-caption{
  max-width:var(--measure);
  margin:1rem 0 0;
  font-size:.92rem;
  color:var(--graphite);
}
/* Placeholder styling until real photographs are dropped in. */
.ba-placeholder{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  height:100%;
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--graphite);
  text-align:center;
  padding:1rem;
}
.ba-ph-a{background:repeating-linear-gradient(45deg,#E2E4DC,#E2E4DC 10px,#DDDFD6 10px,#DDDFD6 20px)}
.ba-ph-b{background:repeating-linear-gradient(45deg,#DDE3DC,#DDE3DC 10px,#D5DCD4 10px,#D5DCD4 20px)}

/* ---------- three-column grid ---------- */
.grid-3{
  margin:2.4rem 0 0;
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(3,1fr);
}
.grid-2{
  margin:2.4rem 0 0;
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(2,1fr);
}
.grid-3 h3,.grid-2 h3{font-size:1rem;margin:0 0 .45rem}
.grid-3 p,.grid-2 p{font-size:.93rem;color:var(--graphite)}

/* ---------- numbered steps ---------- */
.steps{
  margin:2.4rem 0 0;
  counter-reset:step;
  list-style:none;
  padding:0;
  display:grid;
  gap:1.6rem;
}
.steps li{
  counter-increment:step;
  padding-left:3rem;
  position:relative;
  max-width:var(--measure);
}
.steps li::before{
  content:counter(step);
  position:absolute;
  left:0;top:0;
  width:2rem;height:2rem;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  font-family:"IBM Plex Mono",monospace;
  font-size:.78rem;
  color:var(--green);
  background:var(--paper-2);
}
.steps h3{font-size:1rem;margin:.15rem 0 .35rem}
.steps p{font-size:.93rem;color:var(--graphite);margin:0}

/* ---------- callout ---------- */
.callout{
  margin:2.4rem 0 0;
  border:1px solid var(--line);
  border-left:2px solid var(--green);
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:1.4rem 1.5rem;
  max-width:var(--measure);
}
.callout h3{font-size:1rem;margin:0 0 .5rem}
.callout p{font-size:.93rem;color:#31362F}

/* ---------- comparison table ---------- */
.table-scroll{overflow-x:auto;margin:2.4rem 0 0}
table{
  border-collapse:collapse;
  width:100%;
  min-width:34rem;
  font-size:.93rem;
}
th,td{
  text-align:left;
  padding:.75rem .9rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
th{
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--graphite);
  font-weight:400;
}
td strong{font-weight:600}

/* ---------- FAQ ---------- */
.faq{margin:2.2rem 0 0;max-width:var(--measure)}
.faq details{
  border-bottom:1px solid var(--line);
  padding:.2rem 0;
}
.faq summary{
  cursor:pointer;
  padding:.9rem 0;
  font-weight:600;
  font-size:.98rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  font-family:"IBM Plex Mono",monospace;
  color:var(--green);
  flex:none;
}
.faq details[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.faq details p{
  font-size:.93rem;
  color:var(--graphite);
  padding:0 0 1rem;
  margin:0 0 .3rem;
}

/* ---------- related links ---------- */
.related{
  margin:2.4rem 0 0;
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(2,1fr);
}
.related a{
  display:block;
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:1.1rem 1.2rem;
  text-decoration:none;
  transition:border-color .15s ease;
}
.related a:hover{border-color:var(--green)}
.related strong{
  display:block;
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:1rem;
  color:var(--ink);
  margin-bottom:.25rem;
}
.related span{font-size:.88rem;color:var(--graphite)}

/* ---------- form ---------- */
.form-section{padding:4.5rem 0 5.5rem}
.card{
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:2.2rem;
  max-width:40rem;
}
.card h2{font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:.7rem}
.card-lede{color:var(--graphite);font-size:.95rem;margin-bottom:2rem}

.field{margin-bottom:1.5rem}
.field:last-of-type{margin-bottom:0}

.field > label,
.legend{
  display:block;
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:.5rem;
}

.hint{
  font-size:.82rem;
  color:var(--graphite);
  margin:.45rem 0 0;
  line-height:1.45;
}
.hint a{color:var(--green)}

input[type=text],
input[type=email],
select,
textarea{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.7rem .8rem;
  transition:border-color .15s ease;
}
textarea{resize:vertical;min-height:5.5rem}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236B7168' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .85rem center;
  padding-right:2.2rem;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--green);
  outline-offset:1px;
  border-color:var(--green);
}

.segmented{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper);
}
.segmented label{
  position:relative;
  text-align:center;
  padding:.7rem .5rem;
  font-size:.9rem;
  cursor:pointer;
  border-left:1px solid var(--line);
  transition:background .15s ease,color .15s ease;
}
.segmented label:first-of-type{border-left:0}
.segmented input{position:absolute;opacity:0;width:1px;height:1px}
.segmented input:checked + span{color:var(--paper-2)}
.segmented label:has(input:checked){background:var(--green);color:var(--paper-2)}
.segmented label:has(input:focus-visible){outline:2px solid var(--green);outline-offset:-2px}

.file-drop{
  border:1px dashed var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  padding:1.4rem;
  text-align:center;
  transition:border-color .15s ease,background .15s ease;
}
.file-drop:hover{border-color:var(--green-bright)}
.file-drop input[type=file]{width:100%;font:inherit;font-size:.9rem;color:var(--graphite)}
.file-drop input[type=file]::file-selector-button{
  font:inherit;
  font-size:.85rem;
  margin-right:.9rem;
  padding:.45rem .9rem;
  border:1px solid var(--green);
  border-radius:var(--radius);
  background:transparent;
  color:var(--green);
  cursor:pointer;
}
.file-drop:has(input:focus-visible){outline:2px solid var(--green);outline-offset:1px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.submit{
  margin-top:2rem;
  width:100%;
  font:inherit;
  font-weight:600;
  font-size:1rem;
  color:var(--paper-2);
  background:var(--green);
  border:1px solid var(--green);
  border-radius:var(--radius);
  padding:.85rem 1.2rem;
  cursor:pointer;
  transition:background .15s ease;
}
.submit:hover:not(:disabled){background:var(--green-bright)}
.submit:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.submit:disabled{opacity:.55;cursor:not-allowed}

.msg{
  margin-top:1rem;
  font-size:.9rem;
  padding:.75rem .9rem;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--paper);
}
.msg[hidden]{display:none}
.msg-error{border-color:#9C3B2B;color:#7E2F22}
.msg-note{border-color:var(--amber);color:var(--amber)}

.done{text-align:left}
.done h2{margin-bottom:.8rem}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--line);
  margin-top:4rem;
  padding:2.4rem 0 3rem;
  font-size:.88rem;
  color:var(--graphite);
}
.foot-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:1.4fr 1fr 1fr;
}
.foot h4{
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--graphite);
  margin:0 0 .8rem;
}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.45rem}
.foot a{color:var(--graphite);text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot-legal{
  margin-top:2.4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .hero{padding-top:2.2rem}
  .masthead .wrap{gap:.9rem}
  .nav{gap:.9rem;font-size:.84rem;width:100%}
  .grid-3,.grid-2,.related{grid-template-columns:1fr;gap:1.6rem}
  .card{padding:1.5rem}
  .segmented{grid-template-columns:1fr}
  .segmented label{border-left:0;border-top:1px solid var(--line)}
  .segmented label:first-of-type{border-top:0}
  .foot-grid{grid-template-columns:1fr;gap:1.6rem}
  .ba-frame{aspect-ratio:4 / 3}
}

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

/* Placeholder labels only. The after-layer is clipped to the left half at
   rest, so a centred label lands exactly on the seam and gets sliced. Push
   each label into the half its own layer actually occupies — base right,
   after left — and keep both above the centred drag handle. Real
   photographs replace these entirely, so none of this applies to them. */
.ba-placeholder{ justify-content:flex-end; padding:2rem 1.75rem 1rem; }
.ba-after .ba-placeholder{ justify-content:flex-start; }