.shell{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}
/* ── Left: the cutting table ───────────────────────────── */
  .panel{
    position:relative;overflow:hidden;
    background:
      repeating-linear-gradient(68deg, rgba(255,255,255,.028) 0 2px, transparent 2px 7px),
      repeating-linear-gradient(-22deg, rgba(0,0,0,.16) 0 1px, transparent 1px 9px),
      linear-gradient(158deg,#2B3433 0%,var(--ink-deep) 55%,#1D2423 100%);
    color:var(--cream);
    padding:clamp(2.4rem,4vw,4rem);
    display:flex;flex-direction:column;justify-content:space-between;
    clip-path:polygon(0 0, 100% 0, calc(100% - 58px) 100%, 0 100%);
  }
.panel__mark{
    position:absolute;left:-92px;bottom:-104px;width:340px;
    opacity:.085;pointer-events:none;filter:brightness(2.4);
  }
.panel__body{position:relative;z-index:1;max-width:29ch;}
.eyebrow{
    font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--taupe);margin:0 0 1.5rem;
  }
.panel h1{
    font-family:var(--serif);font-weight:500;
    font-size:clamp(2.1rem,3.6vw,3.05rem);line-height:1.06;
    margin:0;letter-spacing:-.015em;
  }
.panel h1 em{font-style:normal;color:var(--gold);}
.seam{
    height:1px;width:74px;margin:1.5rem 0;
    background:repeating-linear-gradient(90deg,var(--gold) 0 7px,transparent 7px 13px);
  }
.panel p{
    font-size:.94rem;line-height:1.72;color:rgba(245,241,232,.66);
    font-weight:300;margin:0;
  }
.status{
    position:relative;z-index:1;display:flex;align-items:center;gap:.55rem;
    font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
    text-transform:uppercase;color:rgba(245,241,232,.42);
  }
.dot{
    width:6px;height:6px;border-radius:50%;background:var(--sage);
    box-shadow:0 0 0 3px rgba(124,144,112,.2);
  }
/* ── Right: the form ───────────────────────────────────── */
  .stage{
    display:flex;align-items:center;justify-content:center;
    padding:clamp(1.75rem,4vw,3rem);
  }
.card{width:100%;max-width:352px;}
.logo{height:42px;width:auto;display:block;margin-bottom:2.4rem;}
.card h2{
    font-family:var(--serif);font-weight:500;font-size:1.72rem;
    margin:0 0 .35rem;letter-spacing:-.01em;
  }
.lede{font-size:.85rem;color:var(--taupe);margin:0 0 1.9rem;}
.alert{
    display:none;gap:.6rem;align-items:flex-start;
    border-left:2px solid var(--clay);
    background:rgba(166,90,75,.07);
    padding:.72rem .85rem;margin-bottom:1.4rem;
    font-size:.79rem;line-height:1.55;color:#7E4437;
  }
.alert.is-on{display:flex;}
.alert svg{flex:none;margin-top:1px;}
.field{position:relative;margin-bottom:1.5rem;}
.field label{
    display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--taupe);font-weight:500;margin-bottom:.5rem;
  }
.field input{
    width:100%;border:0;background:transparent;
    font-family:var(--sans);font-size:1rem;font-weight:400;color:var(--ink);
    padding:.35rem 2.2rem .62rem 0;outline:none;
  }
.field input::placeholder{color:#BDB8AC;font-weight:300;}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 40px var(--cream) inset;}
/* signature: the stitch line */
  .stitch{position:absolute;left:0;right:0;bottom:0;height:2px;}
.stitch::before{
    content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(90deg,rgba(136,131,121,.5) 0 5px,transparent 5px 10px);
  }
.stitch::after{
    content:'';position:absolute;inset:0;background:var(--gold);
    transform:scaleX(0);transform-origin:left;
    transition:transform .34s cubic-bezier(.4,0,.2,1);
  }
.field input:focus ~ .stitch::after{transform:scaleX(1);}
.field.is-bad .stitch::after{background:var(--clay);transform:scaleX(1);}
.hint{
    display:none;font-size:.73rem;color:var(--clay);margin-top:.5rem;
  }
.field.is-bad .hint{display:block;}
.peek{
    position:absolute;right:0;bottom:.3rem;
    width:38px;height:38px;display:grid;place-items:center;
    background:none;border:0;cursor:pointer;color:var(--taupe);
  }
.peek:hover{color:var(--ink);}
.peek:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px;}
.row{
    display:flex;align-items:center;justify-content:space-between;
    gap:1rem;margin:-.35rem 0 1.9rem;
  }
.check{display:flex;align-items:center;gap:.55rem;cursor:pointer;font-size:.8rem;color:var(--ink);}
.check input{
    appearance:none;width:15px;height:15px;border:1.5px solid var(--taupe);
    background:transparent;cursor:pointer;flex:none;position:relative;border-radius:2px;
  }
.check input:checked{background:var(--ink);border-color:var(--ink);}
.check input:checked::after{
    content:'';position:absolute;left:4px;top:.5px;width:4px;height:8px;
    border:solid var(--gold);border-width:0 1.6px 1.6px 0;transform:rotate(42deg);
  }
.check input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.link{font-size:.78rem;color:var(--taupe);text-decoration:none;border-bottom:1px solid transparent;}
.link:hover{color:var(--ink);border-bottom-color:var(--gold);}
.link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.submit{
    width:100%;min-height:50px;border:0;cursor:pointer;
    background:var(--ink);color:var(--cream);
    font-family:var(--sans);font-size:.87rem;font-weight:500;letter-spacing:.06em;
    display:flex;align-items:center;justify-content:center;gap:.6rem;
    transition:background .2s ease,transform .12s ease;
  }
.submit:hover{background:var(--ink-deep);}
.submit:active{transform:translateY(1px);}
.submit:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.submit .arrow{transition:transform .22s ease;}
.submit:hover .arrow{transform:translateX(3px);}
.submit[disabled]{cursor:wait;background:var(--taupe);}
.submit[disabled] .arrow{display:none;}
.spinner{
    display:none;width:15px;height:15px;border-radius:50%;
    border:1.6px solid rgba(245,241,232,.3);border-top-color:var(--cream);
    animation:spin .7s linear infinite;
  }
.submit[disabled] .spinner{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}
.foot{
    margin-top:2.2rem;font-family:var(--mono);font-size:.63rem;
    letter-spacing:.1em;text-transform:uppercase;color:#B4AEA1;
  }
/* ── Mobile ────────────────────────────────────────────── */
  @media (max-width:820px){
    .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
    .panel{
      clip-path:polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
      padding:2.1rem 1.6rem 3.4rem;min-height:auto;
    }
    .panel__mark{left:auto;right:-72px;bottom:-86px;width:230px;}
    .panel h1{font-size:2rem;}
    .panel p{display:none;}
    .seam{margin:1.1rem 0 0;}
    .status{display:none;}
    .stage{padding:2.4rem 1.6rem 3rem;align-items:flex-start;}
    .logo{height:36px;margin-bottom:1.9rem;}
  }