:root{
  --cream:#FAF5EE;--paper:#FFFDF9;--espresso:#302D2B;--muted:#625B57;--blue:#748A9C;--blue-dark:#566E81;--blue-soft:#E5EBEF;--tan:#C5A58D;--blush:#EED8D3;--line:#DED4CA;--white:#fff;
  --light-preview:#FFFFFF;--dark-preview:#000000;--primary-button:#302D2B;--primary-button-text:#fff;--secondary-button:#fff;--secondary-button-text:#302D2B;--footer-bg:#302D2B;--footer-text:#F6F0E9;
  --heading-font:Georgia,'Times New Roman',serif;--body-font:Arial,Helvetica,sans-serif;--base-line-height:1.5;--content-width:1200px;--desktop-side-pad:32px;--mobile-side-pad:24px;--utility-height:31px;--header-height:96px;--hero-top:67px;--hero-bottom:31px;--builder-top:24px;--builder-bottom:42px;--builder-gap:24px;--radius:26px;--border-width:1px;--card-pad:28px;--preview-card-pad:24px;--choice-radius:17px;--button-radius:999px;--dialog-radius:25px;--preview-radius:21px;--preview-height:430px;--preview-pad-y:50px;--preview-pad-x:36px;--first-size:104px;--middle-size:82px;--name-gap:-6px;--first-shift-x:0px;--first-shift-y:0px;--middle-shift-x:0px;--middle-shift-y:0px;--hero-desktop-size:76px;--hero-mobile-size:43px;--body-size:17px;--logo-width:260px;--logo-max-height:74px;--logo-y:0px;--decor-scale:1;--shadow:0 18px 55px rgba(48,45,43,.09)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--espresso);font-family:var(--body-font);line-height:var(--base-line-height)}button,input{font:inherit}button{cursor:pointer}.wrap{width:min(var(--content-width),calc(100% - var(--desktop-side-pad)));margin-inline:auto}
.utility-strip{background:var(--blue);color:#fff}.utility-inner{min-height:var(--utility-height);display:flex;align-items:center;justify-content:center;gap:12px;font-size:10px;font-weight:800;letter-spacing:.14em}.utility-dot{opacity:.55}
.site-header{background:rgba(255,253,249,.98);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:15}.header-inner{min-height:var(--header-height);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}.header-side{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--blue)}.header-side-right{text-align:right}.brand{text-align:center;line-height:1;text-decoration:none;color:var(--espresso);min-width:220px}.brand-small{display:block;font-size:9px;font-weight:800;letter-spacing:.28em;margin-bottom:5px}.brand-main{display:block;font-family:var(--heading-font);font-size:30px;letter-spacing:-.015em}.brand-co{margin-top:6px;margin-bottom:0}
.hero{padding:var(--hero-top) 0 var(--hero-bottom)}.eyebrow{margin:0 0 12px;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.18em}.hero h1,.picker-head h2,.section-kicker{font-family:var(--heading-font);font-weight:400}.hero h1{font-size:clamp(46px,7vw,var(--hero-desktop-size));line-height:.96;letter-spacing:-.035em;margin:0;max-width:820px}.hero h1 em{font-weight:400;color:var(--blue)}.hero-copy{font-size:var(--body-size);color:var(--muted);max-width:790px;margin:24px 0 0}
.builder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--builder-gap);align-items:start;padding:var(--builder-top) 0 var(--builder-bottom)}.card{background:var(--paper);border:var(--border-width) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.controls-card{padding:var(--card-pad)}.control-section+.control-section{border-top:1px solid var(--line);margin-top:28px;padding-top:28px}.section-kicker{display:flex;align-items:center;gap:11px;font-size:24px;margin-bottom:19px}.section-kicker span{width:34px;height:34px;border-radius:50%;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center;font-family:Arial,sans-serif;font-size:10px;font-weight:800}.field-label{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--muted);margin-bottom:5px}.name-input{width:100%;border:0;border-bottom:2px solid var(--espresso);background:transparent;font-family:var(--heading-font);color:var(--espresso);font-size:35px;padding:4px 0 8px;outline:none}.name-input:focus{border-color:var(--blue)}.field-help{margin:7px 0 0;font-size:10px;color:var(--muted)}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.choice-button{min-height:104px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:var(--choice-radius);padding:13px 14px;display:flex;flex-direction:column;justify-content:space-between;color:var(--espresso);transition:border-color .15s,transform .15s}.choice-label{font-size:8px;font-weight:800;letter-spacing:.13em;color:var(--muted)}.choice-value{display:flex;align-items:center;gap:9px;min-width:0}.choice-value strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.choice-action{font-size:9px;font-weight:800;color:var(--blue)}.color-dot{width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex:0 0 auto}.small-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:27px}.soft-button,.text-button{min-height:42px;border-radius:var(--button-radius);padding:0 15px;font-size:10px;font-weight:800}.soft-button{background:var(--blue-soft);border:1px solid transparent;color:var(--blue-dark)}.text-button{border:0;background:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.preview-card{padding:var(--preview-card-pad);position:sticky;top:114px}.preview-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.preview-label{margin:0;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.16em}.preview-help{margin:4px 0 0;color:var(--muted);font-size:10px}.background-note{margin:-4px 0 11px;color:var(--muted);font-size:9px;line-height:1.45;text-align:right}.background-toggle{display:flex;gap:4px;border:1px solid var(--line);background:#fff;border-radius:var(--button-radius);padding:3px}.bg-btn{border:0;background:transparent;color:var(--muted);border-radius:var(--button-radius);padding:7px 10px;font-size:9px;font-weight:800;min-height:33px}.bg-btn.active{background:var(--espresso);color:#fff}.preview-stage{min-height:var(--preview-height);border-radius:var(--preview-radius);border:1px solid #ECE2D8;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--preview-pad-y) var(--preview-pad-x);isolation:isolate;transition:background .18s,border-color .18s}.preview-stage.bg-cream{background:var(--light-preview)}.preview-stage.bg-contrast{background:var(--contrast-preview);border-color:var(--contrast-preview)}.preview-stage.bg-dark{background:var(--dark-preview);border-color:var(--dark-preview)}.stage-decoration{position:absolute;border-radius:50%;z-index:-2;pointer-events:none}.stage-decoration-one{width:calc(330px * var(--decor-scale));height:calc(330px * var(--decor-scale));background:rgba(197,165,141,.34);right:-84px;top:-104px}.stage-decoration-two{width:calc(175px * var(--decor-scale));height:calc(175px * var(--decor-scale));background:rgba(116,138,156,.14);left:-48px;bottom:-58px}.stage-guides{position:absolute;inset:12%;border:1px dashed rgba(116,138,156,.24);border-radius:15px;z-index:-1}.preview-first,.preview-middle{max-width:94%;text-align:center;white-space:nowrap;line-height:1.03;position:relative;user-select:none;-webkit-user-select:none}.preview-first{font-size:var(--first-size);z-index:2;transform:translate(calc(var(--first-shift-x) + var(--customer-first-x,0px)),calc(var(--first-shift-y) + var(--customer-first-y,0px)))}.preview-middle{font-size:var(--middle-size);margin-top:var(--name-gap);letter-spacing:.01em;z-index:1;transform:translate(calc(var(--middle-shift-x) + var(--customer-middle-x,0px)),calc(var(--middle-shift-y) + var(--customer-middle-y,0px)))}.placement-draggable{cursor:grab;touch-action:none}.placement-draggable:active{cursor:grabbing}.placement-panel{margin-top:13px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px}.placement-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.placement-label{margin:0;color:var(--blue);font-size:9px;font-weight:800;letter-spacing:.13em}.placement-help{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.placement-reset{border:1px solid var(--line);background:#fff;color:var(--blue-dark);border-radius:var(--button-radius);min-height:36px;padding:0 12px;font-size:9px;font-weight:800;white-space:nowrap}.placement-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.placement-group{background:var(--cream);border-radius:13px;padding:11px}.placement-group strong{display:block;font-size:10px;margin-bottom:8px}.placement-arrows{display:flex;gap:7px;flex-wrap:wrap}.placement-arrow{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:50%;color:var(--espresso);font-size:16px;font-weight:800}.placement-arrow:hover{border-color:var(--blue);color:var(--blue-dark)}.placement-note{margin:9px 1px 0;color:var(--muted);font-size:9px;line-height:1.45}.sizing-panel{margin-top:14px;border:1px solid var(--line);border-radius:17px;background:#fff;padding:14px}.sizing-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.sizing-group{border:1px solid var(--line);border-radius:14px;padding:11px 12px}.sizing-group>strong{display:block;font-size:10px;margin-bottom:8px}.size-stepper{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px}.size-button{height:38px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--espresso);font-size:20px;font-weight:700;line-height:1}.size-button:disabled{opacity:.32;cursor:not-allowed}.size-value{display:grid;place-items:center;min-height:38px;border-radius:12px;background:var(--blue-soft);color:var(--blue-dark);font-size:12px;font-weight:800}.size-button:focus-visible{outline:3px solid rgba(116,138,156,.35);outline-offset:2px}
.selection-summary{margin-top:13px;border:1px solid var(--line);border-radius:16px;background:#fff;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.selection-summary>div{padding:13px 15px}.selection-summary>div+div{border-left:1px solid var(--line)}.selection-summary span{display:block;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.selection-summary strong{display:block;font-size:11px;margin-top:4px}.main-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.primary-button,.secondary-button{border-radius:var(--button-radius);min-height:44px;padding:0 18px;font-size:10px;font-weight:800;letter-spacing:.03em}.primary-button{background:var(--primary-button);color:var(--primary-button-text);border:1px solid var(--primary-button)}.secondary-button{background:var(--secondary-button);color:var(--secondary-button-text);border:1px solid var(--secondary-button-text)}.screen-note{color:var(--muted);font-size:10px;margin:12px 2px 0}
.how-it-works{padding:5px 0 50px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.how-it-works>div{padding:25px 28px 0;display:grid;grid-template-columns:34px 1fr;column-gap:11px;align-items:start}.how-it-works>div+div{border-left:1px solid var(--line)}.how-it-works span{grid-row:1/3;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue-dark);font-weight:800;font-size:10px}.how-it-works strong{font-size:13px}.how-it-works small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.notice{padding:0 0 68px}.notice p{margin:0;background:rgba(116,138,156,.09);border:1px solid rgba(116,138,156,.18);border-radius:18px;padding:16px 18px;color:var(--muted);font-size:11px}.notice strong{color:var(--espresso)}
.footer{background:var(--footer-bg);color:var(--footer-text);padding:34px 0}.footer-inner{display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:11px}.footer p{margin:0}.footer-brand{font-family:var(--heading-font);font-size:21px}.footer-inner p:last-child{color:#D6CEC7;text-align:right}
.picker-dialog{width:min(920px,calc(100% - 28px));max-height:min(780px,calc(100% - 28px));padding:0;border:0;border-radius:var(--dialog-radius);background:var(--paper);color:var(--espresso);box-shadow:0 25px 80px rgba(0,0,0,.18)}.picker-dialog::backdrop{background:rgba(48,45,43,.55);backdrop-filter:blur(2px)}.picker-shell{padding:23px;overflow:auto;max-height:min(780px,calc(100vh - 28px))}.picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;position:sticky;top:-23px;background:var(--paper);z-index:2;padding:4px 0 15px}.picker-head h2{font-size:35px;margin:0}.close-button{border:1px solid var(--line);background:#fff;width:42px;height:42px;border-radius:50%;font-size:22px}.search-box{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em;margin-bottom:12px}.search-box input{display:block;width:100%;margin-top:6px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 13px;font-size:16px;color:var(--espresso);outline:none}.search-box input:focus{border-color:var(--blue)}.picker-tip,.dialog-note{color:var(--muted);font-size:10px;margin:0 0 16px}.font-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.font-option{border:1px solid var(--line);background:#FFF9F3;border-radius:17px;min-height:145px;padding:14px;text-align:left;color:var(--espresso);display:flex;flex-direction:column;justify-content:space-between;min-width:0}.font-option.selected{border:2px solid var(--blue);background:#f8fbfc}.font-option-sample{display:block;font-size:39px;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;padding:16px 2px}.font-option-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:9px}.font-option-meta strong{font-size:11px}.font-option-meta span{font-size:8px;font-weight:800;color:var(--blue)}.color-options{display:grid;gap:20px}.color-group-title{font-size:10px;font-family:Arial,sans-serif;font-weight:800;letter-spacing:.13em;color:var(--muted);margin:0 0 10px}.color-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}.color-option{border:1px solid var(--line);background:#fff;border-radius:15px;padding:10px 6px;min-height:85px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--espresso)}.color-option.selected{border:2px solid var(--blue);background:#f8fbfc}.swatch{width:42px;height:42px;border-radius:50%;border:1px solid rgba(49,44,41,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}.color-option strong{font-size:9px;text-align:center;line-height:1.15}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--espresso);color:#fff;border-radius:var(--button-radius);padding:11px 16px;font-size:11px;font-weight:800;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}
.choice-button:focus-visible,.soft-button:focus-visible,.text-button:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.bg-btn:focus-visible,.font-option:focus-visible,.color-option:focus-visible,.close-button:focus-visible,.name-input:focus-visible,.search-box input:focus-visible{outline:3px solid rgba(116,138,156,.35);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.choice-button:hover,.font-option:hover,.color-option:hover{border-color:var(--blue)}.choice-button:hover{transform:translateY(-1px)}}
@media (max-width:920px){.site-header{position:static}.builder{grid-template-columns:1fr}.preview-card{order:-1;position:static}.how-it-works{grid-template-columns:1fr}.how-it-works>div+div{border-left:0;border-top:1px solid var(--line)}.footer-inner{flex-direction:column;align-items:flex-start}.footer-inner p:last-child{text-align:left}.color-grid{grid-template-columns:repeat(5,1fr)}.font-options{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.wrap{width:min(calc(100% - var(--mobile-side-pad)),var(--content-width))}.utility-inner{font-size:8px;gap:8px;letter-spacing:.09em}.header-inner{min-height:76px;display:flex;justify-content:space-between}.header-side-left{display:none}.header-side-right{font-size:8px}.brand{min-width:auto;text-align:left}.brand-main{font-size:19px}.brand-small{font-size:6px;letter-spacing:.2em}.hero{padding:44px 0 21px}.hero h1{font-size:var(--hero-mobile-size)}.hero-copy{font-size:14px}.preview-card{padding:12px}.preview-toolbar{align-items:flex-start;flex-direction:column}.preview-stage{min-height:330px;padding:38px 18px}.preview-first{font-size:76px}.preview-middle{font-size:62px}.placement-grid{grid-template-columns:1fr}.sizing-grid{grid-template-columns:1fr}.placement-head{flex-direction:column}.placement-reset{align-self:flex-start}.selection-summary{grid-template-columns:1fr}.selection-summary>div+div{border-left:0;border-top:1px solid var(--line)}.main-actions{display:grid;grid-template-columns:1fr}.controls-card{padding:18px}.choice-grid{grid-template-columns:1fr}.choice-button{min-height:91px}.font-options{grid-template-columns:1fr}.font-option{min-height:112px}.color-grid{grid-template-columns:repeat(4,1fr)}.picker-shell{padding:18px}.picker-head h2{font-size:30px}.background-toggle{width:100%}.bg-btn{flex:1}.how-it-works{padding-bottom:40px}.notice{padding-bottom:48px}}
@media print{.utility-strip,.site-header,.hero,.controls-card,.how-it-works,.notice,.footer,.preview-toolbar,.main-actions{display:none!important}.builder{display:block}.preview-card{border:0;box-shadow:none}.preview-stage{min-height:500px}.selection-summary{break-inside:avoid}}

.brand-logo{display:block;width:min(var(--logo-width),100%);max-height:var(--logo-max-height);object-fit:contain;margin:auto;transform:translateY(var(--logo-y))}.brand.has-logo .brand-small,.brand.has-logo .brand-main{display:none}.ll-hide-side-labels .header-side{visibility:hidden}.ll-hide-decorations .stage-decoration{display:none}.ll-hide-guides .stage-guides{display:none}.section-kicker b{font:inherit;font-weight:400}html[data-logo-position="left"] .header-inner{grid-template-columns:auto 1fr auto}html[data-logo-position="left"] .brand{grid-column:1;text-align:left}html[data-logo-position="left"] .header-side-left{display:none}html[data-logo-position="right"] .header-inner{grid-template-columns:auto 1fr auto}html[data-logo-position="right"] .brand{grid-column:3;text-align:right}html[data-logo-position="right"] .header-side-right{display:none}


/* ==========================================================
   LITTLE LUMBER v4.8 — MOBILE UX PASS
   Compact controls + contained logo + floating live preview
   ========================================================== */
.mobile-sticky-preview{
  display:none;
}

@media (max-width:620px){
  /* Header: keep the uploaded logo inside the header instead of spilling out. */
  .utility-inner{
    min-height:28px;
    padding:4px 2px;
    line-height:1.25;
  }
  .header-inner{
    min-height:82px;
    padding-block:7px;
    overflow:hidden;
  }
  .brand{
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:stretch;
    max-height:68px;
    overflow:hidden;
  }
  .brand-logo{
    width:auto !important;
    height:auto !important;
    max-width:min(210px,58vw) !important;
    max-height:64px !important;
    margin:auto !important;
    transform:none !important;
    object-fit:contain !important;
  }
  .header-side-right{
    max-width:116px;
    line-height:1.25;
  }

  /* Tighten the intro substantially on phones. */
  .wrap{
    width:min(calc(100% - 20px),var(--content-width));
  }
  .hero{
    padding:26px 0 14px;
  }
  .hero .eyebrow{
    margin-bottom:8px;
    font-size:8px;
  }
  .hero h1{
    font-size:min(var(--hero-mobile-size),36px);
    line-height:1;
  }
  .hero-copy{
    margin-top:13px;
    font-size:13px;
    line-height:1.48;
  }

  .builder{
    gap:12px;
    padding-top:8px;
    padding-bottom:26px;
  }
  .card{
    border-radius:19px;
  }

  /* Full preview is still available, just much less vertically expensive. */
  .preview-card{
    padding:10px;
  }
  .preview-toolbar{
    flex-direction:row;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
  }
  .preview-help,
  .background-note{
    display:none;
  }
  .preview-label{
    font-size:8px;
    white-space:nowrap;
  }
  .background-toggle{
    width:auto;
    min-width:196px;
    margin-left:auto;
  }
  .bg-btn{
    min-height:36px;
    padding:5px 8px;
  }
  .preview-stage{
    min-height:250px;
    padding:24px 12px;
    border-radius:16px;
  }
  .stage-guides{
    inset:9%;
  }

  /* Font sizing: two compact columns rather than two full-width blocks. */
  .sizing-panel,
  .placement-panel{
    margin-top:9px;
    padding:10px;
    border-radius:14px;
  }
  .placement-head{
    flex-direction:row;
    align-items:center;
    gap:8px;
  }
  .placement-label{
    font-size:8px;
  }
  .placement-help{
    margin-top:2px;
    font-size:9px;
  }
  .placement-reset{
    min-height:36px;
    padding:0 10px;
    font-size:8px;
  }
  .sizing-grid{
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:8px;
  }
  .sizing-group{
    padding:8px;
    border-radius:11px;
  }
  .sizing-group>strong{
    margin-bottom:6px;
    font-size:9px;
  }
  .size-stepper{
    grid-template-columns:38px 1fr 38px;
    gap:4px;
  }
  .size-button{
    height:40px;
    border-radius:10px;
  }
  .size-value{
    min-height:40px;
    border-radius:10px;
    font-size:10px;
  }
  .placement-disclaimer,
  .placement-note{
    margin-top:7px;
    font-size:8px;
    line-height:1.35;
  }

  /* Placement: first and middle controls sit beside one another. */
  .placement-grid{
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:8px;
  }
  .placement-group{
    padding:8px;
    border-radius:11px;
  }
  .placement-group strong{
    margin-bottom:6px;
    font-size:9px;
  }
  .placement-arrows{
    display:grid;
    grid-template-columns:repeat(2,40px);
    gap:5px;
  }
  .placement-arrow{
    width:40px;
    height:40px;
    font-size:15px;
  }

  /* Main editing card: reduce empty space; font + color stay side by side. */
  .controls-card{
    padding:12px;
  }
  .control-section+.control-section{
    margin-top:17px;
    padding-top:17px;
  }
  .section-kicker{
    gap:8px;
    margin-bottom:12px;
    font-size:21px;
  }
  .section-kicker span{
    width:29px;
    height:29px;
    font-size:9px;
  }
  .field-label{
    font-size:8px;
  }
  .name-input{
    font-size:30px;
    padding-bottom:6px;
  }
  .field-help{
    margin-top:5px;
    font-size:9px;
  }
  .choice-grid{
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:12px;
  }
  .choice-button{
    min-height:78px;
    padding:9px 10px;
    border-radius:13px;
  }
  .choice-label{
    font-size:7px;
  }
  .choice-value{
    gap:6px;
  }
  .choice-value strong{
    font-size:11px;
  }
  .choice-action{
    font-size:8px;
  }
  .color-dot{
    width:23px;
    height:23px;
  }
  .small-actions{
    margin-top:15px;
  }
  .soft-button,
  .text-button{
    min-height:38px;
    padding:0 12px;
    font-size:9px;
  }

  /* Keep the summary and final actions compact too. */
  .selection-summary{
    grid-template-columns:1fr 1fr;
    margin-top:9px;
    border-radius:13px;
  }
  .selection-summary>div{
    padding:10px;
  }
  .selection-summary>div+div{
    border-left:1px solid var(--line);
    border-top:0;
  }
  .selection-summary strong{
    font-size:9px;
    line-height:1.35;
  }
  .main-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:9px;
  }
  .primary-button,
  .secondary-button{
    min-height:42px;
    padding:0 8px;
    font-size:9px;
  }
  .screen-note{
    margin-top:8px;
    font-size:8px;
    line-height:1.4;
  }

  /* Pickers: retain large touch targets, but show more choices per screen. */
  .picker-shell{
    padding:14px;
  }
  .picker-head{
    top:-14px;
    padding-bottom:10px;
  }
  .picker-head h2{
    font-size:26px;
  }
  .font-options{
    grid-template-columns:repeat(2,1fr);
    gap:7px;
  }
  .font-option{
    min-height:106px;
    padding:9px;
    border-radius:13px;
  }
  .font-option-sample{
    padding:10px 1px;
    font-size:29px;
  }
  .font-option-meta{
    padding-top:7px;
  }
  .color-grid{
    gap:6px;
  }
  .color-option{
    min-height:72px;
    padding:7px 4px;
    border-radius:12px;
  }
  .swatch{
    width:34px;
    height:34px;
  }
  .color-option strong{
    font-size:8px;
  }

  .how-it-works{
    padding-bottom:25px;
  }
  .how-it-works>div{
    padding:15px 8px 0;
  }
  .how-it-works strong{
    font-size:11px;
  }
  .how-it-works small{
    font-size:9px;
  }
  .notice{
    padding-bottom:30px;
  }
  .notice p{
    padding:12px;
    font-size:9px;
  }
  .footer{
    padding:24px 0;
  }

  /* Floating miniature preview while the actual editing controls are onscreen. */
  .mobile-sticky-preview{
    position:fixed;
    top:8px;
    left:10px;
    right:10px;
    z-index:70;
    display:block;
    padding:6px;
    border:1px solid rgba(49,44,41,.16);
    border-radius:16px;
    background:rgba(255,253,249,.96);
    box-shadow:0 10px 30px rgba(49,44,41,.18);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    transform:translateY(-14px);
    pointer-events:none;
    transition:opacity .16s ease,transform .16s ease;
  }
  .mobile-sticky-preview.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  .mobile-sticky-preview__label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 4px 5px;
    color:var(--muted);
    font-size:7px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .mobile-sticky-preview__label strong{
    color:var(--blue);
    font-size:8px;
  }
  .mobile-sticky-preview__stage{
    position:relative;
    height:105px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    isolation:isolate;
  }
  .mobile-sticky-preview__first,
  .mobile-sticky-preview__middle{
    max-width:95%;
    line-height:1.02;
    white-space:nowrap;
    text-align:center;
    position:relative;
  }
}

@media (max-width:380px){
  .header-side-right{
    display:none;
  }
  .brand-logo{
    max-width:200px !important;
  }
  .background-toggle{
    min-width:174px;
  }
  .placement-arrows{
    grid-template-columns:repeat(2,36px);
  }
  .placement-arrow{
    width:36px;
    height:36px;
  }
  .size-stepper{
    grid-template-columns:34px 1fr 34px;
  }
}


/* ==========================================================
   LITTLE LUMBER v4.9 — INTERACTIVE MOBILE FLOATING PREVIEW
   ========================================================== */
@media (max-width:620px){
  .mobile-sticky-preview.is-visible{
    pointer-events:auto;
  }
  .mobile-sticky-preview__label{
    pointer-events:none;
  }
  .mobile-sticky-preview__stage{
    touch-action:pan-y;
  }
  .mobile-sticky-preview__first,
  .mobile-sticky-preview__middle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:4px 10px;
    border-radius:9px;
    touch-action:none;
    cursor:grab;
    -webkit-tap-highlight-color:transparent;
    transition:outline-color .12s ease,background-color .12s ease;
  }
  .mobile-sticky-preview__first:active,
  .mobile-sticky-preview__middle:active,
  .mobile-sticky-preview__first.is-gesturing,
  .mobile-sticky-preview__middle.is-gesturing{
    cursor:grabbing;
    outline:1px dashed rgba(255,255,255,.72);
    outline-offset:2px;
    background:rgba(255,255,255,.08);
  }
}


/* ==========================================================
   LITTLE LUMBER v4.10 — MOBILE GESTURE INSTRUCTIONS
   ========================================================== */
.mobile-gesture-tip{
  display:none;
}

@media (max-width:620px){
  .mobile-gesture-tip{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:9px;
    align-items:center;
    margin:8px 0 10px;
    padding:9px 10px;
    border:1px solid color-mix(in srgb,var(--blue) 24%,var(--line));
    border-radius:13px;
    background:color-mix(in srgb,var(--blue-soft) 55%,#fff);
    color:var(--ink);
  }
  .mobile-gesture-tip__icon{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--line);
    color:var(--blue);
    font-size:16px;
    font-weight:800;
  }
  .mobile-gesture-tip strong{
    display:block;
    margin-bottom:2px;
    font-size:9px;
    line-height:1.25;
    letter-spacing:.055em;
    text-transform:uppercase;
  }
  .mobile-gesture-tip span:not(.mobile-gesture-tip__icon){
    display:block;
    color:var(--muted);
    font-size:9px;
    line-height:1.38;
  }

  .mobile-sticky-preview__label{
    gap:5px 8px;
    flex-wrap:wrap;
  }
  .mobile-sticky-preview__label span{
    font-size:7px;
    line-height:1.2;
  }
}


/* ==========================================================
   LITTLE LUMBER v4.11 — INTERACTIVE PREVIEW EVERYWHERE
   ========================================================== */

/* The gesture instructions now apply to desktop and mobile. */
.mobile-gesture-tip{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  align-items:center;
  margin:10px 0 12px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--blue) 24%,var(--line));
  border-radius:14px;
  background:color-mix(in srgb,var(--blue-soft) 48%,#fff);
  color:var(--ink);
}
.mobile-gesture-tip__icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--line);
  color:var(--blue);
  font-size:17px;
  font-weight:800;
}
.mobile-gesture-tip strong{
  display:block;
  margin-bottom:2px;
  font-size:9px;
  line-height:1.25;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.mobile-gesture-tip span:not(.mobile-gesture-tip__icon){
  display:block;
  color:var(--muted);
  font-size:10px;
  line-height:1.42;
}

/* Interactive names give visual feedback on mouse/pen devices. */
.preview-first[data-canvas-name],
.preview-middle[data-canvas-name]{
  cursor:grab;
  touch-action:none;
}
.preview-first[data-canvas-name]:active,
.preview-middle[data-canvas-name]:active,
.preview-first.is-canvas-gesturing,
.preview-middle.is-canvas-gesturing{
  cursor:grabbing;
}
.preview-stage.is-canvas-gesturing{
  outline:2px solid color-mix(in srgb,var(--blue) 45%,transparent);
  outline-offset:-2px;
}

@media (hover:hover) and (pointer:fine){
  .preview-first[data-canvas-name]:hover,
  .preview-middle[data-canvas-name]:hover{
    filter:drop-shadow(0 2px 8px rgba(49,44,41,.16));
  }
}

@media (min-width:621px){
  .mobile-gesture-tip{
    max-width:680px;
  }
}

@media (max-width:620px){
  .mobile-gesture-tip{
    grid-template-columns:34px minmax(0,1fr);
    gap:9px;
    padding:9px 10px;
  }
  .mobile-gesture-tip__icon{
    width:34px;
    height:34px;
    font-size:16px;
  }
  .mobile-gesture-tip strong{
    font-size:9px;
  }
  .mobile-gesture-tip span:not(.mobile-gesture-tip__icon){
    font-size:9px;
    line-height:1.38;
  }
}


/* ==========================================================
   LITTLE LUMBER v4.12 — RESIZE DOTS + LARGER MOBILE PREVIEW
   ========================================================== */

/* Clearer instruction wording: the round icon visually matches the resize dots. */
.mobile-gesture-tip__icon{
  font-size:13px;
}

/* Canva-style resize handle. It sits beside each name, not inside the text,
   so it stays the same easy-to-grab size even when the name is tiny. */
.ll-resize-dot{
  position:absolute;
  z-index:15;
  width:30px;
  height:30px;
  transform:translate(-50%,-50%);
  padding:0;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 1px 7px rgba(49,44,41,.34);
  cursor:nwse-resize;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.ll-resize-dot::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:#fff;
  opacity:.9;
}
.ll-resize-dot:hover,
.ll-resize-dot:focus-visible,
.ll-resize-dot.is-resizing{
  outline:3px solid color-mix(in srgb,var(--blue) 28%,transparent);
  outline-offset:2px;
}
.preview-first.is-resize-target,
.preview-middle.is-resize-target,
.mobile-sticky-preview__first.is-resize-target,
.mobile-sticky-preview__middle.is-resize-target{
  outline:1px dashed rgba(255,255,255,.78);
  outline-offset:4px;
}

/* Floating preview: deliberately larger because customers are now expected
   to actually manipulate names inside it, not merely glance at it. */
@media (max-width:620px){
  .mobile-sticky-preview{
    top:6px;
    left:6px;
    right:6px;
    padding:8px;
    border-radius:18px;
  }
  .mobile-sticky-preview__label{
    min-height:30px;
    padding:1px 5px 7px;
  }
  .mobile-sticky-preview__label strong{
    font-size:9px;
  }
  .mobile-sticky-preview__label span{
    font-size:8px;
  }
  .mobile-sticky-preview__stage{
    height:150px;
    border-radius:14px;
  }
  .mobile-sticky-preview__first,
  .mobile-sticky-preview__middle{
    min-height:46px;
    padding:7px 14px;
    border-radius:11px;
  }
  .ll-resize-dot--main{
    width:34px;
    height:34px;
  }
  .ll-resize-dot--mini{
    width:38px;
    height:38px;
    border-width:3px;
  }
  .ll-resize-dot--mini::after{
    inset:9px;
  }
}

/* Tiny phones still get a comfortably touchable mini canvas. */
@media (max-width:380px){
  .mobile-sticky-preview{
    left:4px;
    right:4px;
  }
  .mobile-sticky-preview__stage{
    height:138px;
  }
  .ll-resize-dot--mini{
    width:36px;
    height:36px;
  }
}


/* ==========================================================
   LITTLE LUMBER v4.13 — SUBTLE RESIZE HANDLES
   Keep a large invisible touch target, but only show a tiny dot.
   ========================================================== */

/* Reset the bulky v4.12 visual while preserving the generous hit area. */
.ll-resize-dot{
  width:34px !important;
  height:34px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none;
  opacity:.68;
  cursor:nwse-resize;
  touch-action:none;
}

.ll-resize-dot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  inset:auto !important;
  transform:translate(-50%,-50%);
  border:1.5px solid rgba(255,255,255,.96);
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 1px 3px rgba(49,44,41,.28);
  opacity:1;
}

.ll-resize-dot:hover,
.ll-resize-dot:focus-visible,
.ll-resize-dot.is-resizing{
  opacity:1;
  outline:none !important;
}

.ll-resize-dot:hover::after,
.ll-resize-dot:focus-visible::after,
.ll-resize-dot.is-resizing::after{
  width:11px;
  height:11px;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.72),
    0 1px 4px rgba(49,44,41,.34);
}

/* Remove the dashed selection box from v4.12; it added visual clutter. */
.preview-first.is-resize-target,
.preview-middle.is-resize-target,
.mobile-sticky-preview__first.is-resize-target,
.mobile-sticky-preview__middle.is-resize-target{
  outline:none !important;
}

/* The floating preview gets a slightly larger visible dot than desktop,
   but the visual remains small while the invisible touch target stays easy. */
@media (max-width:620px){
  .ll-resize-dot--main{
    width:36px !important;
    height:36px !important;
  }
  .ll-resize-dot--mini{
    width:40px !important;
    height:40px !important;
  }
  .ll-resize-dot--main::after{
    width:9px;
    height:9px;
  }
  .ll-resize-dot--mini::after{
    width:10px;
    height:10px;
  }
  .ll-resize-dot--mini:hover::after,
  .ll-resize-dot--mini:focus-visible::after,
  .ll-resize-dot--mini.is-resizing::after{
    width:12px;
    height:12px;
  }
}


/* ==========================================================
   LITTLE LUMBER v4.14 — HEADER + STEPS CLEANUP
   ========================================================== */

/* Desktop: give the logo clear breathing room above the bottom border. */
@media (min-width: 621px) {
  .header-inner {
    min-height: 150px;
    padding-top: 12px;
    padding-bottom: 18px;
  }

  .brand {
    max-height: 112px;
    overflow: hidden;
  }

  .brand-logo {
    width: auto !important;
    height: auto !important;
    max-width: 205px !important;
    max-height: 112px !important;
    margin: auto !important;
    transform: none !important;
    object-fit: contain !important;
  }
}

/* The 1-2-3 instructions now live at the top, so style them like a compact
   orientation strip instead of a bottom-of-page section. */
.how-it-works {
  padding: 18px 0 19px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.how-it-works > div {
  padding: 0 28px;
}

/* Desktop/tablet: keep the top steps crisp and compact. */
@media (min-width: 621px) {
  .hero {
    padding-top: 38px;
  }
}

/* Mobile: keep the top instructions from becoming three huge stacked cards.
   They remain readable, but much tighter than the old bottom layout. */
@media (max-width: 620px) {
  .how-it-works {
    padding: 8px 0 10px;
    gap: 0;
  }

  .how-it-works > div {
    padding: 9px 4px;
    grid-template-columns: 28px minmax(0,1fr);
    column-gap: 8px;
  }

  .how-it-works > div + div {
    border-top: 1px solid var(--line);
  }

  .how-it-works span {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }

  .how-it-works strong {
    font-size: 10px;
  }

  .how-it-works small {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.35;
  }

  .hero {
    padding-top: 22px;
  }
}


/* ==========================================================
   LITTLE LUMBER v4.15 — MOBILE EDITING FLOW
   Preview -> names/fonts/colors -> size -> placement
   Desktop remains unchanged.
   ========================================================== */
@media (max-width:620px){
  /* Once moved beneath the preview, make the selector card feel like part of
     one continuous mobile workflow instead of a second giant outer card. */
  .preview-card > .controls-card--mobile-in-preview{
    margin:10px 0 0;
    padding:12px;
    border-radius:14px;
    box-shadow:none;
    background:var(--paper);
  }

  .preview-card > .controls-card--mobile-in-preview .control-section + .control-section{
    margin-top:15px;
    padding-top:15px;
  }

  .preview-card > .controls-card--mobile-in-preview .section-kicker{
    margin-bottom:10px;
  }

  .preview-card > .controls-card--mobile-in-preview .choice-grid{
    margin-top:9px;
  }

  .preview-card > .controls-card--mobile-in-preview .small-actions{
    margin-top:11px;
  }

  /* The gesture instruction now follows the name/font/color choices. */
  .preview-card > .controls-card--mobile-in-preview + .mobile-gesture-tip{
    margin-top:10px;
  }

  /* Remove the now-unneeded builder gap because mobile has one unified card. */
  .builder{
    gap:0;
  }
}